Кейс: Оптимизация Wordpress под Google PageSpeed

Есть некоторый опыт оптимизации сайта на Wordpress под Google PageSpeed. Вот, решил поделиться. Вдруг будет кому-нибудь полезно.

Важный дисклаймер: оптимизация Wordpress под Google PageSpeed не всегда ведет к ускорению сайта и я не несу никакой ответственности за ваши действия со своим сайтом. А еще это не инструкция на все случаи жизни, а мой личный опыт.

Дальше идут пункты, по которым Google PageSpeed проверяет оптимизацию сайта и мои рекомендации по этому поводу.

1. Сократите CSS

Идем сюда http://cssminifier.com/, загружаем содержимое CSS файла, получаем сжатый вариант, загружаем на сервер. Повторяем со всеми CSS файлами не забывая сохранить не сжатый вариант для редактирования.

2. Сократите JavaScript

Идем сюда http://jscompress.com/, загружаем содержимое JS скрипта, получаем сжатый вариант, загружаем на сервер. Повторяем со всеми JS файлами не забывая сохранить не сжатый вариант на всякий случай.

3. Сократите HTML
Устанавливаем плагин WP-HTML-Compression https://wordpress.org/plugins/wp-html-compression/
Лично я не использую данный метод. Оно того не стоит. Тем более если на сайте установленна реклама Адсенс. Есть риск, что это может быть расцененно как изменения кода блоков.


4. Оптимизируйте изображения
Уже имеющиеся изображения можно оптимизировать под Linux при помощи команд

jpegoptim --all-progressive --strip-all ./*.jpg
optipng -strip all ./*.png

Более подробно о том, как это делается вот здесь /ru/forum/comment/14529684

Для оптимизации новых изображений в будущем установите плагин Compress PNG for WP https://wordpress.org/plugins/compress-png-for-wp/

Если хочется максимально крутой оптимизации изображений, даже лучше чем требует Google, то можно воспользоваться плагином ShortPixel Image Optimizer https://wordpress.org/plugins/shortpixel-image-optimiser/
Но, ShortPixel Image Optimizer оптимизирует бесплатно только 100 файлов в месяц, дальше нужно платить.

5. Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Установите плагин Async Javascript https://wordpress.org/plugins/async-javascript/
Или вручную добавьте атрибут async к вызовам ваших JS скриптов. Это решает вопрос только с JavaScript, замечание по CSS останется. Также нужно убедиться, что после добавления атрибута async все функции на сайте работают корректно.

6. Используйте кеш браузера
Добавляем вот такой код в .htaccess

<ifModule mod_expires.c>

ExpiresActive On

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"

# Cache other content types (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

</ifModule>

7. Включите сжатие
Решается установкой плагина W3 Total Cache https://wordpress.org/plugins/w3-total-cache/

8. Не используйте переадресацию с целевой страницы
С этим не должно быть проблем на Wordpress.

9. Оптимизируйте видимое содержание
У меня не было с этим проблем. Если что можно почитать справку Гугла https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

10. Сократите время ответа сервера
Установите плагин W3 Total Cache https://wordpress.org/plugins/w3-total-cache/
Проведите оптимизацию работы Wordpress из общих соображений. Например, избавьтесь от лишних плагинов. Возможно нужно будет сменить хостинг.

В итоге, сделав все выше описанное я получил 93/100 по оценке "Для компьютеров" и 75/100 по оценке "Для мобильных".