Включаем кеш браузера для Google PageSpeed

Раздел: DataLife Engine » Полезные статьи для DLE
Включаем кеш браузера для Google PageSpeed
Представляем полезную статью «Включаем кеш браузера для Google PageSpeed», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed Insights. Каждый владелец сайта сталкивался с проблемой сложности закешировать js скрипты сторонних DLE сайтов.

Это не такой важный показатель для оптимизации, по сути происходит перенос из шапки сайта CSS и JS элементы в футер, к тому, если посмотреть на ресурсы Google с этим пунктом у них проблемы :)

Если вам всё таки захочется оптимизировать сайт или вашим клиентам методом кеширования сторонних скриптов, к примеру. наблюдать красивую цифру на счетчике в анализаторе, то достаточно выполнить действия ниже на которые уйдет несколько минут.

Кеш браузера своих элементов

Делаем кеш для разных скриптов, пример взят с блога Devaka ru (на момент написания статьи)
К примеру :
/assets/copyright.min.js (не указан срок действия)
/assets/i/566.jpg (не указан срок действия)
/assets/i/icons.png (не указан срок действия)
/i/postcomm-left.png (не указан срок действия)
/i/postcomm-right.png (не указан срок действия)

Включаем кеш браузера для Google PageSpeed

Исправляем первую проблему, заходим в файл .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 1 days"
 
# Включаем кэширование изображений и флэш на месяц
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"
 
# Нестандартные шрифты сайта 
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</ifModule>


Далее выполняем проверку вашей площадки в инструменте Page Speed и если все хорошо, то останутся ссылки на яндекс.метрику, аналитику, социальные сети и т.д.

Примеры сторонних скриптов

Если в первом шаге, все сделали верно, должны увидеть примерно такой список:

Используйте кеш браузера для следующих ресурсов
Внимание! У вас нет прав для просмотра скрытого текста.

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

Кеш сторонних элементов

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

Повлиять на время кеша стороннего ресурса никак нельзя, но можно сделать на своем веб-проекте
<a href="http://www.dle9.com/">dle</a>
Самый правильных ход в этой ситуации, скачивать автоматически свежие скрипты метрики, аналитики и т.д. к себе на сайт с помощью крона (скрипт присутствует)

Давайте теперь по порядку!
Шаг 1. Скопируем список всех скриптов на которые указывает Google PageSpeed в блокнот или прямо с браузера.
Шаг 2. Создайте файл на хостинге с расширением php и вставляем в него следующий код:

Внимание! У вас нет прав для просмотра скрытого текста.


В коде для примера 3, но вы можете создать сколько нужно пунктов, просто копируйте и добавляйте ниже или удалите лишние.
Включаем кеш браузера для Google PageSpeed

В этой строке меняем 3 значение:
Используйте кеш браузера для Google PageSpeed
1. Скрипт который будем закачивать к себе на сайт

Внимание! У вас нет прав для просмотра скрытого текста.


2. Путь куда сохранять файл:

realpath("./js")


В этом примере это папка js, т.е. точный путь будет www.dle9.com/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)

3. Имя скрипта, если с расширением .js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.

/watch.js


Шаг 3. Заливаем отредактированный файл на сервер

И переходим по прямой ссылке, например http://www.dle9.com/downloadjs.php, если все сделали правильно, в папке JS (или какую вы указали в файле), будет лежать нужный файл/файлы.
Используем кеш браузера для Google PageSpeed

Шаг 4. Ставим файл на крон для автоматического обновления файлов

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

Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а также указываем время раз в час/сутки или любое другое время.

wget -q -O - /dev/null http://www.dle9.com/downloadjs.php >/dev/null 2>&1


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

Шаг 5. Меняем путь к JS в счетчике или скрипте

Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например http://www.dle9.com/js/watch.js

Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.

Скачать " включаем кеш браузера для Google PageSpeed " инструкцию в архиве
Представляем полезную статью «Включаем кеш браузера для Google PageSpeed», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed вы найдете всё лучшее у нас форумы, хаки, модули, шаблоны.
  • 60
Рубрика: Все для DLE » Полезные статьи
Ранее » Разработка и создание сайтов под ключ« Далее Чек-лист внутренней оптимизации интернет площадки
Добавление комментарияОставить комментарий
  • № :1
  • 19 сентября 2017 12:54
Далее выполняем проверку вашей площадки в инструменте Page Speed и если все хорошо


Что делать если данный код никак не изменил результат от PageSpeed Insights

Спасибо за ответ!