Ось уже кілька років у всіх на слуху такий інструмент як Google PageSpeed ​​Insights, але є і старіші та крутіші інструменти для контролю завантаження сторінок вашого сайту. Сьогодні я пропоную поговорити про такий крутий інструмент, як діаграма Waterfall Chart (Діаграма водоспаду). Я думаю, багато хто її бачив при пошуку різних сервісів оцінки швидкості завантаження сайту, але розуміють, як вона працює тільки одиниці.

Навіщо потрібна і як працює діаграма Waterfall?

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

Якщо ви запустите подібну діаграму, вас може збентежити купа незрозумілих термінів. Наприклад я візьму сайт одного з моїх клієнтів якому ми робили сайт під ключ, і покажу його діаграму (vgamp.com). Використати я буду інструмент gtmetrix.com. Мені подобається цей сервіс за рахунок комплексної перевірки сайту, найрізноманітнішими інструментами і після аналізу у ньому також можна використовувати Waterfall діаграму. Отже, приклад перевірки

Наприкінці першого стовпця ми можемо бачити кількість запитів, у моєму прикладі їх 74 та розмір всієї сторінки 472.6 кб. Праворуч можна побачити час завантаження сторінки 1,29 секунди та момент повного завершення події onload 1.38 секунд.

У цьому прикладі, у першому стовпці, Ви можете бачити, що всі запити з методом GET (отримання елементів), бувають також POST запити, але зараз не про них. Для зменшення GET запитів можна використовувати спрайти, це коли всі дрібні зображення на сторінці (в основному це іконки) збираються в одне зображення і потім засобами CSS виводяться на тлі елементів, а для виведення різних просто фон прокручується (змінює позицію). Достатньо зручний метод для іконок, але при використанні SVG елементів, у вас є можливість вбудовувати їх у сторінку і тоді серверу не потрібно шукати їх, вони генеруватимуться під час завантаження основного HTML коду.

Якщо у першому стовпці ви наведете на ім'я ресурсу (картинки, сценарій... ), то побачите повний шлях де розташований підвантажуваний ресурс на вашому або сторонньому сайті. Для перегляду більш детальної інформації потрібно просто натиснути на ім'я ресурсу, як показано на зображенні нижче.

Розглянемо кожен важливий для швидкості завантаження сторінки окремо:

1. Статус – код відповіді сервера, правильно буде, якщо він стоїть 200. Якщо ви отримуєте код 404, 301 або 500 значить, щось пішло не так і це уповільнюватиме вашу сторінку. Докладніше про коди відповіді сервера на Wikipedia.
2. Контент-кодування – у цьому випадку показує, що елемент був стиснутий методом GZip і це добре, так як такі елементи будуть вантажитися швидше.
3. Тип вмісту – показує якого типу елемент, що перевіряється.
4. Сервер – це сервер, який налаштований у вас на хостингу, у нашому випадку це nginx.
5. Схема – у нас це HTTP, працюючий через шифровані транспортні механізми SSL. Корисно для збереження даних під час передачі на сайті, особливо для магазинів. Важливо, щоб усі підключені файли на вашому сайті мали один тип протоколу, такий же, як на вашій головній сторінці. Якщо у вас HTTPS, то й у всіх файлів має бути HTTPS, винятком можуть бути зовнішні посилання на сайти (не файли).
6. шлях – шлях до файлу, що перевіряється.

Легенда одного файлу в оцінці продуктивності сайту

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

Легенда показує, що відбувається із запитом до файлу у вигляді різних колірних рішень. Фаз запиту у легенді може бути багато, основні з них це: блокування (світло сірий), відправка (червоний), очікування (фіолетовий), отримання (сірий). Кольори можуть відрізнятися на різних сервісах, але визначення зазвичай однакові.

Коротке визначення окремих фаз запиту, які ми можемо побачити:

• Блокування: час, проведене у черзі браузера, очікування мережного підключення.
• DNS пошук: час для дозволу DNS.
• Підключення: час, необхідне створення TCP-з'єднання.
• Відправка: час надсилання даних запиту на сервер.
• Очікування: час очікування відповіді із сервера.
• Отримання: час завантаження тіла відповіді.

Поки що я не написав інтерпретацію статті російською, ви можете почитати про різні фази запиту. тут. Це якщо ви хочете дуже серйозно розуміти в цьому.

Межі завантаження документа

Також у діаграмі ви можете бачити кілька ліній різних кольорів, як показано на зображенні нижче.

Розглянемо, що означають ці лінії:

1. Перше відображення сайту, хоча багато хто аналізує швидкість завантаження сайтів, пов'язують виведення елементів з етапом [3].
2. Повне завантаження елементів DOM елементів сторінки. Відбувається, коли всі елементи завантажені та проаналізовані.
3. Завершення події onload. У деяких випадках елементи можуть завершувати або розпочинати завантаження після події onload.
4. Повне завантаження до та після події onload.

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

Як орієнтуватися та оптимізувати сторінку за допомогою діаграми Waterfall

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

На прикладі нижче є знімок з неправильною відповіддю сервера 404 і 403, поряд ви можете побачити, наскільки сповільнилося завантаження сторінки при цьому.

Шукайте особливо довгі графіки на діаграмі та перевіряйте, які параметри роблять цю затримку. Іноді самі движки, на яких сайт зроблений екстремально повільні., іноді повільний модуль або просто натупив програміст і зробив рекурсію там, де її робити було непотрібно ). Взагалі останній варіант від неписьменності найчастіший. Ще буває так що клієнт зекономив на якості і все було зроблено, щоб просто красиво виглядало.

Ось такий приклад є у мене в наявності:

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

Ще буває так, що з'являються довгі проміжки між запитами.. Це може бути, коли підвісає браузер користувача або виконується javascript. На моїх сайтах такого прикладу я не знайшов, тому знайшов для вас приклад у мережі, google як завжди допоміг.

Дякую за те, що дочитали цю статтю до кінця. Сподіваюся ця стаття трохи розплющила вам очі на, те як розбирати діаграми водоспаду.

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

/* */