1. Сетевые ресурсы (Полный трафик)

Это всё, что браузер скачивает с сервера по сети. Их можно вытащить через performance.getEntriesByType("resource"):

• Изображения из CSS: Картинки, которые подгружаются не через тег <img>, а через стили (background-image: url(...)). Текущий код их вообще не видит.

• Шрифты: Файлы кастомных шрифтов (.woff, .woff2, .ttf), которые прописаны в CSS. Они часто весят больше всего и фризят отображение текста.

• Иконки (Favicons): Все кастомные иконки сайта для вкладок браузера и мобильных устройств (.ico, .png, webmanifest).

• SVG-спрайты: Внешние файлы со схемами иконок, которые подключаются через <use xlink:href="...">.

• Динамические скрипты: Скрипты, которые не прописаны в HTML изначально, а вставляются другими скриптами на лету (метрики, виджеты, реклама, плееры).

• XHR / Fetch запросы (AJAX): Асинхронные запросы к серверу за данными (например, подгрузка комментов, динамический вывод постов, проверка авторизации).

• Аудио и Видео: Все медиа-файлы, которые подтягиваются плеерами или фоновыми тегами <video> и <audio>.

• Iframe (Фреймы): Сторонние страницы, встроенные в твой блог (например, виджеты соцсетей или плееры YouTube/VK), которые внутри себя начинают качать еще сотню своих ресурсов.

2. Внутренние метрики и структура (DOM)

Это не файлы, а элементы структуры самой страницы, которые процессор разбирает в памяти:

• Общее количество DOM-узлов (Nodes Count): Абсолютно каждый тег на странице (<div>, <p>, <span>, <a> и т.д.). Их может быть несколько тысяч.

• Размер HTML-кода: Объем самого текстового документа (исходного кода страницы) в байтах.

• Объем локальных хранилищ: Данные, которые сайт читает из браузера юзера (localStorage, sessionStorage, Cookies).

3. Браузерные события (Этапы рендеринга)

Вместо одного DOMContentLoaded можно считать пошагово, как браузер строит страницу:

• loading — Браузер только начал парсить HTML.

• interactive — HTML полностью прочитан, DOM-дерево построено, но тяжелые ресурсы (картинки) еще качаются.

• complete — Страница и все ресурсы полностью готовы (аналог события load).

• First Paint (FP) / First Contentful Paint (FCP) — Момент, когда юзер увидел первый пиксель/текст на экране вместо белого листа.