- 0. С чего мы начинаем
- 1. Устраните ресурсы, блокирующие отображение
- 1.1 Плагин Autoptimize
- 1.2 Плагин Hummingbird
- 2. Отложите загрузку скрытых изображений
- 2.1 Плагин Smush
- See resources
- 4. Используйте современные форматы изображений
- О том, как настроить wepb на своем сайте читайте в нашей отдельной статье. Учтите, что если вы будете использовать CDN (см. конец этой статьи), то плагин WebP Conveter работать не будет
- 5. Настройте подходящий размер изображений
- 6. Уменьшите влияние стороннего кода
- 7. Задайте правила эффективного использования кеша для статических объектов
- Почему мы не использовали для кэширования W3 Total Cache или WP Super Cache?
- 8. Initial server response time
- Что может тормозить рендеринг на стороне сервера?
- Как уменьшить TTFB?
- Тесты, где можно проверить скорость параметра TTFB:
- Проблема с файлом admin-ajax.php
- Как в итоге увеличить скорость?
- 9. Итоги нашей оптимизации:
- Еще про WordPress:
Кому на Руси жить хорошо? Конечно же сайтам с адаптивным дизайном на премиум-шаблонах. Но думать, что разработчики всё сделают за тебя достаточно наивно, у WordPress в принципе есть много проблем с логикой (при открытии главной страницы может происходить до 20 запросов в базу данных). Сейчас мы на своем примере покажем, как реально бустануть твой блог — пару-тройку минут и мы на танцах.
Дисклеймер: все изменения вы делаете на свой страх и тем более риск. Все указанные способы тестировались на платформе WordPress версии 5.2.4. Перед началом лучше сделать бэкап и решить для себя, какого результата вы ждёте. Если вы совсем не представляете как работает JS, CSS и HTML, то совет один — «Руками ничего не трогать, кнопки не нажимать»
0. С чего мы начинаем
Начинали мы с ужасного показателя Pagespeed для мобильной версии — всего 15 пунктов.
Сам сервис показывает нам какие ресурсы и сколько времени загружаются на нашем сайте, давая рекомендации по их устранению
1. Устраните ресурсы, блокирующие отображение
Чем больше на вашем сайте CSS и JS-кода, тем дольше браузер будет его отрисовывать. Поэтому рекомендуется загрузку менее важные скриптов и стилей отложить «в долгий ящик», чтобы они грузились в самую последнюю очередь. Самый лучший вариант — вообще убрать неиспользуемый JS-код или перенести его в футер — чем меньше такого кода будет в <head>, тем выше будет показатель Page Speed. Если вы подключаете Jquery в <head>, то это блокирует отображение страницы, так как браузер ожидает пока загрузится все что находится в <head>
Сильно тормозит загрузку страницы код Jquery, поэтому, если есть возможность, не стоит использовать его на своем сайте. В крайнем случае, как уже писали выше, jquery библиотеки, лучше поместить в футер сайта (это можно сделать с помощью плагина Hummingbird, см. ниже), из-за блокировки отображения. Google советует искать плагины в библиотеке по ключевым словам: defer css javascript. И мы нашли несколько.
1.1 Плагин Autoptimize
После установки плагин может сыпать ошибками «Autoptimize не может записать в каталог кэша».
Ему не хватает прав для создания этой папки — можно исправить через FTP-менеджер, создав директорию cache в каталоге wp-content и назначит ей соответствующие права
Собственно, основные настройки всего две: оптимизация JS и оптимизация CSS-кода. В остальные вкладки можно не ходить. Хорошая новость состоит в том, что плагин переведен на русский язык, а плохая в том, что неопытному пользователю всё равно будет непонятно. Мы рекомендуем оставить галочки в чекбоксах, как показано на скрине ниже:
Раздел CSS делаем аналогично
Важно! Плагин по умолчанию начинает кэшировать ваши статические элементы, проследите, чтобы директория была доступна для записи. Выглядит это так:
Теперь переходим к следующему плагину
1.2 Плагин Hummingbird
Один из самых крутых плагинов, который помогает улучшить скорость WordPress, но, к сожалению, только на английском языке. Hummingbird встречает нас дашбордом, где мы видим, в принципе, всё тоже самое, что показывал нам Google Page Speed. Не забудьте переключиться на мобильную версию, по дефолту нам показывается десктопный тест
Как и Autoptimize, у Hummingbird есть своя настройка кеширования. На нём мы останавливаться уже не будем, благо мы уже настроили это в предыдущем плагине, тем более, что при включении кэширования опять начнутся проблемы с правами (победить это можно создав файл advanced-cache в директории wp-content):
Особый интерес у Hummingbird вызывает раздел Assets Optimization. Здесь нужно быть аккуратным, т.к. одно неверное движение может сильно перекосить ваш сайт. Сначала плагин просканирует все ваши файлы:
Сразу переключайтесь в расширенный режим (Enable advanced mode). Напротив каждого файла есть несколько иконок.
Compression — Сжатие позволяет оптимизировать файлы CSS и Javascript, удаляя в них ненужные символы и пробелы, уменьшая их вес.
Combine — поможет объединить небольшие файлы, чтобы уменьшить количество запросов при загрузке страницы
Move to Footer — перенести загрузку файла в футер сайта
Defer — функция для скриптов JavaScript, включение которой означает, что они будут загружаться только после загрузки всего остального на вашей странице. Это позволит загружать наиболее важные файлы и контент в первую очередь.
Don’t load file — включение этой позволит не загружать этот файл
Так же доступен выбор для оптимизации — можно редактировать не только файлы темы, но и плагины:
В итоге после работы над файлами у нас получилось оптимизировать файлы на ~20%
2. Отложите загрузку скрытых изображений
Сделать это можно с помощью так называемой «ленивой» загрузки (lazy load). Эта функция позволяет подгружать изображения, только когда основные ресурсы (текст) будет загружены, что позволит пользователям начать работу с контентом, не дожидаясь, пока подгрузятся все изображения. после завершения загрузки всех критически важных ресурсов, чтобы уменьшить время до интерактивности. Такая настройка может быть в настройках вашей темы WP
2.1 Плагин Smush
Данный плагин можно использовать для включения Lazy Load
а так же оптимизировать изображения с его помощью.
К сожалению, бесплатная версия сможет оптимизировать лишь часть изображений, поэтому, если встроенная тема WP даёт вам возможность включить Lazy Load без дополнительных плагинов, то для сжатия изображений лучше обратиться к разделу «Используйте современные форматы изображений»
3. Удалите неиспользуемый код CSS
Совет только на первый взгляд кажется странным, хотя, казалось бы, если код есть, то значит он уж как-то, но используется? Однако, некоторые установленные плагины действительно подгружают свой CSS-код, который может никогда не выполняться, но давать дополнительную нагрузку. Это сильно тормозит процесс рендеринга, ведь по дефолту браузеру необходимо обработать все CSS-стили, прежде чем отобразиться основной контент. Оптимальным решением будет удалить ненужные правила из таблиц стилей и/или отложить загрузку кода CSS, который не используется в верхней части страницы
Окей, но как его обнаружить? Для этого существует инструмент Code coverage, который запускается через панель разработчика (F12 в браузере Google Chrome). Это инструмент анализа покрытия кода, который видит, какие строки из JS/CSS-кода выполняются, а какие нет. Чтобы его запустить в окне devtools нажмите на More tools -> Coverage
Браузер выдаст вам разбивку файлов JavaScript и CSS, которые были использованы на странице. Каждая полоса имеет вес и цвет — красный — неиспользованный код, а зеленый — код, который запускался.
Побродите по вашему сайте в режиме «записи» (браузер будет генерировать данные) — узнаете много нового. В том числе, что CSS может не использоваться до 90% от всего его кода.
4. Используйте современные форматы изображений
Очень хороший показатель, который так же помог набрать с десяток поинтов Google PageSpeed. Мы использовали конвертер png/jpeg в формат webp. Экономия составила до 50%. Для примера:
Это JPEG — весит 36 кбайт
Аналогичное изображение в webp «весит» всего 16 кбайт
Таким образом выбор webp сильно ускорит загрузку изображений — однозначный must have, если в ваших материалах огромное количество изображений (обзоры девайсов, инструкции по настройке и/или ремонту, различные гайды по сервисам и так далее)
О том, как настроить wepb на своем сайте читайте в нашей отдельной статье. Учтите, что если вы будете использовать CDN (см. конец этой статьи), то плагин WebP Conveter работать не будет
5. Настройте подходящий размер изображений
Здесь всё просто: даже если вам очень хочется поделиться своим паком обоев под Windows, грузить в своё хранилище изображения весом в 5 мбайт не стоит — вряд ли пользователи, зашедшие к вам через мобильные телефоны с лимитным трафиком, оценят ваше старание. Взялся за нож — режь!
Чтобы привести размеры ваших изображений в соответствие с требованиями, загрузите их в библиотеку файлов. Затем вставьте их на сайт прямо из библиотеки или используйте виджет изображений.
К тому же, в настройка темы WordPress обычно имеются настройки
6. Уменьшите влияние стороннего кода
Наверное, самый дельный «совет», который дал нам сервис. Действительно, чем больше сторонних API, чужого JS-кода подгружается с сайтом, тем дольше он будет отрисовываться в браузере пользователя. Совсем избавиться от него вряд ли получится — Яндекс.Метрика, Adsense и многие нужные сервисы всё равно придётся интегрировать, если вам, конечно, важно отслеживать статистику и откручивать рекламу.
С нашей стороны был отключен виджет «Инстаграма», который подгружал картинки с нашего неофициального аккаунта. Решили ограничиться виджетом иконок социальных сетей, который почти не потребляет трафика. Как вариант, можно отключить показ сайдбара в мобильной версии. В нашей теме для WP такого функционала, к сожалению, не оказалось.
7. Задайте правила эффективного использования кеша для статических объектов
«HTTP-кэширование может ускорить загрузку вашей страницы при повторных посещениях» — такой совет даёт сервис для устранения этой неполадки. Дело в том, что когда браузер запрашивает сервер вашего сайта, тот может сообщить, как долго ему хранить те или иные данные (кэшировать его). В следующий раз такие ресурсы будут подгружаться с локальной копии на компьютере пользователя. А это значит, что страница будет загружаться быстрее.
Что нам нужно «убрать» в кэш? Название пункта гласит, что это должны быть статические объекты. Это могут быть CSS-файлы, изображения, JS-скрипты и иконки. Подробнее о кешировании мы писали в разборе плагинов в пункте #1 Устраните ресурсы, блокирующие отображение. Можно обойтись и без плагинов — необходимую информацию можно внести в файл .htaccess, который лежит в корне WP у вас на сервере. В него нужно вписать следующее:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault «access plus 6 month»
ExpiresByType text/css «access plus 6 month»
ExpiresByType text/plain «access plus 6 month»
ExpiresByType image/gif «access plus 6 month»
ExpiresByType image/png «access plus 6 month»
ExpiresByType image/jpeg «access plus 6 month»
ExpiresByType application/x-javascript «access plus 6 month»
ExpiresByType application/javascript «access plus 6 month»
ExpiresByType application/x-icon «access plus 6 month»
</IfModule>
Почему мы не использовали для кэширования W3 Total Cache или WP Super Cache?
Два данных плагина часто мелькают в различных обзорах о повышении скорости WordPress. Но проблема в том, что данные решения не работают «из коробки». Вот, например скрин при установке WP Super Cache:
При этом все советы, которые дают разработчики в логе на скрине всё равно не помогают. Изменение прав доступа, удаление advanced-cache.php, прописывание параметра WPCACHEHOME в файл wp-config, создание файла wp-cache-config — ничего не сработало.
Что касается W3 Total Cache, то установка тоже не прошла без сучка и задоринки, но плагин завёлся. Однако в процессе эксплуатации тоже возникали ошибки, которые влияли на результат
Здесь помимо проблем чисто с WP добавились проблемы с файлом ngnix.conf
В совокупности всех танцев с бубном мы решили остановиться на Autoptimize в качестве кэширующего плагина
8. Initial server response time
Время ответа сервера — важнейший параметр, не только для Google Page Speed. В 2021 году тот же самый Гугл вводит новый фактор для ранжирования сайтов — Page Experience, который включает в себе метрики Web Vitals. Они изменяют оценку удобства пользования сайта. Конкретно оцениваются те факторы, которые присутствуют в Google Page Speed. Речь про Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS)
Причем тут скорость загрузки сайта? При том, что LCP и CLS непосредственно относятся к параметрам отрисовки и верстки страницы
Что может тормозить рендеринг на стороне сервера?
Официальная справка Google Page Speed гласит о том, что на время отклика сервера в WordPress влияют темы и плагины. Если точнее, то их CSS, HTML, JS-код. Но как точно узнать, что именно из всей плеяды установленных дополнений так сильно тормозит прорисовку? В этом поможет режим разработчика в Google Chrome. Запускаем браузер, нажимаем F12. Переходим в открывшемся окне на вкладку Network (чуть ниже должно стоять All). Теперь зайдите на страницу вашего сайта — на вкладке Network отобразятся все элементы и время их выполнения
Смотрим на последний столбик Watterfall: какой-то запрос обрабатывается целых 19(!) секунд. Об этом свидетельствует метрика TTFB — time to first byte, т.е. время, которое проходит от запроса пользователя, до начала отдачи страницы сервером. Получение первого TCP пакета с сервера в качестве ответа – является именно получение первого байта.
Как уменьшить TTFB?
Время TTFB включает в себя доставку пакетов до пользователя и генерацию страницы. Первое можно решить с помощью CDN (см. следующий пункт). Про генерацию страницы мы написали выше — это темы, плагины, скрипты, база данных. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером.
Проблема здесь в том, что со своей стороны (пользовательской) что-либо сделать представляется мало возможным, кроме оптимизации темы и плагинов. TTFB может проседать даже из-за таких файлов как wp-login.php, favicon.ico или даже из-за админки (wp-admin/admin-ajax.php). В целом, советы по уменьшению этого времени выглядят так:
- Использование CDN для изображений, скриптов и т.д. (об этом ниже)
- Поменять хостинг или улучшить тарифный план на текущем. Возможно, ваш веб-сервер не успевает обрабатывать запросы, после чего они встают «в очередь». Если они не получат ответ во время, то сервер выдаст ошибку 504 gateway timeout. Попросите своего хостера добавить вам оперативной памяти и увеличить количество процессов httpd (если используется Apache)
- Использовать кеширование (см. пункт 7. Задайте правила эффективного использования кеша для статических объектов)
- Приведите в порядок базу данных (для WP есть соответствующие плагины)
- Если в качестве веб-сервера используется ngnix, то попробуйте увеличить время ожидания при проксировании: для изменения времени ожидания в конфиг надо добавить следующие параметры в файле /etc/nginx/conf.d/timeout.conf:
proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;
Также рекомендуется увеличить max_execution_time в php.ini:
max_execution_time 300
Тесты, где можно проверить скорость параметра TTFB:
https://webpagetest.org/
https://gf.dev/ttfb-test
https://kinsta.com/blog/ttfb/
Проблема с файлом admin-ajax.php
Если у вас проседает параметр на файле admin-ajax.php, то это тоже признак того, что какой-то плагин работает некорректно. Причём этот файл всё равно загружается вместе с остальным контентом, даже если вы не авторизованы. Фактически, советы будут те же, что и описаны выше. Но есть еще один лайфхак. Отчасти проблему может решить плагин Heartbeat control, который контролирует частоты AJAX запросов из браузера для админки, который генерирует большое количество вызовов PHP.
Как в итоге увеличить скорость?
Чтобы окончательно решить проблему и с кэшированием, и с защитой, и с временем отклика сервера, рекомендуем использовать сервис Cloudflare. Это специальный прокси-сервер (reverse proxy, если точнее) через который пойдет трафик с сайта. CloudFlare загружается вдвое быстрее, потребляет на 60% меньше трафика, получает на 65% меньше нагрузки на сервер и при этом является более защищенным. Работает это всё через платформу Content Delivery Network (CDN) — это сетевая инфраструктура, позволяющая оптимизировать передачу данных до конечного пользователя. В сети CloudFlare хранятся копии статических файлов в географически близких к веб-посетителям местах, что означает быструю их загрузку. CloudFlare кэширует такие ресурсы, как CSS, JavaScript и изображения.
Для регистрации в сервисе необходимо пройти по ссылке Sign Up на главной странице сервиса (https://www.cloudflare.com/)
Вводим данные для аккаунта:
Вводим URL сайта:
Выбираем бесплатный тарифный план
Дальше потребуется изменить корневые DNS. Нас интересуют те, которые
Для этого убедитесь, что в столбце Status напротив записей типа A и/или AAAA с адресом сайта и www отображается оранжевое облачко. Остальные облачка должны быть серыми. Нажмите кнопку Continue для перехода к следующему шагу.
DNS меняется у вашего регистратора. В NIC.RU это делается в панели управления в категории Услуги — Мои домены.
В карточке сайта в пункте DNS-серверы нажимайте на кнопку «Изменить»
Указываем два DNS-сервера, которые нам предлагает Cloudflare (Nameserver 1 и Namserver 2)
Выглядеть в панели регистратора это будет так:
После того, как вы поменяли DNS в вашем регистраторе, для закрепления результата можно установить плагин на WordPress
Чтобы плагин заработал, необходимо получить API Token в Clouflare
Настройки, которые выставлены сервисом, оставляем без изменений
Копируем ключ и вставляем в соответствующее поле в плагине
9. Итоги нашей оптимизации:
Выполнения всех рекомендаций дало нам +33 очка Google Speed. Это немного, но чем мы пожертвовали? Из серьёзных «потерь» только виджет Инстаграма, который действительно сильно тормозил весь процесс рендеринга. Остальной функционал сайта остался нетронутым, да и времени нам потребовалось совсем мало, благо всю работу за нас сделали плагины. Конечно, этот результат не идеален, тем более в нём не учитывается возможности вашего хостинга (если вы экономите на нём, то и высокой скорости ждать не приходится), да и для хайлоада WordPress вряд ли можно рекомендовать. Не учитываются многие встроенные настройки для шаблонов (тем), которые и без этого стараются делать максимально оптимизированными, количество сторонних сервисов — комментарии (Disqus), чат боты (JivoSite) и так далее.
Для улучшения результата можно так же отключить автопроигрывание gif-анимации и/или видеофайлов (такие настройки так же есть в настройках темы) и другие функции из серии nice-to-have (украшательства), можно убрать все featured-изображения, сосредоточив внимание на текстовом контенте. Однако, стоит ли превращать блог в унылый HTML-гроб, ради нескольких поинтов Page Speed — это большой вопрос.
Как вам статья?
Один из пунктов оптимизации является новый формат графики WebP. Сам формат способен сжимать до 60% картинки без заметной потери качества. А если на странице этих картинок много, это сильно сокращает загрузку сайта. Вот только вручную конвертировать все свои картинки сайта это не удобно, еще ведь нужно и в коде править что бы в разных браузерах открывались поддерживаемые форматы. Собственно ранее я так и поступал, но потом набрел на хостинг провайдера, как оказалось там все это автоматизированно. Закачиваешь картинку, сервер ее конвертирует на лету, кладет в специальную папку. Когда браузер посетителя запрашивает ее, если он поддерживает этот формат ему отдается webp, иначе оригинал. Самое главное не нужно ни чего делать руками и лезть в код.
Очень интересная статья. Но все что я смогла сделать это установить и настроить плагин оптимизации. Увидела в хроме неиспользуемый код CSS, и что теперь с ним делать понятия не имею. Думаю самой лучше в код не залазить.
Почему-то после выполнения п.7. Задайте правила эффективного использования кеша для статических объектов и добавления кода в файл .htaccess, меня выкинуло из админки. Внутренняя ошибка сервера (или что-то такое). Удалила код и все вернулось.
Светлана, извините за глупый вопрос, но вы не затёрли там всё остальное, когда вставляли код?
Потому что корявый чел эту статью писал, код такой надо вставлять:
# BEGIN EXPIRES
ExpiresActive On
ExpiresDefault «access plus 6 month»
ExpiresByType text/css «access plus 6 month»
ExpiresByType text/plain «access plus 6 month»
ExpiresByType image/gif «access plus 6 month»
ExpiresByType image/png «access plus 6 month»
ExpiresByType image/jpeg «access plus 6 month»
ExpiresByType application/x-javascript «access plus 6 month»
ExpiresByType application/javascript «access plus 6 month»
ExpiresByType application/x-icon «access plus 6 month»
# END EXPIRES
Но и он Вам не поможет,ибо не работает этот способ добавления в Хтасесс кода. Настройки кеширования задаются как я понял у хостинга. И им надо писать в ТП.
185399 739498The article posted was quite informative and valuable. You men and women are doing a terrific job. Keep going. 225470
524443 962910really good post, i surely really like this internet site, keep on it 263667
579239 958548Hi there, just became alert to your blog by means of Google, and discovered that its truly informative. Im gonna watch out for brussels. Ill be grateful if you continue this in future. A great deal of people will probably be benefited from your writing. Cheers! 838673
928621 363517Aw, i thought this was quite a very good post. In concept I would like to devote writing such as this moreover — spending time and actual effort to produce a great article but exactly what do I say I procrastinate alot by no indicates manage to get something done. 669036