Регідратація контенту – це процес, який відбувається, коли веб-сайт, побудований з використанням JavaScript-фреймворку, такого як Angular або React, динамічно оновлює контент на сторінці, не вимагаючи оновлення всієї сторінки.
Це означає, що коли користувач переходить на нову сторінку, спочатку завантажується основна структура сторінки, а потім у режимі реального часу завантажується динамічний контент, що підвищує швидкість завантаження і покращує користувацьке сприйняття.
Цей процес називається регідратацією, оскільки він “повертає до життя” контент після його початкового завантаження.
В Angular це досягається завдяки використанню методів рендерінгу на стороні сервера і рендерінгу на стороні клієнта, які працюють разом, щоб забезпечити швидкий і безшовний досвід для користувача.
За замовчуванням така поведінка має суттєвий недолік.
До необробленої відповіді, надісланої вашим сервером, буде додано скрипт з усім необхідним кодом для додання додатку динамічності.
У готовому вигляді цей скрипт може легко становити понад 90% від загального розміру HTML, як показано в скріншоті.
Проте, 1,07 МБ (270 кб у стислому вигляді) – це не те, що повинно мати такий великий вплив, чи не так?
Раніше я теж так вважав. Але мало хто знав, як я помилявся.
Проблема пов’язана не з розміром самого скрипта, а з тим, що він означає для пошукових систем.
Google чітко пояснює у своїй документації, як він розбирає HTML-документ. Суть у тому, що після отримання необробленої відповіді виконуються файли JavaScript для формування остаточного HTML.
Що більше у вас JS-коду, то довше вам доведеться чекати, поки ваша сторінка перейде з розряду просканованих у розряд проіндексованих.
Якщо міркувати з точки зору Google, то це цілком логічно. Дійсно, така поведінка заохочує сайти, які значною мірою покладаються на SSR, що знижує операційні витрати Google, оскільки розбір JavaScript у масштабі має бути дорогим.
Якщо ви використовуєте регідратацію контенту з коробки, вашому сайту знадобиться час для індексації, оскільки кожна сторінка витрачатиме більше часу на очікування в черзі рендерингу.
Як розв’язувати цю проблему?
Скрипт із коробки містить багато інформації, яку ви не використовуєте у своєму додатку. Трюк полягає в тому, щоб оптимізувати його, попросивши вашу команду виключити інформацію, яку ви не використовуєте.
Занадто просто, щоб бути правдою? Саме так і було зроблено, і після початкового падіння розмір скрипта зменшився на 50-75%, а рівень продуктивності миттєво повернувся до початкового. І відразу після цього позиції сайту почали зростати.
Про це все і про те, який вплив регідратація може мати під час міграції, прочитаєте в статті:
@MikeBlazerX
