Оптимизируем главную страницу HexLet до PageSpeed 90+

Онлайн доводим главную страницу https://ru.hexlet.io/ до PageSpeed 90+ Таймкоды: 00:00:00 Приветствие и объявление темы стрима 00:01:30 Цель: поднять главную HexLet с 57 до 90+ 00:04:41 Объяснение PageSpeed и его влияния на SEO 00:13:21 Создаём локальную копию страницы через wget 00:18:16 Ошибки локальной копии из-за кросс-доменов 00:22:28 Удаляем preload/preconnect — баллы растут 00:32:35 Разбор метрики LCP (первая область отображения) 00:35:22 Анализ тяжёлых файлов: CSS 360КБ, JS 762КБ 00:40:20 Эксперимент: удаление CSS/JS даёт 99 баллов 00:45:51 Влияние скриптов Яндекс.Метрики на скорость 00:53:15 Импортируем CSS напрямую в HTML 00:56:24 Результат: почти 90 баллов 01:00:18 Переносим JavaScript в конец body 01:06:47 Инлайним JS в HTML — прирост +3 балла 01:11:56 Выясняем: JS блокирует отрисовку LCP 01:18:17 Откладываем загрузку JS на 10 секунд 01:22:17 Успех: страница получает 96 баллов 01:28:06 Отложенная загрузка JS ускорила метрики в 2 раза 01:33:17 Внедряем ленивую загрузку изображений 01:37:48 Временно заменяем картинки на прозрачную заглушку 01:45:55 Дробим монолитный JS на модули под требования 01:46:51 Удаляем из кода Метрики и всё лишнее 01:59:06 Запускаем счётчики не сразу, а через 1.5 секунды 02:08:03 Оптимизация шрифтов: атрибут swap и подрезка 02:09:34 Отказываемся от иконочных шрифтов в пользу SVG 02:14:27 Инлайним SVG-иконки, а не подключаем спрайты 02:16:53 Напоминание о правилах вложения тегов в HTML5 02:23:24 Обсуждение особенностей и багов Safari 02:31:57 Performance API как инструмент для точной оптимизации 02:35:05 Проблема современных LLM: они учатся на плохом коде 02:36:09 Предложение зрителям: присылайте "тяжёлые" сайты на разбор 02:37:05 Завершение стрима, благодарность зрителям AsForJs новости в Telegram: https://t.me/AsForJavaScript AsForJs Talks в Telegram: https://t.me/AsForJsTalks Поддержать маленького бородатого JavaScript-ра Карта Приват (Bobrov Maksym): 4627 0551 1711 8850 USDT Tron (TRC20): TKoZu59WHiX6L6qvwYTYTsZJerDrnAHBTx USDT etherium (erc20): 0x75fb8a62dfcf453b2e73f1ef1c407d46f918fffa TON: UQAGXvuhxg3qU0eFgOxtdDlKXqdp1zPq6yCRSRbRYQClxOzH bitcoin:bc1q74aru82v4d3alay7p53jdwkmxe4a5gz7fmvfm2?message=AsForJS&time=1686349743 PayPal: [email protected]   / demimurych   Boosty: https://boosty.to/asforjs ⎡~seo ~5 ~web ~pagespeed ~lighthouse ~hexlet⎦