Оптимизация метрики LCP (WebVitals) за счет приоритизации картинок
Очень часто метрика LCP (Largest Contentful Paint) зависит от загрузки заглавной картинки на странице. Если эта картинка спрятана в CSS, то обнаружение браузером присходит подздно и она загружается после менее важных элементов. В этом видео мы научимся управлять приоритетом таких картинок, даже если они прописаны в CSS в качестве фона. Будем использовать такие инструменты, как preload и fetchpriority. Документация: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload ------------------------------------------------------------------------------------------------------------------------------- Настоящее ускорение сайтов: https://www.methodlab.ru/price/uskorenie_sajta.shtml Администрирование Linux-серверов: https://www.methodlab.ru/support/administrirovanie_serverov Профессиональная поддержка сайтов: https://www.methodlab.ru/price/support.shtml Тестирование скорости сайтов: https://xn--80aanaoiczhuihpc.xn--p1ai/ Сервис оптимизации картинок: https://www.fotorubka.ru/ Сервис сжатия текстовых файлов: https://xn--80adm7bai4e9a.xn--p1ai/ Метод Лаб в Telegram: https://t.me/methodlab_tg Группа "Ускорение сайтов" в VK: https://vk.com/sitespeedup Метод Лаб в VK: https://vk.com/methodlab
Очень часто метрика LCP (Largest Contentful Paint) зависит от загрузки заглавной картинки на странице. Если эта картинка спрятана в CSS, то обнаружение браузером присходит подздно и она загружается после менее важных элементов. В этом видео мы научимся управлять приоритетом таких картинок, даже если они прописаны в CSS в качестве фона. Будем использовать такие инструменты, как preload и fetchpriority. Документация: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload ------------------------------------------------------------------------------------------------------------------------------- Настоящее ускорение сайтов: https://www.methodlab.ru/price/uskorenie_sajta.shtml Администрирование Linux-серверов: https://www.methodlab.ru/support/administrirovanie_serverov Профессиональная поддержка сайтов: https://www.methodlab.ru/price/support.shtml Тестирование скорости сайтов: https://xn--80aanaoiczhuihpc.xn--p1ai/ Сервис оптимизации картинок: https://www.fotorubka.ru/ Сервис сжатия текстовых файлов: https://xn--80adm7bai4e9a.xn--p1ai/ Метод Лаб в Telegram: https://t.me/methodlab_tg Группа "Ускорение сайтов" в VK: https://vk.com/sitespeedup Метод Лаб в VK: https://vk.com/methodlab
