Как указать срок действия кэша. Включаем кеш браузера для Google PageSpeed
Эрик Бидельман
Перевод: Влад Мержевич
Доступность в оффлайне становится всё более важной для веб-приложений. Да, все браузеры имеют механизмы кэширования, но они ненадежны и работают не всегда ожидаемо. HTML5 устраняет некоторые из этих неприятностей с помощью интерфейса ApplicationCache .
Использование интерфейса кэша даёт вашему приложению три преимущества:
- автономный просмотр - пользователи могут исследовать ваш сайт целиком, когда они находятся в оффлайне;
- скорость - ресурсы кэшируются локально, поэтому загружаются быстрее;
- снижение нагрузки на сервер - браузер загружает с сервера только изменённые ресурсы.
Кэш приложения (или AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для оффлайновых пользователей. Ваше приложение будет работать корректно, даже если пользователь нажимает кнопку «Обновить», находясь в автономном режиме.
Файл манифеста кэша
Файл манифеста кэша является простым текстовым файлом со списком ресурсов, которые браузер должен кэшировать для доступа в автономном режиме.
Справка по файлу манифеста
Чтобы разрешить кэш приложения включите атрибут manifest в тег .
...
Атрибут manifest должен быть на каждой странице вашего приложения, которую вы хотите кэшировать. Браузер не кэширует страницу, если она не содержит атрибут manifest (и если она явно не упомянута в списке файла манифеста). Это означает, что любая страница с атрибутом manifest посещаемая пользователем будет неявно добавляться в кэш приложения. Таким образом, нет необходимости перечислять все страницы в манифесте.
Атрибут manifest задаёт абсолютный или относительный URL, но абсолютный путь должен быть в рамках того же веб-приложения. Файл манифеста может иметь любое расширение, но требуется указать правильный MIME-тип (см.ниже).
...
Файл манифеста должен отдаваться с MIME-типом text/cache-manifest . Возможно, вам придётся добавить пользовательский тип файла на веб-сервере или через настройку.htaccess. Например, чтобы настроить этот MIME-тип в Apache, добавьте в конфигурационный файл:
AddType text/cache-manifest .appcache
Или в файл app.yaml на Google App Engine:
Url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)
Структура файла манифеста
Простой манифест может выглядеть примерно так:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
В этом примере кэшируется четыре файла указанных в манифесте.
Следует отметить несколько вещей:
- строка CACHE MANIFEST должна идти первой, и обязательна;
- данные кэширования сайтов ограничены 5 Мб. Однако если вы пишете приложение для Chrome Web Store , использование unlimitedStorage снимает это ограничение;
- если файл манифеста или ресурс, указанный в нём не может быть скачан, весь процесс обновления кэша провалится, браузер станет использовать старый кэш приложения.
Давайте рассмотрим более сложный пример:
CACHE MANIFEST # 2010-06-18:v2 # Явно кэшируемые основные записи CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Ресурсы, которые потребуются пользователю в онлайне NETWORK: login.php /myapi http://api.twitter.com # static.html будет использоваться, если main.py недоступен # offline.jpg будет использоваться вместо всех изображений в images/large/ # offline.html будет использоваться вместо всех HTML-файлов FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html
Строки, начинающиеся с решётки (#), являются комментариями, но также могут служить и другой цели. Кэш приложения обновляется только при изменении файла манифеста. Так, например, при редактировании изображений или функций JavaScript, эти изменения не будут кэшированы повторно. Вы должны изменить файл манифеста, чтобы сообщить браузеру обновить файлы в кэше. Создание комментария с номером версии, контрольной суммой или датой это один из способов гарантировать пользователям, что они используют последнюю версию. Вы можете также программно обновлять кэш, когда новая версия будет готова, как описано в разделе про обновление кэша.
Манифест может иметь три различных раздела: CACHE, NETWORK и FALLBACK.
CACHE: Это стандартный раздел для записи. Файлы, перечисленные в этом блоке (или сразу после CACHE MANIFEST) будут явно кэшированы после того как они скачаны в первый раз.
NETWORK: Файлы, перечисленные в этом разделе, это ресурсы, которые требуют подключения к серверу. Все запросы к этим ресурсам идут в обход кэша, даже если пользователь находится в оффлайне. Можно использовать * для задания шаблона.
FALLBACK: Дополнительный раздел указывает резервные страницы, если ресурс недоступен. Первый URL является ресурсом, второй резервом. Оба адреса должны быть относительны и быть в том же месте, что и файл манифеста. Можно использовать * для задания шаблона.
Эти разделы могут быть перечислены в любом порядке, каждый раздел может встречаться больше одного раза.
Следующий манифест определяет «универсальные» страницы (offline.html), которые будут отображаться, когда пользователь пытается получить доступ к корню сайта в автономном режиме. Он также заявляет, что все другие ресурсы (например, на удаленном сайте) требуют подключения к Интернету.
CACHE MANIFEST # 2010-06-18:v3 # Явно кэшируемые записи index.html css/style.css # offline.html будет показан в автономном режиме FALLBACK: / /offline.html # Все другие ресурсы (включая сайты) требуют подключение к сети NETWORK: * # Дополнительные ресурсы в кэше CACHE: images/logo1.png images/logo2.png images/logo3.png
HTML-файл, который ссылается на ваш файл манифеста, кэшируются автоматически. Нет необходимости включать его в манифест, однако рекомендуем сделать это.
Обновление кэша
Оффлайновое приложение остаётся в кэше, пока не произойдёт одно из следующих событий:
- пользователь очищает хранилище данных в браузере для вашего сайта;
- файл манифеста изменился. Обновление файла упомянутого в манифесте не означает, что браузер будет повторно кэшировать этот ресурс. Файл манифеста сам должен быть заменён;
- кэш приложения обновился программно.
Статус кэша
Объект window.applicationCache выступает вашим программным доступом к кэшу браузера. Свойство status используется для проверки текущего состояния кэша.
Var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return "UNCACHED"; break; case appCache.IDLE: // IDLE == 1 return "IDLE"; break; case appCache.CHECKING: // CHECKING == 2 return "CHECKING"; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return "DOWNLOADING"; break; case appCache.UPDATEREADY: // UPDATEREADY == 5 return "UPDATEREADY"; break; case appCache.OBSOLETE: // OBSOLETE == 5 return "OBSOLETE"; break; default: return "UKNOWN CACHE STATUS"; break; };
Для программного обновления кэша вначале вызывается applicationCache.update(). Он будет пытаться обновить кэш пользователя (который требует, чтобы файл манифеста изменился). Наконец, когда applicationCache.status находится в состоянии UPDATEREADY, вызов applicationCache.swapCache() обновит старый кэш на новый.
Var appCache = window.applicationCache; appCache.update(); // Попытка обновить кэш пользователя... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // Успешно, меняем на новый кэш }
Использование update() и swapCache() не служит обновлением ресурсов пользователю. Этот поток просто говорит браузеру проверить новый манифест, скачать указанное обновленное содержания и повторно заполнить кэш приложения. Таким образом, страница скачивается с сервера дважды, в первый раз заполняется новый кэш приложения, а во второй раз обновляется содержание страницы. Хорошая новость: вы можете избежать этого двойного скачивания. Для обновления у пользователя новой версии вашего сайта установите отслеживание события updateready во время скачивания страницы.
// Проверить, если новый кэш доступен при скачивании страницы window.addEventListener("load", function(e) { window.applicationCache.addEventListener("updateready", function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Браузер скачивает новый кэш // Заменяет его и обновляет страницу window.applicationCache.swapCache(); if (confirm("Новая версия этого сайта доступна. Загрузить её?")) { window.location.reload(); } } else { // Манифест не поменялся, ничего нового на сервере } }, false); }, false);
События AppCache
Как вы можете ожидать, дополнительные события следят за статусом кэша. Браузера запускает события во время процесса скачивания, обновления кэша приложения и возникновения ошибки. Следующий фрагмент прослушивает события для каждого типа события кэша:
Function handleCacheEvent(e) { //... } function handleCacheError(e) { alert(Ошибка: Не удалось обновить кэш!"); }; // Выполняется после первого кэширования манифеста appCache.addEventListener("cached", handleCacheEvent, false); // Проверка обновления. Всегда идёт первым в последовательности событий appCache.addEventListener("checking", handleCacheEvent, false); // Обновление найдено, браузер забирает ресурсы appCache.addEventListener("downloading", handleCacheEvent, false); // Манифест вернул ошибку 404 или 410, загрузка прервана // или манифест изменился, пока происходил процесс загрузки appCache.addEventListener("error", handleCacheError, false); // Выполняется после первого скачивания манифеста appCache.addEventListener("noupdate", handleCacheEvent, false); // Выполняется, если файл манифеста возвращает 404 или 410. // Эти результаты в кэше приложения будут удалены appCache.addEventListener("obsolete", handleCacheEvent, false); // Выполняется для каждого ресурса перечисленного в манифесте, пока они забираются appCache.addEventListener("progress", handleCacheEvent, false); // Выполняется, когда ресурсы манифеста были недавно скачаны appCache.addEventListener("updateready", handleCacheEvent, false);
Если файл манифеста или указанный ресурс не может быть скачан, все обновления сбрасываются. Браузер будет продолжать использовать старый кэш приложения в случае такого отказа.
Хочу разобраться с советом, который даёт мне в этом отношении Google: Используйте кэш браузера ! Ну что же, попробуем решить!
Пояснения от Google: Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Решение этого вопроса заключается в том, чтобы в файл.htaccess вставить код, который будет управлять кэшем на браузере пользователя и указывать, как долго нужно хранить эти данные. Вот какой код я вставил себе, по совету других вебмастеров:
# кеширование в браузере на стороне пользователя
Как видите, список внушительный, тут в основном файлы стилей и скрипты. Может это всё и не так уж сильно ускорит сайт, но хочется разобраться из принципа.
Люди пишут, что не все хостинги поддерживают эту функцию на уровне сервера, возможно, мой хостинг тоже. Я написал в техническую поддержку и стал ждать ответа. Ответа пока нет:(
Только что ответили, после моего ещё одного сообщения. Ответ был таков:
Доброго времени суток!
Кэш работает как надо, не кэшируются только одномоментные удаленные библиотеки которые забираются с твиттера, твимга и т.д. на сколько видите, с остальным все нормально.
Ну я пока поверю, что так все оно и есть. У вас есть мысли по этому поводу? Одно из решений этой проблемы я описал в ...
СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:
1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.
2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.
3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.
4. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.
5. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.
| Домен RU - 99 руб Домен РФ - 99 руб |
Игорь . Обновление:Ноябрь 21, 2017 .
Здравствуйте, уважаемые читатели блога сайт. Продолжаю цикл статей, которые касаются мероприятий по оптимизации, и сегодня настал черед для настройки использования в этих целях кэша браузера со стороны пользователей, что является очередным шагом выполнения по ускорению сайта.
Каждое действие, позволяющее приблизиться к этой цели, будет плюсом в продвижении веб-ресурса, а потому не поленитесь хотя бы взглянуть на материалы, где я давал описания , а также , что, несомненно, вам поможет в реализации общей задачи.
В продолжение я постараюсь предоставить внятные инструкции по настройке кэширования в браузере путем внедрения специального кода в замечательный файл.htaccess. Правда, это не всем и не всегда может помочь, но обо всем чуть ниже.
Думаю, каждый из вас представляет себе, что такое кэширование, хотя бы в общих чертах. На всякий случай объясню вкратце. Допустим, читатель открывает в окне браузера страницу вашего ресурса, все составляющие которой (содержание, стили, скрипты и т.п.) загружаются с сервера хостинга, что занимает определенное время.
Предположим, у нас есть возможность запустить механизм, который позволит сохранить копии элементов страниц прямо в web-обозревателе того пользователя, который их посещает. Тогда при каждом следующем обращении все эти элементы будут браться прямо из кеша браузера () посетителя, то есть из специальной папки, которая располагается на жестком диске его компьютера.
Выигрыш в скорости загрузки будет налицо. Вот такой алгоритм мы и будем изучать в настоящей статье. Кстати, в дополнение темы можете почитать о том, как наряду с ускорением сайта можно добиться , что весьма актуально в наши дни.
Пару-тройку лет назад я рассказывал об оптимизации одного из своих проектов на основании анализа Пейдж Спид, осуществленного посредством расширения (сейчас доступен только онлайн сервис), которое давало более детальную картину.
Что важно, в большинстве своем предложенный ниже код вполне достаточен для того, чтобы создать условия, при которых Pagespeed больше не будет предъявлять претензий, а, значит, он обеспечит ускорение загрузки страниц в необходимом объеме.
Итак, на основании выше сказанного нам нужно обеспечить вывод одного из заголовков Last-Modified и ETag, а также одного из пары Expires либо Cache-Control: max-age. Для наглядности и расширения диапазона рассмотрим различные варианты.
Вариации кодов для управления кешем с использованием заголовков Last-Modified, Expires и Cache-Control
Если на вашем хостинге уже настроен вывод того же Last-Modified, то пол-дела сделано (к слову, проверить наличие этого важного заголовка , включая в их список инструмент для проверки ответа сервера от Яндекса). Если же нет, то сделать это весьма несложно, прописав в том же незаменимом.htaccess пару строк:
RewriteRule .* - RewriteRule .* -
Правда, работать этот метод будет опять же при условии наличия "чистого Апача" (но ведь как раз этот случай мы и рассматриваем). Будем считать, что заголовок Last-Modified, в качестве значения которого, кстати, будет выводится дата последнего изменения, настроен.
Теперь настала очередь Cache-Control с параметром max-age, в качестве значения которого будет прописан срок хранения в кеше каждого конкретного статического объекта. На сцену выходит модуль mod headers , код которого и следует вставить в.htaccess:
Нужно отметить, что посредством контейнера ifModul на сервере осуществляется проверка наличия этого модуля. При его отсутствии директива выполняться не будет, поэтому ее использование в любом случае не должно привести к ошибкам.
Время сохранения кеша определяется с помощью параметра max-age , его значение выставляется в секундах. Благодаря комментариям (которые, к слову, вы можете спокойно удалить), стоящим после символа решетки «#», основа этой конструкции, думаю, понятна.
Однако, вместо mod headers вполне можно воспользоваться модулем mod expires , выводящим заголовок Expires (который, по мнению самого Гугла является предпочтительнее, поскольку имеет более широкую поддержку). При этом фрагмент кода для его включения будет таким:
Точкой отсчета срока годности кэша в случае использования заголовка Expires является дата первой загрузки. Причем, в отличие от Cache-Control, где временной период определяется только в секундах, здесь он может указываться в любом временном формате, включая year (год).
Для того, чтобы убедиться в этом, посмотрите на участок кода, касающийся изображений. Там я специально указал время в различных единицах исчисления: 1 month (месяц), 4 weeks (недели), 30 days (дни), 43829 minutes (минуты), 2592000 seconds (секунды).
Понятно, что в месяце и в году может быть различное количество дней, недель, минут и секунд, но это не принципиально, поскольку используются средние значения. Кстати, для JS, файлов CSS и изображений рекомендуется ставить временной период не менее недели, но не более года. При этом по факту в качестве значения заголовка Expires в ответе сервера будет указана дата предполагаемого срока завершения периода кеширования данной версии объекта.
В дополнение к упомянутым модулям полезно задействовать еще и mod setenvif . Дело в том, что веб-обозреватели семейства Microsoft Internet Explorer и некоторые версии Мазилы корректно не воспринимают в ответе сервера HTTP заголовок Vary, который также вносит свою важную лепту в управление кэшированием. Этот модуль как раз позволяет решить эту проблему, исключая Vary из состава ответа сервера:
В итоге мы получаем два конечных варианта настройки кеширования, которые вы можете проверить, вставив поочередно в.htaccess (оба одновременно использовать не рекомендую):
Еще раз напоминаю, что несмотря на наличие контейнера IfModule, который обеспечивает безопасность редактирования, не лишним будет каждый раз при изменении.htaccess делать резервную копию исходного варианта файла (можно просто скопировать его содержание и сохранить на компьютере), чтобы вас не застиг врасплох форс-мажор в той или иной вариации.
Код формирования заголовков Etag и Expires для настройки кэша
На случай, ежели предложенные выше директивы вдруг не сработают (даже если на вашем хостинге установлен "чистый" Апач), разберем другой случай, а именно, когда в качестве инструментов управления кэшированием выступает пара входящих в разряд обязательных заголовков Etag и Expires. Как вы помните, оба отвечает за своевременность выдачи файлов из кеша, инициируя проверку на актуальность текущей версии.
Но если в качестве значения Expires отображается дата последнего изменения, то в ETag используется тот или иной уникальный идентификатор ресурса (чаще в этой роли выступает версия файла). Для активации ETag требуется лишь ввести в тот же.htaccess одну строчку:
FileETag MTime Size
Ну а затем применить уже известный нам модуль mod expires. Можно добавить и mod setenvif, который, как я уже сказал выше, запрещает формирование заголовков Vary для определенной группы веб-браузеров, чтобы гарантировать образование кеша с их стороны:
FileETag MTime Size
Здесь использован комплекс с минимумом типов задействованных объектов, но зато наиболее востребованных (CSS, JavaScript и изображения), который также должен быть достаточным, чтобы обеспечить максимальную эффективность в ускорении сайта. При желании к комплекту «jpg|jpeg|gif|png|ico|css|js» можно добавить другие виды файлов.
Кроме того, в приведенном выше примере кода для всех файлов действует один и тот же период "жизни" кеша, равный одному году ("access plus 1 year"), который является рекомендуемым со стороны Гугла. Но можно для каждой группы объектов указать свой временной отрезок по примеру содержания модулей mod_expires и mod_headers из предыдущего раздела статьи.
Проверка наличия нужных заголовков в ответе сервера
После того, как вы вставите код в файл.htaccess, можно проверить, находятся ли необходимые заголовки в составе ответа сервера. Для этой цели можно воспользоваться каким-нибудь онлайн сервисом, например, Checkmy.ru , где в качестве клиента (User Agent), посылающего HTTP-запрос на сервер, выбираем любой браузер, а также вводим URL ресурса (для примера я взял путь до изображения, используемого в одной из статей блога):
После нажатия кнопки «Отправить запрос», через несколько секунд появится результат:
Как видите, в моем случае присутствуют все четыре заголовка. Я говорил, что обязательно должны выводится по одному из пар «Last-Modified — ETag» и «Expires — Cache-Control», остальные излишни. При этом полный комплект, насколько можно судить, не причинит вреда.
Кстати, ежели вы осуществите тестирование перед началом настройки кеширования, то сразу сможете определить, насколько продуктивными будут ваши действия.
Ведь если в ответе сервера будет присутствовать nginx, то настраивать нужно будет именно его (у меня это сделал провайдер), а файл конфигурации.htaccess будет здесь бесполезен. В таком случае, как я уже отмечал, придется задействовать помощь службы поддержки, если, конечно, ваш тариф хостинга и недостаточные знания не позволят самостоятельно решить вопрос.
Далее советую для закрепления материала обратиться к видео и посмотреть последовательно 6 уроков (один из которых посвящен настройке кеширования в браузерах), в которых подробно рассмотрены все наиболее важные аспекты ускорения сайта WP:
");">
Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:
Еще статьи по данной теме:
60 отзывов
- Денис
Очень полезный способ для увеличения удобства нахождения на сайте. Ведь оптимизируя скорость загрузки Вы тем самым экономите время посетителя, и за это они будут благодарны заходя снова и снова на Ваш сайт. Что напрямую повлияет на доходы сайта положительным образом.
- Игорь
Абсолютно верно, Денис. В продвижении сайта все взаимосвязано.
- Marazzi
Ниче не поняла, браузер вобщето сам помоему запоминает сайты на которых была в кукис, Если куки подтиреть. СОГЛАСНО ВАШЕМУ МЕТОДУ то и ваша схема перестанет работать, вернее ятак понялда что это о чем идет разговор расчитано на постоянного посетителя который не подчищает историю7 ПОДПИСАЛАСЬ, ЖДУ ОТВЕТА1
- Сергей Дмитриевич
Весьма полезная информация. Мне пригодилась. Спасибо.
- Игорь
Marazzi, во первых куки и кэш разные вещи. Куки - особые файлы с набором данных, которые позволяют идентифицировать пользователя, если он посещает вебресурс. А cache (в переводе с англ.-склад, тайник) браузера - это своеобразное укромное место для хранения копий документов (например, вебстраниц сайта), которые при необходимости отображаются в браузере. Именно со стороне сервера происходит команда использовать кэш на стороне браузера пользователя, причем создается папка с кэшем именно на компьютере пользователя. Со своей стороны пользователь может регулировать частоту создания кэшированных копий страниц сайта, очищая папку с кэшем. Или вообще запретить кэширование, настройки современных браузеров это позволяют. Чем чаще вы чистите кэш, тем более новую версию страницы получаете.
- Николай
Супер,и здесь всё ОК!!!
- marazzi
Ну об этом я и говорила.
- Александр
- Николай
Спасибо за статью. Правда не совсем понятно как потом чистить этот кэш в случае, например, если на сайте появится новая рубрика или раздел, наоборот исчезнет. Я конечно утрирую сильно, но смысл тот же. Временами кэш нужно чистить, как это реализовано в этом коде?
- Ирина
ОК! Спасибо!
Этот код помог, теперь 80 из 100FileETag MTime Size ExpiresActive on ExpiresDefault «access plus 1 year»
- Игорь
Николай, не совсем понял Ваш вопрос. Это код для кэширования страниц в браузерах пользователей, они сами чистят кэш. Новые статьи и рубрики отображаются даже тогда, когда кэш полный. Надолго кэшируются только элементы, которые длительное время остаются неизменными.
- Андрей
Спасибо. А если мне нужно, чтобы кэшировались только определенные, например, логотип и флаги стран в footer, то как быть?
- Игорь
Андрей, а зачем Вам отделять изображения, одни кэшировать, другие нет? Обычно картинки не меняются с калейдоскопической быстротой.
- Андрей
Ну да, с картинками Вы правы. А определенную страницу не кэшировать(например, из админки). Такое возможно?
- Игорь
Конечно, возможно. Если Вы пользуетесь плагином кэширования, например Hyper Cache, то в его настройках есть уйма разнообразных опций, в том числе можно исключить страницы, которые не подлежат кэшированию.
- Ярослав
Очень полезная, статья, давно хотел настроить кеширование, вот только раньше везде находил первый представленный способ и он не делал ровным счетом ничего.
Зато благодаря вкторому способу все работает на ура!! PS 91 - Игорь
Хороший результат, Ярослав.
- stan
не работает ни один способ
- Игорь
Stan, вполне может быть, это во многом зависит от хостера.
- Илья
Слов нету сколько я искал статью как включить время кеширование браузера просто надо было вставить самый верхний код. Спасибо за статью.
- Игорь
Пожалуйста, Илья.
- Серый
Спасибо, работает!
- Сергей
так же не работает ни один способ
хостер адекватныйвидимо им писать в саппорт придётся
- Игорь Горнов
Да, Сергей, пожалуй. Сами видите, у многих получается реализовать.
- Александр Пузатых
Спасибо. Информация классная. Сейчас буду исправлять у себя на сайте. А то pgespeed выдает красную метку.
- Юрий
все сделал как описано, но скорость загрузки PageSpeed Insights не изменилась (74%). В чем может быть причина?
- Юрий
Вот мой htaccess
# BEGIN WordPressRewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]# END WordPress
добавляю ваш код и ничего не меняется
PageSpeed Insights как было 74% так и осталось.
Скажите в чем может быть проблема??? - Игорь Горнов
В особенностях конфигурации сервера Вашего хостинга, где расположен сайт. По моему, в статье и комментариях я уже отмечал, что этот метод не всем подходит.
- Валерий
Игорь, хорошая статья. Давно хотел это сделать, но не знал как. Теперь понятно. У меня один вопрос: "В какое место файла.htaccess нужно вставить код?".
- Игорь Горнов
Валерий, если у Вас уже есть какие-то фрагменты кода в.htaccess, то там должна быть такая строчка:
# END WordPress
В этом случае не только данный, но и любой код следует поместить выше этой строчки. Остальное не имеет значения.
- vokacan
Информация полезная, но разобраться новичку довольно сложно, на мой взгляд.
- Aely
Странно у меня то же не сработало, а что нужно делать, вернее что нужно у хостера спрашивать?
- Игорь Горнов
У хостера нужно спросить следующее: есть ли возможность включить кэширование на сервере для всех возможных файлов. Возможно, у них уже есть готовый алгоритм, отличный от предложенного мною.
- Aely
Спасибо, сейчас написал.
- Aely
Вот прикол, они(хостер) сказали что у них всё включено, а я им, а гуглспидтест - показывает "используйте кеш браузера", а они мне - это вопросы к гуглспидтест. Не могу понять кому верить?:)
- Игорь Горнов
Aely, такое отношение к клиенту со стороны хостера, по меньшей мере, странно. По идее, они должны бы объяснить и дать возможный алгоритм для внесения его в файл.htaccess, чтобы активировать функцию, даже если она у них включена. Интересно, а Вы не в первый раз обращались к службе поддержки, как она проявляла себя в других ситуациях?
«», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed Insights. Каждый владелец сайта сталкивался с проблемой сложности закешировать js скрипты сторонних сайтов.
Это не такой важный показатель для оптимизации, по сути происходит перенос из шапки сайта 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 (не указан срок действия)
Исправляем первую проблему, заходим в файл.htaccess, что находится к корне сайта и вставить в самый низ этот код:
# сжатие text, html, javascript, css, xml:
Примеры сторонних скриптов
Если в первом шаге, все сделали верно, должны увидеть примерно такой список:
Используйте кеш браузера для следующих ресурсов
У вас конечно, может быть всего несколько URL на метрику и аналитику например, но это не столь важно, инструкция исправления одинаков для всех.
Кеш сторонних элементов
Изначально статья должна была быть посвящена только этим пунктам, однако чувствуя, что будет много вопросов было добавлено ещё пару пунктов.
Повлиять на время кеша стороннего ресурса никак нельзя, но можно сделать на своем веб-проекте Самый правильных ход в этой ситуации, скачивать автоматически свежие скрипты метрики, аналитики и т.д. к себе на сайт с помощью крона (скрипт присутствует)
Давайте теперь по порядку!
Шаг 1. Скопируем список всех скриптов на которые указывает Google PageSpeed в блокнот или прямо с браузера.
Шаг 2. Создайте файл на хостинге с расширением php и вставляем в него следующий код:
Внимание! У вас нет прав для просмотра скрытого текста.
В коде для примера 3, но вы можете создать сколько нужно пунктов, просто копируйте и добавляйте ниже или удалите лишние.
В этой строке меняем 3 значение:
Используйте кеш браузера для Google PageSpeed
1. Скрипт который будем закачивать к себе на сайт
Внимание! У вас нет прав для просмотра скрытого текста.
2. Путь куда сохранять файл:
Realpath("./js")
В этом примере это папка js, т.е. точный путь будет www.сайт/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)
3. Имя скрипта, если с расширением.js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.
Шаг 3. Заливаем отредактированный файл на сервер
Шаг 4. Ставим файл на крон для автоматического обновления файлов
Для того чтобы избежать некорректной работы с сервисами, если они внесут изменения в скрипты, крон будет автоматически заходить и обновлять их у себя на сервере.
Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а также указываем время раз в час/сутки или любое другое время.
Wget -q -O - /dev/null http://www..php >/dev/null 2>&1
Не забываем сменить URL и возможно синтаксис команды у вас будет другой, посмотрите примеры cron команд в справке хостинга или утоните в тех.поддержке.
Шаг 5. Меняем путь к JS в счетчике или скрипте
Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например http://www..js
Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.
Скачать " включаем кеш браузера для Google PageSpeed " инструкцию в архиве Вы не можете скачивать файлы с нашего сервера
Представляем полезную статью «Включаем кеш браузера для Google PageSpeed», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed всё лучшее у нас форумы, хаки, модули, шаблоны.
