Кеширование браузера
Скорость страницы как никогда важна для высокого ранга в поисковой выдаче Google, а также для обеспечения качества обслуживания ваших пользователей. Если вы заинтересованы в том, чтобы набрать 90 очков в своем рейтинге Google PageSpeed Insights, вам понадобятся все возможные инструменты в наборе инструментов, включая кеширование браузера!
В наши дни вы найдете несколько вариантов повышения скорости страницы, но один из самых разумных способов повысить скорость вашего веб-сайта – это правильно использовать кеширование браузера.
В этом посте мы рассмотрим, как использовать кеширование браузера, и поможем вам исправить любые предупреждения о кешировании браузера, с которыми вы столкнулись при тестировании производительности вашего сайта.
Что такое кеширование браузера и зачем оно нам нужно?
Вся идея кеширования состоит в том, чтобы «сохранить» последнюю версию вашего веб-сайта, чтобы посетители могли быстрее получить к ней доступ.
Вот примерное представление о том, как это работает: если вы художник, кеширование похоже на разницу между готовой фотографией вашего рисунка и необходимостью перерисовывать изображение каждый раз, когда ваш друг просит его посмотреть. По сути, фотография «запоминает» то, что уже было опубликовано, и сохраняет это для будущего показа.
В более технических терминах ниже приводится краткое описание того, что происходит за кулисами, когда пользователь обращается к вашему домену в своем веб-браузере:
- Посетитель вводит ваш URL.
- Их браузер отправляет запрос на ваш сервер.
- Сервер вашего веб-сайта упаковывает все данные и отправляет их в браузер пользователя.
- Браузер отображает страницу веб-сайта.
Довольно просто, правда?
Но современные веб-сайты – это многогранные и сложные вещи, в которых все, от текста и изображений до скриптов и таблиц стилей, выполняется одновременно. И если вы похожи на миллионы владельцев веб-сайтов, полагающихся на WordPress, все это завернуто в слой PHP-кода с большим количеством запущенных дополнительных процессов.
Вот почему веб-сайт WordPress без кеширования браузера может долго загружаться. Шаг 3 выше может занять много времени, когда сайт должен отправлять данные для каждого элемента и скрипта на странице. Причина, по которой большинство веб-страниц в Интернете загружается быстрее при последующих посещениях, заключается в кэшировании, когда различные элементы вашего веб-сайта были сохранены локально для пользователя, избавляя сайт от необходимости каждый раз обслуживать каждый элемент с нуля.
Чтобы избежать нежелательного замедления работы пользователей и чрезмерной нагрузки на ваш веб-сервер, давайте быстро рассмотрим кеширование браузера в WordPress, что такое ошибка кеширования браузера и как ее исправить.
Как использовать кеширование в браузере
Если вы запускаете веб-сайт, вы должны знать, что кеширование сервера относится к процессу, при котором ваш веб-сайт создает кешированные веб-страницы для вашего веб-сайта. Это на стороне сервера – кеширование браузера – это то, что происходит, когда пользователи заходят на ваш сайт в своем веб-браузере.
Это обратная сторона медали. Когда вы используете кеширование браузера, вы предоставляете своему серверу инструкции о том, как долго ресурсы должны кэшироваться в браузерах ваших посетителей.
Как правило, чтобы использовать кеширование браузера, вам необходимо определить заголовки HTTP, чтобы установить правильное время истечения срока действия для разных типов файлов на вашем веб-сайте. Как вы это сделаете, будет зависеть от того, работает ли ваш веб-сервер на Nginx или Apache, и хотите ли вы ввести код самостоятельно или использовать плагин WordPress.
Ниже мы рассмотрим некоторые из распространенных способов настройки кеширования вашего браузера.
Исправление ошибки кеширования в браузере
Независимо от того, настраиваете ли вы его впервые или уже включили, кеширование браузера необходимо оптимизировать для правильной работы. Когда вы тестируете производительность своего сайта, вам обычно выдается предупреждение браузера о кешировании, если у вас не установлены какие-либо правила кеширования или если время истечения срока действия слишком мало.
Как правило, срок действия любых статических ресурсов должен составлять 1 год, а для динамических элементов обычно должна быть неделя или, возможно, короче. Кэшированные элементы сохраняются локально для пользователя в его веб-браузере, но они не сохраняются вечно – по истечении указанного времени эти различные элементы должны быть перезагружены пользователем с сервера вашего сайта. По-настоящему статический контент включает в себя такие вещи, как логотипы или глобальные стили CSS, но практически все остальное является динамическим и должно обновляться чаще.
Если вы когда-либо запускали свой сайт WordPress с помощью Google PageSpeed Insights или популярных инструментов тестирования веб-сайтов, таких как Pingdom и GTMetrix , то, возможно, вы уже сталкивались с предупреждением об использовании кеширования браузера.
В инструменте Google PageSpeed это выглядит так:
Лучший способ исправить это будет зависеть от вашего уникального веб-сайта и хоста, но мы рассмотрим несколько разных способов, которые помогут вам использовать кеширование браузера.
Использование плагинов для кеширования браузера
Если вы используете веб-сайт WordPress, вы можете пропустить более сложные этапы кодирования, описанные далее в этом посте, и просто использовать некоторые качественные плагины WordPress для использования кеширования браузера.
W3 Общий кэш
Один из лучших плагинов для эффективного кеширования браузера – W3 Total Cache . Это бесплатный плагин, который помогает улучшить SEO и удобство работы пользователей на вашем сайте за счет сокращения времени загрузки. Это полная структура кеширования, а это значит, что вы можете обрабатывать практически все аспекты кеширования из одного места!
Итак, готовы ли вы использовать W3 Total Cache для кеширования браузера? Вот как это делается!
Шаг 1. Включите кеширование браузера
После установки и активации W3 Total Cache (W3TC) вы можете начать настраивать параметры, чтобы использовать кеширование браузера.
Сначала перейдите в Общие настройки на вкладке « Производительность » на боковой панели панели инструментов WordPress. Здесь вы сможете настроить параметры.
Прокрутите вниз до кеша браузера и убедитесь, что установлен флажок Включить кеш браузера.
Шаг 2. Укажите глобальную политику кеширования браузера.
После того, как вы включили кеширование браузера, нажмите Browser Cache в параметрах плагина, чтобы перейти на эту страницу. Там вы найдете список настроек глобальной политики кеширования браузера, которые вы можете настроить.
Флажки включают несколько вариантов того, как использовать кеширование браузера на вашем веб-сайте. Хорошая идея – проверить все верхние поля.
- Установить заголовок expires – заголовок expires – это время истечения срока действия сущности в Интернете, будь то документ HTML, файл CSS, изображение и т. Д. Длина, указанная в этом заголовке, будет определять, как долго кэш сущности является действительным.
- Установить заголовок элемента управления кешем – заголовок элемента управления кешем является дополнительным заголовком, способствующим кэшированию в браузере.
- Установить тег объекта (eTag) – eTag – это тег проверки, который делает кеширование в браузере более эффективным.
- Установить W3 Total Cache Header – это заголовок, установленный W3TC для помощи в идентификации оптимизированных файлов.
- Включить сжатие HTTP (gzip) – сжатие Gzip сократит время загрузки текстовых файлов.
Включив эти глобальные настройки для кеширования браузера, вы теперь можете вручную настраивать соответствующие заголовки для своего сайта.
Шаг 3. Укажите заголовки кеша
Как вы увидите в разделах этого поста, посвященных Apache и Nginx, важным шагом в использовании кеширования браузера является указание заголовков кеша. В частности, вам нужно указать браузерам пользователей, как долго хранить кешированные элементы до истечения срока их действия, используя специальные команды.
Вы можете изменить время жизни заголовка для следующих типов файлов:
- CSS и JS файлы
- HTML и XML файлы
- Медиа и другие файлы
Они измеряются в секундах. Например, для файлов CSS и JS вы захотите снимать в течение двух недель или 604800 секунд .
В конечном итоге, время кэширования различных элементов зависит от вас. Все сводится к тестированию, чтобы увидеть, что работает лучше всего.
Вы можете использовать встроенный режим предварительного просмотра W3 Total Cache для тестирования изменений перед их фактическим развертыванием, который вы можете найти в общих настройках .
Используйте кеширование браузера
Да, есть плагин WordPress для кеширования браузера, который буквально называется «Использование кеширования браузера». Это инструмент с открытым исходным кодом, который вы можете скачать здесь .
Зачем использовать этот плагин? Что ж, если вы не заинтересованы в установке плагина полного кэширования, такого как W3 Total Cache, плагин Leverage Browser Caching – это вариант, который фокусируется на этом конкретном действии. Если все, что вы ищете, – это способ исправить ошибку кеширования в браузере, возможно, это все, что вам нужно.
Это также очень просто: когда вы его активируете, он сразу начинает работать, и вы также можете отключить его, чтобы остановить его.
Это работает путем прямого добавления кода кэширования браузера в файл .htaccess вашего сервера Apache (см. Ниже, чтобы узнать, как это сделать вручную).
Код (Apache) для использования кеширования браузера
Если вы предпочитаете запачкать руки, вы можете полностью обойти плагины кеширования WordPress и просто ввести код самостоятельно.
Веб-серверы обычно работают либо на Apache, либо на Nginx. Как узнать, какой из них используется?
Что ж, многие провайдеры виртуального хостинга полагаются на Apache – если на вашем сайте есть файл .htaccess, то вы знаете, что вам нужно следовать инструкциям по коду Apache. Вот как можно использовать кеширование браузера для вашего сервера Apache с помощью специального кода.
Убедившись, что у вас есть сервер, работающий на Apache, войдите в свою CPanel или используйте приложение FTP, чтобы получить доступ к вашему серверу.
Теперь найдите ваш файл .htaccess. Это может потребовать от вас отображения скрытых файлов (точечных файлов), поскольку .htaccess может быть скрыт по умолчанию.
Ваш файл .htaccess должен выглядеть примерно так, как показано на рисунке ниже. Имейте в виду, что обычно вы можете редактировать его прямо на сервере или можете загрузить и открыть в простом текстовом редакторе.
Теперь имейте в виду, что у вас есть несколько вариантов для определения правил кеширования браузера: заголовки Cache-Control или заголовки Expire .
Технически вы можете иметь и то, и другое одновременно, но это не обязательно. Если вы не уверены, что использовать, Cache-Control новее и обычно рекомендуется, но некоторые инструменты для проверки скорости, такие как GTmetrix, могут по-прежнему проверять заголовки Expires.
Вот как установить оба типа заголовков Apache.
Заголовки Apache «Cache-Control»
После того, как вы открыли файл .htaccess, вам нужно будет добавить следующий фрагмент кода в верхнюю часть файла .htaccess:
Header set Cache-Control "max-age=2592000, public"
Заголовки Apache «Expires»
Как и в случае с заголовком Cache-Control, вы можете добавить эти заголовки Expire в начало файла .htaccess. Вот формат кода, который нужно использовать:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
Как только вы установите эти заголовки на своем сервере, вы можете легко проверить их с помощью DevTools Chrome. Просто перейдите на вкладку сети, щелкните актив и проверьте, какой тип заголовка вы добавили: Cache-Control, Expires или оба.
Если они там, ваша работа сделана!
Код (Nginx) для использования кеширования браузера
Nginx (произносится как «Engine-x») – это веб-сервер с открытым исходным кодом, обслуживающий более 400 миллионов веб-сайтов.
Как и в случае с Apache, у вас есть несколько вариантов установки времени истечения срока действия кеширования для статических и динамических элементов вашего веб-сайта.
Заголовки Nginx «Cache-Control»
Добавьте следующий фрагмент кода внутрь вашего серверного блока, который обычно находится в / etc / nginx / site-enabled / default .
location ~* .(png|jpg|jpeg|gif)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}
location ~* .(js|css|pdf|html|swf)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Заголовки Nginx «Expires»
Добавьте следующий фрагмент кода внутрь вашего серверного блока, который обычно находится в / etc / nginx / site-enabled / default .
location ~* .(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 30d;
}
Предупреждение об использовании кеширования браузера в Google Analytics
Некоторые пользователи могут обнаружить, что даже с правильными заголовками кэширования, определенными на их исходном сервере, они все равно могут столкнуться с предупреждением об использовании кеширования браузера в Google Analytics.
Это отдельная проблема от того, с чем вы уже имели дело. Хорошая новость в том, что вы уже проделали самую важную работу для своего сайта. Большинство улучшений скорости от кеширования должно быть там сейчас.
Однако ошибка может возникать из-за собственного скрипта Google analytics.js , размещенного на серверах Google. Как это ни парадоксально, но в основном Google Analytics использует собственный файл JavaScript для связи с вашим сайтом – и это может вызвать ту же ошибку кеширования, если он не установлен локально.
Вы можете оптимизировать использование Google Analytics на своем сайте с помощью бесплатного плагина под названием Complete Analytics Optimization Suite (CAOS). Плагин CAOS – это автоматический способ локального размещения Google Analytics и полного устранения любых ошибок кеширования браузера, которые вы видите.
Вывод
Почему так важно использовать кеширование браузера?
Что ж, установив правила того, как браузеры должны кэшировать ваш веб-сайт, вы можете значительно повысить скорость загрузки страниц вашего сайта. Существуют плагины WordPress или фрагменты кода, которые вы можете легко использовать, чтобы определить, как долго браузер должен кэшировать различные элементы на вашем сайте.
Как только эти правила вступят в силу, ваш веб-сайт должен автоматически загружаться быстрее для большинства пользователей, особенно при повторных посещениях. Чтобы проверить эффективность кеширования на скорости страницы, вы всегда можете воспользоваться бесплатным инструментом, таким как PageSpeed Insights от Google, или платным вариантом, например GTmetrix.
Хотя скорость страницы – не главное для ранжирования или взаимодействия с пользователем, она имеет огромное значение – и хорошая новость заключается в том, что для правильного использования кеширования браузера для вашего веб-сайта WordPress совсем не потребуется много времени. .