Як увімкнути GZIP стиснення у WordPress

Привіт:) Щоб частково оптимізувати сайт та збільшити його швидкість, покажу в деталях прості способи як увімкнути стиснення GZIP WordPress-сайту. Це один із найпростіших і ефективних методів зменшити обсяг даних, що передаються через Інтернет.

Що таке стиснення сайту GZIP і як працює

Стиснення даних в Інтернеті — це процес зменшення розміру інформації, що передається веб-сайтами. Залежно від типу даних (текст, зображення, таблиці стилів, скрипти, шрифти) існують різні методи стиснення.

GZIP (скорочення від GNU Zip) — найпопулярніший у Мережі спосіб стиснення без втрат. Зменшує загальний розмір HTML-сторінки під час передачі даних від сервера до клієнта.

Як перевірити GZIP-стиснення сайту

Для цього можна скористатися зручними онлайн-інструментами.

PageSpeed Insights

Відкрийте у браузері https://pagespeed.web.dev/ та введіть повну URL-адресу свого сайту. Якщо оптимізація передачі даних увімкнена, аудит під назвою "Увімкніть стиснення тексту" буде позначений зеленим.

GTMetrix

Перейдіть за посиланням https://gtmetrix.com, вкажіть адресу веб-ресурсу та знайдіть у списку перевірок рядок "Enable text compression". Якщо стиснення працює, опція буде позначена як "None".

Як увімкнути стискання GZIP WordPress

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

У панелі керування хостингом

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

За допомогою плагінів кешування

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

W3 Total Cache

1. В адмін-частину сайту відкрийте розділ Performance > Browser Cache.
2. Відмітьте опцію Enable HTTP (gzip) compression.
3. Натисніть Save Settings & Purge Caches.

WP Super Cache

1. Перейдіть Налаштування > WP Super Cache.
2. На вкладці Розширене увімкніть пункт Стискайте сторінки, щоб вони швидше завантажувалися відвідувачами.
3. Кликніть по кнопці нижче Зберегти налаштування.

WP Fastest Cache

1. Відкрийте адмін-меню WP Fastest Cache.
2. На вкладці Налаштування (Settings) поставте галочку напроти Reduce the size of files sent from your server.
3. Збережіть зміни.

Через файл .htaccess

Це файл конфігурації веб-сервера Apache. Його інструкції дозволяють керувати діями сервера в рамках поточного каталогу та дочірніх папок без необхідності змінювати загальні налаштування Apache.

Під'єднайтесь до сервера вашого хостингу, у кореневому каталозі сайту знайдіть та відкрийте файл .htaccess. Після рядка #END WordPress вставте директиви:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser errors (only for older browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Тепер веб-сервер повинен обслуговувати стиснення всіх перелічених у коді розширень файлів.

Вмикаємо GZIP на веб-сервері Nginx

Ви можете увімкнути оптимізацію на Nginx за допомогою директив, визначених у модулі ngx_http_gzip_module. Для початку додайте код нижче у файл nginx.conf. Зазвичай він знаходиться у папці /etc/nginx/ вашого сервера.

# увімкнути GZIP стискання
gzip on; 

# рівень стиснення (1-9)
# 6 – оптимальний варіант між навантаженням на процесор та розміром файлу
gzip_comp_level 6;

# обмеження мінімального розміру файлу в байтах, щоб уникнути негативних результатів стиснення
gzip_min_length 256;

# стискати дані для клієнтів, що підключаються через проксі
gzip_proxied any;

# кешувати звичайну та GZIP-версію
gzip_vary on;

# відключити стиснення GZIP для старих браузерів, які його не підтримують
gzip_disable "msie6";

# стискати вихідні дані, позначені такими розширеннями файлів або MIME-типами
# MIME-тип text/html увімкнений за замовчуванням і його не потрібно вмикати
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Якщо ваш сайт обслуговує великі файли JS і CSS, ви можете збільшити розмір буфера, який використовується. Для цього додайте наступний рядок у nginx.conf:

# встановлює 'кількість' та 'розмір' буферів для стиснення GZIP
# розмір за замовчуванням буфера складає 4Кб або 8Кб залежно від платформи
gzip_buffers 16 8k;

Не забудьте перезавантажити Nginx після збереження конфігураційного файлу командою

sudo service nginx reload