Пропустить

Как сжать ваши CSS, HTML и Javascript файлы

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Сжимая CSS, HTML и Javascript файлы вашего сайта, вы можете сэкономить драгоценное время на скорости загрузки страниц вашего сайта. Сейчас мы не говорим о снижении скорости загрузки вашей страницы вдвое или о чем-то еще, но когда дело доходит до скорости вашего сайта, любые незначительные значения имеют значение.

Скорость загрузки вашего сайта важна не только для новых посетителей, но и для рейтинга в поисковых системах.

СрокпреуменьшатьВ языке программирования описывается процесс удаления ненужных символов из исходного кода. Эти символы включают пробелы, разрывы строк, Les Commentaires и блокировать разделители, которые полезны для нас, людей, но бесполезны для машин.

Мы минимизируем файлы на веб-сайте, которые содержат код CSS, HTML и Javascript, чтобы ваш веб-браузер мог читать их быстрее.

Читайте также нашу статью о 10 WordPress плагины для улучшения скорости вашего блога

Вот пример минимизации CSS.

CSS перед минификацией

/ * Пример CSS-файла ---------------------------------- * / .user-profile-card { маржа: 0px; background: #33E43} .user-profile-description {border: 0; положение: абсолютное; ширина: авто; margin-top: 20px; }

CSS после минификации

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Очевидно, что это лишь небольшой пример использования фрагмента CSS, но вы можете представить, сколько места он сэкономит при сокращении тысяч строк кода.

Как увеличить время, проведенное на вашем блоге WordPress? Узнайте, консультируясь с этой статьей.

Так что если вы хотите сделать это вручную, технически, вы можете. Но вы рискуете ошибиться и тратить драгоценное время без необходимости!

Следуйте этим советам и используйте инструменты в вашем распоряжении.

Некоторые инструменты для выполнения сжатия

К счастью, вам не обязательно быть разработчиком или знать один из языков программирования, чтобы уменьшить размер файла вашего сайта. Минификация стала обычной практикой в ​​мире веб-дизайна. Поэтому вы не должны удивляться, узнав, что есть много замечательных (и бесплатных) инструментов, которые сделают работу за вас.

Смотрите также наш Плагины 6 WordPress вдохнуть новую жизнь в ваши статьи

Вот список полезных инструментов, с которых можно начать. Поскольку многие из них могут свести к минимуму несколько типов кода, я включил параметры типа кода в скобки.

    • cssminifier.com et javascript-minifier.com (CSS и JS) - Эти два минифинера от Эндрю Чилтона просты в использовании. Просто вставьте свой код, затем нажмите кнопку Уменьшать для отображения сжатого кода. Вы даже можете скачать код выхода в виде файла для удобства.
    • htmlcompressor.com (HTML, CSS и JS) - этот онлайн-инструмент сжатия / минимизации поддерживает типы HTML, CSS и JS. Он даже поддерживает различные комбинации типов кода, таких как CSS + PHP и JavaScript + PHP. И вы даже можете проверить сжатый код на наличие ошибок.
    • csscompressor.net (Только CSS) - Этот онлайн-компрессор CSS быстрый, простой и бесплатный в использовании.
    • jscompress.com (Только JS) - этот инструмент сжатия JavaScript позволяет вам сжимать и вставлять код JavaScript, но вы также можете загружать несколько файлов JavaScript одновременно. Он отлично подходит для объединения файлов JavaScript в один файл для быстрой загрузки страницы.
    • Dan's Tools - Dan's Tools предложить ООН минимизировать CSS и минимизировать JavaScript , Оба инструмента имеют действительно чистый, простой в использовании пользовательский интерфейс. Они не предлагают никаких дополнительных возможностей, но они отлично подходят для общих целей минификации.
    • refresh-sf.com (HTML, CSS и JS) - Этот компрессор уменьшит типы кода JavaScript, CSS и HTML. Он также включает в себя все параметры сжатия для каждого типа кода, если вам это нужно.
    • Закрытие Компилятор (Только JS) - Компилятор Closure является частью Закрытие Инструменты набор инструментов от разработчиков Google. Это позволяет вам минимизировать ваш Javascript с помощью других полезных оптимизаций. Вы можете использовать свой код Javascript, введя URL-адрес в расположение файла js, а затем выбрать способ оптимизации и форматирования кода.

Например, вы решили оптимизировать свой код, чтобы удалить только пробелы, если хотите. Как только вы нажмете кнопку компиляции, она уменьшит код (или скомпилирует) для вас.

    • minifycode.com (HTML, CSS и JS) - этот сайт предлагает минифайеры для JavaScript , CSS et HTML с простым и понятным пользовательским интерфейсом, который сжимает ваш код одним щелчком мыши. Он также предлагает инструмент «beautifier» для распаковки минимизированного кода, чтобы сделать его более читабельным (противоположность минификации).

Если вы ищете автономные инструменты для локального минимизации CSS или JavaScript HTML, вот несколько вариантов:

Как уменьшить размер кода HTML, CSS и JavaScript с помощью онлайн-инструмента

Многие из этих онлайн-инструментов имеют похожий процесс, который включает в себя следующие шаги:

  • Вставьте свой исходный код или загрузите файл исходного кода.
  • Оптимизировать настройки для конкретного выхода (если доступны варианты)
  • Нажмите кнопку, чтобы сжать код.
  • Скопируйте результат минимизированного кода или загрузите файл минимизированного кода.

Для этого примера я собираюсь использовать инструменты минификации из minifycode.com.

Смотрите также: Как добавить код CSS безопасно на WordPress проконсультировавшись по этой ссылке.

Во-первых, найдите файл CSS (обычно называемый style.css) в файлах вашего сайта и откройте его с помощью редактора страниц. Затем скопируйте весь код CSS в буфер обмена.

CSS стиль divi.jpg

перейти к minifycode.com и нажмите на вкладку CSS Minifier. Затем вставьте код CSS в область ввода и нажмите на кнопку Минимизировать CSS.

минификация css.jpg

Как только новый минимизированный код будет создан, скопируйте его.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

скопируйте сжатый code.jpg

Затем вернитесь к файлу CSS вашего сайта и замените код новой упрощенной версией.

Вот так!

Повторите тот же процесс, чтобы уменьшить количество файлов JavaScript и HTML на вашем сайте.

Как минимизировать HTML, CSS и JavaScript на WordPress с помощью плагинов

Самый простой способ минимизировать код HTML, CSS и JavaScript в WordPress - использовать плагин. Это позволяет автоматически оптимизировать файлы веб-сайта WordPress для сокращения времени загрузки страницы с помощью всего нескольких нажатий кнопок.

Есть много плагинов, которые сделают эту работу, но я кратко упомяну несколько примеров.

Автооптимизация (БЕСПЛАТНО)

автооптимизация wp.png
Autoptimize, пожалуй, самый популярный плагин для минимизации WordPress. Он популярен, потому что он прост в использовании и обладает мощными функциями. Он может группировать (комбинировать скрипты), минимизировать и кэшировать ваш код. В качестве бонуса у вас есть дополнительные опции для оптимизации Google Fonts, изображений и т. Д.

Чтобы использовать Autoptimize, вы можете скачать, установить и активировать плагин с панели управления WordPress в разделе Плагин> Добавить новый.

Для получения дополнительной информации см. Наше руководство по: Как установить плагин в WordPress

autoptimize.jpg

Как только плагин активирован, перейдите на Настройки> Автоматическая оптимизация, Затем, на вкладке Основные параметры, проверьте код, который вы хотите оптимизировать (HTML, CSS и / или JavaScript) и нажмите Eсохранить изменения.

оптимизация css.jpg

Вы также можете нажать на кнопку Показать расширенные настройки вверху страницы для дальнейшей настройки оптимизации вашего кода.

css options advanced.jpg

Вот и все! Довольно просто и мощно.

W3 Total Cache (БЕСПЛАТНО)

v3 total cache.png
W3 Total Cache это отличный плагин для кэширования, который предлагает возможность минимизировать ваши файлы HTML, JS и CSS.

общие параметры w3 total cache.jpg

WP Fastest Cache (БЕСПЛАТНО)

wp fasttest cache.png
WP быстрый кэш - этот плагин WordPress Кеширование чрезвычайно популярно среди высоких отзывов. Он выполняет различные оптимизации производительности, в том числе комбинирует и уменьшает ваш HTML CSS и JavaScript для повышения производительности.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Читайте также нашу статью о 8 WordPress плагинов, чтобы добавить чат на свой блог

После того, как плагин установлен, просто нажмите на вкладку WP быстрый кэш в боковой панели WordPress панели инструментов. Под вкладкой НастройкиВы найдете варианты для объединения и сокращения файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.

wp fast cache settings.png

Подводя итог

Если вы хотите сделать свой блог быстрее и иметь лучшую производительность, вам нужно уменьшить размер файлов HTML, CSS и Javascript. Со всеми доступными онлайн-инструментами вы можете легко уменьшить код любого веб-сайта.

9 WordPress плагины, чтобы скрыть содержание вашего блога открыть абсолютно

Для тех, кто использует WordPress, в вашем распоряжении мощные плагины для автоматической минимизации этих файлов с помощью нескольких кликов.

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Страница ошибки 404, перенаправленная на домашнюю или пользовательскую страницу

Вот один из лучших способов легко добавить страницу с ошибкой 404, которая будет перенаправлять посетителя на домашнюю или персональную страницу после активации этого плагина. WordPress Premium.

Все страницы с ошибками 404 будут перенаправлены на домашнюю страницу или пользовательский URL, Используя этот плагин WordPress, вы позволите Google уменьшить количество страниц вашего сайта, если на нем много страниц с ошибками 404.

Откройте для себя тоже Как исправить ошибку 413 на WordPress

Этот плагин WordPress не только перенаправляет, но также может быть подходящим решением для повышения рейтинга вашего сайта в результатах поисковых систем.

скачать | Демонстрация | веб-хостинг

2. Borlabs Cache

WordPress - это платформа, основанная на базе данных, которая генерирует контент динамически. Чем больше контента и плагинов у вас есть, тем больше запросов к базе данных выполняется. Это может замедлить работу вашего сайта, особенно если ваша база данных расположена на другом сервере.

Плагин WordPress Borlabs Cache сохраняет динамически сгенерированный контент в виде статического файла в памяти вашего сервера. Когда страница запрашивается, этот статический файл загружается и отправляется посетителю, что значительно быстрее, чем обычные запросы к базе данных. Но это еще не все.

Смотрите также наш Плагины 5 WordPress для очистки базы данных вашего сайта

Ваши страницы содержат много ненужных пробелов или HTML-комментариев, что увеличивает общий размер страницы. Borlabs Cache удаляет их все и использует GZIP для сжатия ваших страниц.

Откройте для себя Как отобразить все ваши WordPress публикации на одной странице

Многие плагины имеют свои собственные файлы JavaScript и CSS, что приводит к увеличению количества запросов на вашем сервере. Borlabs Cache объединяет все эти файлы JavaScript и CSS, так что в лучшем случае вашему посетителю нужно загрузить только один файл JavaScript и один файл CSS.

скачать | Демонстрация | веб-хостинг

3. Многоязычный пресс

Многоязычная печать работает с многоузловой установкой WordPress и позволяет связывать переводы. Плагин поставляется с языками 174, встроенными в менеджер языков, и поддерживает неограниченное количество веб-сайтов, поэтому вы можете создавать и связывать столько переводов, сколько захотите.

Это хорошо для SEO, потому что это позволит вам сохранять свои языки на отдельных постах и ​​страницах, и если вы когда-нибудь решите использовать перевод, отличный от плагина, ваш контент останется нетронутым (даже после отключения или удаления плагина Multilingual Press). Кроме того, вы можете добавить перевод виджет для переключения между переводами легко.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Откройте для себя Как добавить фрагмент кода с помощью Gutenberg на WordPress

Многоязычная пресса - отличный бесплатный вариант для добавления переводов на ваш сайт WordPress через мультисайтовой, Кроме того, если вы когда-нибудь обнаружите, что вам нужно больше вариантов, вы можете выбрать профессиональную версию, которая стоит 75 долларов.

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.

Заключение

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация