Слишком много css или js файлов wordpress
Привет.
Думаю, среди читателей хабра найдется немало тех, кто имеет stand-alone blog на движке wordpress.
Подведем итоги в заключение
Ради эксперимента – проверьте сейчас свой сайт в PageSpeed и потом повторно после проведения всех вышеописанных процедур.
Скорость сайта должна взлететь, но это еще не все – в следующей статье я расскажу вам про оптимизацию картинок, формат WebP и многое другое.
Обязательно подпишитесь на мой канал , чтобы не пропустить новые публикации. Также я советую вам посмотреть остальные мои статьи. Возможно, что в них вы найдете для себя уйму полезной информации.
В это статье мы расскажем как оптимизировали конкретное Wordpress веб приложение. Какие действия были выполнены чтобы попасть из красной зоны оценки PageSpeed Insights в зеленую, тут будет мало общих рекомендаций универсальных для любых платформ и приложений, которыми пестрит поисковая выдача, a большe описание действий, которые повлияли на результат в рамках конкретной задачи.
PageSpeed Insights — противоречивый инструмент по оптимизации скорости загрузки веб страниц от Google, который за свою семилетнюю историю много раз менял свои алгоритмы, интерфейсы, все время дорабатывался, нещадно хейтился и даже закрывался, но в 2021 году по прежнему более чем актуален и находится в особом почете и уважении у SEO специалистов. И вовсе не потому что является самым объективным и точным, есть много других отличных инструментов 1, 2, 3, а потому что за ним стоит сам “великий и ужасный” Google.
Итак, у нас задача оптимизировать сайт на CMS Wordpress до зеленой зоны.
Сайт несложный с обычной судьбой, был сверстан под нужды заказчика и натянут на wp+woocommerce, в процессе нагружен 40+ плагинами ( что для сайтов на wp обычное дело ).
PSInsights оценивает ваш сайт отдельно для мобильных и десктопных устройств и делит их на три зоны.
- 0–49 — красная
- 50–89 — желтая
- 90–100 — зеленая
Изначально наш сайт имеет такие грустные оценки.
1. Ищем и удаляем лишний CSS и JS-код
Зайдите на свой сайт через браузер Google Chrome и нажмите F12 , затем меню -> More tools -> Coverage .
Затем, перед вами будет вот такая картина, где вам нужно будет выбрать 2-ой вариант для того, чтобы оптимизировать нужный файл на сайте:
Нажимаем: Click the reload button to reload and start capturing coverage и вы выбираем файл, из которого собираемся удалить все лишние.
Выберите на абсолютно любой файл, который собираетесь оптимизировать и нажмите крестик ( Close drawer ).
Обратите внимание, строчки кода, которые слева подсвечены красным – означают то, что данные классы не используется на странице, а те, что зеленым – означают, что используются.
Важно! Не удаляйте лишний CSS и JS-код прямо в самих файлах – это займет огромное количество времени.
Вместо этого – просто откройте блокнот и вставьте в него все, что подсвечено зеленым. Ну, а далее скопируйте все его содержимое и вставьте в нужный CSS или JS-файл.
Выводы
Поскольку поисковые системы учитывают время загрузки сайтов при ранжировании, это один из основных факторов, влияющих на посещаемость вашего ресурса.
Google’s PageSpeed Insights даёт оценку скорости загрузки сайтов, а также предлагает советы по их оптимизации. И в случае, когда, тестируя ваш сайт WordPress, вы столкнётесь с предупреждением “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, мы рекомендуем воспользоваться одним из выше упомянутых плагинов.
Вот история, которая вам понравится, если вы хотите ускорить работу своего сайта WordPress.
На днях я создал прекрасный сайт. Я выложился на полную и добавил WooCommerce, Google Tag Manager, OneSignal, службу поддержки, Yoast, прямое радио (да, да, я сделал), Cookie Notice, социальные сети и множество других плагинов.
Как и вы, я хотел произвести впечатление на посетителей, по крайней мере, я так думал. Но потом дела пошли невыносимо медленно. После долгих мучений я запустил GTMetrix, чтобы избавиться от проблемы.
К своему ужасу, я увидел это:
Я был впечатлен? Ад на NAW! Я хотел получить отличную оценку и сократить время загрузки страницы до двух секунд.
Итак, я нажал кнопку повторного тестирования, но знаете что? Все тот же отвратительный результат. Я был потрясен, даже зол. Но я не сдаюсь легко, потому что подобное недопустимо.
Вы знаете, что я сделал дальше? Я тестировал сайт на Pingdom, потому что GTMetrix его отстой. Но вот еще раз печальные результаты:
Что еще хуже, я использовал тему WordPress для электронной коммерции, которая загружала миллиард элементов для создания домашней страницы. В мою защиту это выглядело невероятно. Некоторые пользователи согласились, что дизайн тоже был правильным, так что ура, я не попался на уловку в одиночку ?
Но отличный визуальный дизайн и низкие скорости не идут рука об руку. Мне нужно было решение и быстро.
И в сегодняшнем посте вы узнаете, как именно!
Шаг 4. Настройте файлы CSS и JavaScript, блокирующие отрисовку
Помните, что ваши веб-страницы загружаются сверху вниз. Если у вас есть CSS и JS, блокирующие рендеринг, вверху страницы, браузер перестанет загружаться, пока файлы не будут загружены полностью. Таким образом, пользователи будут видеть пустую страницу, пока не загрузятся скрипты, что требует времени.
Как? Переместите все скрипты, блокирующие рендеринг, сверху вниз вашей веб-страницы. Но будьте осторожны здесь; вам не нужно перемещать все скрипты вниз. Я говорю это, потому что вашей странице могут потребоваться CSS и JS для обеспечения максимально увлекательного взаимодействия.
Если вы отложите некоторые файлы CSS или JavaScript, ваши пользователи могут увидеть искаженную версию вашей веб-страницы до тех пор, пока страница не загрузится полностью, что прямо противоположно тому, чего вы хотите достичь.
Это очень похоже на ленивую загрузку изображений; изображение загружается только тогда, когда оно находится в области просмотра, а не когда загружается остальная (и наиболее важные части) страницы.
Кстати, исправление CSS и JS, блокирующих рендеринг, может выявить файлы и скрипты, которые вам не нужны для создания веб-страницы.
Например, если какой-то внешний JS-скрипт для публикации в социальных сетях долго загружается, вы можете отложить его. Кроме того, вы можете устранить его и встроить в свою тему возможность делиться в социальных сетях.
В качестве альтернативы вы можете использовать плагин WP Rocket для исправления скриптов, блокирующих рендеринг, но будьте осторожны. Прочтите их документацию, потому что если вы что-то напутаете, вы легко можете сломать свой сайт.
Есть ли бесплатные варианты? Конечно! Мы работаем с WordPress, помнишь? Вы можете использовать Async JavaScript среди других плагинов.
W3 Total Cache
Один из моих любимых плагинов — W3 Total Cache. После того, как вы закончили установку и активацию, выполните следующие действия в административной панели WordPress:
Шаг 1. Разберите мусор
2. Оптимизируем CSS и JavaScript-файлы
В интернете имеется огромное количество веб-сервисов, с помощью которых можно решить данную задачу. Также есть куча инструментов на GitHub, но не все ими смогут воспользоваться т. к. нужно знать Node.js.
Но мы не будем на этом заморачиваться в то время, когда существуют следующие превосходные сервисы, решающие подобного рода задачи:
- FreeFormatter – выравнивает, оптимизирует, преобразовывает HTML , CSS , JavaScript , XML , SQL и многое другое.
- CSSO – сжимает и выравнивает CSS-код без потери валидации.
- JavaScriptCompressor – сжимает скрипты без потери валидации.
- HTML Minifier – просто сжимает HTML-код .
Ну, а далее можно еще включить кэширование и gzip-сжатие для наших CSS и JavaScript-файлов. Для этого просто вставьте следующий код в файл .htaccess , который обычно находиться в корневой директории сайта:
Вышеприведенным кодом мы закэшировали наш сайт, теперь давайте еще сожмем наши CSS и JavaScript-файлы с помощью следующего кода, который также нужно вставить в файл .htaccess :
Есть плагины? Да, конечно!
Существует множество плагинов WordPress для объединения и минимизации файлов. Хорошим примером является плагин WP Rocket. По сути, это один из лучших плагинов для кеширования, предлагающий функции для объединения и минимизации файлов за несколько кликов.
Другой популярный (и бесплатный) вариант – плагин Autoptimize.
Кстати, а при этом уменьшить количество внешних файлов CSS и JS скриптов? Например, и мы не упоминаем здесь имена, вам действительно нужна сторонняя платформа для комментариев? Вам нужен плагин для прямого эфира?
Неважно, что я говорю, удалите все внешние скрипты и файлы, которые вам не нужны.
Теория
Сначала немного теории. Уже довольно давно умные люди из компании Yahoo провели исследования на тему «как же нам ускорить наши сайты». И выяснили, что на скорость сайта с точки зрения пользователя в основном влияет оптимизация front-end'a, а не server-side. Подробнее об этом можно почитать на сайте webo.in на русском и на сайте yahoo на английском, я же просто опишу несколько простых шагов, которые позволят существенно ускорить скорость работы своего блога.
Предупреждение: хотя я и старался максимально упростить текст, сведя его к набору инструкций, все же большинство шагов можно выполнить только имея опыт разработки веб-сайтов, так что, если вы не программист, то лучше попросите знакомого программиста выполнить эти шаги за вас. Да, и на всякий случай, не забудьте забэкапиться :)
Перед тем, как мы перейдем к практике, я напомню нашу основную цель: блог на движке wordpress должен работать с точно тем же функционалом, что и раньше, но, с точки зрения пользователя, работать быстрее. Итак, погнали:
Устранение ошибки “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
Минимизировать ресурсы JavaScript и CSS, блокирующие рендеринг, на сайтах WordPress действительно просто. Мы рекомендуем использовать следующие плагины WordPress, чтобы устранить проблему:
Удалим лишние плагины
Современный WP это зоопарк различных плагинов, каждый из них это отдельный мир и экосистема. Любой плагин потенциально может добавлять свой функционал на фронт, даже если изначально он задуман только для административной части сайта. Изучать код всех плагинов и оценивать потенциальную угрозу для производительности займет слишком много времени, поэтому действуем от простого к сложному. Удаляем по максимуму все плагины, доводим сайт до нужной зеленой отметки и потом ставим по одному обратно, отслеживая как каждый из них влияет на оценку PSInsights, если влияние присутствует, то думаем над заменой плагина аналогом или отказаться от него.
В нашем случае мы удалили 22 из 40 плагинов и наши цифры чуть повеселели, хотя по прежнему далеки от поставленной цели.
Что Означает Предупреждение “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
В правилах Google PageSpeed, вы найдёте следующее требование: “Eliminate render-blocking JavaScript and CSS”. Невыполнение этого требования может существенно повлияет на скорость загрузки вашего сайта — замедлить его. Наверняка у вас возник вопрос, как JavaScript и CSS могут замедлить работу сайта?
Проще говоря, всякий раз, когда вы устанавливаете новый плагин или тему, front-end пополняется новым кодом JavaScript и CSS. Следовательно, браузерам может потребоваться больше времени для загрузки этого кода, а соответственно веб-страницы.
Верхняя часть страницы, или ATF (Above The Fold) — это часть сайта, которую видит пользователь сразу же после его загрузки. Любая другая часть — всё, что вы видите, прокрутив вниз — это BTF (Below The Fold), или нижняя часть.
Теперь суть этого предупреждения становится намного понятней, не так ли? Если при посещении вашего сайта, загружается какой-либо нерелевантный JavaScript и CSS, вы получите предупреждение сократить количество JavaScript и CSS кода, блокирующего рендеринг в верхней части страницы
Autoptimize
Ещё одно решение, которое также может помочь в устранении ошибок JavaScript и CSS, блокирующих рендеринг — плагин под названием Autoptimize. Плагин частично переведён на русский. Выполните следующие действия на панели инструментов после его установки и активации:
- Зайдите в Settings ->Autoptimize.
- В разделах “JavaScript and CSS Options” отдельно отметьте галочкой “Optimize JavaScript Code?” и “Optimize CSS Code?”.
- Нажмите “Save Changes and Empty Cache”.
Этих трёх шагов должно быть достаточно, чтобы решить проблему. Но иногда используемая тема или другие активные плагины могут вызвать обратный результат.
Чтобы убедится, что проблема была решена, проверьте свой сайт в Google PageSpeed Insights ещё раз. Если предупреждение не появляется, здорово — вы можете двигаться дальше! В противном случае давайте попробуем выполнить некоторые дополнительные действия.
- Перейдите в Settings ->Autoptimize.
- Нажмите “Show Advanced Settings”.
- Оказавшись там, найдите и отметьте оба варианта “Also aggregate inline JS” и “Also aggregate inline CSS” selections.
Шаг 2. Оптимизация изображений
Для начала избавьтесь от всех изображений, которые вы не используете. Будьте безжалостны; избавьтесь от всего этого вздора – оно вам не нужно. После этого сожмите и оптимизируйте изображения, чтобы удалить ненужные данные файла.
Хотя есть несколько плагинов на выбор, нам действительно нравится WP Compress. Несмотря на то, что это услуга премиум-класса, мощная автоматическая оптимизация изображений, сжатие без потерь, облачная обработка для снижения нагрузки на сервер, поддержка изображений WebP, автоматическое изменение размера и многое другое делают вложения того, что окупаются (ознакомьтесь с нашим обзором, чтобы узнать больше). Кроме того, вы можете получить 100 изображений бесплатно – так что вы можете хотя бы попробовать.
Допустим, вам нужно пять изображений на главной странице. Чтобы загрузить ваш сайт, ваша установка WordPress совершит пять обращений к серверу для получения изображений. Теперь, если вы поместите все пять изображений в один файл изображения (спрайт), ваша установка WordPress сделает только одну поездку.
Этапы оптимизации
- Удалим лишние плагины.
- Поработаем с изображениями.
- Сократим количество js и css на страницах.
- Специфические оптимизации для конкретного проекта.
Что делать?
Проведите аудит ваших плагинов. Какие плагины необходимы для работы вашего сайта? Есть плагины, которые вам не нужны? У вас есть плагины, которые подключаются к сторонним серверам? Вы можете обойтись без этих плагинов?
То же самое касается тем и контента WordPress, который вы не используете. Очистите все это. Удалите все, что вам не нужно; это хорошо для скорости и безопасности вашего сайта.
Вы можете сделать все возможное и выборочно загружать плагины. Например, если вам нужна только контактная форма 7 для загрузки на страницу контактов, вы можете запретить загрузку других плагинов на этой конкретной странице.
Было бы здорово, согласны? И чтобы подумать, вам нужен только плагин Asset CleanUp WordPress.
Плагин прост в использовании и достаточно эффективен. Или как выразился разработчик:
«Asset CleanUp» сканирует вашу страницу и обнаруживает все загруженные активы. Все, что вам нужно сделать при редактировании страницы / публикации, – это просто выбрать CSS / JS, которые не нужно загружать, таким образом уменьшая раздувание.
Очистите вашу установку уже hombre; избавьтесь от мусора – включая спам в комментариях. Ах да, устраните неработающие ссылки и оптимизируйте свою базу данных, пока они работают. Это важные области, которые следует учитывать при повышении скорости вашего сайта, но я отвлекся.
Практика
Оптимизируем тему
Да, открытость платформы Wordpress — это очевидное благо. Я серьезно.
Множество прекрасных дизайнеров, верстальщиков, программистов с горящими от энтузиазма глазами вдохновенно, вдумчиво создают темы и плагины для всех, для всего человечества, не требуя ничего взамен. Это действительно прекрасно.
К сожалению, не обошлось и без ложки дегтя — далеко не все верстальщики и программисты одинаково опытны и талантливы и далеко не все они в достаточной степени усердны и ответственны, чтобы на общественно-добровольных началах вылизать тему, которую они предоставляют.
Еще большее сожаление прогрессивно мыслящей части человечества вызывает тот факт, что уебанов больше, чем титанов духа, и в связи с этим сеть полна бесплатного говна.
-
Если тема сверстана на таблицах, переверстать ее на дивы. Я не буду касаться давнего спора «как вестать — дивами и таблицами», замечу только, что точки зрения поставленной перед нами цели (быстро работающий с точки зрения пользователя блог) таблицы проигрывают дивам — потому что таблица отрисовывается браузером только после того, как будет полностью загружена, тогда как дивы отрисовываются сразу, как только браузер получит их с сервера. А значит, если страница сверстана в дивах, пользователь быстрее увидит контент сайта, что нам и нужно, не так ли?Кроме того, как указывает в комментарияхlen:
верстка div-ами вместе с разбиением странички на файлы типа left-sidebar, right-sidebar, header, footer etc. позволит быстрее и проще поменять какой-нибудь небольшой кусочек кода прямо из панели управления движком (Дизайн -> Редактор тем), чем попытки из этой же панели управления поменять кусочек своей табличной верстки, в которой можно потеряться за забором из tr и td.
java -jar /path/ to /yuicompressor-*.*.*.jar -o "output_filename" src_file
* This source code was highlighted with Source Code Highlighter .
можно использовать флаг -type , который указывает, какой тип файла (css или js). Если флаг не указан, то тип файла определяется по расширению.
Можете использовать тему моего блога как пример. Ниже я привел пример shell-скрипта, который можно натравить на директорию, в которой расположена тема, и он все сделает за вас.
Уменьшаем количество файлов
Так как мы можем серьезно ускорить скорость загрузки файлов, уменьшив число этих файлов (удивительно, правда? :), то разумнее всего будет слить все css-файлы и js-файлы в один. Если эти файлы размером больше ~70 килобайт, то лучше разбить их на два куска.
Если нужно уменьшить количество картинок, используя технику css спрайтов и технику image map.
Тут надо отдельно заметить, что у многих (практически у всех) плагинов есть совершенно идиотская особенность — прописывать свои js и css файлы. Идиотизм заключается в том, что очень часто разные плагины используют одну и ту же библиотеку, и подключают ее по нескольку раз. И пользователь, просматривающий ваш блог, вынужден по два-три раза грузить, к примеру, prototype или jquery. Лишние ~30-160+ KB. Неслабо, прадва?
Тех. заметка: при этом совершенно непонятно, что мешало создателям wordpress сделать контроль надо всеми ресурсами, что прописывают плагины, как сделано, к примеру, в RichFaces. К примеру, если один плагин, которому нужен jQuery, прописывает тэг script с jQuery и рапортует — «Вот мол, подгрузил, все, кому надо, могут использовать», а другой, которому тоже нужен jQuery уже знает об этом и не подгружает свой вариант.
Лечится это так — все скрипты, что подгружают плагины слейте с теми, что написали сами и воткните в футер, а плагинам запретите их подгружать. Тоже самое сделайте с css, только воткните в header.
Оптимизируем графику
Картинки в png и jpg форматах довольно часто неоптимизированы и хранят много лишней информации. Было бы неплохо избавиться от этой лишней информации и таким образом сжать файлы. Делается это с помощью специальных утилит. Это позволит нам уменьшить их размер в отдельных случаях на 50 процентов. Неслабо, правда?
При этом сами картинки не изменятся и все так же будут радовать глаз пользователей.
Информацию об этих утилитах и команду я позаимствовал у Дмитрия Ищенко. Надеюсь, он не в обиде :)
Итак, для оптимизации всего png картинок мы будем использовать pngcrush. Я затрудняюсь ответить, как ее инсталлировать на windows или linux, но я на своем mac'e без проблем установил эту утилиту из портов.
Чтобы сжать png-файлы без потери качества, используйте следующую команду:
pngcrush - rem alla -reduce -brute image.jpg result.jpg
* This source code was highlighted with Source Code Highlighter .
Для сжатия jp(e)g-файлов используйте jpegtran, которая входит в пакет libjpg, который я также установил из портов. Команда для сжатия jp(e)g-файлов без потери качества:
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
* This source code was highlighted with Source Code Highlighter .
Я тут набросал shell-скрипт, который рекурсивно пройдет по директории и оптимизирует все png/jp(e)g картинки в ней:
for file in `find . -iname "*.jpg" - or -iname "*.jpg" - or -iname "*.jpg" `; do
ext=$
if [ -n "$ext" ]; then
if [ "$ext" = "jpg" ]; then
echo "optimizing $ as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "jpeg" ]; then
echo "optimizing $ as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "png" ]; then
echo "optimizing $ as png file with pngcrush"
pngcrush - rem alla -reduce -brute "$file" temp_abracadabra_filename.jpg;
mv -f temp_abracadabra_filename.jpg $file;
fi
fi
done;
* This source code was highlighted with Source Code Highlighter .
Просто выполните его в директории uploads что в папке wp-content и все будет хорошо. Можно даже повесить его на cron-job и больше не париться на этот счет — все вновь прибывшие файлы будут оптимизироваться.
Разумеется, надо оптимизировать графику, используемую в теме, так что вот еще один shell-скрипт, который рекурсивно пройдет по директории, сожмет css, js файлы и оптимизирует jp(e)g/png файлы. На всякий случай перед его использованием не забудьте забэкапиться:
for file in `find . -iname "*.jpg" - or -iname "*.jpg" - or -iname "*.jpg" - or -iname "*.js" - or -iname "*.css" `; do
ext=$
if [ -n "$ext" ]; then
if [ "$ext" = "css" ]; then
echo "compressing $ as css file with yui compressor"
java -jar /opt/yuicompressor/yuicompressor-2.3.5.jar --type css -o "temp_abracadabra_filename.css" $file
mv -f temp_abracadabra_filename.css $file;
fi
if [ "$ext" = "js" ]; then
echo "compressing $ as js file with yui compressor"
java -jar /opt/yuicompressor/yuicompressor-2.3.5.jar --type js -o "temp_abracadabra_filename.js" $file
mv -f temp_abracadabra_filename.js $file;
fi
if [ "$ext" = "jpg" ]; then
echo "optimizing $ as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "jpeg" ]; then
echo "optimizing $ as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "png" ]; then
echo "optimizing $ as png file with pngcrush"
pngcrush - rem alla -reduce -brute "$file" temp_abracadabra_filename.jpg;
mv -f temp_abracadabra_filename.jpg $file;
fi
fi
done;
* This source code was highlighted with Source Code Highlighter .
Используйте меньше dns-lookups. Не выкладывайте картинки, src которых указывает на другой ресурс, лучше загрузите их к себе и пропишите ссылку на автора. Работать будет быстрее.
Сжатие
Все современные браузеры поддерживают сжатие, так что можно существенно уменьшить размер отдаваемых файлов (а значит, и время их загрузки) при помощи mod_deflate (для Apache 2.2 для Apache 1.3 надо использовать mod_gzip). Так что включите mod_deflate. Если же вы используете Apache 1.3, ниже приведенный код вам не не нужен, вам поможет статья «mod_gzip — сжатие html страниц 'на лету'» на сайте webo.in.
Найдите файл .htaccess в корневой директории установки wordpress и добавьте в конец следующее:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
* This source code was highlighted with Source Code Highlighter .
Таким способом можно добиться уменьшения js/css/html файлов на 70-80%, и примерно 10% уменьшения jpeg-файлов, что значительно ускоряет загрузку сайта. Следует, правда, помнить, что использования mod_deflate увеличивает нагрузку на сервер, так как ему нужно сжать файлы перед тем, как отдать их, так что стоит проконтролировать, что использование mod_deflate не создает чрезмерной нагрузки на сервер.
Кеширование
Ну и последнее — для того, чтобы ускорить серфинг по вашему сайта нужно врубить кеширование. Это не ускорит загрузку сайта у пользователя, который первый раз пришел на ваш сайт, но положит все внешние js, css файлы, картинки к нему в кеш, и в следующий раз, когда он будет бродить по вашему сайту, ресурсы будут грузиться не с сервера, а из кеша, что значительно ускорит скорость работы вашего сайта с _точки зрения пользователя_, а также значительно снизит нагрузку на ваш сервер. Помните, что закешированные у пользователя файлы берутся из кеша браузера, поэтому, если вы внесете изменения в файл, скажем, стилей, пользователь, закешировавший style.css, не увидит их. Так что лучше включать кеширование после того, как вы доработали тему.
Опять же, добавьте следующие строчки в конец файла .htaccess и не забудьте включить mod_headers и mod_expires (или хотя бы один из них):
* This source code was highlighted with Source Code Highlighter .
Кеширование на стороне сервера
Осторожно: этот пункт выполняйте с осторожностью (или, если вы не уверены в том, что делаете, вообще его пропустите), у многих использование перечисленых ниже плагинов вызывает проблемы.
Есть несколько плагинов к wordpress'у, которые позволяют кешировать файлы на стороне сервера. Работают они по такому принципу: как только какая-то из ваших страниц запрашвается на сервере, она динамически строится и создается html-файл со всеми данными, который ложится в кеш. Как только приходит запрос на эту страницы, пользователю отдается html файл вместо того, чтобы динамически строить страничку, что значительно снижает нагрузку на сервер (теперь ведь не прогоняются php-скрипты и не нагружается база данных).
К сожалению, все эти плагины работают как-то очень странно, во всяком случае, у меня не работали должным образом ни wp-cache, ни работающий на его основе wp-super-cache.
Зато работает 1 Blog Cacher, правда, у него достаточно сложная настройка. Надеюсь, вы разберетесь. Я использую его.
Итого
После того, как я провел над своим блогом ряд этих нехитрых действий, блог стал загружаться на 80% быстрее.
Теперь perfomance meter моего сайта с точки зрения плагина к firebug'у YSlow равен B(85), был F(33). Думаю, неплохой результат.
Кросс-пост в моем блоге.
Когда ко мне пришла идея создания канала « YouGo в Яндекс.Дзен » – я решил, что буду выкладывать в Дзене полезную, но сжатую информацию, а на сайте развернутую и оптимизированную под поисковые системы.
И к тому времени, как я его полностью сверстал – у меня появилась необходимость оптимизировать верстку для того, чтобы она стала максимально легкая и соответственно, – супер суперскоростная.
К сожалению ни в Google, ни в Yandex я не нашел информацию о том, как удалить лишний CSS и JavaScript. Тогда я спросил у разработчиков на одном форуме и они мне подсказали о том, что подобного рода задачу можно решить с помощью консоли Google Chrome .
Поэтому в этой статье, я хочу рассказать вам о том, как мне удалось удалить лишний CSS и JavaScript-код , а также о том, как его, сжать, потом еще раз сжать на сервере, оптимизировать и закэшировать.
Заключительные слова
Если у вас есть вопросы, сообщите нам об этом в разделе комментариев ниже. Приветствуем более быстрые веб-сайты и впереди отличное будущее!
Ищем «Render-Blocking JavaScript and CSS» с Помощью Google Page Insights
- Перейдите на страницу, вставьте URL-адрес вашего сайта в поле “Enter a web page URL”.
- Нажмите на “Analyze”, чтобы получить результаты.
Средняя оценка большинства cайтов — от 50 до 70 баллов. Также ниже на странице вы найдёте рекомендации Google по улучшению производительности вашего сайта.
Если в этом списке будет рекомендация удалить код JavaScript и CSS, блокирующий отображение верхней части страницы, мы советуем решить эту проблему как можно быстрее.
Помните, что максимальное количество баллов, то есть 100 — это не главное. Ваша цель — попытаться получить хорошую оценку без ущерба для UX.
Также помните, что не стоит удалять скрипты, имеющие решающее значение для UX, только чтобы получить немного высший балл PageSpeed Insights.
Правила, по которым Google оценивает ваш сайт, являются лишь рекомендациями по оптимизации. Так что судите сами, что хорошо, а что может навредить вашему веб-ресурсу!
Поработаем с изображениями
Наш проект имеет три разных предупреждения касающихся изображений на сайте.
- Настройте эффективную кодировку изображений.
- Используйте современные форматы изображений.
- Настройте подходящий размер изображений.
К сожалению это три разных проблемы и одной серебряной пули, которая решит все скопом я найти не смог. Поэтому решаем их поэтапно.
Этап 0. Добавим lazy load для изображений
PSInsights оценивает только те изображения, которые смог увидеть, так зачем ему видеть лишнее? Давайте отложим загрузку изображений, которые находятся ниже начальной загрузки экрана.
WP версии 5.4 добавил поддержку lazy load изображений из коробки, в теории просто добавляем атрибут loading="lazy" к тегу изображений и должно работать, на практике для PSInfights срабатывает не всегда, поэтому ставим плагин autoptimize, который нам еще пригодится ниже для оптимизации js и css кода, и активируем в нем lazy load загрузку изображений.
Этап 1. Настройте эффективную кодировку изображений
По факту это значит что изображения недостаточно оптимизированы.
У PSInsights свой алгоритм по которому он определяет что такое достаточно. К сожалению, все топовые плагины оптимизации изображений до конца не могут оптимизировать изображение под их алгоритм.
Я воспользовался этим решением, оно позволяет в бесплатной версии оптимизировать все изображения сразу по нажатию одной кнопки. У нас еще могут остаться предупреждения про кодировку после этого, но вес основной части изображений будет меньше.
Этап 2. Используйте современные форматы изображений
Тут все не так просто, взять и заменить форматы изображений на webp скопом не получиться, поддержка этого формата браузерами все еще оставляет желать лучшего.
Для конвертации всех изображений в webp формат я воспользовался этим плагином, который в папке uploads рядом с существующими изображениями создает новые с расширением webp. То есть, если раньше у вас было изображение foo.jpg, то сейчас рядом с ним появилось foo.jpg.webp
В теории в таких плагинах есть настройка, которая сама подменяет изображения на webp и показывает нужный формат в зависимости от браузера, на практике у меня предупреждения про формат все равно остались даже после активации настройки.
Поэтому, в тех местах где lazy load не смог скрыть изображения, я вручную заменил тег img на тег picture, как это работает хорошо описано тут.
Код замены привожу ниже, все php переменные естественно должны быть объявлены перед тегом.
Этап 3. Настройте подходящий размер изображений
Это предупреждение появляется если вы пытаетесь загрузить изначально очень большое изображение, а показываете его как маленькое. Тут опять действовать придется точечно и в тех местах где lazy load не смог скрыть изображения, пробовать подключать другие размеры картинок из существующих.
На практике может оказаться так, что существующих недостаточно, тогда придется еще создавать свои отдельные. Для этого объявляем новый размер в functions.php вашей темы.
Затем любым плагином, который может ресайзить изображения, создаем новые размеры и подгружаем их в тег picture, который вы вставляли выше.
После проведенных оптимизаций с изображениями, наши балы заметно повеселели, а для десктопа мы уже попали в желаемую зеленую зону.
Переходим к следующему этапу оптимизации.
Speed Booster Pack
- Перейдите к разделу Speed Booster Pack в разделе настроек, а затем на вкладку “Advanced”.
- Найдите меню “JavaScript Optimization”, активируйте “JavaScript Optimization” и “Defer parsing of Javascript files”.
- Найдите меню “CSS Optimization” внизу и включите “CSS render-blocking optimization”.
- Вы также увидите дополнительные опции, такие как Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS в футер. Вы можете поэкспериментировать с этими настройками, чтобы добиться наилучшего результата.
Активировав все эти настройки, вы заставите свой сайт загружаться быстрее. Тем ни менее включение всех настроек может вызвать побочный эффект — “мелькание неоформленного содержимого”, или FOUC(Flash Of Unstyled Content). Короче говоря, это ситуация, когда браузер загружает страницу, не подождав пока загрузится таблица стилей CSS, что приводит к отключению всех стилей на странице.
После того, как вы выполнили одну из описанных выше инструкций, проверьте ваш сайт в Google PageSpeed Insights ещё раз, чтобы убедится что проблема блокировки отображения верхней части страницы действительно устранена.
Для тех кто хочет 100/100
Эта статья для вас не подойдет, можно поискать в разделе фантастика, если такой есть на хабре. Современные сайты, а тем более сделанные на CMS обвешаны огромным количеством js и css библиотек, в случае с WP — это почти всегда много плагинов, каждый из которых может что-то добавлять свое на ваш фронт, все это делает сайт огромной неповоротливой махиной и ждать от нее космических скоростей не стоит.
Хотя пустая установка стандартной темы WP twentytwentyone еще выдает желаемую сотню.
Но если помимо этого вы ещё захотите добавить на страницу хоть что-то, то это что-то будет нуждаться в оптимизации.
Сократим количество js и css на страницах
У нас осталась группа рекомендаций по оптимизации скорости загрузки, все из них относятся к js и css файлам.
- Уменьшите размер кода JavaScript
- Удалите неиспользуемый код CSS
- Удалите неиспользуемый код JavaScript
- Устраните ресурсы, блокирующие отображение
Как видим основные рекомендации это размер js и css библиотек. Нужно определить кто эти библиотеки нам на фронт добавляет. Открываем вкладку network панели хрома, выбираем отображение только js файлов, затем обновляем страницу через ctrl + F5. После этого сортируем по размеру файлов, чтобы выявить самые тяжелые, от которых потенциально исходит самая большая угроза.
В итоге видим что самые тяжелый файл нам добавляют:
- Плагин оператора сайта
- Сервисы статистики и аналитики ( facebook pixel, google tag manager)
- Стандартные библиотеки (jquery, bootstrap)
К сожалению лишние тут выявить сложно, современный веб ресурс сложно представить без этих сервисов, но тем не менее что-то мы должны предпринять.
Отключаем плагин оператора, он добавляет критично много, его в дальнейшем на продакшене либо заменим на другой, либо добавим таймаут на загрузку.
Следующий потенциальный враг это фейсбук пиксель, добавляем таймаут на его загрузку, да наверное это может сказаться на объективности его данных в дальнейшем, но тут уже нужно искать компромисс, что вам больше нужно, скорость загрузки ресурса или объективность данных этого сервиса.
Также отключаем всякие мелочи по типу эмоджи wp, которыми мы не пользуемся на нашем фронте
После этого останется устранить ресурсы блокирующие отображение.
Если все ваши стили и скрипты в теме и плагинах подключены правильно через wp_enqueue_style и wp_enqueue_script соответственно, то устранить блокировку поможет ранее установленный плагин autoptimize, просто активируйте соответствующие галочки.
После этого может возникнуть проблема с отображением ресурса в первые секунды загрузки, для этого нужно критично важный css отображать выше. В нашем случае мы просто возмем из bootstrap.css часть стилей отвечающих за отображение сетки и добавим их в соответствующее окно настроек.
Под капотом плагин соберет все подключаемые файлы js и css в два больших файла, минифицирует их и отдаст на фронт.
После оптимизаций связанных с js и css наши цифры стали совсем близки к цели.
У нас 80+ для мобильных, и стабильно зеленая зона для десктопа.
Предупреждения по сокращению размеров js и css кода по прежнему висят, но их мы больше оптимизировать не будем, потому-что это будет очень трудозатратно по времени, и не нужно в рамках нашей задачи.
Остался последний рывок и тут уже не обойтись без специфических оптимизаций для конкретного проекта.
Специфические оптимизации для конкретного проекта
На самом деле такие спец оптимизации мы уже приводили выше, все проекты уникальны по своему и в вашем ошибки выдаваемые PSInsights могут существенно отличаться, тогда вам нужно вырабатывать свой алгоритм их решения.
В нашем случае для финальной оптимизации мы обратим внимание на результаты “Имитация загрузки страницы”, эти параметры очень важны. Нужно понимать что вы можете выполнить все рекомендации из раздела “Оптимизация” и “Диагностика”, но если при этом параметры имитации загрузки страницы остаются в красной зоне, то высоких оценок вы все равно не получите. Ваш сайт должен стать реально быстрее в процессе оптимизации, согласитесь что это довольно справедливое требование.
Итак в рамках нашего проекта мы видим, что одним из факторов отмеченных красным является “Largest content paint”
Логически глядя на страницу можно легко догадаться какой элемент является самым большим на странице, в нашем случае есть подозрение, что это верхний слайдер запускаемый slick библиотекой. Но мы не будем полагаться только на интуицию, а доверимся инструментам. Открываем панель хрома, вкладку “Performance” и запускаем тест, затем кликаем по кладке “LCP”. В итоге виновник найден. Подозрения подтвердились — это наш верхний слайдер.
При загрузке страницы юзеру неважно слайдером будет наше первое изображение изначально или картинкой. Поэтому для решения проблемы мы заменяем слайдер на картинку, ждем полной загрузки страницы и затем запускаем скрипт инициализации слайдера, а после этого прячем изображение.
В коде это будет выглядеть примерно так. Добавляем параллельно c html слайдера тег изображения и вставляем в его src первое изображение слайдера
Затем в js помещаем инициализацию слайдера в таймаут и скрываем изображением после инициализации
После этих оптимизаций юзер видит при загрузке вначале изображение, a потом через время слайдер. PSInsights видит только изображение, которое грузится гораздо быстрее чем весь слайдер. В итоге все счастливы и наши балы оценки сияют зелеными цифрами.
Подведем итоги. Задача выполнена, все страницы нашего проекта в зеленой зоне. Конечно еще можно провести много всякий оптимизаций:
- Сократить bootstrap.css оставив только нужные элементы.
- Попрофилировать ресурс в поисках узких мест загрузки php и sql запросов.
- Настроить более эффективно кэширование.
И еще много чего, но на сегодня цель достигнута, сайт действительно стал грузиться быстрее и PSInsights оценивает его высоко.
Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице результатов поиска. PageSpeed Insights от Google — отличный инструмент для оптимизации скорости загрузки вашего веб-сайта. Он не только показывает текущую скорость, но и определяет проблемы, которые тормозят ваш ресурс. В этом руководстве мы покажем, как устранить одну из наиболее частых проблем, с которой вы можете столкнуться, тестируя ваш сайт. Так что, если вы увидели предупреждение: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, — не волнуйтесь, решение в этой статье.
Шаг 5. Используйте кеширование и CDN
Кэширование подразумевает хранение статических файлов в браузере, чтобы пользователи не загружали файлы при последующих посещениях. Допустим, у вас есть плагин кеширования, и пользователь загружает ваш кэшированный контент при первом посещении.
CDN (или С ontent D elivery N etwork) представляет собой сеть серверов, расположенных по всему миру. CDN также использует кеширование, но для еще большей скорости провайдер CDN обслуживает ваш кэшированный контент с сервера, ближайшего к посетителю.
Более короткие расстояния означают более быструю доставку контента, а кэширование означает, что вашему сайту не нужно загружать один и тот же контент с центрального сервера заново. Имеет ли это смысл для вас?
И, что лучше всего, есть несколько бесплатных вариантов CDN (или, по крайней мере, бесплатных пробных версий, чтобы вы могли буквально увидеть разницу). В WPExplorer мы используем и настоятельно рекомендуем CLoudflare, но выбирайте тот CDN, который, по вашему мнению, лучше всего подходит для вас.
Шаг 3. Объедините и минимизируйте HTML, CSS и JavaScript
По словам Рэлин Мори из Words by Birds (я большой поклонник ?), минификация – это процесс «… удаления любых ненужных символов, таких как комментарии, форматирование, пробелы и новые строки из файлов HTML, CSS и JavaScript, которые не являются» t необходимо для выполнения кода ».
И снова Рэлен говорит:
Между тем, объединение файлов происходит так, как кажется. Например, если ваша веб-страница загружает 5 внешних файлов CSS и 5 внешних файлов JavaScript, объединение ваших CSS и JavaScript в один отдельный файл приведет к выполнению всего 2 запросов вместо 10.
Читайте также: