Як впоратися з проблемою Leverage Browser Caching у WordPress, все про WordPress
Якщо ви коли-небудь перевіряли свій сайт у Google PageSpeed Insights або Pingdom, то ви, швидше за все, бачили велике жовте попередження Leverage Browser Caching. І, швидше за все, саме з цієї причини ви читаєте цей пост. Сьогодні ми подивимося на те, що означає це попередження, із чим воно пов'язане, а також як вчинити в цій ситуації.
Що означає попередження Leverage Browser Caching?
Попередження Leverage Browser Caching, як видно зі скріншота, пов'язане з кешем браузера. Щоразу, коли ви відвідуєте сайт, браузер завантажує ресурси, такі як HTML, CSS, JS та зображення у локальний кеш браузера. Таким чином, браузеру не доведеться щоразу отримувати їх при кожному завантаженні сторінки. Попередження з'являється, якщо ваш веб-сервер або сторонній сервер не має коректних HTTP-заголовків кешу. Або заголовки можуть існувати, але час життя кешу замало.
Ви могли також бачити це попередження в новому тесті швидкості сайту Think with Google, який заснований на Google PageSpeed Insights. Цей інструмент є маркетинговим, проте сьогодні багато клієнтів перевіряють у ньому свої сайти та передають знайдені помилки веб-майстрам. У результаті розробники та дизайнери WordPress змушені швидко виправляти це, щоб заспокоїти своїх клієнтів.
Усуваємо попередження Leverage Browser Caching у WordPress
Користувачі WordPress найчастіше стикаються із попередженням Leverage Browser Caching з таких причин. Перша і найпоширеніша причина – веб-сервер некоректно налаштований. Друга причина (досить іронічна) – попередження викликає скрипт Google Analytics. Третя причина –Попередження викликають сторонні скрипти. Давайте подивимося, що робити у кожній із ситуацій.
1. Попередження Leverage Browser Caching на сервері
Перша та найпоширеніша причина появи Leverage Browser Caching – ваш веб-сервер не має відповідних заголовків. Нижче на скріншоті представлений Google PageSpeed Insights, де можна дізнатися причину появи попередження - expiration no specified. Взагалі, є два методи кешування: заголовки Cache-Control та заголовки Expires. Заголовок Cache-Control включає кешування на стороні клієнта і задає максимальний термін життя ресурсу (max-age), тоді як заголовок Expires використовується для визначення моменту, коли ресурс більше не є валідним.
Важливо! Редагування вашого конфіга Nginx або файлу .htaccess Apache може призвести до поломки сайту при некоректних діях. Якщо ви не впевнені у своїх навичках, зверніться до свого веб-хостингу або розробників.
Додавання Cache-Control заголовків у Nginx
Ви можете додати заголовки Cache-Control у Nginx, задавши в конфізі наступний блок у розділі server:
Додавання Expires заголовків у Nginx
Ви можете додати заголовки Expires до Nginx, задавши наступний блок. У цьому прикладі ви можете бачити, як визначити різний час закінчення для різних типів файлів:
Додавання Cache-Control заголовків в Apache
Ви можете додати заголовки Cache-Control в Apache за допомогою наступного коду у файлі .htaccess:
Додавання Expires заголовків в Apache
Ви можете додати заголовки Expires в Apache за допомогою наступного коду у файлі .htaccess:
Переглянути встановлені заголовки можна за допомогою мережевої панелі Chrome DevTools. Також можна простопропустити WordPress сайт заново через Google PageSpeed Insights, щоб переконатися, що попередження пропали:
2. Leverage Browser Caching та Google Analytics
Друга популярна причина появи Leverage Browser Caching – Google Analytics. Це виглядає іронічно, оскільки попередження викликає скрипт від Google. Проблема полягає в тому, що вони встановили короткий час кешування для свого ресурсу (2 години), що видно зі скріншоту. Швидше за все, зроблено це було для того, щоб усі зміни та доопрацювання скрипту максимально швидко передавалися користувачам. Однак є спосіб обходу цього – розміщення скрипта Google Analytics на власному сервері. Варто пам'ятати, що цей спосіб не підтримується Google.
Є чудовий плагін під назвою Complete Analytics Optimization Suite, створений Daan van den Bergh. Цей плагін дозволяє розміщувати Google Analytics локально на WordPress-сайті.
Додаткові переваги від локального розміщення скрипта аналітики – ви можете зменшити кількість зовнішніх HTTP-запитів до Google з 2 до 1; також ви отримуєте повний контроль за кешуванням файлів. Відповідно, ви можете використовувати заголовки кешу, як це було показано вище.
3. Інші сторонні скрипти
Якщо ви ведете свій бізнес за допомогою WordPress-сайту, то, швидше за все, у вас є додаткові сторонні скрипти для відстеження конверсією, виконання A/B тестів і т.д. До них можуть належати скрипти для Twitter, CrazyEgg, Hotjar і т.д. На жаль, ви можете зберігати ці скрипти локально, тобто. ви не можете керувати кешуванням сторонніх ресурсів. Однак для деяких невеликих сайтів та блогів є можливість позбутися попередженняLeverage Browser Caching, якщо дотримуватися рекомендацій, наведених вище.
