Как ускорить загрузку сайта на WordPress. Google PageSpeed Insights

Приветствую! В моей статье о показателе отказов на сайте были рассмотрены причины, по которым посетители могут покинуть ваш блог. Одна из главных – это низкая скорость загрузки страниц ресурса. Сегодня мы детально разберем различные способы того, как предотвратить эту проблему и увеличить скорость загрузки сайта на WordPress. Также узнаем, как сервис Google PageSpeed Insights может помочь оптимизировать работу вашего блога. 

Приглашаю своих читателей отправиться в йога-поход, который буду вести я на Кавказе. Мужчинам приятный бонус! Подробнее по ссылке.

Содержание:

• Как ускорить работу сайта на WordPress: пошаговая инструкция.
• PageSpeed Insights – рекомендации по улучшению скорости сайта от Google.

Методы ускорения работы блога

Редактируем файл .htaccess

Находим в корне сайта файл .htaccess и открываем для редактирования. Здесь мы добавим команды, которые снизят нагрузку на сервер и ускорят загрузку в WordPress.

Рекомендуется указать кэширование для отдельных объектов вашего ресурса. Для этого вставляем следующий код в конце файла, но перед «# ENDWordepress»:

1
2
3
4

# сжатие text, html, javascript, css, xml:
<ifModulemod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Затем добавляем еще:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# кеш браузера
<ifModulemod_expires.c>
ExpiresActiveOn
#по умолчанию кеш в 5 секунд
ExpiresDefault "accessplus 5 seconds"
# Включаем кэширование изображений и флэш на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование css, javascript и текстовых файлов на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кэширование html и htm файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

Теперь кэширование указанных в коде объектов (изображений, css, javascriptфайлов) будет происходить на стороне браузера, и ему не придется загружать их всякий раз, когда к ним обращается пользователь.

Включим gzip сжатие файлов. Это специальный сжатый вид HTML-страниц для браузеров.Таким способом сервер каждый раз архивирует соответствующие текстовые файлы, передает их на ваш компьютер, а браузер при получении автоматически их распаковывает. Gzip работает только с  текстом. Для включения сжатия поместим необходимый код в файл .htaccess:

1
2
3
4
5
6
7
8
9

<ifModulemod_gzip.c> mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.*
</ifModule>

После этого количество траффика, передаваемого браузеру, значительно уменьшится.

Дополнительно вы можете запретить загрузку изображений с вашего сайта на других ресурсах. Такое случается, когда вместе с информацией с вашего блога копируются и картинки, без изменения их адреса. И когда на сторонних сайтах загружаются картинки, находящиеся на вашем хостинге, на него увеличивается нагрузка. Чтобы предотвратить эту проблему, вставим следующий код:

1
2
3
4
5
6
7
8
9
10

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https://(.+.)?yandex.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?undsoft.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?yandex.net/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?mail.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?poisk.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?ИМЯВАШЕГОСАЙТА.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^$ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]

Обратите внимание: вместо фразы «ИМЯ ВАШЕГО САЙТА», следует указать название вашего домена.

Используем плагины кэширования

Следующий эффективный способ ускорить WordPress блог – воспользоваться плагином кэширования. После того, как посетитель заходит на сайт, CMS формирует из отдельных частей PHP-кода, на котором он написан, целостную HTML-страницу и передает её браузеру пользователя. Кэширование позволяет избежать необходимости при каждом запросе снова проделывать эту работу и тем самым снижает нагрузку на сервер. После активации плагина сгенерированная копия страницы будет оставаться на хостинге ресурса в специальной папке. И при следующем обращении к этой странице, будет загружаться сохраненная копия.

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

Оптимизируем базу данных

Большое влияние на работу сайта оказывает и база данных. При каждом редактировании постов, WordPress создает ревизии записей, которые сохраняются. Помимо этого, в базе данных накапливаются спам, комментарии и содержимое корзины. Со временем объем мусорных данных растет и тормозит загрузку страниц. Чтобы очистить базу данных и ускорить WordPress-блог, воспользуйтесь специальным плагином. Для этой цели отлично подойдет WP— Optimize, работа с которым описана в материале об оптимизации базы данных.

Сжимаем изображения

Убедитесь, что вы используете в своем блоге файлы изображений с оптимальным сочетанием «размер – качество». Для его достижения можно воспользоваться опцией Photoshop – «SaveForWeb» («Сохранить для Web»).

Файлы .png имеют большой вес и замедляют загрузку. Используйте этот формат только для небольшой графики и картинок с прозрачным фоном. В остальных случаях больше подойдет расширение .jpg.

Если вы хотите автоматизировать процесс обработки изображений на вашем сайте, Вордпресс предоставляет возможность выбрать один из соответствующих плагинов. Среди самых популярных – WP— Smush.

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

Для сжатия уже имеющихся картинок воспользуемся возможностью пакетной обработки. Для этого перейдем в «Медиафайлы»- «WPSmush». На открывшейся странице сразу после блока настроек («Settings») следует блок «Smushinbulk». Нажав кнопку «BulkSmushNow», мы запускаем процесс сжатия всех изображений. Также можно воспользоваться ссылкой на «Библиотеку файлов», если мы хотим оптимизировать отдельные изображения.

Оптимизируем код

Следующий способ ускорить сайт на WordPress– сжать HTML и скрипты. Воспользуемся плагином Autoptimize.

Плагин объединяет все файлы css-стилей и js-скриптов в один файл – с расширением .cssили .js соответственно. Сохраняет их на сервере и размещает ссылки на них в HTML-документе.  А сам HTML-код очищает от лишних пробелов и переносов строк.  На странице настроек Autoptimize мы просто отмечаем галочками нужные нам параметры для оптимизации.

Создаём мобильную версию сайта

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

Дополнительные рекомендации по ускорению работы сайта:

1. Деактивируйте и удалите плагины, которыми вы не пользуетесь. Сведите их количество к 10-15. Подберите только самые необходимы плагины для Вордпресс.
2. Старайтесь использовать как можно меньше внешних скриптов и виджетов социальных сетей на вашем блоге.
3. Размещайте по возможности все скрипты перед закрывающим тегом </body>. Таким образом они буду загружаться после основного контента, что ускорит ваш сайт на WordPress.
4. Выберите качественный хостинг. От его технических характеристик зависит скорость и качество работы вашего ресурса.

Как работать с сервисом Google PageSpeed Insights

Page SpeedInsights – специальный инструмент от Google, анализирующий скорость загрузки страниц на десктопных и мобильных устройствах. Чтобы приступить к работе, перейдем по ссылке — https://developers.google.com/speed/pagespeed/insights/ и введем URL веб-страницы. Нажмем «Анализировать».

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

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