Сайт швидший за вечір: 9 кроків із виміром до і після

Відвідувач не чекає: якщо сторінка відкривається довго, він іде, а пошукові системи враховують швидкість. Хороша новина: у більшості невеликих сайтів гальмують одні й ті самі речі, і їх можна виправити за вечір, не змінюючи ні теми, ні хостингу. Нижче дев’ять кроків. У кожного три рядки: що зробити, як перевірити (екран, команда або цифра) і що буде, якщо не робити. Починаємо й закінчуємо виміром, щоб ви побачили, що допомогло.

Кроки незалежні, можна брати будь-який. Одне попередження одразу: числа нижче ми отримали на своєму тестовому стенді, а не на вашому сайті. Ваші будуть іншими, важливий напрям.

Ваш пульт: «Що покращити» і «Стан системи» #

Відкрийте «Керування сайтом → SEO та доступність → Що покращити» й оберіть вкладку «Швидкість»: там перелічено, що на вашому сайті ще не ввімкнено. А в «Система → Діагностика → Стан системи» внизу є блок «Рекомендації»: він підказує про кеш, розклад і OPcache.

Крок 1. Виміряйте до #

Що зробити. Відкрийте PageSpeed Insights, вставте адресу головної й запустіть перевірку для телефона. Або в браузері Chrome: інструменти розробника, вкладка Lighthouse, «Analyze page load». Запишіть три числа: LCP (коли з’явилася головна частина сторінки), CLS (наскільки сторінка «стрибає») і INP (як швидко сайт відповідає на натискання). Цілі за версією web.dev: LCP не більше 2,5 секунди, INP не більше 200 мілісекунд, CLS не більше 0,1, і це для трьох із чотирьох відвідувачів (75-й перцентиль). Як перевірити. У вас є три записані числа й дата виміру. Якщо не робити. Ви не дізнаєтеся, чи допомогли правки. Заодно запам’ятайте ще дві речі. Результат Lighthouse плаває від запуску до запуску: запустіть тричі й візьміть середнє. І оцінка 100 не мета: документація Chrome пише, що вона вкрай важка й не очікується, а зелена зона починається з 90.

Крок 2. Готові сторінки для гостей #

Що зробити. У «Налаштування сайту → Швидкість і обслуговування» увімкніть «Віддавати гостям готові сторінки». Сторінка, зібрана для одного гостя, віддається решті як є, без звернень до бази. Ті, хто увійшов, отримують свої сторінки як завжди, а кеш скидається сам за будь-якої правки через панель. «Скільки секунд тримати» можна не чіпати: п’яти хвилин (300) досить. Як перевірити. Запитайте головну двічі:

curl -I https://example.com/
curl -I https://example.com/

У другій відповіді має бути рядок X-Nex1on-Cache: hit. На нашому тестовому стенді сторінка, що збиралася заново, віддавалася за 0,6–0,8 секунди, а готова за 0,12–0,17.

Якщо не робити. Кожен гість змушує сервер знову збирати сторінку з бази. На людному сайті це знімає з сервера більшу частину роботи.

Крок 3. Стискати HTML #

Що зробити. Там само увімкніть «Стискати HTML сторінок»: зі сторінок підуть зайві пробіли, переноси рядків і коментарі. Вигляд не змінюється, панель не чіпається. Якщо після вмикання сторінка виглядає не так, вимкніть. Як перевірити. Порівняйте розмір відповіді до і після:

curl -s https://example.com/ | wc -c

На нашій тестовій головній відповідь зменшилася зі 157 до 138 КБ, приблизно на 12 відсотків. Стиснення HTML корисніше разом із готовими сторінками (крок 2): без них сервер стискає кожну сторінку заново для кожного гостя, і «Стан системи» про це нагадає. Якщо не робити. Сторінки важать більше, ніж потрібно. Нічого не зламається, ви просто платите зайвими кілобайтами кожному відвідувачеві.

Крок 4. Лише потрібні стилі #

Що зробити. Увімкніть «Лише потрібні стилі на сторінці»: замість кількох повних файлів стилів сторінка отримає один, лише з тими правилами, що на ній можуть спрацювати. Вигляд не змінюється. Як перевірити. Відкрийте вихідний код сторінки (Ctrl+U) і знайдіть rel="stylesheet". На нашому тестовому стенді три файли стилів (близько 634 КБ без стиснення) замінилися одним (157 КБ). Якщо не робити. Телефон завантажує правила для сторінок, яких він не відкривав: головна відкривається помітно повільніше, особливо в мобільній мережі.

Крок 5. Зображення #

Що зробити. У «Налаштування сайту → Зображення та відео» перевірте три речі. Перше: «Найбільша ширина картинки, точок» за замовчуванням 0, тобто без межі. Поставте число, яке вам справді потрібне (наприклад, 2000): великі картинки під час завантаження зменшуються з тими самими пропорціями. Фотографія в шість тисяч точок для колонки в тисячу зайва. Друге: «Стиснення зображень»: за замовчуванням «Локально», і нічого не йде з сайту; зовнішній сервіс TinyPNG повертає легші файли, але ваша картинка при цьому відправляється на чужий сервер. Третє: увімкніть «Картинки ще й у WebP»: сайт зберігає ще й легшу копію та віддає її тим браузерам, які її просять. Копії робляться лише для нових завантажень; для вже завантажених виконайте на сервері команду php nex1on media:webp. «Підказки браузеру для зображень» лишайте ввімкненими: рушій сам дописує розміри, ліниве завантаження нижче першого екрана й пріоритет головному зображенню.

Як перевірити. Подивіться, що рушій вписав на сторінку:

curl -s https://example.com/ | grep -o '<img[^>]*>' | head -3

У зображень мають бути width і height (сторінка не стрибає під час завантаження), srcset, decoding="async". У головного зображення на першому екрані fetchpriority="high" і немає loading="lazy", в інших нижче на сторінці loading="lazy". Так і задумано: web.dev прямо попереджає не відкладати завантаження зображення, яке видно одразу, інакше сторінка відкривається повільніше.
Якщо не робити. Зображення зазвичай найважча частина сторінки, і одне невдале фото здатне переважити все інше.

Крок 6. Шрифти #

Що зробити. Теми з коробки не підключають шрифти з сервера: текст набрано тими шрифтами, що вже є на пристрої відвідувача, тому нічого не завантажується. Якщо ви все ж додаєте свій шрифт, дотримуйтеся правил web.dev: формат WOFF2, лише потрібні накреслення, font-display: swap (або optional) і не попередньо завантажуйте все підряд. Як перевірити. В інструментах розробника, вкладка Network, фільтр Font: у сайту без підключених шрифтів список порожній. Якщо не робити. Кожен підключений шрифт це зайвий файл, який блокує показ тексту або змушує сторінку «стрибати», коли шрифт підміняється.

Крок 7. Розклад і OPcache #

Що зробити. Відкрийте «Система → Діагностика → Стан системи» і подивіться блок «Рекомендації». Якщо є «Листи надсилаються під час заходів відвідувачів», додайте на хостингу розклад (cron) раз на хвилину: готову команду показує сама рекомендація. Тоді листи й фонові справи розбираються без відвідувачів, а сторінки не чекають пошту. Якщо є «PHP OPcache недоступний», попросіть підтримку хостингу ввімкнути його: OPcache тримає розібраний PHP у пам’яті, і сервер не розбирає одні й ті самі файли за кожного заходу. Як перевірити. Відповідні рядки в «Рекомендаціях» зникають. Якщо не робити. Сайт робитиме зайву роботу за кожного заходу, і ви помітите це лише в години пік.

Крок 8. Миттєві переходи (за бажанням) #

Що зробити. Увімкніть «Миттєві переходи»: коли відвідувач наводить курсор на посилання, браузер (Chrome та подібні) заздалегідь бере сторінку, і перехід відкривається майже миттєво. Працює для гостей і для сторінок, що вже лежать у кеші готових сторінок, тому спершу ввімкніть крок 2. Перегляди й лічильники від передзавантаження не зростають. Панель, вхід, завантаження файлів, листи-підтвердження та адреси зі знаком питання не передзавантажуються. Як перевірити. В інструментах розробника, вкладка Network: під час наведення на посилання в списку з’являється запит цієї сторінки. Якщо не робити. Нічого страшного: це бонус, а не необхідність.

Крок 9. Виміряйте після #

Що зробити. Повторіть крок 1 і порівняйте три числа. Щоб дивитися не лабораторні дані, а справжніх відвідувачів, увімкніть «Реальна швидкість у відвідувачів»: браузер відвідувача вимірює LCP, CLS та INP і під час виходу надсилає лише числа. IP-адреса, куки й відомості про браузер не зберігаються, роботи й ті, хто ввімкнув «не відстежувати», не рахуються, згода відвідувача зазвичай не потрібна, бо особистих даних немає, але уточніть у юриста для вашої країни. Підсумки з’являться в «SEO та доступність → Швидкість». Як перевірити. Три нових числа поруч зі старими. Лабораторний вимір показує один пристрій і одну мережу, а справжня картина це те, що бачать ваші відвідувачі, тому за розбіжності вірте другому. Якщо не робити. Ви гадатимете, а не знатимете.

Чого цей список не робить #

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