Оптимізація події DOMContentLoaded означає зменшення кількості та розміру ресурсів, які блокують синтаксичний аналіз і рендеринг документа HTML. Щоб зробити це, зменшуйте та стискайте файли HTML, CSS і JavaScript, щоб зменшити кількість байтів і запитів.
Вище ми бачимо, що наразі лише 11% відвідувачів Chrome відчувають Good DOMContentLoaded — майже 90% людей чекають понад 1,5 секунди, перш ніж ключові функції програми стануть доступними, причому майже половина чекає більше 3,5 с! DOMContentLoaded становив 4,7 с для 75% відвідувачів Chrome у травні 2023 року.
Як виправити надмірний розмір DOM
- Згладьте структуру HTML Спростіть вкладені структури, щоб зменшити глибину DOM: …
- Використовуйте CSS Grid і Flexbox Сучасні методи компонування CSS часто можуть замінити складні вкладені структури, зменшуючи потребу в кількох елементах-контейнерах. …
- Аудит сторонніх сценаріїв
DOMContentLoaded – браузер повністю завантажив HTML, і дерево DOM створено, але зовнішні ресурси, такі як зображення <img> і таблиці стилів, можуть ще не завантажуватися. load – завантажується не тільки HTML, а й усі зовнішні ресурси: зображення, стилі тощо. beforeunload/unload – користувач покидає сторінку.
Подія DOMContentLoaded запускається, коли HTML-документ повністю проаналізовано та всі відкладені сценарії ( <script defer src="…"> і <script type="module"> ) завантажено та виконано. Він не чекає завершення завантаження інших речей, таких як зображення, субфрейми та асинхронні сценарії.
Зменшіть DOM, щоб оптимізувати CSS Якщо розробник розбиває файл CSS, він також може зменшити розмір DOM. Незалежно від того, чи файл CSS розділений, зменшений або поділений на кілька менших файлів, кожна опція зменшує кількість елементів DOM у HTML і допомагає покращити час завантаження веб-сторінки.