Кешування є одним з найбільш ефективних способів забезпечення того, щоб ваш сайт завантажувався швидше. Однак для досягнення оптимальних результатів ваш сайт повинен точно вказувати браузерам, який контент їм необхідно кешувати. І часто це доводиться вказувати вручну.
На щастя, зробити це досить просто, навіть початківцям. Все, що вам потрібно, це внести кілька змін до кореневого файлу .htaccess. У сьогоднішній статті ми докладніше поговоримо про те, що таке кешування в браузері, як перевірити, чи правильно воно використовується на вашому сайті, і як його налаштувати.
В ідеалі, коли хтось відвідує ваш сайт, його браузер зберігає частину вмісту в локальному сховищі (на комп’ютері користувача), тому при наступних відвідуваннях цей контент береться звідти. Ця практика відома як «кешування в браузері», і ось основні моменти її користі:
Важливо розуміти, що в більшості випадків вам не потрібно все кешувати. Сучасні сайти містять багато інтерактивного контенту, який постійно оновлюється. Це означає, що якщо кешуються цілі сторінки, користувачі можуть втратити важливі зміни.
З огляду на це, вам потрібно вибрати контент, який браузер може кешувати. Наприклад, картинки, логотипи і файли CSS стилів змінюються не часто. Це означає, що ви можете дати вказівку браузерам кешувати ці файли і визначити час життя їх кеша. В ідеалі конфігурація кешування вашого сайту повинна розрізняти типи файлів, для яких трапляються, або ні, регулярні оновлення. Таким чином, користувачам не потрібно буде очищати свій кеш вручну, щоб побачити зміни, які ви внесли на свій сайт.
Коли ми говоримо про використання кешування, ми говоримо про налаштування вашого сайту, щоб браузери знали, який контент їм потрібно зберігати локально та як довго. Найпростіший спосіб з’ясувати, чи правильно сайт використовує кешування в браузері, — використовувати такий інструмент, як Google PageSpeed Insights, який аналізує цей та інші параметри. Для цього введіть URL вашого сайту в цьому інструменті та натисніть кнопку Аналіз.
PageSpeed Insights оцінить оптимізацію вашого сайту як для мобільних, так і для настільних ПК. Для кожної версії вашого сайту ви отримаєте індивідуальний бал від 0 до 100, а також пропозиції щодо його поліпшення. При підрахунку балів PageSpeed Insights враховує один з ключових чинників – чи використовує ваш веб-сайт кешування в браузері.
Якщо ви правильно налаштували свій сайт на WordPress, ви не побачите вищезгадане повідомлення, і ви повинні отримати достойний бал PageSpeed Insights.
Перед тим, як продовжити, ви повинні створити свіжу резервну копію вашого сайту про всяк випадок!
Нам потрібно відредагувати файл .htaccess
в корені сайту. Для доступу до цього файлу на сервері, ви можете використовувати FTP. У цій статті ви знайдете достатньо інформації по використанню FTP.
Файл .htaccess – це файл, який інструктує ваш сервер, як він повинен обслуговувати файли і сторінки. З його допомогою, наприклад, ви можете налаштувати доступ до певних сторінок для певних IP-адрес та багато іншого.
Для поточних потреб ми будемо використовувати .htaccess
, щоб повідомити сервер, які файли слід кешувати. Для цього знайдіть файл .htaccess
в кореневому каталозі вашого сайту. Відкрийте цей файл за допомогою текстового редактора.
Знайдіть рядок # END WordPress
. Додайте наведений нижче код прямо перед цим рядком. Ось приклад простої конфігурації кешування браузера, яку ви можете реалізувати одразу:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" </IfModule>
В даному прикладі ми вказуємо зберігати картинки (з розширенням jpg, jpeg, gif та png) в кеші браузера один місяць. Перша половина кожного рядка вказує тип файлу, з яким ми маємо справу, а друга встановлює термін дії для нього:
ExpiresByType image/jpg "access 1 month"
Звичайно, не весь контент повинен кешуватися протягом місяця, тому ми можемо пограти з цим значенням. У прикладі нижче ми додали інструкції для кешування картинок, файлів HTML, CSS та JavaScript з різними значеннями:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 1 week" ExpiresByType text/html "access 1 month" ExpiresByType text/x-javascript "access 1 week" ExpiresDefault "access 1 month" </IfModule>
Тут ми встановлюємо різний час зберігання для різних типів контенту.
Останній рядок, що починається з ExpiresDefault
, встановлює час кешування за замовчуванням (на один місяць) для всіх ваших файлів. Однак ви можете перевизначити це, додавши інструкції кешування для певних типів файлів. Суть в тому, щоб врахувати й інші типи файлів, які можуть не відповідати загальним правилам.
Тепер не забудьте зберегти зміни в .htaccess
файлі та закрити текстовий редактор.
Замініть новим файлом старий на сервері. Після цього спробуйте ще раз протестувати свій сайт за допомогою PageSpeed Insights – рекомендацій щодо включення кешування в браузері не повинно бути!
Ручне налаштування конфігурації кешування для контенту вашого сайту досить легке, навіть для початківців.
Все, що потрібно для налаштування кешування браузера вручну, — це внести кілька змін в файл .htaccess через FTP.
Потім ви можете протестувати свій веб-сайт за допомогою Google PageSpeed Insights, щоб переконатися, що він правильно використовує кешування браузера.
Якщо у вас є питання про те, як вручну налаштувати кешування браузера для сайту на WordPress, задавайте їх в розділі коментарів нижче!
Дякуємо, що читаєте нас!
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…