Вопрос или проблема
Я управляю сайтом для продажи билетов.
На одной странице у меня есть таймер обратного отсчета (где текст внутри HTML-кода меняется каждую секунду).
Если я устанавливаю выполнение таймера сразу, то Google Lighthouse жалуется на смещение макета, и мой показатель CLS увеличивается.
Если же я устанавливаю таймер на начало работы через 3 секунды после полной загрузки страницы, то Google Lighthouse жалуется на наличие множества длинных основных потоков задач.
Я не хочу прибегать к созданию цифр часов в виде одного изображения и генерации этого изображения на сервере, при этом JavaScript будет загружать новое изображение каждую секунду для следующей цифры. Это будет много цифр, и для кэширования потребуется много места для хранения.
Как я могу сделать живые часы без жалоб со стороны Google Lighthouse, которые будут работать в любом веб-браузере?
П.С. Я не прошу исходный код.
Ответ или решение
Когда речь идет о создании веб-сайта с живыми часами, важно обратить внимание на пользовательский опыт и производительность, особенно с точки зрения оценки Google Lighthouse. Ваша задача заключается в том, чтобы реализовать таймер обратного отсчета без ухудшения показателей, таких как накапливающийся смещение макета (Cumulative Layout Shift, CLS) и продолжительность основных потоков.
Анализ проблемы
Вы упомянули два варианта:
-
Мгновенное выполнение таймера: При этом варианте текст на странице (цифры таймера) меняется каждую секунду, что приводит к смещению элементов на странице. Это, в свою очередь, вызывает негативное влияние на показатель CLS.
-
Отсрочка запуска таймера: Вы можете отложить запуск таймера на 3 секунды после полной загрузки страницы. Однако это может привести к длительным основным задачам, что также негативно сказывается на производительности.
Выбор оптимального подхода
В данном контексте я рекомендую рассмотреть следующие варианты, которые помогут вам добиться баланса между функциональностью и производительностью, не прибегая к использованию изображений для каждого числа:
1. Резервирование места для таймера
Предварительно выделите достаточно пространства на странице для таймера, чтобы предотвратить изменение макета при его обновлении. Это можно сделать с помощью CSS, задав фиксированные размеры для контейнера, который будет содержать часы. Например:
.timer {
width: 100px; /* или другое значение, позволяющее разместить текст */
height: 50px; /* размер, соответствующий высоте текста */
}2. Использование CSS для гладкой анимации
Чтобы минимизировать визуальное смещение элементов, можно использовать CSS-анимации для плавного появления изменения текста. Например, применение эффекта opacity будет более визуально приятным и менее воспринимаемым как скачок:
.timer {
transition: opacity 0.5s ease-in-out;
}3. Виртуальный таймер
Вы можете создать "виртуальный" таймер, который будет отслеживать время и отображать его без реального изменения самого элемента DOM с каждой итерацией. Вместо обновления текста таймера на странице можно использовать обновление числа в переменной и лишь периодически обновлять стиль отображаемого текста.
4. Логика загрузки
Опционально, вы можете начинать таймер, когда пользователь начинает взаимодействовать со страницей (например, при прокрутке или клике). Это поможет избежать увеличения длительности основных потоков, так как таймер будет активироваться только при необходимости.
Заключение
Создание живых часов на вашем сайте не должно приводить к негативным последствиям по оценке производительности. Используя указанные выше методы, вы сможете реализовать таймер обратного отсчета без значительных компромиссов в области пользовательского опыта и производительности. Важно также помнить о регулярной проверке производительности вашего сайта с помощью инструментов, таких как Google Lighthouse, для выявления и устранения потенциальных проблем.
Подготовьте свою реализацию к изменениям в веб-стандартах и следуйте лучшим практикам в разработке для обеспечения долговечности и высоких показателей вашего сайта.