Как сделать используйте кэш браузера

20.03.202313.04.2023 admin 0 Комментариев

Учебное пособие по кэшированию, часть 1

Довольно подробное и интересное изложение материала, касающегося кэша и его использования. Часть 2.

Автор, Mark Nottingham, — признанный эксперт в области HTTP-протокола и веб-кэширования. Является председателем IETF HTTPbis Working Group. Принимал участие в редактировании HTTP/1.1, part. 6: Caching. В настоящий момент участвует в разработке HTTP/2.0.

От переводчика: об опечатках и неточностях просьба сообщать в личку. Спасибо.

Веб-кэш располагается между одним или несколькими веб-серверами и клиентом, или множеством клиентов, и следит за входящими запросами, сохраняя при этом копии ответов — HTML-страниц, изображений и файлов (совокупно известных, как представления (representations); прим. переводчика — позвольте я буду употреблять слово “контент” — оно, на мой взгляд, не так режет слух), для собственных нужд. Затем, если поступает другой запрос с аналогичным url-адресом, кэш может использовать сохраненный прежде ответ, вместо повторного запроса к серверу.

Существует две основные причины, по которым используется веб-кэш:

1. Уменьшение времени ожидания — так как данные по запросу берутся из кэша (который располагается “ближе” к клиенту), требуется меньше времени для получения и отображения контента на стороне клиента. Это делает Веб более отзывчивым (прим. переводчика — “отзывчивым” в контексте быстроты реакции на запрос, а не эмоционально).

2. Снижение сетевого трафика — повторное использование контента снижает объем данных, передаваемых клиенту. Это, в свою очередь, экономит деньги, если клиент платит за трафик, и сохраняет низкими и более гибкими требования к пропускной способности канала.

Виды веб-кэшей

Кэш браузера (Browser cache)

Если вы изучите окно настроек любого современного веб-браузера (например, Internet Explorer, Safari или Mozilla), вы, вероятно, заметите параметр настройки «Кэш». Эта опция позволяет выделить область жесткого диска на вашем компьютере для хранения просмотренного ранее контента. Кэш браузера работает согласно довольно простым правилам. Он просто проверяет являются ли данные “свежими”, обычно один раз за сессию (то есть, один раз в текущем сеансе браузера).

Этот кэш особенно полезен, когда пользователь нажимает кнопку “Назад” или кликает на ссылку, чтобы увидеть страницу, которую только что просматривал. Также, если вы используете одни и те же изображения навигации на вашем сайте, они будут выбираться из браузерного кэша почти мгновенно.

Прокси-кэш (Proxy cache)

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

Поскольку прокси не являются частью клиента или исходного сервера, но при этом обращены в сеть, запросы должны быть к ним как-то переадресованы. Одним из способов является использование настроек браузера для того, чтобы вручную указать ему к какому прокси обращаться; другой способ — использование перехвата (interception proxy). В этом случае прокси обрабатывают веб-запросы, перенаправленные к ним сетью, так, что клиенту нет нужды настраивать их или даже знать об их существовании.

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

Кэш-шлюз (Gateway Cache)

Также известные как “реверсивные прокси-кэши” (reverse proxy cache) или “суррогаты” (surrogate cache) шлюзы тоже являются посредниками, но вместо того, чтобы использоваться системными администраторами для сохранения пропускной способности канала, они (шлюзы) обычно используются веб-мастерами для того, чтобы сделать их сайты более масштабируемыми, надежными и эффективными.

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

Сети доставки контента (content delivery networks, CDN) распространяют шлюзы по всему интернету (или некоторой его части) и отдают кэшированный контент заинтересованным веб-сайтам. Speedera и Akamai являются примерами CDN.

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

Почему я должен им пользоваться

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

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

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

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

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

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

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

Как работает веб-кэш

Все виды кэшей обладают определенным набором правил, которые они используют, чтобы определить, когда брать контент из кэша, если он доступен. Некоторые из эти правил установлены протоколами (HTTP 1.0/HTTP 1.1), некоторые — администраторами кэша (пользователями браузера или администраторами прокси).

Вообще говоря, это самые общие правила (не волнуйтесь, если вы не понимаете детали, они будут объяснены ниже):

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример можете посмотреть в гугл пейдж:premiumcafe.ru

Поделитесь информацией как это сделать? Без вреда к функционалу подключаемых сервисов.

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

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

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

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

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

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

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

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

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

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

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

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

Вот скрин главной skrinshoter/s/120816/xYXqGE.png
На этой странице выводятся 10 последних записей (анонсы)

А вот скрин на анализ сайта skrinshoter/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 и все?

Поставил плагин nix gravatar cache, а он мне все граватары пустыми сделал в блоге.
Тестил на другом сайте – та же фигня.

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

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

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

У Вас полезный ресурс, буду еще на днях решать проблему с 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 секунд в день, и подписчиков так же.

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

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

# редирект 301
Options +FollowSymLinks
RewriteEngine On
RewriteCond % ^www.gumirov1963.ru\.ru$ [NC]
RewriteRule ^(.*)$ [R=301,L]
# END WordPress

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

Добрый день! Валентин. Через редактор хостинга вставил код в файл htaccess, но после анализа в PageSpeed ни чего не изменилось. Помогите разобраться очень тормозит сайт.

Ниже отрывок из файла.

# BEGIN WPSuperCache
# END WPSuperCache
# BEGIN WordPress

Header set Cache-Control “max-age=43200”

Header set Cache-Control “max-age=604800”

Header set Cache-Control “max-age=2592000”

Header unset Cache-Control

Приветствую, так а где мой код из статьи?

Копирую и вставляю весь отрывок, а при отправлении выходит то что в предыдущих письмах.

Посмотрел скриншот, вроде все по уму, спросите у своего хостинга, поддерживает ли он функцию mod_header для кеширования в браузерах.

Спасибо. Сейчас испробуем! 😉

Пожалуйста, будут вопросы задавайте.

Валентин, сколько будет стоить у вас оптимизация загрузки сайта?
aqua-art-print.ru
Знаю, что скажите про эффект воды, но пока его не готовы убрать)
Жду ответ.

Наталия здравствуйте. Могу оптимизировать картинки, сжать их без потери качества. Далее попробую перенести часть скриптов и css в подвал. Включим кеш для браузеров и сожму файлы css и js. Загрузку видимого контента оптимизировать скорее всего не удастся, потому что скрипты не дадут контенту сразу отобразиться. Ну думаю до 80 по пейдж спиду дотянем. Эффект воды классно смотриться, но по моему мнению не в тему сайта, сразу кажется что пришел в магазин сантехники, понимаю что в названии присутствует слово вода, но мое мнение, не обижайтесь пожалуйста. А так возьму 1500 при успешном результате, иначе ничего не возьму. От вас все доступы, от хостинга и от админки, если таковая есть, потомучто сайт рукописный. И моя рекомендация переход на протокол https, так как у вас сайт связан с вводом персональных данных пользователей. Ну и с валидностью поработать можно вот ссылка с ошибками кода validator.w3.org/nu/?doc=http%3A%2F%2Faqua-art-print.ru%2F

Максимум что смог выжать=)) это для мобильных 94 из 100 и для ноута 98 из 100 вот только никак не могу разобраться как настроить “Используйте кеш браузера” если есть мысли как, подскажите!

Никак если есть внешние скрипты типа метрики.

Здравствуйте, Валентин. Благодарю за статью. Плагин NIX Gravatar Cache наверно больше не поддерживается? Что-то не могу его найти.

Приветствую. Да видно, но если интересует могу его скинуть, а там уже по ftp закините на блог.

Да, было бы здорово. Спасибо)

Напишите мне на электронную почту в разделе контакты, я вам пришлю.

Если нужен хитрозадый вариант то можно путем небольшого хака
просто отшиваем юзерагента PageSpeed Insights в области кода, где у нас аналитика

тут вставляем код гугл аналитики и (или) яндекс метрики

Источник

Как настроить или установить

Как сделать используйте кэш браузера