Всем известно, что скорость страницы важна. Это подтвержденный фактор ранжирования Google, который влияет на поведение пользователей, и может иметь прямое влияние на вашу прибыль. Медленные сайты на WordPress – это распространенная проблема.

Вот оценка одной из страниц сайта www.theseoproject.org в PageSpeed Insights для мобильных устройств.

До оптимизации:



При загрузке сайта в Ahrefs Site Audit, можно увидеть, что это не единственная страница, которая загружается медленно. Среднее время загрузки 570 мс.

До оптимизации:



Вот та же самая страница примерно через 20 минут после оптимизации скорости страницы:



И остальные страницы после оптимизации:



Разница значительная. Оценка PageSpeed Insights почти идеальна, и каждая страница загружается довольно быстро.

В этой статье я расскажу, как добиться таких результатов (ребят, это перевод статьи, если что).

ВАЖНО

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

Шаг 1. Удалите неиспользуемые плагины

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

Шаг 2. Измените DNS-провайдера на Cloudflare

Большинство людей используют бесплатные DNS своего доменного регистратора, которые обычно работают медленно. Для ускорения работы можно воспользоваться бесплатным DNS-провайдером – Cloudflare.

Для этого создайте учетную запись в Cloudflare. Введите имя своего домена и нажмите кнопку «Добавить сайт».



Выберите бесплатный тариф, затем нажмите «Подтвердить тариф».

Так можно будет просмотреть настройки DNS, прежде чем продолжить.

Теперь все, что осталось сделать, это изменить Name Servers домена. У разных регистраторов это делается по-разному, поэтому не стесняйтесь обращаться к ним за помощью, если не знаете, как это сделать.
Вот как выглядит данный процесс в Google Domains:



Шаг 3. Установите плагин кеширования

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

Есть два основных типа:

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

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



Также есть бесплатный вариант - W3 Total Cache.

Шаг 4. Минифицируйте код

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



Если вы используете WPRocket, установите в настройках галочки, чтобы уменьшить размеры файлов CSS и JavaScript.



Если вы не используете WPRocket, установите и активируйте Autoptimize и сделайте то же самое.

Шаг 5. Объедините файлы CSS и JavaScript

Большинство сайтов на WordPress имеют несколько файлов CSS и JavaScripts. Одни предназначены для изображений, другие – для плагинов. У вас также могут быть такие файлы. Их объединение может ускорить процесс загрузки, но все зависит от настроек вашего сервера.

• С HTTP /1.1 CSS и JavaScript файлы загружаются последовательно.
• С HTTP / 2 файлы загружаются одновременно.

Если ваш сервер использует HTTP/1.1, объединение файлов ускорит процесс потому, что нужно будет загружать меньше файлов. Если он использует HTTP/ 2, то объединение файлов не всегда будет приводить к увеличению скорости, так как файлы все равно будут загружаться одновременно.

Чтобы узнать, какую версию использует ваш сайт, введите свой домен в тестер Key CDN.



Если HTTP / 2 не поддерживается, то файлы CSS и JavaScript стоит объединить.

Для этого в WPRocket установите в настройках галочки «Объединить файлы JavaScript» и «Объединить файлы CSS».



Шаг 6. Удалите ресурсы, которые блокируют рендеринг

Рендеринг – это процесс превращения кода в видимую веб-страницу. Поэтому контент, находящийся в верхней части сайта, должен загружаться первым. А для контента в нижней части сайта, можно отложить загрузку некритических файлов CSS и JavaScript на более позднее время. Установите в WPRocket галочки «Загрузить отложенный JavaScript» и «Оптимизировать CSS delivery».



Если вы не используете WPRocket, вам понадобятся два плагина: Autoptimize и Async JavaScript.

В настройках Autoptimize установите галочку «Inline and Defer CSS». Затем в настройках Async JavaScript нажмите «Enable Async JavaScript.

Шаг 7. Ленивая загрузка изображений и видео

Ленивая загрузка увеличивает скорость страницы, откладывая загрузку изображений и видео до тех пор, пока они не появятся на экране. Если вы используете WordPress 5.5+, то для изображений уже включена отложенная загрузка по умолчанию.

Если вы используете WPRocket, установите галочку «Enable for iframes and videos» в настройках LazyLoad.



Если вы не используете WPRocket, то воспользуйтесь бесплатным плагином Lazy Load for Videos.

Шаг 8. Оптимизируйте шрифты

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

Если вы используете WPRocket, он автоматически оптимизирует Google Шрифты. Также для этих целей отлично подойдет Swap Google Fonts Display.

Шаг 9. Установите приоритет загрузки файлов

Приоритет покажет браузерам какой файл необходимо загружать первым.

Предположим, что ваш код выглядит так:


Согласно иерархии в этом коде, файл JavaScript должен загружаться первым. Но, в данном случае, файл CSS более важен, чем код JavaScript. Самый простой способ решить эту проблему – добавить еще одну строку кода, например:


Это покажет браузерам приоритет файла CSS перед файлом JavaScript, независимо от иерархии.

Шаг 10. Используйте CDN

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

Предположим, что сервер вашего хостинга находится в Великобритании. Если кто-то заходит на ваш сайт из США, и вы не используете CDN, соединение между его устройством и вашим сервером будет медленным. В случае использования CDN, устройство пользователя из США подключится к ближайшему серверу. Это увеличит скорость перехода на ваш сайт.

Шаг 11. Оптимизируйте свои изображения

Ленивая загрузка решает многие проблемы, связанные с изображениями, но она не помогает изображениям в верхней части экрана. Чем больше их размер, тем медленнее загружается сайт.
Для сжатия изображений можно воспользоваться плагином Shortpixel. Установите его, активируйте, перейдите к настройкам, введите свой ключ API, нажмите «Сохранить и перейти к массовому процессу», затем нажмите «Перезапустить оптимизацию».



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



Результаты

Вот результаты сканирования сервисом Google PageSpeed Insights до и после оптимизации сайта:
До оптимизации:



После оптимизации:



А вот то же самое от GTMetrix до оптимизации:



После оптимизации:



Можно увидеть, что ранее страница полностью загружалась за 5,9 секунд с размером страницы 1,89 МБ. После оптимизации все показатели снизились. Теперь размер страницы составляет 695 килобайт, время полной загрузки – 4 секунды.

Послесловие

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