No Image

Add expires headers как исправить

СОДЕРЖАНИЕ
443 просмотров
10 марта 2020

I have mod_expires and mod_headers enabled on the server and this code in htaccess:

In GTmatrix in Google pagespeed I have 100% but on Yslow the "Add Expires headers" is 0. I’ve tried everything but I can’t seem to make Yslow work. Can someone help? Thanks.

1 Answer 1

You’re setting the expiration to be in the past, which means they expire straight away. The idea behind adding expires headers is that you tell the browser that it doesn’t even need to make an http request at all for this resource until some date in the future, instead it should just use the cached copy.

Probably only a good idea to use it on assets you know are not going to change. If you do end up changing an asset with a future expires date you’ll need to change the url to it (which you can do by adding a query string on the end like blah.css?1234.

Also check that the expires headers are definitely coming through in the response headers of the assets by inspecting them with your web inspector.

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

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

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

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

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

Http заголовки для управления клиентским кэшированием

Для начала давайте посмотрим, как сервер и браузер взаимодействуют при отсутствии какого-либо кэширования. Для наглядного понимания я попытался представить и визуализировать процесс общения между ними в виде текстового чата. Представьте на несколько минут, что сервер и браузер – это люди, которые переписываются друг с другом 🙂

Без кэша (при отсутствии кэширующих http-заголовков)

Как мы видим, каждый раз при отображении картинки cat.png браузер будет снова загружать ее с сервера. Думаю, не нужно объяснять, что это медленно и неэффективно.

Заголовок ответа Last-modified и заголовок запроса if-Modified-Since .

Идея заключается в том, что сервер добавляет заголовок Last-modified к файлу (ответу), который он отдает браузеру.

Теперь браузер знает, что файл был создан (или изменен) 1 декабря 2014. В следующий раз, когда браузеру понадобится тот же файл, он отправит запрос с заголовком if-Modified-Since .

Если файл не изменялся, сервер отправляет браузеру пустой ответ со статусом 304 (Not Modified) . В этом случае, браузер знает, что файл не обновлялся и может отобразить копию, которую он сохранил в прошлый раз.

Таким образом, используя Last-modified мы экономим на загрузке большого файла, отделываясь пустым быстрым ответом от сервера.

Заголовок ответа Etag и заголовок запроса If-None-Match .

Принцип работы Etag очень схож с Last-modified , но, в отличии от него, не привязан ко времени. Время – вещь относительная.

Идея заключается в том, что при создании и каждом изменении сервер помечает файл особой меткой, называемой ETag , а также добавляет заголовок к файлу (ответу), который он отдает браузеру:

Теперь браузер знает, что файл актуальной версии имеет ETag равный “686897696a7c876b7e”. В следующий раз, когда брузеру понадобится тот же файл, он отправит запрос с заголовком If-None-Match: "686897696a7c876b7e" .

Читайте также:  Эмуляторы электронных схем на русском

Сервер может сравнить метки и, в случае, если файл не изменялся, отправить браузеру пустой ответ со статусом 304 (Not Modified) . Как и в случае с Last-modified браузер выяснит, что файл не обновлялся и сможет отобразить копию из кэша.

Подробнее о ETag можно почитать здесь.

Заголовок Expired

Принцип работы этого заголовка отличается от вышеописанных Etag и Last-modified . При помощи Expired определяется “срок годности” (“срок акуальности”) файла. Т.е. при первой загрузке сервер дает браузеру знать, что он не планирует изменять файл до наступления даты, указанной в Expired :

В следующий раз браузер, зная, что “дата истечения срока годности” еще не наступила, даже не будет пытаться делать запрос к серверу и отобразит файл из кэша.

Такой вид кэша особенно актуален для иллюстраций к статьям, иконкам, фавиконкам, некоторых css и js файлов и тп.

Заголовок Cache-control с директивой max-age .

Принцип работы Cache-control: max-age очень схож с Expired . Здесь тоже определяется “срок годности” файла, но он задается в секундах и не привязан к конкретному времени, что намного удобнее в большинстве случаев.

  • 1 день = 86400 секунд
  • 1 неделя = 604800 секунд
  • 1 месяц = 2629000 секунд
  • 1 год = 31536000 секунд

У заголовка Cache-control , кроме max-age , есть и другие директивы. Давайте коротко рассмотрим наиболее популярные:

public
Дело в том, что кэшировать запросы может не только конечный клиент пользователя (браузер), но и различные промежуточные прокси, CDN-сети и тп. Так вот, директива public позволяет абсолютно любым прокси-серверам осуществлять кэширование наравне с браузером.

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

no-cache
Позволяет указать, что клиент должен делать запрос на сервер каждый раз. Иногда используется с заголовком Etag , описанным выше.

no-store
Указывает клиенту, что он не должен сохранять копию запроса или частей запроса при любых условиях. Это самый строгий заголовок, отменяющий любые кэши. Он был придуман специально для работы с конфиденциальной информацией.

must-revalidate
Эта директива предписывает браузеру делать обязательный запрос на сервер для ре-валидации контента (например, если вы используете eTag). Дело в том, что http в определенной конфигурации позволяет кэшу хранить контент, который уже устарел. must-revalidate обязывает браузер при любых условиях делать проверку свежести контента путем запроса к серверу.

proxy-revalidate
Это то же, что и must-revalidate , но касается только кэширующих прокси серверов.

s-maxage
Практически не отличается от мах-age , за исключением того, что эта директива учитывается только кэшем резличных прокси, но не самим браузером пользователя. Буква “s-” исходит из слова “shared” (например, CDN). Эта директива предназначена специально для CDN-ов и других посреднических кэшей. Ее указание отменяет значения директивы max-age и заголовка Expired . Впрочем, если вы не строите CDN-сети, то s-maxage вам вряд ли когда-либо понадобится.

Как посмотреть, какие заголовки используются на сайте?

Вы можете посмотреть заголовки http-запросов (request headers) и ответов (response headers) в отладчике Вашего любимого браузера. Вот например, как это выглядит в хроме:

То-же самое можно увидеть в любом уважающем себя браузере или http-сниффере.

Настройка кэшировения в Аpache и Nginx

Мы не будем пересказывать документацию по настройке популярных серверов. Вы всегда можете посмотреть ее здесь для Nginx и здесь для Apache. Ниже мы приведем несколько примеров из жизни для того, чтобы показать, как выглядят файлы конфигурации.

Читайте также:  Chkdsk is verifying usn journal

Пример конфигурации Apache для контроля Expires

Выставляем различный “срок годности” для различных типов файлов. Один год для изображений, один месяц для скриптов, стилей, pdf и иконок. Для всего остального – 2 дня.

Пример конфигурации Nginx для контроля Expires

Выставляем различный “срок годности” для различных типов файлов. Одна неделя – для изображений, один день – для стилей и скриптов.

Пример конфигурации Apache для Cache-control (max-age и public/private/no-cache)

Пример конфигурации Nginx для Cache-control статических файлов

В заключение

“Кэшировать все то, что можно кэшировать” – хороший девиз для веб-разработчика. Иногда можно потратить всего несколько часов на конфигурацию и при этом значительно улучшить восприятие вашего сайта пользователем, значительно сократить нагрузку на сервер и сэкономить на трафике. Главное – не переусердствовать и настроить все правильно с учетом особенностей Вашего ресурса.

Будем благодарны за рекомендации и поправки в комментариях и не забудьте поделиться статьей с друзьями, если она Вам понравилась 😉

Скорость загрузки сайта очень важна для каждого блога или сайта, особенно для тех, кто использует виртуальный хостинг — самый дешевый вариант услуг хостинга. В статье будет представлено несколько трюков с .htaccess и header.php, которые увеличат скорость загрузки вашего сайта на 50-70%.

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

Что значит скорость для крупных интернет-проектов :

  • для Google — увеличенное на 500 миллисекунд время загрузки приводит к уменьшенному на 20% количеству поисков.
  • для Yahoo — увеличенное на 400 миллисекунд время загрузки приводит к 5-9% возрастанию количества людей, который нажимают "назад" до того, как страница загрузилась.
  • для Amazon — увеличенное на 100 миллисекунд время загрузки приводит к 1% спаду продаж.

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

Так что медленный сайт также ухудшит ваши позиции в поисковой выдаче.

Таким образом, скорость загрузки очень важна. CDN (Content Delivery System – система доставки контента) для этих целей хороша, но до определенного уровня, и хорошие CDN провайдеры немного дороговаты.

Хорошая новость в том, что некоторые самые важные оптимизации скорости могут быть сделаны с помощью простых трюков с .htaccess. Они могут сделать любой сайт быстрее, сжимая контент и включая кеширование браузера, соответствуют рекомендациям по ускорению сайта Yahoo! и не будут стоить вам ни копейки.

Шаг 1. Gzip сжатие файлов

Сжатие уменьшает время ответа, уменьшая размер http ответа.

Стоит сжимать с помощью gzip ваши HTML документы, скрипты и таблицы стилей. Более того, стоит сжимать любой текстовый ответ, включая XML и JSON.

Изображения и PDF файлы не нужно сжимать с помощью gzip, поскольку они уже сжаты. Попытки сделать это приведут только к расходу CPU и могут даже увеличить размер файла.

Сжатие файлов также сэкономит немного трафика.

С помощью .htaccess

Для серверов с Apache

mod_pagespeed – это модуль Apache, разработанный Google, он может быть использован как другие модули.

Сейчас только GoDaddy и DreamHost поддерживают модуль mod_pagespeed, так что если вы размещаетесь у них, просто скопируйте и вставьте следующий код в ваш файл .htaccess:

Многие из вас хостятся у других хостинг-провайдеров, которые не поддерживают модуль mod_pagespeed.

Вы можете использовать модуль mod_deflate (Apache 1.3x использовал mod_gzip, но, начиная с Apache 2x, используется mod_deflate).

С помощью header.php

Если ваш сервер не поддерживает mod_deflate или mod_gzip, вы можете использовать этот PHP скрипт для gzip сжатия, он работает и на Apache, и на Nginx.

Читайте также:  Gimal com почта вход в аккаунт

Просто скопируйте это в файл header.php вашей темы:

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

Шаг 2. Отключение ETags

ETags (Entity Tags – теги объектов) — это механизм, который веб-серверы и браузеры используют для определения, совпадает ли компонент в кеше браузера с оригинальным. ETags были добавлены в качестве механизма для проверки актуальности объектов.

Этот метод является более гибким, чем проверка по дате последнего изменения. ETag — это строка, которая идентифицирует конкретную версию компонента. Единственным ограничением будет то, что строка должна быть взята в кавычки. Основной сервер определяет ETag компонента, используя заголовок ETag.

Чтобы отключить ETags, вставьте это в свой файл .htaccess:

Шаг 3. Использование кеширования браузера

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

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

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

Посетитель, пришедший на вашу страницу впервые, сделает несколько http запросов для того, чтобы загрузить файлы вашего сайта, но при использовании заголовков Expires и Cache-Control, вы сделаете эти файлы кешируемыми. Это поможет избежать ненужных http запросов при последующих просмотрах страницы.

Для серверов с Apache

Apache задействует модули mod_expires и mod_headers.

  • Модуль mod_expires контролирует настройки HTTP заголовка Expires и директивы срока работы для HTTP заголовка Cache-Control http в ответах сервера. Чтобы изменить другие директивы Cache-Control, вы можете использовать модуль mod_headers.
  • Модуль mod_headers описывает директивы для контроля и изменения HTTP заголовок запросов и ответов. Заголовки могут быть объединены, заменены или удалены.

Добавьте эти правила в .htaccess для установки заголовков Expires:

.htaccess правила для установки заголовка Cache-control:

Обратите внимание :

  • Нет нужды устанавливать директиву max-age с помощью заголовка Cache-Control, поскольку она уже установлена с помощью модуля mod_expires.
  • must-revalidate значит, что как только ответ устаревает, его нужно перепроверить; это не значит, что он будет проверяться каждый раз.

Шаг 4. Уменьшение размера базы данных MySQL

Начиная с WordPress 2.6, WordPress автоматически сохраняет посты во время написания, они остаются в базе данных MySQL как версии документов даже после того, как пост сохранен. Большая база данных также увеличивает время загрузки сайта. Я предлагаю отказаться от сохранения версий.

Вставьте следующий код в wp-config.php для отключения сохранения версий:

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

И еще кое-что…

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

Проследите, как работает ваш сайт: покажите количество запросов и время обработки.

Просто вставьте следующий код после текста копирайтов в файле footer.php вашей темы:

Вы знаете или используете какие-то другие методы оптимизации времени загрузки вашего сайта или блога? Не забудьте поделиться с ними в комментариях.

Источник: WP.tutsplus.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 3

Комментировать
443 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
Adblock
detector