Как минимизировать CSS, HTML и JavaScript вашего сайта WordPress

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

Так что дает?

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

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

Что такое минификация?

Веб-сайты состоят из множества разных файлов. Если вы проверите скорость своего сайта с помощью Google PageSpeed ​​Insights, вы можете получить рекомендацию минимизировать файлы HTML, CSS и JavaScript.

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

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

Например, вот некоторые CSS-коды, которые вы можете найти в таблице стилей:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

А вот уменьшенная версия приведенного выше примера CSS:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Видите, насколько сжат код?

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

Как объясняет эксперт по SEO Йоаст, минимизация файлов может сэкономить до 30-40%, а в некоторых случаях даже 50% размера файла.

Почему вам следует минимизировать файлы HTML, CSS и JavaScript

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

Минификация имеет много преимуществ:

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

Как минимизировать файлы HTML, CSS и JavaScript

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

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

Мой любимый сайт для тестирования скорости — GTmetrix. Он анализирует производительность вашей страницы, используя Google PageSpeed ​​Insights и YSlow, инструмент тестирования производительности с открытым исходным кодом. Затем он генерирует оценки и предоставляет рекомендации по улучшению оптимизации сайта.

Другие отличные инструменты для проверки скорости, которые я могу порекомендовать, включают Pingdom Website Speed ​​Test и WebPageTest, а также проверку скорости вашего мобильного устройства.

Минимизация файлов вручную

Минимизация файлов вручную занимает значительное количество времени и усилий. Я имею в виду, у кого есть время удалять из файлов отдельные пробелы, строки и ненужный код? Скучный! Кроме того, это дает больше возможностей для человеческой ошибки. Поэтому я бы не рекомендовал этот метод для минимизации файлов.

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

1. HTML Minifier Уилла Пиви

HTML Minifier — это бесплатный онлайн-инструмент для минимизации HTML, созданный с помощью PHP. Чтобы использовать этот инструмент, просто вставьте свой HTML-код в текстовую область, включая любой CSS-код JavaScript в разметке, и нажмите кнопку «Свернуть». Чтобы ваши сценарии работали после минимизации, рекомендуется завершать операторы JavaScript точкой с запятой и использовать синтаксис* *для комментариев.

2. Минификатор CSS

Еще один бесплатный инструмент, CSS Minifier, минимизирует CSS, который вы копируете и вставляете в текстовую область «Ввод CSS». Существуют варианты загрузки минимизированного вывода в виде файла. Для разработчиков этот инструмент также предоставляет API.

3. АОкомпресс

JCompress — это онлайн-компрессор JavaScript, который позволяет сжимать и минимизировать файлы JS до 80 % от их исходного размера. Чтобы использовать его, скопируйте и вставьте свой код или загрузите и объедините несколько файлов, а затем нажмите «Сжать JavaScript». Этот инструмент основан на UglifyJS 3 и является автономным.

Ручные инструменты минификации для разработчиков

Разработчикам, которым нужны более продвинутые возможности, Google рекомендует следующие ресурсы по минификации HTML, CSS и JavaScript:

• HTMLMinifier — компрессор/минификатор HTML на основе Javascript (с поддержкой Node.js).
• CSSNano — модульный минификатор, построенный на основе экосистемы PostCSS.
• csso — минификатор CSS со структурной оптимизацией.
• UglifyJS — набор инструментов для парсера, преобразования, сжатия и «украшения» JavaScript.

Google Closure Compiler — это инструмент оптимизации JavaScript. Вместо компиляции исходного языка в машинный код он компилируется из JavaScript, чтобы улучшить JavaScript. Он анализирует ваш код, анализирует его, удаляет мертвый код, перезаписывает и минимизирует то, что осталось. Этот инструмент также проверяет синтаксис, ссылки на переменные и типы, а также предупреждает о распространенных ошибках JavaScript.

Минификация файлов с помощью плагинов

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

Примечание. В этот список я включил только бесплатные плагины, доступные в репозитории плагинов WordPress, которые являются актуальными и протестированы насовместимость с последними версиями WordPress. Чтобы просмотреть премиум-опции, прокрутите вниз./

1. HTML минимизировать

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

2. Минимизируйте HTML

Мне нравится описание этого плагина на WordPress.org: «Вы когда-нибудь смотрели на HTML-разметку вашего сайта и замечали, насколько неряшливо и дилетантски она выглядит?» Этот плагин очищает и минимизирует неаккуратную разметку.

В отличие от плагина HTML Minify, этот инструмент предоставляет больше возможностей. Он включает в себя дополнительную минификацию для JavaScript и CSS, но не мешает текстовым областям или предварительно отформатированному тексту. Существуют также варианты удаления комментариев HTML, CSS и JavaScript (оставление условных комментариев MSIE), удаления ненужных закрывающих тегов XHTML из пустых элементов HTML5 и удаления ненужных относительных схем и доменов из ссылок.

3. Слияние + Минификация + Обновление — Плагины WordPress

Этот плагин делает больше, чем просто минимизирует ваш код. Он объединяет ваши файлы CSS и JavaScript, азатемминимизирует сгенерированные файлы с помощью Minify (для CSS) и Google Closure (для JavaScript). Минификация выполняется через WP-Cron, поэтому она не влияет на скорость вашего сайта.

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

4. Оптимизация JCH

У JCH Optimize есть множество приятных функций для бесплатного плагина: он объединяет и минимизирует CSS и JavaScript, минимизирует HTML, есть сжатие GZip для объединения файлов, генерация спрайтов для фоновых изображений, и вы можете исключить определенные файлы из объединения для разрешения конфликтов.

Доступна профессиональная версия с большим количеством функций оптимизации, включая асинхронную загрузку JavaScript, оптимизацию доставки CSS для устранения блокировки рендеринга, поддержку доменов CDN/без файлов cookie, а также отложенную загрузку и оптимизацию изображений.

5. Минимизация CSS

Минимизация CSS с помощью этого плагина не может быть проще — просто установите, активируйте, перейдите в«Настройки» > «Минификация CSS», чтобы включить только одну опцию: «Оптимизировать и минимизировать код CSS».

Код в этом плагине был создан из популярного плагина Autoptimize (подробнее об этом плагине ниже). У автора плагина Питера Пфайффера есть аналогичный плагин для JavaScript, Minify JavaScript.

6. Быстрая минимизация скорости

С более чем 20 000 активных установок и пятизвездочным рейтингом это один из самых популярных вариантов минимизации файлов. Чтобы использовать его, установите и активируйте плагин и перейдите в«Настройки» > «Fast Velocity Minify». Там вы найдете набор параметров для настройки плагина, включая расширенные параметры для разработчиков, исключения JavaScript и CSS, параметры CDN, а также информацию о сервере. Однако настройки по умолчанию прекрасно подходят для большинства сайтов.

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

7. Автооптимизация

С более чем 400 000 активных установок Autoptimize является самым популярным инструментом минимизации в репозитории плагинов WordPress.

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

8. Оптимизация скорости страницы Hummingbird

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

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

Минимизация как функция плагинов кэширования WordPress

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

• WP Ракета
• Общий кэш W3
• WP Супер Кэш

Заключение

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

Важно помнить, что минификация — это скорее этап тонкой настройки: вы можете увидеть небольшое улучшение скорости вашего сайта, но оно не будет значительным. Тем не менее, эту передовую практику стоит применять в дополнение к другим методам повышения производительности и оптимизации, таким как объединение файлов.

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

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

Вы пробовали минимизировать свой код? Какие еще методы ускорения вашего сайта вы использовали? Дайте нам знать в комментариях ниже!