Всем привет! Прошло много времени с тех пор, как я последний раз писал в блог, и, признаюсь, меня это немного расстраивает. Реальность такова, что нужно так многому научиться, и иногда кажется, что времени, чтобы погрузиться во все, никогда не хватает. Хотя кого я обманываю? Правда в том, что в последнее время я много откладываю дела на потом.

Но недавно я изучал веб-производительность — важнейшую тему для любого фронтенд-разработчика — и рад поделиться тем, что узнал. Оптимизация производительности — это одна из тех вещей, которая, если все сделано правильно, может существенно изменить восприятие пользователями вашего веб-сайта или веб-приложения. Это не только улучшает пользовательский опыт, но также улучшает SEO и может даже повлиять на коэффициент конверсии.

Итак, приступим!

Почему веб-производительность имеет значение

В современном быстро меняющемся мире пользователи ожидают, что веб-сайты будут быстро загружаться и плавно взаимодействовать. Если ваш сайт работает медленно, пользователи уйдут — это очень просто. Исследования показывают, что задержка даже на несколько секунд может привести к увеличению показателя отказов и снижению вовлеченности. Как фронтенд-разработчики, мы несем ответственность за то, чтобы наши приложения не только хорошо выглядели, но и хорошо работали в различных условиях.

Когда дело доходит до измерения эффективности, Google часто считают золотым стандартом. Google предоставляет набор ключевых показателей, известных как Core Web Vitals, которые помогают разработчикам отслеживать и улучшать производительность своих веб-сайтов. Давайте разберем их:

По мнению господина Google эти вещи влияют на производительность

• FCP (первая содержательная отрисовка)
• LCP (самая большая по содержанию краска)
• CLS (совокупное изменение макета)
• TTI (Time To Interactive)
• INP (взаимодействие со следующей отрисовкой)

Давайте изучим их поближе

FCP (первая содержательная отрисовка)

Что он измеряет: FCP измеряет время, необходимое для появления первой части контента (текста, изображений и т. д.) на экране после того, как пользователь перешел на вашу страницу. Это критически важный показатель, поскольку он дает пользователям обратную связь о загрузке страницы. Чем быстрее FCP, тем лучше взаимодействие с пользователем.

Как улучшить FCP:

Минимизируйте ресурсы, блокирующие рендеринг: Сократите или устраните ресурсы, блокирующие рендеринг страницы, такие как синхронный JavaScript или CSS. Используйте для критически важных ресурсов.

Отложить некритичный JavaScript: Используйте атрибуты defer или async для второстепенных скриптов, чтобы гарантировать, что они не блокируют первоначальную отрисовку.

*Используйте серверный рендеринг (SSR): * SSR помогает быстрее доставлять исходный HTML-код, особенно для динамического контента, чтобы пользователи могли быстрее увидеть содержательный контент.

Оптимизируйте доставку CSS: Минимизируйте размер CSS и встроенного критического CSS, чтобы браузер мог быстрее отображать контент.

Используйте сеть доставки контента (CDN): Предоставляйте статические ресурсы из CDN, чтобы уменьшить задержку и ускорить доставку ресурсов.

LCP (самая большая по содержанию краска)

Что он измеряет: LCP фокусируется на времени, которое требуется самому большому элементу (обычно главному изображению, большому текстовому блоку или видео) для полной визуализации в области просмотра. Это отличный индикатор воспринимаемой скорости загрузки, поскольку пользователи считают страницу готовой, как только загрузится самый большой контент. Старайтесь, чтобы LCP не превышал 2,5 секунд для быстрого взаимодействия.

Как улучшить LCP:

Оптимизация и сжатие изображений. Используйте современные форматы изображений, такие как WebP, сжимайте изображения и обеспечивайте отображение изображений правильных размеров с помощью атрибутов srcset и size.

Отложенная загрузка изображений ниже сгиба: Реализуйте отложенную загрузку для изображений, которые не видны сразу, чтобы отдать приоритет загрузке содержимого, расположенного выше сгиба.

Предварительная загрузка важных ресурсов: Используйте тег, чтобы быстрее загружать важные ресурсы, такие как шрифты, главные изображения или большие медиафайлы.

Минимизируйте CSS, блокирующий рендеринг: Как и в случае с FCP, минимизируйте использование больших CSS-файлов, которые могут блокировать рендеринг.

Уменьшите количество сторонних сценариев: Сторонние объявления, аналитика или другие сценарии могут замедлить работу LCP. Отложите или асинхронно загрузите несущественные скрипты.

CLS (совокупное изменение макета)

Что он измеряет: CLS измеряет визуальную стабильность вашей страницы. Вы когда-нибудь читали что-то, и внезапно раскладка изменилась, из-за чего вы потеряли свое место или нажали не ту кнопку? Это плохой показатель CLS. CLS отслеживает, сколько элементов на странице неожиданно смещается во время процесса загрузки. Низкий уровень CLS необходим для бесперебойной работы пользователей, особенно на мобильных устройствах.

Как улучшить CLS:

Установите размеры для изображений и видео: Всегда включайте атрибуты ширины и высоты в изображения или используйте поля соотношения сторон CSS, чтобы зарезервировать место для медиа-элементов перед их загрузкой.

Избегайте вставки контента поверх существующего контента: избегайте динамического добавления контента поверх существующего контента, если это не абсолютно необходимо (например, реклама).

Используйте стратегии загрузки шрифтов: При загрузке пользовательских шрифтов используйте font-display: swap; чтобы избежать сдвигов макета, вызванных загрузкой шрифта.

Избегайте добавления новых объявлений или всплывающих окон без места: убедитесь, что динамически загружаемые объявления, баннеры или всплывающие окна учитываются в пространстве макета, чтобы избежать неожиданных сдвигов.

Используйте заполнители изображений или загрузчики с тем же пространством, что и изображение.

TTI (время интерактивности)

Что он измеряет: TTI измеряет, сколько времени требуется, чтобы страница стала полностью интерактивной. Это означает, что все кнопки, поля ввода и ссылки можно использовать, а основной поток может свободно реагировать на ввод пользователя. Быстрый TTI гарантирует, что пользователи смогут быстро взаимодействовать с вашим контентом, не чувствуя, что сайт работает медленно или не отвечает.

Как улучшить TTI:

Сократите время выполнения JavaScript: Разбейте большие пакеты JavaScript и загрузите только необходимые скрипты для первого взаимодействия. Используйте разделение кода в React (с помощью React.lazy()) или динамический импорт в JavaScript.
Используйте веб-воркеры: Перенесите тяжелые задачи, не связанные с блокировкой пользовательского интерфейса, на веб-воркеров, чтобы основной поток оставался отзывчивым.
Отложить длинные задачи: Разделите длинные задачи JavaScript на более мелкие задачи, чтобы избежать слишком долгой блокировки основного потока.
Предварительная загрузка критически важных ресурсов: Убедитесь, что основные ресурсы, необходимые для интерактивности (скрипты, стили), предварительно загружены, чтобы избежать задержек в TTI.
Оптимизируйте CSS и JavaScript: Минимизируйте, сжимайте и расставляйте приоритеты важного кода. Используйте встряхивание дерева, чтобы исключить мертвый код и обеспечить более быстрое выполнение скриптов. Используйте механизм сжатия GZIP или BROTLI

INP (взаимодействие со следующей отрисовкой)

Что он измеряет: Относительно новый показатель INP отслеживает время, необходимое странице для реакции на действия пользователя (например, нажатие кнопок, прокрутку или ввод текста), и соответствующим образом обновляет пользовательский интерфейс. Он помогает измерить общую интерактивность, помимо начальной загрузки, гарантируя, что ваше приложение будет работать быстро на протяжении всего пользовательского сеанса.

Как улучшить INP:

Уменьшите задержку ввода: Убедитесь, что вводимые пользователем данные (щелчки, нажатия клавиш) обрабатываются быстро, избегая длительных задач JavaScript, которые блокируют основной поток.

Приоритизация реакции ввода: Используйте requestAnimationFrame или requestIdleCallback для обработки несрочной работы во время простоя, оставляя основной поток открытым для обработки взаимодействия.

Используйте устранение дребезжания и регулирование: При обработке частых взаимодействий пользователя (например, прокрутки или набора текста) отключайте или регулируйте обработчики событий, чтобы пользовательский интерфейс не переставал отвечать на запросы.

Отложенная загрузка некритического кода: Отложите загрузку некритических функций до завершения первоначального взаимодействия.
Например, вы можете отложенно загружать компоненты в React, используя React.lazy() и Suspense.

Следуя этим стратегиям, вы сможете значительно улучшить эти ключевые показатели и обеспечить более быстрое и оперативное взаимодействие с пользователем. Эти оптимизации, особенно если их применять вместе, помогают гарантировать, что ваш сайт не только пройдет тесты Google Core Web Vitals, но и обеспечит исключительный опыт для ваших пользователей.

Надеюсь, этот блог оказался вам полезен и вы смогли почерпнуть из него некоторые ключевые идеи, которые помогут вам в вашей следующей стратегии повышения производительности.

Чтобы увидеть больше замечательных блогов о производительности, веб-безопасности, реакции, angular и vue, подписывайтесь на меня