Как с помощью Core Web Vitals влюбить в свой сайт пользователей и поисковые системы

[dm_deko]

Отчётность в виде графиков не даёт?

Какой-то дашборд по сайту отстроить можно с помощью этого инструмента?

[igor_yakovlev]

Не совсем понял вопроса. Думаю конечно можно написать самописный дашборд. Но есть готовые инструменты и дашборды в самом гугле, а именно google analytics https://support.google.com/analytics/answer/1205784?hl=ru#zippy=%2Cсодержание

[monochromer]

Аудит: настройте подходящий размер изображений. Решение: использовать формат изображений WebP.

Насколько помню, данный аудит означает размер в пикселях, а не килобайтах, чтобы, например, в аватарку размером 80x80 не пихали картинку 2000x2000.

[igor_yakovlev]

И это тоже верно. У нас когда речь идет об изображениях по регламенту проверяется три показателя:

1) размер в кб

2) от размера в кб напрямую зависит размер в пикселях, т.е. промежуточное между качеством для размера в px и размером в кб. Мы ищем золотую середину, и называем оптимизация изображения.

3) используется ли современный формат изображения, например webp

[BlackStar1991]

потешная статья... удивили, спасибо. Обычно такое пишут что б получить бэклинку с хабра себе на сайт, но вы почему-то поленились добавить пример Ваших супер соптимизированых сайтов. (Что б люди понимали тут к чему следует стремится)

Хотелось бы примеров, а не абстрактных понятий "Другой вариант — совсем отказаться от фоновых изображений. Ведь браузер медленно обрабатывает CSS и значительно ускорить загрузку фоновых картинок очень трудно." .... это прям супер совет. Прям переубеди заказчика и дизайнера, что им не надо хороших, больших изображений на первый экран...

[dm_deko]

Особенно если во главе группы заказчика - маркетологи. ???

[DasBinIch]

Часто еще отнимает баллы подключение аналитики - Google Tag Manager, Яндекс.Метрика. Но если добавить их в preconnect, иногда разница очень ощутима - баллы улучшаются. А как вы с этим боретесь?)

[igor_yakovlev]

Фактически preconnect не влияет на визуальную скорость загрузки страниц. Мы используем отложенную загрузку сторонних скриптов. Мы теряем пользователей которые не взаимодействуют со страницей, но заказчиков это устраивает, потому что реально важная статистика по прежнему собирается. Была ещё библиотечка специально для данной проблемы, к сожалению, забыл её название, в её основе другая технология чем просто lazy load, нам она не понравилась, потому что can i use был под вопросом. Увы реально не могу вспомнить название.

[PendalF89]

А как вы Метрику отложенно грузите? Можно пример?

[igor_yakovlev]

export default ({ app }) => {
    if (process.env.NODE_ENV !== 'production') {
        return; // запускаем скрипты только на продакшене
    }

    let isLoaded = false;

    const loadAll = () => {
        if (!isLoaded) {
            isLoaded = true;
            initServices(app);
        }
    };

    const root = document.querySelector('.layout');

    root.addEventListener('scroll', loadAll, false);
    root.addEventListener('click', loadAll, false);
    window.addEventListener('resize', loadAll, false);
};

Функция initServices загружает весь набор скриптов, от гугла и метрики до пикселей разных сервисов. Код взят с одного из проектов на Nuxt.js + немного специфики конкретного проекта. Здесь ключевое события 'scroll', 'click', 'resize' которые говорят что перед нами активный пользователь.

[PendalF89]

Благодарю! Возьму это решение на заметку.

[Xtray]

Не понятно только, как прописывать width и height картинкам, которые должны масштабироваться и которые нельзя вставлять бэкграундом...

[igor_yakovlev]

Попробуйте решать данную задачу через position: absolute, например здесь https://amp.dev/documentation/components/amp-img/ можно посмотреть пример реализации. И конечно без object-fit и object-position не обойтись