Рекомендации PageSpeed — используйте кэш браузера для ускорения сайта (код плюс плагин)

Дата: / Автор поста:


Читая данную статью вы узнаете про то как устранить пункт: используйте кэш браузера от нашего друга гула по PageSpeed Insights. Рассматривать проблему будем на примере одного знакомого мне блога.

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

  1. Устраняем проблему «не указан срок действия» и добавляем нужные директивы в .htaccess.
  2. Ставим плагин для кэширования граватаров NIX Gravatar Cache.
  3. Плагин для кэширования всего сайта.

Правильно используем кэш браузера и устраняем проблему «не указан срок действия»

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

Сейчас рассмотрим три шага, которые состоят в следующем:

  • Скачать .htaccess.
  • Внести директивы в него.
  • Разборка значений строчек.

И вот вам первый совет. По возможности, никогда не используйте внешние ресурсы на своих сайтах, это очень тормозит. Так как у большинства не собственные сервера, то эта проблема актуальна. У меня стояла форма обратной связи от одного портала, но я ее убрал, js код тормозил страницу, решать вам.

Переходим к рамке 2, тут указаны замечания для следующих ресурсов, в основном это css, js и изображения. Разберемся, что это за срок действия. Дело в том, когда посетитель заходит на сайт, то его браузер скачивает себе файлы (это мы уже и так знаем из определения выше). Чтобы знать сколько хранить эти файлы у себя в памяти и нужно указывать это время.

Шаг 1. Скачиваем .htaccess

Первым шагом надо скачать .htaccess, все делаетя быстро, через менеджер FTP. В начале нужно будет узнать, на чем работает ваш сервер, точнее его обеспечение. Оно должно быть Apache (95% работают именно на нем, но проверить стоит).

У следующих ресурсов nginx параметры включения данной функции разные, чем у apache, так что я не зря сказал проверить на чем работает сайт.

Дальше, заходим в корневой каталог сайта (через FTP, я использую FileZilla) в папку pablic_html, там находится весь движок вордпресс. Здесь в идеале располагается файл .htaccess, он стандартный от Apache. Он регулирует загрузку и доступы, если его нет то создаем его. Будем его рассматривать в более тематических статьях, пока что нам надо сделать кэширование.

Шаг 2. Вносим mod-header в файл

Вторым шагом будем вносить директивы mod-header в .htaccess. Если он есть, то просто вставляем до закрывающего тега #endwordpress, вот этот код.

<ifModule mod_headers.c>
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
<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>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

Если же сделан по новой, то вставляем вот это и закидываем его в корневой каталог.

# BEGIN WordPress
<ifModule mod_headers.c>
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
<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>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END WordPress

Разбор строчек кода, за что они отвечают

Теперь надо разобраться за что отвечают все эти строки кода. Все тривиально, вы можете видеть в строчках разные расширения png, jpg и им подобные, и напротив этих расширений указаны числа, это и есть временной отрывок в котором будут храниться эти файлы. Например число 43200, указывает на то что фалы этих расширений будут держаться в кэше один день.

Если все было сделано правильно, то эта строка исчезнет, но мы можем сделать еще лучше, как, читайте дальше.

Плагин для кэширования граватаров NIX Gravatar Cache

Плагин nix gravatar cache- это находка для меня. Я маленько приврал, когда сказал, что не возможно избавиться от загружаемых скриптов с других сервисов. В списке внешних ресурсов вы сможете найти сайт граватара, это условие срабатывает если у вас к статье есть комментарии и к ним прикреплен gravatar. Как не странно, но тут можно включить кэш браузера wordpress для данных картинок.

Я человек дотошный, и все таки нашел решение,  оттуда идет только картинка, и соответственно ее можно кэшировать и приделать к ней срок действия.

Решение нашел в плагине NIX Gravatar Cache, я знаю что это есть зло, но от него вообще нет почти нагрузки. Признаюсь, перепробовал три плагина, но только этот делает изображения в jpg, а те в непонятно какие форматы. Все настройки сводятся к двум пунктам, они указаны на скриншоте.

Первая галочка включен или выключен, и второй сколько хранить кэш.

В чем вся прелесть? В том что посетитель оставляет свой комментарий, а плагин автоматом скачивает его граватар на хостинг, и потом уже идет загрузка не из сайта граватара, вот и все. Ставьте обязательно, потому как, лучше один плагин чем сотня запросов (при условии что у вас сотня комментариев).

Кэшируем весь сайт

Чтобы кешировать весь сайт,так же нужен плагин. В этой роли я выбрал Hyper Cache, он легок и занимает не много процессов. Но сейчас его рассматривать не буду, потому как тема очень обширная и мне просто не хватит статьи. Имейте в виду, что надо установить, а как настроить ждите следующей статьи.

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

Подведем итог, что мы узнали и какой порядок действий

  1. Узнали на чем работает сайт (apache, nginx и тому подобное).
  2. Научились закачивать .htaccess на компьютер.
  3. Отредактировали файл доступов.
  4. Смогли закинуть обратно на сервер.
  5. Поставили плагин nix gravatar cache.

P.S. Если что-то не получилось то смело пишите комментарии, отвечу и помогу.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Александр

    Поставил, плагин NIX Gravatar Cache, результат улучшился, спасибо!

    • Лифанов Валентин

      Пользуйтесь на здоровье.

  • alex

    У меня стоят гугл аналитика и яндекс аналитика. Кешировать их, я так понимаю, нельзя. Как быть в этом случае?

    Используйте кеш браузера для следующих ресурсов:

    mc.yandex.ru/metrika/watch.js (60 минут)

    www.google-analytics.com/analytics.js (2 часа)

    • Лифанов Валентин

      Никак, это невозможно закешировать файлы с другого сервера. Конечно можно, но тогда статистика собираться не будет.

  • Виктор

    Здравствуйте. Все сделал как вы писали строчка про кеш не исчезла

    • Лифанов Валентин

      Здравствуйте, вы через что вставляли код? Через файлзиллу? И еще момент если стоит плагин оптимизации от йоаста, то лучше там прописать. И еще момент очистить кеш.

  • Виктор

    Просто через редактор хостинга

    • Лифанов Валентин

      Очистите кеш, если стоит плагин кеширования. И второе у вас стоит плагин AIOSP (seo плагин), там есть пункт редактирования файлов htaccess, попробуйте через него. Если не поможет, то возможно у вас хостинг не поддерживает данную функцию кеша браузера.

  • Виктор

    Спасибо понял свои ошибки.

    • Лифанов Валентин

      Получилось? Смотрите могу я посмотреть, бесплатно.

  • Виктор

    Завтра буду пробовать делать, о результате сообщу, сегодня инет лагать начал, медленно все работает

    • Лифанов Валентин

      Хорошо, обязательно отпишитесь о работе.

  • Виктор

    Это снова я. Блог удалось с горем пополам с помощью плагинов оптимизировать и соответствовать PageSpeed (допустили меня в зеленую зону). Но теперь у меня проблема иного рода. Я сделал главной отдельную страничку и на нее вывожу анонсы статей. Так вот, делал анализ сайта на одном из сервисов и выяснил, что описание берется не главной (у меня стоит плагин сео оптимизации, там я все прописал для главной)а из анонсов статей, что мне совсем не нравится. Ключевики и вовсе не прописаны, хотя должны быть. Как исправить?

    • Лифанов Валентин

      Виктор приветствую. Я так понял что вы сделали на главной страницу, и при выходе новой статьи дописываете в нее информацию?

  • Виктор

    Доброго вечера. Сделал отдельную страничку, пометил ее как главную. Когда в блоге появляются статьи они отображаются на этой страничке. Точнее анонсы статей. Мне нужно прописать ключевые слова на эту страницу и сделать так, чтобы было описание главной, а не каждый раз разное описание взятое из статей. Возможно ли это как то сделать?

    • Лифанов Валентин

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

  • Виктор

    Вот скрин главной skrinshoter.ru/s/120816/xYXqGE.png

    На этой странице выводятся 10 последних записей (анонсы)

    А вот скрин на анализ сайта skrinshoter.ru/s/120816/CpYcRC.png

    Как видно на скрине описание взято из последнего поста. То есть описание, каждый раз, с выходом новой статьи меняется, поисковикам это может не понравиться я думаю. Я бы хотел закрепить определенное описание для главной.

  • Виктор

    Делал, проблемы это не решает. Все равно описание каждый раз разное. А если просто ставить главную страницу, получается некрасиво и не функционально, мне хочется сделать так, чтобы и посты выводились и описание было нормальным. Описание задано в сео плагине All in One SEO Pack но почему то, при анализе его не находит

  • Виктор

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

    • Лифанов Валентин

      Надо изнутри смотреть, это скорее всего не правильная обработка функции wp-head, потому что плагин привязывает вывод именно к ней. Попробуйте ради эксперимента просто сменить тему и посмотреть будут ли изменения. Если изменений не будет то это плагин.

  • Виктор

    Ок благодарю

  • Александр

    С кэшированием краватаров понятно. Но у меня еще ругается на оптимизауию изображений с других сайтов, например:

    Изменение размера и сжатие изображения по адресу img.youtube.com/vi/BYPswiRbQ2Y... уменьшит его на 20,6 КБ (83 %).

    Сжатие страницы //vk.com/images/...png уменьшит ее размер на 1,2 КБ (53 %).

    как быть с этими сайтами? какой плагин кэширует эти изображения?

    Спасибо

    • Лифанов Валентин

      Александр, с этим ничего не поделаешь, да и не надо, внешние сайты нельзя кешировать. Можно их пропустить через скрипт чтобы он как бы делал маску, но это очень сложно, и не всегда будет србатывать. Главное чтобы:

      1. Был включен кеш у браузера.

      2. Общее кеширование.

      3. Оптимизация скриптов и css.

      4. Сжимать собственные картинки.

      Все остальное с внешних ресурсов нельзя изменить, не обращайте на это внимание, тем более на ютуб и вконтакте.

      • Александр

        спасибо за ответ.не совсем понял из статьи как включается кэш у браузера — просто прописыванием строчек кода в htaccess и все?

        • Лифанов Валентин

          Да, все именно так )))

  • Lucky

    Поставил плагин nix gravatar cache, а он мне все граватары пустыми сделал в блоге.

    Тестил на другом сайте — та же фигня.

    В чем может быть проблема?

    • Лифанов Валентин

      Темы на сайтах одинаковые стоят?

  • Lucky

    Добрый день, странно, сегодня решил разобраться в ситуации и о чудо =) все хорошо работает на обоих сайтах =)

    У Вас полезный ресурс, буду еще на днях решать проблему с JavaScript и CSS, используя Вашу статью.

    А как можно решить проблему с кешированием еще нескольких элементов:

    pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 минут)

    pagead2.googlesyndication.com/pagead/osd.js (60 минут)

    google-analytics.com/analytics.js (2 часа)

    google-analytics.com/analytics.js (2 часа)

    Чет у меня google идет https и http...

    + как кэшировать feed и картинки со сторонних сайтов?, которые размещаются у меня на сайте? а также смайлы в комментах:

    feeds.feedburner.com/~fc/Luckystarsblog?bg=00CCFF&fg= (2 часа)

    i65.tinypic.com/2dkniv.jpg (6 часов)

    • Лифанов Валентин

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

  • Мила

    И у меня, после включения плагина, исчезли аватары :(

    • Лифанов Валентин

      А старые аватары были настроены через сам вордпресс, или через какой-либо плагин?

  • Игорь

    Валентин,а если сайт работает на nginx,также надо прописывать в .htaccess?

    • Лифанов Валентин

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

  • Игорь

    Валентин вот htaccess,куда точно прописать?

    # BEGIN WordPress

    RewriteEngine On

    RewriteBase /

    RewriteRule ^index\.php$ — [L]

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule . /index.php [L]

    # редирект 301

    Options +FollowSymLinks

    RewriteEngine On

    RewriteCond %{HTTP_HOST} ^www.gumirov1963.ru\.ru$ [NC]

    RewriteRule ^(.*)$ [R=301,L]

    # END WordPress

    • Лифанов Валентин

      Если nginx то никуда, этот код под апаче, если связка nginx и апаче, то код пойдет, вставлять либо после begin wordpress, либо перед end wordpress.

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2015-2016 Все права защищены. Полное или частичное копирование запрещено.