Оптимизация WordPress

Майор

Premium
Premium
Регистрация
04.09.14
Сообщения
2.954
Реакции
2.025
Баллы
113
Всем известно, что скорость страницы важна. Это подтвержденный фактор ранжирования Google, который влияет на поведение пользователей, и может иметь прямое влияние на вашу прибыль. Медленные сайты на WordPress – это распространенная проблема.

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

До оптимизации:
1.png



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

До оптимизации:
2.png

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

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

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

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

ВАЖНО

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы не используете 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.
13.png

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

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

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

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

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

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

Предположим, что ваш код выглядит так:
HTML:
<html>
<head>
<script type = ”text / javascript” src = ”somefile.js”> </script>
<link rel = ”stylesheet” href = ”/ style.css”>
</head>
<body>
Content
</body>
</html>
Согласно иерархии в этом коде, файл JavaScript должен загружаться первым. Но, в данном случае, файл CSS более важен, чем код JavaScript. Самый простой способ решить эту проблему – добавить еще одну строку кода, например:
HTML:
<link rel = "preload" href = "/ style.css" as = "style">
Это покажет браузерам приоритет файла CSS перед файлом JavaScript, независимо от иерархии.

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

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

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

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

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

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

Результаты

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

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

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

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

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

Послесловие

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

Взято с https://www.maultalk.com/ipb.html?s=&showtopic=354654&view=findpost&p=2801207
 
Сверху Снизу