Кеш та оптимізація: кеш сторінок, мінімізація та шрифти

Вкладка Кеш та оптимізація прискорює публічні сторінки без окремого плагіна кешу. Вона кешує сторінки, скорочує HTML, відкладає скрипти, працює зі шрифтами та перевіряє результат. Відкрийте її в розділі Baza Helper > Кеш та оптимізація.

Кеш сторінок

Увімкніть Увімкнути кешування публічних сторінок. Кешуються лише анонімні GET-запити без cookie та параметрів у адресі. Акаунт, оформлення замовлення й виключені шляхи завжди обходять кеш.

• Термін зберігання кешу (секунди): за замовчуванням одна година, від 60 секунд до доби. Короткий термін зберігає свіжими дані бронювань і токени безпеки, довгий робить сайт швидким для кожного відвідувача.
• Максимум сторінок у кеші: ліміт збережених копій.
• Очищати кеш після зміни вмісту або налаштувань теми: відвідувачі не побачать застарілих сторінок.
• Виключені шляхи URL: один шлях на рядок, починаючи з /. Шлях і все, що нижче нього, не кешується.

Вкладка відкривається трьома картками в такому порядку: Керування кешем, Радник зі швидкості, потім Кеш сторінок та інші налаштування. У блоці Керування кешем видно кількість кешованих сторінок, розмір кешу та прострочені записи. Очистити кеш сторінок очищає його, а Прогріти публічні сторінки запитує до 100 опублікованих сторінок невеликими пакетами WP-Cron, щоб перший відвідувач одразу отримав кешовану сторінку. Прогрів пропускає персоналізовані відповіді. Якщо WP-Cron на сервері вимкнено, для прогріву потрібне завдання cron на сервері.

HTML, CSS та JavaScript

• Безпечна мініфікація HTML прибирає коментарі та зайві пробіли. Пробіли в тексті, скрипти, JSON-LD, стилі, SVG, pre і textarea залишаються без змін.
• Use compiled minified theme CSS / JavaScript вибирає файл .min теми, якщо він є.
• Відкладене завантаження сумісних скриптів теми використовує завантаження WordPress з урахуванням залежностей. Зовнішні скрипти провайдерів і ресурси плагіна бронювання залишаються як є.
• Відкласти всі скрипти (включно з jQuery і темою) завантажує кожен файл скрипта після розбору сторінки. WordPress зберігає порядок скриптів, що залежать одне від одного. Скрипт із вбудованим кодом, надрукованим після нього, і відвідувачі, які ввійшли в акаунт, залишаються без змін, а якщо сторінка виконує вбудований код, що сам викликає jQuery, jQuery залишається першим. Типово вимкнено. Після вмикання перевірте форми, меню та слайдери. Налаштування Скрипти, які не відкладаються при відкладанні всіх приймає один дескриптор скрипта WordPress на рядок. Ці скрипти залишаються в head, а всі інші відкладаються.
• Combine local stylesheets / scripts into one file працює для відвідувачів, які не увійшли в акаунт. Файли, що завантажуються один за одним, стають одним файлом у тому самому порядку. Стилі з вбудованим кодом, іншими типами носіїв або @import, а також скрипти з вбудованими даними чи модулі залишаються окремо. Після вмикання перевірте форми, меню та слайдери.
• Відкласти скрипти календаря бронювання з’являється лише за наявності Baza Booking Calendar. Після вмикання зробіть тестове бронювання.
• Відкладати скрипти Elementor та його доповнень і Не завантажувати jQuery Migrate на публічній частині сайту прибирають ще більше блокувальних запитів. Після цього перевірте слайдери, лічильники, меню, спливні вікна та форми.
• Вимкнути емодзі WordPress прибирає скрипт і стилі emoji. Вписані emoji працюють і надалі, бо їх малює браузер.

Зображення та перший екран

• Заповнювати розміри локальних зображень додає ширину й висоту лише тоді, коли немає обох значень.
• Відкладене завантаження зображень після перших трьох залишає перші зображення без відкладеного завантаження.
• Статичний перший екран для покращення LCP не дає анімаціям появи затримувати перший екран.
• Попередньо завантажувати найбільше зображення кожної сторінки дізнається від браузерів ваших відвідувачів, яке зображення було намальовано найбільшим, і після двох збігів додає для нього попереднє завантаження з високим пріоритетом, окремо для телефонів і більших екранів. Ця картинка ніколи не завантажується ліниво: loading="lazy" прибирається, а пріоритет ставиться високий.
• Автоматично виправляти розмітку доступності дає безіменним посиланням aria-label, додає головний орієнтир main, якщо його немає, і прибирає недійсні атрибути aria-value.

Шрифти

• Використовувати font-display: swap у локальних стилях створює копію CSS із хешем у назві та доданим swap.
• Автоматично попередньо завантажувати шрифти локальних стилів попередньо завантажує перший латинський файл шрифту кожного @font-face, а Максимум шрифтів для автоматичного попереднього завантаження (від 1 до 5, за замовчуванням 2) обмежує їх кількість.
• Попереднє завантаження важливих шрифтів: URL приймає до п’яти адрес WOFF2, WOFF, TTF або OTF. Попередньо завантажуйте лише шрифти, що використовуються на першому екрані.

Критичний CSS і відкладені стилі

Поле Критичні стилі CSS містить лише CSS, без тегів style та імпортів. Воно потрібне, перш ніж ви перелічите Ідентифікатори стилів для відкладеного завантаження. Стилі поза списком залишаються блокувальними. Генератор Critical CSS може заповнити це поле за вас, див. окрему статтю.

Пряма видача HTML

Віддавати HTML напряму без WordPress віддає кешовані сторінки вебсерверу без запуску PHP. Для цього потрібні кеш сторінок і автоматична інвалідація, а також успішна перевірка сервера. На Apache і LiteSpeed кнопка Встановити правила автоматично робить копію .htaccess, записує правила перед правилами WordPress, перевіряє головну сторінку і повертає старий файл, якщо щось пішло не так. Видалити правила прибирає лише блок, доданий Baza Helper. На Nginx вкладка показує правила, які потрібно скопіювати в конфігурацію сервера.

Правила кешу браузера

Картка кешу браузера записує позначений блок у .htaccess на Apache або LiteSpeed: один рік для зображень, шрифтів і відео, один місяць для CSS і JavaScript. На Nginx вона показує рядки для копіювання. Потім перевіряє, що сервер справді надсилає заголовок max-age. Це відповідь на зауваження PageSpeed «Use efficient cache lifetimes».

Діагностика продуктивності

Введіть адресу сторінки, запустіть перевірку або імпортуйте звіт Lighthouse у форматі JSON. Результат містить проблеми з фактами й наступним кроком для кожної, перші власні файли CSS і JavaScript з віком у кеші браузера та стилі, що блокують відображення. Вигаданої оцінки немає. Картка Speed advisor над нею перетворює ті самі висновки на перемикачі, див. статтю про Speed advisor.