Якщо ви хочете використовувати кешування веб-переглядача в WordPress, ви вже знаєте про головну його перевагу – це покращує швидкість завантаження веб-сайту.

Ця деталь дуже важлива для людей, які стикаються з цією проблемою. На щастя, існують такі інструменти, як 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 може зробити це таким чином. Є вагома причина, чому це плагін №1 WordPress для створення адаптивних таблиць і діаграм.

Фактичний приклад wpDataTables у дикій природі

І це дуже легко зробити щось подібне:

Ви надаєте дані таблиці
Налаштуйте та налаштуйте його
Опублікуйте його в публікації або на сторінці

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

«Так, але мені дуже подобається Excel, а на сайтах нічого подібного немає». Так, є. Ви можете використовувати умовне форматування, як у Excel або Google Таблицях.

Чи я казав вам, що ви також можете створювати діаграми зі своїми даними? І це лише мала частина. Для вас є багато інших функцій.

Відмінності між кешуванням сервера та кешуванням браузера

Будь-який користувач WordPress повинен знати більше про кешування сервера. Це процес, який передбачає створення кешованих веб-сторінок для вашого веб-сайту через веб-сервер. Наведені вище кроки представляють кешування веб-сайту, яке в основному відбувається на стороні сервера.

Є кілька способів, за допомогою яких можна покращити систему кешування сервера. Найбільш рекомендованим варіантом буде оновлення заголовків на Apache. Наступним кроком буде використання плагінів WordPress, а за ним – додавання CDN.

Використовуйте кешування браузера в WordPress

Щоб використовувати кешування браузера в WordPress, вам потрібно використовувати трохи коду. Не хвилюйтеся – це не так складно, як вам здається.

Вам просто потрібно дістатися до. файл htaccess, додайте заданий фрагмент коду, і все. Використання кешування браузера за допомогою файлу Htaccess є найпростішим і найефективнішим методом, про який вам варто дізнатися.

Найпростіший і найшвидший спосіб переконатися, що ваш веб-сайт WordPress використовує як серверне кешування, так і веб-переглядач, — це використовувати керований хостинг WordPress, який попередньо налаштовує всі необхідні параметри для вас.

Використовуйте кешування браузера в WordPress вручну, виконавши такі дії:

Додайте заголовки Expires
Додайте заголовки Cache-Control
Вимкніть ETags

Для цього потрібно виконати наведені нижче дії.

Доступ до файлів веб-сайту

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

Зазвичай він знаходиться в /public_html/.htaccess. Якщо домен вашого веб-сайту користувацький, ви знайдете його в домені/public_html/.htaccess. Клацніть файл правою кнопкою миші та відредагуйте його, дотримуючись наданих інструкцій.

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

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

Налаштування, включені в код вище, включають 600-секундний час оновлення/закінчення терміну дії для HTML і один місяць для CSS і JavaScript.

Мета цього терміну дії полягає в тому, щоб ваші відвідувачі не завантажували активи занадто часто. Якщо ви вносите зміни щодо активів частіше, ви можете змінити період відповідно до ваших потреб.

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

Як ви можете бачити у фрагменті коду, термін дії зображень закінчується через рік. Щоб додати заголовки терміну дії .htaccess, вам потрібно змінити файл, не пошкоджуючи нічого іншого.

Однак деякі люди не хочуть возитися зі своїм файлом .htaccess. Якщо це ваша ситуація, ви можете просто скористатися плагіном кешування браузера. Ви дізнаєтеся більше про такі плагіни далі в цій статті.

Додайте заголовки керування кешем через Apache

Скопіюйте код нижче:

Встановлення терміну дії або максимального віку в заголовках HTTP більше не потрібно, оскільки це вже було встановлено під час попереднього кроку, а це означає, що вам не потрібно повторювати це тут.

Вимкніть Etags

Etags розшифровується як Entity Tags, і вони стосуються нових версій кешованих файлів. Оскільки ви вже встановили заголовки керування кеш-пам’яттю, немає потреби використовувати ETags, тому ви можете вимкнути їх, щоб скоротити час завантаження. Додайте такий фрагмент коду до файлу .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

Виправлення використання кешування веб-переглядача в 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. Кеш веб-переглядача, який ви вже зберегли на своєму комп’ютері, не дозволить вам побачити внесені зміни. Щоб правильно бачити веб-сайт після внесення кількох змін, рекомендуємо відвідати його за допомогою функції інкогніто вашого браузера. Використовуючи цю функцію, ви не будете використовувати ресурси кешу, і ви зможете правильно побачити зміни.

Зрештою, метод, який ви вибрали для використання кешування веб-переглядача, не має значення. Важливо тільки побачити це в дії. Поки кешування веб-переглядача в WordPress працює належним чином, спосіб, яким ви туди потрапили, не має значення. Ви можете вибрати спосіб, який вам зручний, і результат буде таким же. Якщо ви вирішите змінити файл .htaccess або скористаєтеся плагіном, ви покращите час завантаження, активувавши кешування веб-переглядача.

Якщо вам сподобалося читати цю статтю про те, як використовувати кешування веб-переглядача в WordPress, ви повинні переглянути цю статтю про те, як прискорити WordPress.

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

Джерело запису: wpdatatables.com