Каталог получал 69 баллов при живой отрисовке за 2,4 секунды. Почему так, как найти настоящую причину за минуту и что подняло оценку до 100 — без сокрытия контента от проверки.
О фоне браузер узнаёт поздно, у него нет ни lazy, ни fetchpriority, ни srcset. Обложки-фоны дали 2,7 с «задержки загрузки» — после перевода на img с object-fit страница выросла с 77 до 92, а мобильный размер файла срезал вес втрое.
Функция переносит src и srcset в data-атрибуты в выводе любого плагина или слайдера, скрипт возвращает их после первой отрисовки. Одна разметка для всех, кэш не ломается. Окна: 6885 → 274 КБ, 2546 → 387 КБ.
Лента в одну колонку (774 → 513 КБ до отрисовки), слайдер у края экрана, соседние слайды (335 ↔ 432 КБ на одном билде) и lazy на главной картинке — +1,8 с к загрузке. Что делать в каждом случае.
Меню, вкладки, фильтры: картинки в скрытых элементах Chrome грузит сразу, несмотря на lazy. 27 КБ скрытого меню на каждой странице и 94 КБ декора, который не показывается нигде. Как найти одной строкой и как лечить.
Без размеров вёрстка прыгает (CLS 0,33 → 0 после правки), а ленивая загрузка тянет картинки в окно первой отрисовки. С размерами — две ловушки: карточки втрое выше и сдвиг из-за размеров коробки вместо файла.
Bold и ExtraBold одним файлом, 47 КБ ради одного заголовка, три семейства без единого использования и «жирный», нарисованный браузером. Чек-лист из пяти пунктов и что должно остаться после аудита.
Системный шрифт уже веб-шрифта: «Прицеп» 349 px против 417, и при подмене страница вырастала на 142 px — на iPhone это видно как «ползущий» экран. size-adjust и ascent-override, главная грабля (+94 px) и как проверить.
Без прелоадов страница вживую рисовалась быстрее (1668 против 2056 мс), а оценка падала с 95–97 до 92–93. Почему так, как модель считает цепочку обнаружения шрифта и когда прелоада, наоборот, не хватало: 95 → 99.
$ tail -f /blog
Пишу разборы по скорости сайтов, кэшу и разработке — на живых проектах и с цифрами. Подпишитесь, и ссылка на новую статью придёт сразу после выхода. Без рекламы и спама, отписаться — в один клик.
или на почту
