Разгоняем WordPress! Google PageSpeed Insights 100 из 100

Google PageSpeed Insights – это сервис от “корпорации Добра”, который позволяет оценить привлекательность вашего сайта для мобильных устройств, а также его оптимизацию в плане скорости загрузки. В один прекрасный день я задался целью сделать блог, который набрал бы в нем 100 баллов из 100 возможных. Для поиска оптимальных решений этой задачи я потратил все выходные.

На какие параметры PageSpeed Insights обращает внимание больше всего?

Скорость отклика вашего сервера – если ваш блог будет находится на shared хостинге с кучей других сайтов – соседей, соответственно работать он будет медленней, чем отдельный VDS. Если сайт коммерческий, имеет смысл пользоваться именно выделенным сервером.

Наличие мобильной версии – с недавнего времени Google и Яндекс ранжируют сайты в мобильной выдаче в зависимости от степени удобства последних для просмотра на мобильных устройствах. Если ваш сайт не имеет адаптивного дизайна, будьте готовы, что он будет понижен в выдачи для устройств с небольшими экранами. Кстати, согласно статистики, сейчас 30-40% пользователей интернета сидят именно с мобильных устройств.

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

Это основные моменты.

Сервис Google PageSpeed Insights находится по этой ссылке. Вводим адрес сайта в единственное поле и жмем “Анализировать”.

Почему именно WordPress?

Этот движок мне кажется самой удобной CMS для блогов, тем более, что ее функционал можно значительно расширить за счет плагинов. С Вордпрессом я работаю достаточно давно, так что мне он нравится именно своей простотой.

Итак, начнем:

Хостинг

В качестве хостинга я использовал VDS от DigitalOcean с установленной на нем Ubuntu 14.04. В качестве Web-сервера Apache. Территориально сервер расположен в Нью-Йорке.

Объяснять, как устанавливать веб-сервер на Ubuntu я не вижу смысла. Можно создать готовый дроплет с LAMP. И установить на него панель управления сервером Webmin. Далее в настройках Апача обязательно включаем mod_rewrite и mod_expires

Тема для WordPress

Чем более навороченную тему для WordPress вы выберете, тем больше она будет отъедать баллов от итогового результата, поэтому 100 из 100 вы вряд-ли наберете. Для своего блога я выбрал самую простую тему, она так и называется “Start”. Адаптивный дизайн и наличие мобильной версии – вот и все, что мне было нужно.

Плагины, оптимизирующие скорость блога

Вот эти плагины я ставил, чтобы увеличить параметры Google PageSpeed Insights:

• Autoptimize – уменьшает размер CSS и HTML
• Async Javascript – плагин, с помощью которого можно меня порядок загрузки скриптов, делая его асинхронным, что значительно может ускорить блог
• WP Super Cache – кеширующий плагин, который значительно ускоряет работу блога.

Помимо этого, старайтесь загружать на сайт только оптимизированные и сжатые изображения. Обычно, если файл имеет немного цветов, то можно использовать формат png, если цветовая гамма насыщенная, то лучше пожатый jpg. Перед загрузкой картинки на сервер я обязательно уменьшаю его размер с помощью сервиса kracken.io

Настройки сервера

В настройках Апача обязательно нужно включить директивы mod_rewrite и mod_expires. Первая разрешает использование ЧПУ ссылок в блоге (без них не работает WP Super Cache), а вторая позволяет через .htaccess включать кэширование сайта в браузере посетителя. Google обращает на это особое внимание. 

Как включить поддержку .htaccess

В Apache по умолчанию отключена поддержка файлов .htaccess. Включить ее можно отредактировав файл /etc/apache2/apache2.conf,

а именно там есть следующий участок кода: (надо сменить None на All)

Directory /var/www/>
 Options Indexes FollowSymLinks
 AllowOverride All (по умолчанию стоит None)
 Require all granted
</Directory>

Содержимое .htaccess

В корне сайта создаем файл .htaccess (без расширения) и вносим в него следующее содержание.

# Включаем поддержку ЧПУ ссылок.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

#Кэширование в браузере на стороне пользователя
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/svg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>
 
# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|svg)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>
 
#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE
<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

Именно после этих манипуляций, один из моих блогов  (не этот) показал оценку в PageSpeed Insights в 100 баллов из 100 возможных. Я ни в коем случае, не утверждаю, что после этого позиции вашего сайта взлетят! По крайней мере, это только 1 из 200 факторов ранжирования Google. Но зато я точно теперь знаю, что хотя бы одно условие я выполнил! )