Плеер YouTube, VK или Rutube грузит мегабайты до нажатия «плей». Плитка с превью и iframe по клику — ноль чужих скриптов до действия. Как запустить ролик с первого клика на каждом хостинге и грабли: голый id, второй домен VK, Rutube без параметров.
API Яндекс Карт грузился на каждой странице с формой — 465 КБ и 350 мс блокировки. Почему внешний модуль сборки грузится не по import(), как написать свой загрузчик и почему большой запас наблюдателя тянет карту в первый экран.
Виджет звонка на 641 КБ и счётчик с картой кликов давали TBT 3 секунды, а без них оценка поднималась с 67 до 90. Как загружать сторонний код после первого действия посетителя — с готовым кодом и честной ценой подхода.
Два правила на 48 байт (min-width 381 и 441 px) опустили порог десктопного файла, и телефоны снова ждали его — 450 мс из 850. Плюс каскад: правило из отдельного файла побеждает базовое ровно с ширины порога.
Стили для широких экранов выносятся в отдельный файл с атрибутом media, и телефон перестаёт их ждать: Speed Index 4,4 → 1,8 с, задержка отрисовки LCP 1870 → 270 мс. Как это устроено и три грабли, включая молча выключившееся разделение.
Дважды встроенный CSS делал хуже, и мы откатывали. Один раз — товарная 80 → 88, первая отрисовка 1286 → 209 мс при обещанных отчётом 150 мс. Чем отличались эти случаи и как понять, нужен ли инлайн вашей странице.
Форматы делаются в фоне, а страница кэшируется раньше — и неделю отдаёт PNG на 122 КБ при готовом AVIF на 14 КБ рядом. Как поймать (curl, а не Lighthouse), как лечить за 0,5 мс на страницу и сколько стоит AVIF для сервера.
PageSpeed эмулирует экран плотностью 1,75, и srcset с 1x/2x отдаёт ему двойной файл — «изображение больше, чем нужно». Разделение через media="(min-resolution: 2dppx)": претензий 8 → 0, вес 702 → 420 КБ.
webp на качестве 80 вышел тяжелее jpg (40–95 КБ против 31–60). Под затемнением 50 % качество 50 неотличимо — постер 110 → 34 КБ. А зернистый кадр не берёт ни шумоподавление, ни качество 30 — помогает только ширина.
$ tail -f /blog
Пишу разборы по скорости сайтов, кэшу и разработке — на живых проектах и с цифрами. Подпишитесь, и ссылка на новую статью придёт сразу после выхода. Без рекламы и спама, отписаться — в один клик.
или на почту
