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

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

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

Вы можете использовать различные интернет-инструменты, включая Google PageSpeed ​​Insights, GTMetrix и Pingdom, для отслеживания и тестирования скорости вашего веб-сайта. Они дают вам точные результаты и показывают, где ваш сайт нуждается в доработке. Возможно, вы видели предупреждение «Использовать кэширование браузера» при оценке скорости сайта.

Вы также можете прочитать: Обслуживание статических ресурсов с помощью эффективной политики кэширования

Что такое кэширование браузера?

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

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

Как работает кэширование браузера в WordPress?

Каждый раз, когда пользователь входит в определенный домен, в фоновом режиме выполняется множество процессов.

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

1. URL-адрес вводится в браузер посетителя.
2. Запрос отправляется браузером на сервер, на котором размещен ваш веб-сайт (запрос HTTP).
3. Пользователь получает данные после их сборки сервером. Пользователи начинают испытывать замедление в этот момент. Люди могут минимизировать размер скриптов, оптимизировать размеры изображений и принять другие меры, чтобы остановить эту медлительность.
4. Теперь браузер может наконец отобразить веб-сайт после передачи данных. Когда пользователи обращаются к другим страницам, процедура повторяется. Низкая производительность может быть результатом того, что сервер одновременно получает большое количество запросов. Поэтому люди должны оптимизировать свои веб-сайты, чтобы поддерживать их скорость.

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

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

Разница между кэшированием браузера и кэшированием сервера

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

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

Вы можете улучшить систему кэширования сервера несколькими способами. Лучшим выбором было бы обновить заголовки Apache. Следующим этапом будет использование плагинов WordPress, а затем будет добавлен CDN.

Способ 1: ручное использование кэширования браузера в WordPress

Примечание. Этот метод работает только с LiteSpeed ​​Enterprise или Apache.

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

1. Добавить заголовки с истекающим сроком действия
2. Добавить заголовки Cache-Control
3. Отключить ETag

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

Перейдите на панель инструментов CyberPanel.

Нажмите WordPress -> Список WordPress в меню слева.

Вы войдете в Список сайтов WordPress . Отсюда нажмите на заголовок вашего сайта WordPress.

Это ваш менеджер CyberPanel WordPress . Нажмите на файловый менеджер.

В public_html вы найдете . htaccess- файл. Обратите внимание, что правила htaccess поддерживаются только LiteSpeed ​​Enterprise. Он не поддерживается OpenLite Speed. Щелкните правой кнопкой мыши и выберите CodeMirror.

Добавьте следующий код в конец файла . htaccess , скопировав и вставив его. Не изменяйте файл никакими другими способами.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

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

Время обновления/срока действия также включено в настройки:

HTML занимает 600 секунд.
JavaScript и CSS на один месяц
Для изображений, год

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

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

следующий код, затем вставьте его:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

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

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Когда закончите, нажмите Сохранить .

Способ 2: использовать кеширование браузера в WordPress с помощью плагинов

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

Плагин W3 Total Cache

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

Войдите в панель управления WordPress

Нажмите « Плагины » -> « Добавить новый » в меню слева.

Найдите общий кеш W3 . Теперь установите и активируйте этот плагин

Вкладка « Производительность » появится в меню слева. Нажмите «Производительность» -> « Общие настройки » в меню слева.

Прокрутите вниз до « Кэш браузера » и убедитесь, что он включен, и сохраните изменения.

Теперь нажмите «Производительность» -> « Кэш браузера » в меню слева.

Убедись, что

1. Установить заголовок срока действия
2. Установить контроль кеша
3. Установить тег объекта

включены. Сохраните все изменения.

Плагин кэширования LiteSpeed

CyberPanel предоставляет каждому пользователю LiteSpeed ​​Cache по умолчанию при каждом развертывании сайта WordPress. Если вы не используете CyberPanel, вы можете загрузить его отсюда.

Просто включив эту функцию, плагин кэширования LiteSpeed ​​Cache позволяет вам использовать кэширование браузера.

Зайдите в панель управления WordPress

Нажмите LiteSpeed ​​Cache -> Кэш в меню слева.

Нажмите на вкладку Браузер на верхней панели.

Убедитесь, что кеш браузера включен, и нажмите « Сохранить изменения ».

Вывод

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

Подход, который вы выбираете для использования кэширования браузера, в конечном счете не имеет значения. Единственное, что имеет значение, это наблюдать за ним в действии. Метод, который вы использовали для этого, не имеет значения, пока функция Leverage Browser Caching в WordPress работает должным образом. Нет правильного или неправильного подхода; результат будет одинаковым независимо от вашего выбора. Использование кэширования в браузере уменьшит время загрузки независимо от того, решите ли вы внести изменения в файл .htaccess или использовать плагин.