google pagespeed
1

Google PageSpeed Insights: как ускорить WordPress по данным показателям

Данная статья пойдет о том, как увеличить показатели Google PageSpeed Insights на WordPress. Расскажу с чего появилась решимость написать такую статью. Не так давно может дня 3-4 назад, один из заказчиков спросил смогу ли я сделать это и сколько будет стоять. Вообщем всё хорошо все рады, но я загнался этими показателями для себя, испробовал много достаточно способов (различные плагины, костыли, правки движка и тему), то что я расскажу в этой статье поможет большинству сайтов на WordPress (мне лично это помогло и я использовал эту фишку). Ну-с... Начнем!

 

Использовал я всё это на этом сайте (culabra.ru). Сайт стоит на Apache/2.2.15 (CentOS), версия php 7.0. Версия движка WordPress 4.7.2. 

Небольшое предисловие. На сайте стоял WP Super Cache (настроенный на php), выдавало 34 на мобильном и 45 на компьютере по Google PageSpeed Insights. Сменил настройки апачи и поменял настройки плагина на mod_rewrite, значения поднялись на 36 и 46.

Использовав правки что я даю ниже, вы повысите показатели Google PageSpeed Insight. Лично я повысил показатели до 64 на мобильном и 80 на компьютере.

 

Как ускорить WordPress по мнению Google PageSpeed Insight.

 

1. Включим кеширование на стороне браузера через файл .htaccess:

Для начала включим кеширование на стороне браузера (если оно не включено), я включил его с следующих строк в файл .htaccess:

# сжатие text, html, javascript, css, xml:
<ifModule mod_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>
 
# кеш браузера
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 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>

Напомню немного для тех кто забыл или не знает. Вставляем код что выше мы в файл .htaccess, он лежит в корне вашего сайта WordPress. Код мы вставляем после строки # END WordPress (при необходимости настройте время кеширования под себя).

 

Что мы этим сделаем? Мы включим кеширование наших страниц и файлов в браузере, что увеличит скорость работы сайта WordPress и уменьшит вес страницы и её вложений. Также это повысит наши показатели в Google PageSpeed Insights.

 

2. Оптимизируем картинки и изображения:

Теперь когда показатели поднялись, нам нужно продолжить оптимизировать наш сайт под себя. Вам наверняка нужно будет оптимизировать изображения и картинки сайта. Для этого можете воспользоваться программой Adobe PhotoShop. При сохранении картинки выберите там "Сохранить для web..." - и настройте под себя размер, качество и т.п.. Сохраняя так изображения для сайта, вы сэкономите очень весомое количество места, ведь так картинки будут весить меньше.

Кроме того, вы можете использовать более продвинутое средство для WordPress в виде плагина WP-Smush.it. Его кстати я тоже использую, вместо photoshop`а. Вы можете использовать их в связке. Расскажу немного о программе и что она делает. Программа может оптимизировать, а точнее сжимать ваши изображения без потери качества/с минимальными потерями качества. Также если вас не устроит то, что сделал плагин,то вы можете отменить это на странице "Медиафайлы".

 

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

Запись опубликована В категории: WordPress

Shnapik

Вебмастер с опытом ищет приют! Возьмите меня, а то меня рвут!

Один комментарий

  1. Не указал сразу, данные правки для .htaccess будут паботатьи на других движках, не только на вордпрессе. Так что пробуйте...

Добавить комментарий для Shnapik Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *