Как LightHouse оценивает ваш HTML и CSS с точки зрения производительности

На примерах разберем, что именно имеет значение для производительности ваших страниц с точки зрения теста LightHouse. Усвоим простые практики, которые позволят нам, без лишних усилий, сохранять зеленую зону в тесте производительности от Google - LightHouse. Сделаем это на примере простого кода для drop down Menu взятого на просторах интернета, разобрав его со всех сторон. Таймкоды: 00:00:01 Вступление 00:02:01 Тема видео 00:03:41 Обзор проекта 00:16:18 О производительности и Lighthouse в рамках SEO 00:20:46 Оценка производительности через Performance API 00:27:33 Создание тестовой версии v1 00:30:18 Влияние запросов внешних ресурсов на производительность 00:47:00 Замена внешних ресурсов на локальные 01:04:45 Влияние шрифтовых иконок на производительность и SEO 01:10:10 Замена шрифтовых иконок на SVG-иконоки 01:19:35 Оптимизация: удаления лишних HTML-узлов 01:25:40 Оптимизация: инлайнинг SVG-иконок в CSS 01:30:00 Влияние оптимизаций на производительность 01:34:10 Рекомендации по использованию иконок 01:38:30 Ответы на вопросы из чата 03:01:28 Завершение трансляции Более подробные таймкоды ответов на вопросы зрителей смотри в закрепленном комментарии к видео. AsForJs новости в Telegram: https://t.me/AsForJavaScript
AsForJs Talks в Telegram: https://t.me/AsForJsTalks
Поддержать маленького бородатого JavaScript-ра Карта Приват (Bobrov Maksym): 5168745021397333 USDT Tron (TRC20): TKoZu59WHiX6L6qvwYTYTsZJerDrnAHBTx USDT etherium (erc20): 0x75fb8a62dfcf453b2e73f1ef1c407d46f918fffa TON: UQAGXvuhxg3qU0eFgOxtdDlKXqdp1zPq6yCRSRbRYQClxOzH bitcoin:bc1q74aru82v4d3alay7p53jdwkmxe4a5gz7fmvfm2?message=AsForJS&time=1686349743 PayPal: demimurych@protonmail.com   / demimurych   Boosty: https://boosty.to/asforjs
⎡~seo ~2 ~html5 ~css ~perf ~lighthouse ~dropDown⎦