Эта деталь очень важна для людей, которые сталкиваются с этой проблемой. К счастью, есть такие инструменты, как Google PageSpeed Insights или GT matrix. Они могут точно сказать вам, что вы хотите знать о производительности вашего веб-сайта, что вам нужно изменить, если у вас уже включено или не включено кеширование браузера, и многое другое.

Ладно ладно. Так в чем же дело? Зачем вам нужно использовать кеширование браузера в WordPress?

Этот вопрос подробно обсуждается ниже нашей командой wpDataTables, поэтому продолжайте читать, и к концу этой статьи вы сможете использовать кеширование браузера (скрестим пальцы).

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

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

Эта концепция будет объяснена позже, но вы должны знать, что это главная рекомендация Google, когда речь идет о времени загрузки.

Обычно скорость загрузки вашего веб-сайта может быть увеличена на 50%, если вы используете правильные методы.

При чем здесь кеширование браузера?

Давайте копать.

Использовать кеширование браузера? Что ты имеешь в виду?

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

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

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

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

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

Посетитель вводит URL в своем браузере
Браузер формирует запрос к серверу, на котором размещен ваш сайт (запрос HTTP)
Сервер объединяет все данные и отправляет их пользователю. На этом шаге пользователи замечают замедление. Чтобы предотвратить это замедление, люди могут уменьшить размер скриптов, оптимизировать размеры изображений и так далее.
После передачи данных браузер, наконец, может отображать веб-сайт. Процесс повторяется, когда посетители заходят на другие страницы. Запросов к серверу может быть очень много одновременно, что может привести к низкой производительности. Вот почему людям необходимо оптимизировать свой веб-сайт, чтобы он оставался быстрым.

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

Чтобы проверить, правильно ли ваш веб-сайт WordPress использует кэширование браузера, вам необходимо использовать специальный инструмент. Самый популярный — Google PageSpeed Insights. Узнайте, все ли работает правильно, введя URL своего сайта.

Затем нажмите «Анализ» и позвольте инструменту творить чудеса. PageSpeed должен сообщить вам, какой балл имеет ваш сайт с точки зрения оптимизации для мобильных устройств и компьютеров. Оценка варьируется от 0 до 100, после чего вы также получите предложения по улучшению своего веб-сайта. Одним из наиболее распространенных предложений является использование кэширования браузера в WordPress.

Эй, а вы знали, что данные тоже могут быть красивыми?

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

Фактический пример wpDataTables в дикой природе

И очень легко сделать что-то вроде этого:

Вы предоставляете данные таблицы
Настройте и настройте его
Опубликовать в посте или на странице

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

«Да, но я просто слишком люблю Excel, и на веб-сайтах нет ничего подобного». Да, есть. Вы можете использовать условное форматирование, как в Excel или Google Sheets.

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

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

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

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

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

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

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

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

Используйте кэширование браузера в WordPress вручную, выполнив следующие действия:

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

Для этого вам необходимо выполнить следующие шаги:

Доступ к файлам веб-сайта

Начните с входа в свою учетную запись хостинга/cPanel. Перейдите к файловому менеджеру. Здесь вы найдете настройки веб-сайта, где вам нужно включить опцию «Скрытый файл». Затем перейдите в корневой каталог веб-сайта и откройте файл .htaccess.

Обычно он находится в /public_html/.htaccess. Если домен вашего веб-сайта является пользовательским, вы найдете его в разделе имя_домена/public_html/.htaccess. Щелкните файл правой кнопкой мыши и отредактируйте его, следуя полученным инструкциям.

Добавьте код кэширования браузера в файл .htaccess.

Следующий шаг самый простой. Скопируйте приведенный ниже код и вставьте его в конец содержимого файла .htaccess. Не вносите никаких других изменений в файл.

Настройки, включенные в приведенный выше код, включают 600-секундное время обновления/истечения срока действия для HTML и один месяц для CSS и JavaScript.

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

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

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

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

Добавить заголовки управления кешем через Apache

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

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

Отключить Etags

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

Сохраните файл .htaccess, и все готово!

Кэширование сервера и браузера NGINX

Если на вашем веб-сайте используется NGINX, вам потребуется использовать другие фрагменты кода, потому что вы не сможете найти файл .htaccess. Опять же, это очень простой процесс, который не требует особых технических знаний. Перейдите в /etc/nginx/sites-enabled/default и вставьте туда этот код:


server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location ~*  .(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }
    location ~*  .(pdf)$ {
        expires 30d;
    }
}

Add Cache-Control Headers (NGINX)
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

Вы, вероятно, можете сказать, что срок действия файлов изображений установлен на 365 дней, что эквивалентно одному году. Срок действия PDF-файлов истекает через 30 дней. Вы можете настроить код так, как хотите, как и в предыдущем случае.

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

Используйте просмотр в WordPress с помощью плагинов

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

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

вручную. Установить плагин можно так:

Загрузите плагин — один пример можно найти здесь.
Перейдите в раздел «Панель управления», «Плагины» и «Добавить новый».
Найдите «Использовать кеширование браузера».
Нажмите Установить сейчас
Активировать плагин
Протестируйте свой веб-сайт

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

W3 Total Cache — плагин для WordPress

Исправление Leverage Browser Caching в WordPress с помощью W3 Total Cache можно выполнить, выполнив шаги, перечисленные ниже:

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

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

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

Загрузите и установите WP Fastest Cache.
Перейти к настройкам плагина
Выберите Кэширование браузера, установив флажок
Нажмите «Отправить», чтобы применить изменения, и все.

Cache Enabler — Кэш WordPress

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

Установите плагин и активируйте его
Перейти к настройкам
Нажмите «Включить кэширование браузера».

Используйте Yoast SEO для редактирования файла .htaccess.

Вы также можете отредактировать файл .htaccess более безопасным способом, используя плагин Yoast SEO. Наиболее часто используемый плагин WordPress — это SEO от Yoast. Используя этот плагин, вы можете легко редактировать файл .htaccess. Если у вас еще нет Yoast, вам необходимо установить его и активировать заранее. После этого вам необходимо:

Откройте «SEO», затем «Инструменты».
Перейдите к редактору файлов
Файл .htaccess откроется в текстовом редакторе, куда вы сможете вставить фрагменты кода, перечисленные выше.
Сохранить изменения

После внесения изменений вы можете использовать Google PageSpeed Insights, чтобы проверить, все ли в порядке после внесения изменений. Если ваш веб-сайт правильно использует кеширование браузера, все в порядке. Если нет, вам следует повторить процесс и посмотреть, что вы пропустили.

Кэширование сторонних ресурсов

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

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

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

Завершение мыслей о том, как использовать кеширование браузера в WordPress

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

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

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

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

Источник записи: wpdatatables.com