PageSpeed Insights. Используйте кеш браузера


Любой сайт, в том числе созданный и работающий на движке Вордпресс, должен загружаться быстро. Это нужно для:

  • удержания пользователей на стадии загрузки сайта;
  • комфортной работы людей с вашим ресурсом.

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

Проверяем скорость загрузки сайта

Для начала нам нужно выяснить, насколько наш сайт быстр в плане загрузки: как на компьютерах, так и мобильных устройствах. Я предпочитаю пользоваться PageSpeed Insights от Google. Но есть и другие сервисы, например, этот.

PageSpeed Insights от Google. 

Как видите, мой сайт необходимо ускорить.

Ускорение сайта через кеширование

При прохождении теста в PageSpeed Insights, может быть дана рекомендация “Используйте кеш браузера“.

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

Что это значит? Ваш сайт будет загружаться быстрее за счет обращения к локальным ресурсам, а не сетевым.

Вариант 1

Чтобы выполнить рекомендацию “Используйте кеш браузера”, необходимо добавить в файл .htaccess (лежит в корневой директории вашего сайта на сервере) следующий код:

# Включаем кэш в браузерах посетителей
<ifModule mod_headers.c>
    # Все html и htm файлы будут храниться в кэше браузера один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_end"></span>/FilesMatch>
    # Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    # Все флэш файлы и изображения будут храниться в кэше браузера один месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    # Отключаем кеширование php и других служебных файлов
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>

Пройдите тест PageSpeed Insights заново, результат должен улучшиться.

Вариант 2

В файл .htaccess:

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

Включаем Gzip-сжатие файлов

Gzip-сжатие для файлов CSS, JS, HTML, CSS, JS, HTML включаем также через внесение кода в файл .htaccess:

<ifModule mod_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_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Вновь проходим тест PageSpeed Insights, оцениваем результат.

Плагин WP Super Cache

Если Вам так и не удалось ускорить ваш сайт, задействуем еще один вариант, на этот раз железный: устанавливаем и активируем плагин WP Super Cache.

Плагин WP Super Cache

Уверен, что результат вы получите хороший. У меня получилось так:

Тест в PageSpeed Insights

Но ускорить загрузку сайта на мобильных устройствах нам не удалось. Посоветуйте, что можно сделать?

Почитайте также “PageSpeed Insights. Как удалить код JavaScript

 





Добавить комментарий

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.