В то же время обычным делом является медленная загрузка сайтов на WordPress.
Ниже я привожу отчет о скорости загрузки моей страницы на мобильном устройстве с PageSpeed Insights.
Если запустить сканирование всего сайта в сервисе Site Audit от Ahrefs с указанием времени загрузки страниц, то увидим, что медленно загружается не только эта страница. Ни одна страница не загружается очень быстро. Среднее время загрузки составляет 570 мс.
А вот отчет по той же странице, но всего через 20 минут оптимизации скорости загрузки:
И остальные страницы в Site Audit:
Разница налицо. Результат в отчете PageSpeed Insights почти идеален. Все страницы грузятся довольно быстро.
В этом руководстве я продемонстрирую, как этого добился, описав несколько простых шагов.
- Избавьтесь от неиспользуемых плагинов
- Переключитесь на DNS-сервис Cloudflare
- Установите плагин кэширования
- Минифицируйте код
- Объедините файлы CSS и JavaScript
- Устраните ресурсы, блокирующие отображение
- Используйте отложенную загрузку изображений и видео
- Оптимизируйте шрифты Google
- Разрешите предварительную загрузку
- Используйте CDN
- Оптимизируйте изображения
Многие описанные далее типы оптимизации предусматривают использование платного плагина WPRocket для ускорения загрузки сайтов на WordPress. По возможности я указывал бесплатные варианты, но стоит отметить, что плагины могут конфликтовать между собой и вызывать проблемы. Прежде чем вносить любые изменения в действующий сайт, следует обязательно проверить, как плагины влияют на его работу, в промежуточной среде. Чтобы узнать, как настроить промежуточный сайт, пройдите по ссылке.
Если ваш сайт на WordPress не был создан совсем недавно, вполне вероятно, что вы установили целое множество плагинов, которые не использовали годами. Некоторые из них могут снижать скорость загрузки, а значит, прежде всего стоит отключить и удалить все ненужное.
Но делать это следует осторожно. Если не уверены, нужен ли вам какой-либо плагин, не трогайте его.
Сайты представляют собой файлы, размещенные на жестком диске (сервере), подключенном к интернету. Любое подключенное к интернету устройство имеет IP-адрес (например, 123.123.12.1).
IP-адреса сложно запоминать, поэтому доменные имена преобразовываются в IP-адреса при помощи службы DNS – системы доменных имен. Система работает по принципу телефонного справочника. Когда вы вводите имя домена в браузере, DNS осуществляет поиск IP-адреса.
Но вот в чем загвоздка: большинство людей пользуются бесплатными DNS-сервисами, предоставленными регистратором доменных имен. Как правило, эти сервисы работают довольно медленно.
Если это ваш случай, переключитесь на более быстрый DNS-сервис, например Cloudflare.
Для этой цели создайте бесплатную учетную запись Cloudflare. Нажмите Add a site (Добавить сайт), введите свое доменное имя и нажмите кнопку.
Выберите бесплатный план и нажмите Confirm plan (Подтвердить выбор плана).
Cloudflare предоставит возможность проверить настройки DNS, прежде чем продолжить. При отсутствии предупреждений можно продолжить.
Осталось только поменять местами серверы имен у регистратора доменного имени. Это действие по-разному выполняется разными регистраторами. Без колебаний обращайтесь за их поддержкой, если не уверены, что делать.
Если вы пользуетесь сервисом Google Domains, процесс выглядит следующим образом:
Кэширование – процесс временного хранения файлов, который обеспечивает эффективную их доставку посетителям.
Существует два типа кэширования:
- Кэширование в браузере: сохранение на жестком диске пользователя «типичных» файлов типа логотипов, чтобы не загружать их заново при повторном посещении сайта.
- Кэширование на сервере: сохранение полной «статической» версии страницы на сервере, чтобы не восстанавливать ее при каждом посещении.
Чтобы упростить кэширование, воспользуйтесь плагином WP Rocket. Приобретите, установите и включите плагин. По умолчанию включено базовое кэширование (на сервере и в браузере). Если ваш сайт имеет отзывчивый дизайн, перейдите к параметрам кэширования и установите флажок, чтобы включить кэширование для мобильных устройств.
Нужен бесплатный вариант? Попробуйте W3 Total Cache.
Минификация позволяет убрать из кода пробелы и комментарии, чтобы сократить размер файла. Чем меньше файлы, тем быстрее они загружаются.
Если используете плагин WPRocket, установите флажки, чтобы разрешить минификацию файлов CSS и JavaScript в настройках.
Если WPRocket не используется, установите и включите плагин Autoptimize и установите соответствующий флажок.
Главное, помните: прежде чем развертывать опцию на реально действующем сайте, необходимо протестировать ее работу в промежуточной среде. Часто минификация приводит к повреждению кода, особенно кода Javascript.
Большинство сайтов WordPress содержит множество файлов CSS и JavaScripts. Одни предназначены для тем, другие для плагинов. Вы также можете иметь пользовательские файлы.
Объединение этих файлов может ускорить загрузку, но это зависит от настроек вашего сервера.
- С HTTP/1.1 файлы CSS и JavaScript загружаются последовательно. Это значит, что сначала должен полностью загрузиться один файл и только после этого начнется загрузка следующего.
- С HTTP/2 файлы загружаются одновременно. Это значит, что одновременно могут начать загружаться несколько файлов CSS и JavaScript.
Если сервер использует протокол HTTP/1.1, при объединении файлов требуется загружать меньше файлов, а следовательно, скорость загрузки возрастает. Если используется протокол HTTP/2, объединение файлов вряд ли существенно изменит ситуацию, поскольку файлы и так загружаются одновременно.
Чтобы узнать, какую версию протокола использует ваш сайт, подключите свой домен к инструменту для тестирования скорости KeyCDN.
Если не поддерживается протокол HTTP/2, файлы CSS и JavaScript стоит объединить.
Для этого установите в настройках плагина WPRocket флажки Combine JavaScript files (Объединить файлы JavaScript) и Combine CSS files (Объединить файлы CSS).
В плагине Autoptimize есть два флажка для объединения файлов. Однако помните: иногда эти функции могут нарушить работу вашего сайта, поэтому дважды убедитесь, что после их включения все работает как следует. Также не забывайте заранее удалять кэш и проверять наличие изменений в окне анонимного просмотра. В противном случае изменения могут не отобразиться.
Отображение – это процесс преобразования кода в видимую веб-страницу.
Ключевое слово – «видимая», ведь чтобы быть видимой, странице не обязательно полностью загружаться.
По этой причине целесообразно в первую очередь загружать контент, видимый без прокрутки.
Сделать это можно, отложив загрузку некритических файлов CSS и JavaScript, необходимых для отображения контента ниже области, видимой без прокрутки. В WPRocket установите флажки Load JavaScript deferred (Отложить загрузку JavaScript) и Optimize CSS delivery (Оптимизировать отправку CSS).
Если WPRocket не используется, вам потребуется установить два плагина: Autoptimize и Async JavaScript.
В настройках Autoptimize установите флажок Inline and Defer CSS (Встроить и отложить загрузку CSS). После этого в настройках Async JavaScript нажмите Enable Async JavaScript (Включить Async JavaScript).
Если ранее вы сталкивались с проблемой «устранения ресурсов, блокирующих отображение», в PageSpeed Insights, как правило, это действие ее решает.
Функция отложенной загрузки ускоряет загрузку страницы за счет задержки загрузки изображений и видео, пока они не откроются на экране. В WordPress версии 5.5+ по умолчанию включена отложенная загрузка изображений, но не видео.
Если используется плагин WPRocket, решить эту проблему можно, установив флажок Enable for iframes and videos (Разрешить для встроенных фреймов и видео) в настройках отложенной загрузки.
Если WPRocket не используется, того же можно добиться, установив плагин Lazy Load for Videos.
Многие темы используют шрифты Google. Шрифты необходимо загружать с сервера Google при каждом посещении сайта. На это может уходить много времени, потому что серверу требуется отправлять HTTP-запросы, загружать CSS файл, а затем шрифт из указанного в таблице стилей места. Эти действия выполняются для каждого шрифта на странице.
Плагин WPRocket автоматически оптимизирует запросы шрифтов Google. Неплохим вариантом также является плагин Swap Google Fonts Display.
Предварительная загрузка позволяет определять особо важные ресурсы, чтобы браузер запомнил приоритет загрузки файлов.
Допустим, ваш код имеет следующий вид:
<html> <head> <script type=”text/javascript” src=”somefile.js”></script> <link rel=”stylesheet” href=”/style.css”> </head> <body> Content </body> </html>
Согласно этому коду, с учетом иерархии первым должен быть загружен файл JavaScript. Не идеальная очередность, ведь файл CSS почти наверняка более важен, чем код JavaScript.
Простейшим способом решить эту проблему будет добавление еще одной строки кода:
<link rel="preload" href="/style.css" as="style">
Браузер получит указание в первую очередь загружать файл CSS, а уже после – файл JavaScript независимо от иерархии.
Атрибуты предварительной загрузки можно добавить вручную, изменив код, однако это может запутать вас, если вы точно не знаете, что делать. Гораздо проще установить плагин WPRocket, выполняющий это действие автоматически.
Сети доставки контента (CDN) – это группы серверов, рассредоточенные по всему миру. Каждая группа хранит копии сайтов, благодаря чему пользователи быстрее подключаются при запросе страниц.
К примеру, ваш веб-сервер находится в Великобритании. Если ваш сайт посещает пользователь из США, а вы не используете CDN, то соединение между устройством пользователя и вашим сервером будет медленным. Если на сайт зашел пользователь из США и CDN используется, то устройство пользователя будет подключено к ближайшему серверу и соединение будет установлено быстрее.
Существует множество CNS-провайдеров. Все, что требуется, – выбрать одного из них, подключить в WPRocket и ввести CNAME.
Отложенная загрузка позволяет решить различные проблемы, связанные с отображением изображений, но не способствует загрузке изображений, видимых без прокрутки. Чем больше их размер, тем больше они замедляют загрузку.
Чтобы решить эту проблему, обеспечьте сжатие изображений при помощи плагина, например Shortpixel. Просто установите и включите плагин, перейдите к настройкам, введите API-ключ, нажмите Save and Go to Bulk Process (Сохранить и перейти к групповому процессу), а затем нажмите Restart optimizing (Перезапуск оптимизации).
Если качество изображений слишком низкое, откройте настройки и измените тип сжатия на Glossy (Лучшее качество) или Lossless (Без потери качества).
Результаты
Посмотрим, как оптимизация повлияла на скорость загрузки нашей страницы, при помощи нескольких популярных инструментов.
Можете ознакомиться с отчетами PageSpeed Insights для моего поста до и после оптимизации:
А это – данные GTMetrix:
Можно увидеть, что ранее страница и полностью загружалась за 5,9 секунды, ее размер составлял 1,89 МБ, а число запросов – 67. После оптимизации все три значения сократились. Размер страницы составляет 695 килобайт, время полной загрузки – 4 секунды, а количество запросов сократилось примерно на 50 %.
Если проверить все страницы при помощи сервиса Site Audit от Ahrefs, мы увидим, что в среднем показатели улучшились на 40 % и в 95 % случаев повысилась скорость загрузки.
Заключение
Все вышеперечисленные действия улучшили работу моего и других сайтов. В то же время, важно помнить, что ваша конфигурация WordPress будет другой. У вас может быть больше плагинов, более «тяжелая» тема, более медленный хостинг или же больше сторонних скриптов отслеживания – все это замедляет загрузку страниц вашего сайта.
Если скорость загрузки страниц после оптимизации все еще оставляет желать лучшего, вполне возможно, что на вашем сайте потребуется индивидуальная настройка. А значит, следует привлечь разработчика или специалиста по ускорению загрузки страниц, которые проведут более глубокий анализ.
Если вас интересует подробная информация по конкретным вопросам, ознакомьтесь с нашим полным руководством по ускорению загрузки страниц.
В руководстве пропущены важные моменты? Сообщите мне об этом в Twitter.
Перевела Кирик Наталья, владелец контент агентства WordFactory.ua
