Оптимизируем главную страницу 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: demimurych@protonmail.com
https://patreon.com/demimurych
Boosty: https://boosty.to/asforjs

⎡~seo ~5 ~web ~pagespeed ~lighthouse ~hexlet⎦

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