Як прискорити завантаження сайту - досвід «TechInsider»
Низька швидкість завантаження сайту негативно впливає як на позицію в пошуковій видачі, так і на поведінку користувачів. Дослідження показали, що більше половини користувачів залишають сайт, якщо сторінка завантажується довше трьох секунд.
Розповімо, що таке Core Web Vitals, чому це так важливо, як поліпшити завантаження повільного сайту і збільшити дохід від реклами на прикладі роботи з сайтом «TechInsider».
Зміст статті
Сторінки, які завантажуються протягом двох секунд, мають середній показник відмов 9%, в той час як на сторінках, які завантажуються за п'ять секунд, показник відмов злітає до 38%
Як перевірити швидкість завантаження сайту?
Щоб розуміти як сайт веде себе у вашій аудиторії, необхідно збирати і аналізувати швидкість завантаження на реальних пристроях всіх відвідувачів. Для цього можна використовувати легковагову js-бібліотеку https://www.npmjs.com/package/web-vitals, яка дозволяє легко отримати показники, вам залишиться тільки відправляти ці цифри в ту систему аналітики, якою зазвичай користуєтеся, для візуалізації та аналізу.
Корисним буде сервіс PceSpeed Insights. Вимірювання швидкості він проводить в лабораторних умовах і не відображає об'єктивну картину, проте покаже докладні рекомендації, які допоможуть поліпшити показники швидкості завантаження сайту.
Core Web Vitals - за якими критеріями можна оцінити сайт?
У травні 2021 року Google сформував міжнародні стандарти, які допомагають не тільки вірно оцінити поточну швидкість завантаження сайту, але і вибрати основні напрямки для оптимізації
Три ключові індикатори відповідності міжнародним критеріям якості (Core Web Vitals):
- Large Contentful Paint (LCP) - швидкість малювання основного контенту сторінки. LCP 2,5 секунди або менше - хороший результат.
- Затримка першого вводу (FID) - швидкість відповіді сайту на взаємодію з користувачем. FID 100 мілісекунд або менш - хороший результат.
- Накопичувальний зсув макета (CLS) оцінює візуальну стабільність сторінки. Рейтинг CLS 0,1 або менш - хороший результат.
Як ми прискорили завантаження сайту?
Динаміка CWV показників на прикладі сайту ПМ у 2021 році:
*% відвідувачів сайту, показники CWV у яких відповідають хорошому результату.
Архітектура програми
Для виконання важкої логіки основного додатку та додаткових сервісів ми використовуємо обчислювальні потужності хмарного провайдера. При цьому для прискорення доставки контенту, ми налаштували проксирующие і кешуючі сервери, які фізично знаходяться максимально близько до наших читачів, це значно знижує час, необхідний на передачу контенту. Сервери пов'язані з хмарою по виділеному швидкісному каналу, що забезпечує надійність зв'язку.
Базовий рефакторинг. Оптимізували внутрішнє сховище, усунули зайві обчислення і оптимізували складні запити.
Робота з адаптивністю. Раніше структури сторінок мобільної та десктопної версії сайту відрізнялися, що створювало додаткове навантаження. Після введених змін була введена ідентична структура для всіх розмірів браузера. Тепер блоки, які відрізняються в десктопній і мобільній версіях, ховаються або відображаються виключно за допомогою стилів.
Шрифти. Відмовилися від використання важких кастомних шрифтів. Змінили логіку з'єднання шрифтів з fonts.googleapis.com: відмовилися від використання директиви @ import, запровадивши статичні стилі для підключення шрифтів у наших файлах.
Рефакторинг компонентів статті. Провели рефакторинг компонентів статті. Виправили прив'язки до розмірів вікна "