Как использовать кэш браузера – Как использовать кеш браузера пользователей для ускорения сайта (заголовки Last-Modified, ETag, Expires, Cache-Control) | Создание сайтов и заработок в сети

Содержание

Настройка кэширования страниц сайта с помощью .htaccess

Настройка кеширования страниц сайта 2021-2019-2020 htaccess

Настройка кеширования страниц сайта 2021-2019-2020 htaccess

Настройка кэширования статических файлов через .htaccess. Не менее важный этап технической оптимизации, как включение gzip сжатия. Включение кэширования страниц и файлов, позволит Вам значительно увеличить скорость сайта. А также в разы уменьшить нагрузку на сервер. Благодаря несложным манипуляциям, Ваш сайт начнет летать.

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

Содержание статьи:

Что такое кэш сайта — как кэширование влияет на сайт

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

Кэш или кеш — промежуточный буфер обмена данными с быстрым доступом. Сохраняющий и содержащий информацию, которая имеет частый запрос. Доступ к данным в cache, проходит с большей скоростью, чем с более медленных источников памяти. Но имеется ограничение в объеме памяти. Доступным языком Кэш (cache) — это короткая память.

При этом кэширование, не несет вреда пользователю. Но улучшает отображение Вашего проекта в его обозревателе. Как это происходит! Когда пользователь заходит на сайт. Его загрузка проходит немного медленней чем нужно. Это связано с тем, что браузер в этот момент сохраняет некоторую копию сайта. В большей степени это относится:

  1. к логотипам;
  2. мелким изображениям;
  3. css файлам;
  4. общей структуре страниц.

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

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

Как включить и настроить кэширование сайта

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

  1. Создать конструкцию типа FilesMatch. В ней указываем необходимые расширения файлов для кэширования.
  2. Далее указываем заголовок Cache-Control с переменной max-age. Тут Cache-Control — это заголовок ответа сервера. Max-age — переменная в которой указывается время хранения файла в секундах.

Типичный список расширений, которые используются в конструкции FilesMatch:

(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)

Те файлы которые Вы не хотите кэшировать, включать в список конструкции FilesMatch не нужно.

Пример кода Header set Cache-Control

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>
</ifModule>

Значение -#- комментарий! Как видите в комментариях указаны сроки, на которые будут сохранены файлы. Также есть возможность запрета принудительного кеша. Этот вариант подходит для динамических файлов. В большей степени относится к скриптам и различным сценариям.

Пример конструкции «FilesMatch» запрещающей принудительное кэширование

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>

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

Также имеется еще один способ управления Cache — который используется многими плагинами на  WordPrees. В этом способе, мы будем использовать модуль mod_expires. Этот модуль имеет способность контроля, над заголовками ответа HTTP на стороне сервера. Тут основное время хранения данных в кэше, может быть установлено Вами.

Имеет несколько установок продолжительности хранения данных:

  1. по времени доступа клиента;
  2. или по последнему изменению файла;
  3. установка по времени;

Пример простого кода <ifmodule mod_expires.c>

# Expires Headers — 2678400s = 31 days
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType image/gif "access plus 2678400 seconds"
ExpiresByType image/jpeg "access plus 2678400 seconds"
ExpiresByType image/png "access plus 2678400 seconds"
ExpiresByType text/css "access plus 518400 seconds"
ExpiresByType text/javascript "access plus 2678400 seconds"
ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

Более серьезный пример использования <IfModule mod_expires.c>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000


ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/webp A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000

ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000

ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/font-woff2 A31536000

ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

Как мы видим, тут затронуто огромное количество расширений. С одним, и тем же, сроком хранения.

Кэширование в браузере на стороне пользователя на 3 — 7 дней или на год

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

# кеширование в браузере на стороне пользователя
<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"
ExpiresByType js "access 3 days"
</IfModule>

Кэширование контента (Flash, CSS, JS, HTML, XML) и изображений

В этом примере, мы используем кеш только к определенным файлам. И на менее длительный срок.

<ifModule mod_expires.c>
ExpiresActive On


# Кеш для изображений
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
# Кеш контента (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

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

Настройка кэширования с помощью плагинов WordPress

Для тех, кто использует CMS WordPress, имеет огромное разнообразие кеш плагинов. Все они имеют полнофункциональное решение и автоматическую настройку. Особых проблем при использовании подобных плагинов, возникнуть не должно. После установки такого плагина, Вам остается применить нужные Вам настройки. Плагин автоматически сохранит их в файле htaccess.

 WP Fastest Cache

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

WP Fastest Cache настройка кэширования WordPress 2022-2020-2021

WP Fastest Cache настройка кэширования WordPress 2022-2020-2021

WP Super Cache

Очень популярный плагин! Отличный функционал и удобные настройки. Способен кешировать большое количество различных объектов. Настройка плагина очень простая.

WP Super Cache настройка кеширования WordPress 2022-2020-2021

WP Super Cache настройка кеширования WordPress 2022-2020-2021

W3 Total Cache

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

W3 Total Cache настройка кэширования WordPress 2019-2020-2021

W3 Total Cache настройка кэширования WordPress 2019-2020-2021

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

В заключение

В этой статье я постарался максимально раскрыть тему кеширования. Рассказав о примерах, которые можно использовать в зависимости от Ваших характеристик. Настройка кэширования с этим руководством пройдет у Вас как по маслу. Надеюсь эта статья будет актуальна еще долгое время. Благодарю за внимание, но не прощаюсь. Увидимся в следующих статьях.


  • Читайте статьи по этой теме:

nicola.top

Используйте кеш браузера, как включить кэширование в htaccess

Многие веб-мастера пользуются таким инструментом, как Google Page Speed для проверки скорости своего сайта. После анализа он выдает ряд рекомендаций по оптимизации. И одной из таких рекомендация является использование кеша браузера.

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

Но у кэширования есть и минусы — если файл на сервере изменился, то у вас скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем img01.jpg содержал в себе изображение автомобиля. Вы зашли на сайт, почитали статью и вышли. Но администратор сайта почему-то решил, что картинка автомобиля там неуместна, и решил заменить ее на картинку с пейзажем. Но название файла осталось то же. Через пару дней вы решили еще раз прочитать ту статью. Когда вы зашли на сайт, картинка у вас осталась старая — автомобиль. Это потому, что браузер ее закэшировал с таким названием img01.jpg. И чтобы у вас отобразилась уже новая картинка с пейзажем, вам нужно сбросить кэш браузера комбинацией клавиш Ctrl+F5.

Настройка htaccess

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

После чего в нем прописываются следующие директивы:


<IfModule mod_expires.c>
  <FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$>
    ExpiresDefault "access plus 1 year"
  </FilesMatch>
  ExpiresActive on
  ExpiresByType image/jpeg "access plus 7 day"
  ExpiresByType image/gif "access plus 7 day"
  ExpiresByType image/png "access plus 7 day"
  <FilesMatch \.(css|js)$>
    ExpiresDefault "access plus 1 year"
  </FilesMatch>
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Прописав данные правила, Google Page Speed пометит галочкой, что кэширование включено, и начислит вашему сайту дополнительных баллов.

P.S. Хочется отметить одну вещь, что кэширование, к сожалению, не распространяется на внешние ресурсы, такие как скрипты Яндекс.Метрики и Google.Analytics


27404 просмотра

Март 21, 2015

alittlebit.ru

Топ-10 советов о том, как увеличить скорость загрузки страницы / Habr

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

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

Итак, поехали:

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

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

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт – это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

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

<IfModule mod_expires.c>

Header append Cache-Control "public"

FileETag MTime Size

ExpiresActive On

ExpiresDefault "access plus 0 minutes"

ExpiresByType image/ico "access plus 1 years"

ExpiresByType text/css "access plus 1 years"

ExpiresByType text/javascript "access plus 1 years"

ExpiresByType image/gif "access plus 1 years"

ExpiresByType image/jpg "access plus 1 years"

ExpiresByType image/jpeg "access plus 1 years"

ExpiresByType image/bmp "access plus 1 years"

ExpiresByType image/png "access plus 1 years"

</IfModule>

Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN – является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

8. Оптимизируйте ваши изображения

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

  • GIF – идеально подходят для изображений с несколькими цветами, например логотип.
  • JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
  • PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

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

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

Content-Encoding: gzip

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/css

<IfModule mod_setenvif.c>

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

</IfModule>

 </IfModule>

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain 

text/xml application/xml application/xhtml+xml 

text/javascript text/css application/x-javascript

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

<ifmodule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_item_include file \.js$

mod_gzip_item_include file \.css$ 

</ifmodule>

 </IfModule>

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

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

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

habr.com

Включаем кеш браузера на стороне пользователя

👁12 146 просм.

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

Зачем включать кеш браузера на стороне пользователя

Зачастую при создании нового сайта программисты не особо уделяют внимание скорости загрузки сайта браузером. Особенно если на этот пункт не было сконцентрировано внимание в Техническом Задании для разработки сайта. И после выхода нового творения в свет, веб-специалист, который занимается развитием и продвижением данного проекта может наблюдать очень печальную картину, просканировав сайт на скорость загрузки в PageSpeed Insights от Google.

Вот далеко не полный список проблем, с которыми мы можем столкнуться, и которые замедляют скорость загрузки сайта на стороне браузера пользователя:

Включите кеш браузера

И одна из рекомендаций сервиса PageSpeed, как раз необходимость включить кеш браузера.

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

А причины для этого как минимум две:

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

Как включить кеширование файлов в браузере на стороне пользователя

Если ваш проект разработан на популярной CMS WordPress, то есть множество плагинов, позволяющих решить проблему кеширования. Самые популярные из них W3 Total Cache, WP Super Cache, Hyper Cache. Но в этой статье я предлагаю рассмотреть более надежный, по моему мнению, способ включения кеширования через файл .htaccess непосредственно  на хостинге.

Обратите внимание, что предлагаемые методы будут работать только в том случае, если на сервере вашего хостинг-провайдера установлено ПО Apache.

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

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

Включение кеширования в браузере на стороне пользователя при помощи модуля mod_headers

Для включения функции кеширования приведенный ниже код надо вставить в файл .htaccess, который расположен в корневом каталоге вашего сайта. Во избежание появления ошибок, вставлять код нужно перед строчкой # END WordPress:

# Включение кеша в браузерах посетителей сайта <ifModule mod_headers.c> # Все html и htm файлы будут храниться в кеше браузера 12 часов <FilesMatch «\.(html|htm)$»> Header set Cache-Control «max-age=43200» </FilesMatch> # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней <FilesMatch «\.(js|css|txt)$»> Header set Cache-Control «max-age=604800» </FilesMatch> # Все флеш файлы и изображения будут храниться в кеше браузера 31 день <FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»> Header set Cache-Control «max-age=2592000» </FilesMatch> # Отключаем кеширование php и других служебных файлов <FilesMatch «\.(pl|php|cgi|spl|scgi|fcgi)$»> Header unset Cache-Control </FilesMatch> </IfModule>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

# Включение кеша в браузерах посетителей сайта

<ifModule mod_headers.c>

    # Все html и htm файлы будут храниться в кеше браузера 12 часов

    <FilesMatch «\.(html|htm)$»>

        Header set Cache-Control «max-age=43200»

    </FilesMatch>

    # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней

    <FilesMatch «\.(js|css|txt)$»>

        Header set Cache-Control «max-age=604800»

    </FilesMatch>

    # Все флеш файлы и изображения будут храниться в кеше браузера 31 день

    <FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»>

        Header set Cache-Control «max-age=2592000»

    </FilesMatch>

    # Отключаем кеширование php и других служебных файлов

    <FilesMatch «\.(pl|php|cgi|spl|scgi|fcgi)$»>

        Header unset Cache-Control

    </FilesMatch>

</IfModule>

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

Включение кеширования в браузере на стороне пользователя при помощи модуля mod_expires

Для включения кеширования в браузере на стороне пользователя при помощи модуля mod_expires прописываем в файле .htaccess следующий код:

<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 30 секунд ExpiresDefault «access plus 30 seconds» # Включаем кеширование изображений и флеш на 1 месяц ExpiresByType image/x-icon «access plus 1 month» ExpiresByType image/jpeg «access plus 4 weeks» ExpiresByType image/png «access plus 30 days» ExpiresByType image/gif «access plus 43829 minutes» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» # Включаем кеширование css, javascript и текстовых файлов на 7 дней ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html «access plus 43200 seconds» # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml «access plus 600 seconds» </ifModule>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<ifModule mod_expires.c>

    ExpiresActive On

    #по умолчанию кеш в 30 секунд

    ExpiresDefault «access plus 30 seconds»

    # Включаем кеширование изображений и флеш на 1 месяц

    ExpiresByType image/x-icon «access plus 1 month»

    ExpiresByType image/jpeg «access plus 4 weeks»

    ExpiresByType image/png «access plus 30 days»

    ExpiresByType image/gif «access plus 43829 minutes»

    ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds»

    # Включаем кеширование css, javascript и текстовых файлов на 7 дней

    ExpiresByType text/css «access plus 604800 seconds»

    ExpiresByType text/javascript «access plus 604800 seconds»

    ExpiresByType application/javascript «access plus 604800 seconds»

    ExpiresByType application/x-javascript «access plus 604800 seconds»

    # Включаем кеширование html и htm файлов на 12 часов

    ExpiresByType text/html «access plus 43200 seconds»

    # Включаем кеширование xml файлов на 10 минут

    ExpiresByType application/xhtml+xml «access plus 600 seconds»

</ifModule>

В данном коде вы можете заменить значения month, weeks, days, minutes, seconds на свои, если это будет необходимо, и вы посчитаете нужным увеличить или уменьшить время жизни кеша.

Заключение

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

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

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

Расскажите, была ли полезной для вас эта статья?

web-specialist.info

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

Для ускорения работы сайта (точнее, для увеличения скорости загрузки страниц), русский тракторист продолжает настройку файла htaccess.

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

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

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

Для этого нужно установить браузер Firefox. И дополнения к нему, Firebug и Page Speed. Теперь при загрузке сайта, вы будете видеть полную картину, файлы, их размер и время загрузки. Сразу после проверки, Page Speed выдаст рекомендации по увеличению скорости загрузки сайта.

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

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

Самый простой способ узнать, включен ли у вас в файле htaccess (именно htaccess отвечает за команду использования кэша браузера компьютера, пришедшего на сайт), «кэш браузера посетителя» или нет, это онлайн сервис gtmetrix.com.

Пишем название сайта и через пять секунд получаете полную картину. Первая же строка «Leverage browser caching», показывает красным или зеленым цветом, включен кэш браузера в 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>

 

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

  • < Оптимизировать фото для сайта
  • Как раскрутить сайт >

rtr24.ru

Как очистить кэш браузера и зачем это нужно?

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

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

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

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

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

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

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

Стоит также отметить, что далеко не всё содержимое сайта кэшируется. Настройки кэша выставляются каждым веб-мастером по собственному усмотрению. Если же информационный ресурс создается при помощи CMS (WordPress, Joomla, Drupal), то разработчику, как правило, доступны уже готовые решения по обеспечению кеширования в виде плагинов (которые имеют стандартные установки и часто не нуждаются в дополнительных настройках).

В CMS WordPress, к примеру, широкую популярность обрели плагины WP Super Cache и W3 Total Cache.

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

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

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

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

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

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

  • Интернет Эксплорер:


Заходим в меню браузера, после чего ищем пункт «Сервис». Нажимаем «Удалить журнал обозревателя», а в появившемся окне ставим галочку только напротив пункта «Временные файлы интернета». Жмем «Удалить».


Переходим в меню и выбираем пункт «Настройки». Открываем вкладку «Дополнительные» и ищем в ней пункт «Сеть». Перейдя к содержимому, видим, среди прочего, надпись «Кэшированное веб-содержимое», напротив которой расположена кнопка «Очистить сейчас». Жмем по заветной кнопке и процесс завершен.


Для того чтобы очистить кэш в браузере Хром, заходим в меню и открываем пункт «Инструменты». Нажимаем на «Показать дополнительные настройки», после чего кликаем по «Очистить историю». Если нужно очистить весь кэш, то указываем период «За всё время», а галочку ставим только напротив пункта «Изображения и другие файлы, сохраненные в кэше». Жмем на «Очистить историю».


Заходим в раздел «Настройки», кликаем на «Безопасность». Нажимаем на «Очистить историю посещений», а в разделе «Уничтожить следующие элементы» стоит выбрать «С самого начала» (если хотим очистить весь кэш). Ставим галочку только напротив «Очистить кэш» и нажимаем на «Очистить историю». Процесс завершен.

  • Яндекс.Браузер:


Для того чтобы очистить кэш в Яндекс.Браузере, заходим в меню и выбираем вкладку «Инструменты». Переходим в «Удаление данных о просмотренных страницах».

Чтобы очистить весь кэш, в выпадающем списке рядом с надписью «Удалить указанные ниже элементы» выбираем «За все время». Ставим отметку только напротив пункта «Очистить кэш» и кликаем по кнопке «Очистить историю».

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

www.internet-technologies.ru

Использование кэширования браузеров для сторонних JS — php

Досадная проблема, действительно. Я не боюсь, что это не так сильно легко. Но вы можете использовать cron.

Во-первых, имейте в виду, что Google вряд ли будет наказывать вас за свои инструменты (например, Analytics). Однако, как упоминалось ранее, его можно исправить с помощью cron, что в основном означает, что вы загружаете JavaScript локально и вытаскиваете обновленные сценарии.

Как это сделать:

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

Посмотрите в свой код и найдите имя script, в нашем случае это: google-analytics.com/ga.js. Поместите этот URL-адрес в свой веб-браузер, и он откроет исходный код. Просто сделайте копию и сохраните ее как ga.js.

Сохраните этот вновь созданный файл JavaScript на своем веб-сервере, в моем случае:

- JS
  - ga.js

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

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

к

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js';

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

Здесь задействован CRON:

Почти каждый хостинг-сервис будет иметь возможность настраивать задания cron. На Hostinger он находится на вашей панели хостинга, на GoDaddy вы найдете его под опцией Content.

Поместите в cron следующий script, и все, что вам нужно сделать, это изменить абсолютный путь к переменной $localfile. Что делает этот script, вытягивает обновленный script из Google для файла ga.js. Вы можете установить временные рамки того, как часто вы хотите, чтобы этот процесс выполнялся. От одного раза в час до одного раза в месяц и далее.

Если вы делаете это также и для внешних файлов, отличных от Google Analytics, вам также потребуется изменить переменную $remoteFile. Таким образом, $remoteFile является URL-адресом внешнего файла JavaScript и переменной $localfile, вы поместите путь к вашему новому локально

qaru.site

Отправить ответ

avatar
  Подписаться  
Уведомление о