Прискорення Lenta.ru: 3 людини, 2 тижні, поліпшення глибини перегляду на 27%


Денис Паращій, технічний менеджер Lenta.ru, розповів про свій досвід проведення оптимізації сайту в презентації проекту Академія Яндекса. Ми наводимо тут основні моменти з цього виступу (коментарі надані курсивом).

Стимулом для оптимізації сайту Lenta.ru стало впровадження технології Google AMP (accelerated mobile pages). Це було зроблено, щоб полегшити користування сайтом для тих самих 40% відвідувачів зі смартфонами.



В результаті, швидкість завантаження сторінок для мобільних користувачів скоротилася на 60%. Це саме по собі – прекрасний результат. Крім того, час використання сайту відвідувачами зі смартфонами, яким показувалася AMP-версія, зросла на 46%.

Основою бізнесу Lenta.ru є продаж реклами на своєму майданчику. Компанія не розкрила комерційні показники, але це зростання часу використання сайту у 40% його відвідувачів виразно привів до зростання виручки.

Цей успіх з впровадженням Google AMP для мобільних користувачів надихнув команду на те, щоб зайнятися прискоренням основної версії сайту для решти 60% аудиторії.

Була висунута гіпотеза, що поліпшення швидкості завантаження сайту прямо пов'язане з поліпшенням показників аудиторії: тривалість сесії, глибина перегляду, відсоток відмов.

Існують кілька показників швидкості завантаження сайту:

  • Початок відображення (start render) – час з першого запиту до моменту появи першого відображеного пікселя на екрані користувача.

  • Візуальна готовність (visually complete) – час, коли на екрані користувача з'явився весь контент, і подальші зміни на екрані вже не відбуваються.

  • Завантаження сторінки (page load) – час, коли завантажена сторінка і всі зовнішні файли.

  • Повне завантаження (fully loaded) – час через 2 секунди після припинення всіх запитів з сайту. Цей показник необхідний у зв'язку з тим, що різні технології, наприклад, асинхронний Javascript, можуть призводити до того, що завантаження або надсилання даних буде тривати після завантаження сторінки.
Команда Lenta.ru скористалася поруч зовнішніх сервісів для відстеження показників сторінок: WebPageTest, Pingdom, New Relic.



На території РФ аналогічну інформацію дає Irie.рф, також її можна зібрати самостійно через Navigation Timing API



Значну увагу було приділено показникам, які виходять за допомогою «синтетичних тестів». Суть цих тестів в тому, що зовнішній сервіс емулює захід на сайт користувача з заданими параметрами: операційна система, браузер, включені або виключені різні функції браузера.

Оскільки ці запити відбуваються постійно, регулярно і з постійних локацій, це дає точну картину, погіршилася або покращилася швидкість завантаження сайту після будь-яких змін у ньому. Такі запити завжди однакові, і це дає більш точну картину, ніж реальні дані статистики сайту. Адже швидкість завантаження залежить від структури трафіку: географії користувачів, відмінностей в пристроях, швидкості інтернету кінцевих користувачів і т. д.

Основні роботи в прискоренні сайту були пов'язані з такими областями:

  • Рекламні пікселі і трекери: коли на сайті багато різних JS-скриптів і зовнішньої підключається реклами, важко визначити «хто кого блокує» у разі якихось проблем з відображенням сайту.
  • Блокуючі JS і CSS: було визначено ряд JS і CSS файлів, які блокували відображення сторінки, поки браузер не отримає ці файли.
  • Ряд проблем з попереднього «переїзду» на нові сервера: оскільки сайт був нещодавно перенесений на нові сервера, було виявлено ряд проблем, що виникли із-за цього. Зокрема, не було включено стиснення gzip, а також були відсутні заголовки кешування для багатьох сторінок. Ці проблеми також був виправлені.
  • Рефакторинг коду: частково був перероблений власний код, використовуваний на сайті.
У роботі брали участь один фронтенд-розробник і двоє адміністраторів. Роботи по оптимізації тривали близько 2-х тижнів.

В результаті проведеної оптимізації були досягнуті наступні показники:

  • Початок відображення (start render): поліпшення на 40%.
  • Візуальна готовність (visually complete): поліпшення на 20%.
  • Завантаження сторінки (page load): поліпшення на 60%.
Однак радість з приводу показника «завантаження сторінки» виявилася передчасною, оскільки рекламні блоки були винесені після завантаження сторінки. У підсумку виявилося, що довантаження даних триває набагато довше, ніж завантажується сама сторінка.



Тому команда Lenta.ru пропонує скептично ставитися до показника «завантаження сторінки» і пропонує оцінювати швидкість за показником «повне завантаження».

Аудиторні показники сайту також покращилися:

  • Час на сайті: збільшення на 32%.
  • Глибина перегляду: збільшення на 27%.
  • Показник відмов: зменшення на 6%.
Гіпотеза про поліпшення аудиторних показників через прискорення сайту повністю підтвердилася.

Денис Паращій наводить дані аналогічного кейса Financial Times. Було відмічено істотне зниження конверсії на сайті при впровадженні штучної затримки відображення сторінок.


На закінчення варто зробити наступні висновки:

  • Оптимізація повинна ґрунтуватися на гіпотезах, які перевіряються за результатами оптимізації: «що покращиться, якщо оптимізувати що».
  • Важливо визначити коректні метрики. Як видно в цьому випадку – не покладатися цілком на показник часу завантаження сторінки.
  • Потрібно використовувати спеціальні сервіси моніторингу, щоб відслідковувати показники швидкості сайту.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.