Мгновенное исправление WordPress с использованием кэширования браузера (шаг за шагом)

Опубликовано: 2021-07-08

WordPress использует кеширование браузера (простое и мгновенное исправление)

Оглавление

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

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

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

Тем не менее, мы здесь для этого с решением.

Это самая распространенная ошибка, с которой сталкивается большинство людей в Google PageSpeed ​​Insights.

И если ваша цель — набрать более 90 баллов в Google PageSpeed ​​Insights, вам нужно исправить это.

Вы должны знать, что скорость страницы как никогда важна для высокого рейтинга в поисковой выдаче Google, а также для обеспечения ХОРОШЕГО взаимодействия с пользователем.

Этот пост расскажет вам, что WordPress использует кэширование браузера и как исправить использование кэширования браузера в WordPress.

Итак, давайте просто копать.

Немного информации об использовании кэширования браузера WordPress

Проще говоря, использование кэширования браузера ускоряет загрузку страниц за счет сокращения HTTP-запросов и улучшения времени отклика сервера.

ТЕПЕРЬ, что мы подразумеваем под кэшированием?

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

Что входит в это?

Сюда входят изображения, CSS, JavaScript и другие.

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

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

Что такое настоящая платформа, которая показывает актуальные данные и решения?

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

Этот инструмент предоставит вам все решения по оптимизации вашего веб-сайта для его быстрой загрузки с полным отчетом.

Еще один законный инструмент, который вы можете использовать, — это PageSpeed ​​Insights от Google для проверки скорости страницы вашего сайта.

Он порекомендует вам разработать мощную политику кэширования для повышения скорости страницы.

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

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

Это на стороне сервера; кэширование браузера происходит, когда пользователи заходят на веб-сайт через свой браузер.

Это полная противоположность предыдущему утверждению.

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

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

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

ТЕПЕРЬ давайте перейдем к методам использования кэширования браузера в WordPress как с плагином, так и без него.

Как исправить использование кеширования браузера в WordPress без плагина?

Многие люди не предпочитают плагин WordPress для решения этой проблемы.

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

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

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

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

Apache и Nginx — самые популярные веб-серверы.

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

1. WordPress использует кеширование браузера с помощью (Apache)

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

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

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

1. Чтобы получить доступ к вашему серверу, войдите в CPanel или используйте FTP-клиент.

2. Найдите файл .htaccess прямо сейчас.

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

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

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

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

Заголовки Expire или заголовки Cache-Control.

Давайте посмотрим на оба.

1. Заголовки управления кешем:

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

Скопируйте этот код:

# BEGIN Заголовки управления кэшем

<IfModule mod_expires.c>

<IfModule mod_headers.c>

<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>

Заголовок добавляет Cache-Control «public»

</filesMatch>

<filesMatch “\.(css)$”>

Заголовок добавляет Cache-Control «public»

</filesMatch>

<filesMatch “\.(js)$”>

Заголовок добавляет Cache-Control «private»

</filesMatch>

<filesMatch “\.(x?html?|php)$”>

Заголовок добавляет Cache-Control «private, must-revalidate»

</filesMatch>

</ЕслиМодуль>

</ЕслиМодуль>

2. Срок действия заголовков:

Эти заголовки Expire можно добавить в начало файла .htaccess, как и заголовок Cache-Control.

Посмотрите на формат кода:

## ИСХОДИТ КЭШИРОВАНИЕ ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg «доступ 1 год»

ExpiresByType image/jpeg «доступ 1 год»

ExpiresByType image/gif «доступ 1 год»

ExpiresByType image/png «доступ 1 год»

ExpiresByType text/css «доступ 1 месяц»

ExpiresByType text/html «доступ 1 месяц»

ExpiresByType application/pdf «доступ 1 месяц»

ExpiresByType text/x-javascript «доступ 1 месяц»

ExpiresByType application/x-shockwave-flash «доступ 1 месяц»

ExpiresByType image/x-icon «доступ 1 год»

ExpiresDefault «доступ 1 месяц»

</ЕслиМодуль>

## ИСХОДИТ КЭШИРОВАНИЕ ##

Вы можете легко просмотреть эти заголовки в Chrome DevTools после того, как установите их на своем сервере.

Просто перейдите на вкладку «Сеть», выберите актив и найдите добавленную вами форму заголовка, например Cache-Control, Expires или обе.

2. Отключить теги объектов:

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

FileETag Нет

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

Чтобы изменения вступили в силу, сохраните файл .htaccess и перезапустите Apache.

  • WordPress использует кеширование браузера с помощью (Nginx)

Nginx — это бесплатный веб-сервер с открытым исходным кодом, который используется более чем 500 миллионами веб-сайтов.

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

1. Заголовки «Cache-Control» (Nginx)

Внутри вашего серверного блока, который обычно находится по адресу

/etc/nginx/site-enabled/по умолчанию,

добавьте этот следующий фрагмент.

расположение ~* \.(png|jpg|jpeg|gif)$ {

истекает через 365 дней;

add_header Cache-Control «общедоступный, без преобразования»;

}

расположение ~* \.(js|css|pdf|html|swf)$ {

истекает 30 дней;

add_header Cache-Control «общедоступный, без преобразования»;

}

2. Заголовки «Expires» (Nginx)

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

/etc/nginx/site-enabled/по умолчанию/

расположение ~* \.(jpg|jpeg|gif|png)$ {

истекает через 365 дней;

}

расположение ~* \.(pdf|css|html|js|swf)$ {

истекает 30 дней;

}

Как исправить использование кеширования браузера в WordPress с помощью плагина?

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

1. Самый быстрый кэш WP:

Самый быстрый кеш WP

WP Fastest Cache — еще один плагин для кэширования WordPress с простыми настройками.

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

2. Кэш LiteSpeed:

Кэш LiteSpeed

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

Перейдите к настройкам кеша после того, как вы установили и включили плагин. Перейдите на вкладку «Браузер» и включите функцию «Кэш браузера».

Вы также можете указать дату истечения срока действия.

Однако этот параметр будет применяться ко всем кэшированным файлам на вашем сайте.

Вывод:

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

Если вы видите это предупреждение в Google PageSpeed ​​Insights, вы можете устранить его следующим образом:

  1. Добавление заголовков Cache-Control или Expires.
  2. Использование кэширования браузера для Google Analytics.
  3. Сведение к минимуму использования сторонних скриптов.

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