Как ускорить загрузку сайта: Часть 6 — кэшированние страниц

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Продолжение.
Начало поста Ускоряем сайт на WordPress читайте на этой странице.

13. Не происходит кэширования в браузерах пользователей:

Как происходит ускорение загрузки сайта при помощи кэширования в браузерах?

Все страницы одного сайта содержат похожие элементы, (шапка, сайтбар, фоновые картинки, футер).

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

При кэшировании браузером, ускорение загрузки сайта происходит только при повторном его посещении. То есть при первом посещении в браузере пользователей происходит кэширование, а при повторном посещении загрузка основных элементов будет происходить не с сервера, а из кеша браузера.

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

Сделать это мы можем при помощи инструмента удаленного управления Web сервером - файла .htaccess.
(Если вы не знаете, где находится файл .htaccess, прочитайте статью сначала).

Откройте файл .htaccess и добавьте в него приведенный ниже код.

# кеширование в браузере на стороне пользователя
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access 7 days”
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
ExpiresByType text/html “access plus 7 day”
ExpiresByType text/x-javascript “access 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType application/x-shockwave-flash “access 1 year”
</ifModule>
 
# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$”>
Header set Cache-Control “max-age=2592000, public</filesMatch>
 
# 30 дней
<filesMatch “.(css|js)$”>
Header set Cache-Control “max-age=2592000, public</filesMatch>
 
# 2 дня
<filesMatch “.(xml|txt)$”>
Header set Cache-Control “max-age=172800, public, must-revalidate”
</filesMatch>
 
# 1 день
<filesMatch “.(html|htm|php)$”>
Header set Cache-Control “max-age=172800, private, must-revalidate”
</filesMatch>
</ifModule>
 
# использование кеша браузеров
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch “.(jpg|jpeg|gif|png|ico|css|js)$”>
ExpiresActive on
ExpiresDefault “access plus 1 year”
</filesmatch>
</ifmodule>
 
#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE
<ifModule mod_setenvif.c>
BrowserMatch “MSIE” force-no-vary
BrowserMatch “Mozilla/4.[0-9]{2}” force-no-vary
</ifModule>

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

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

Примечание: описанный способ будет работать только на Web серверах под управлением Apache, но это, как правило, 99 всех Web серверов.

После того, как вы внесли изменения в файл .htaccess и сохранили их, еще раз откройте в FireFox страницу вашего сайта и обновите данные, собранные Page Speed, нажав на кнопку «Refresh Analysis»

Красный маркер возле пункта "Используйте кэш браузера" должен смениться зеленой птичкой.

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

В любом случае этот вопрос лучше обсудить с хостером.

Продолжение поста Ускоряем сайт на WordPress читайте дальше.

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Здравствуйте. Подскажите, в чем может быть причина, при попытке внести какие-либо изменения для ускорения сайта в файл .htaccess сайт перестает работать и выдает ошибку. Это касается и кэширования и сжатия файлов (вносил приведенные Вами коды). Или сразу писать хостеру?

    • Причина может быть как в особенностях вашего шаблона, в установленных на сайте скриптах, так и в вашем хостинге.
      Начните с письма хостеру и не отставайте от него до тех пор, пока не получите конкретный ответ (а то на некоторых хостингах техподдержка любит отвечать отписками).

    • Причина в кавычках. Измените в коде все кавычки и код заработает (просто в коде удаляете кавычки и вставляете/вводите на клавиатуре).

      Причина в том - что кавычки при публикации поста - почему-то неправильно отображаются. Соответственно и копируете и вставляете в вы их .htaccess "неправильными" :)

  2. Ксана, здравствуйте.
    Установила новый шаблон WordPress, а у него уже 2 ошибки.
    Затем поставила другой, и там ошибки. Извините, проверила на валидность ваш сайт, и у вас есть ошибки. Может какой то процент ошибок допустим?

    • Ирина, все ошибки валидации можно разделить на группы:

      - ошибки в файлах шаблона;

      Их не сложно найти и исправить.

      - ошибки в сторонних скриптах, подключенных на сайте;

      Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.

      Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайта и у нас к ним нет доступа.

      - CSS-правила, которые валидатор не понимает и поэтому считает их ошибками;

      Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
      Если вы использовали в шаблоне правила CSS 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS 3 он будет считать ошибками, хотя на самом деле они таковыми не являются.

      - ошибки, которые поневоле приходится оставить на сайте, чтобы получить нужный результат;

      Например теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.

      - ошибки самого валидатора.

      Часто он не видит каких то тегов (например, закрывающих) и сообщает об ошибке там, где ее нет.

      Получается, что на работающем сайте практически всегда будут какие то ошибки валидации.

      Это не смертельно, но нужно стремиться, чтобы их было как можно меньше.
      Т.е. те ошибки, которые можно исправить, нужно исправить.

  3. Оксана, вы пишете, что "описанный способ будет работать только на Web серверах под управлением Apache" Мой сайт на сервере Nginx. В интернете такая мудреная информация по поводу кэширования страниц на серверах Nginx. Может подскажете, как это сделать (кэширование в браузерах) в моем случае?
    Спасибо

    • К сожалению, я не могу ответить на ваш вопрос.
      Вам лучше спросить у техподдержки вашего хостинга.

  4. .htaccess файл который ложится в корень сайта?

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

  6. Помогите. вставил вес код а кэширование браузера Page Speed не изменяется...

  7. Не удалось сделать самому, так как при вставке кода сайт перестает работать. Пришлось написать хостеру, на что он мне ответил: Такое кеширование используется самим браузером и не зависит от настроек технической площадки, если только те не содержат специальных запретов на такое кеширование. У нас ограничений на кеширование бразуером нет.
    Так не понятно тогда, зачем вставлять код? Или я чего-то не понимаю?

  8. Браузеры сами по себе кешируют страницы сайтов, но срок такого кэширования очень небольшой.
    Приведенным в статье кодом мы задаем браузеру срок кэширования.

  9. Здравствуйте, Людмила.

    Спасибо за полезные материалы по управлению - ускорению сайта. По поводу последнего кода: #Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE. Браузеры постоянно обновляются. Например, у последний Firefox 47.0. Скажите, пожалуйста, нужно ли вносить изменения в этот код.

    Заранее спасибо за ответ.

    • Я думаю, что нет.
      Но, лучше уточнить у системных админов.

      • Спасибо, поняла.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349