Привет! Меня зовут Руслан, и я работаю React-разработчиком в компании SimbirSoft. На одном из моих проектов я столкнулся с проблемой низкой производительности сайта, которую нужно было решить быстро и с минимальными затратами ресурсов. В этой статье я хочу рассказать о том, почему важна производительность сайта и зачем её нужно улучшать, а также поделиться несколькими способами увеличения скорости загрузки веб-страниц.

Основные метрики Core Web Vitals и их влияние на пользовательский опыт

Согласно документации Google, скорость загрузки напрямую влияет на ранжирование страниц в поиске. Помимо этого, скорость загрузки также существенно влияет на конверсию. Исследования все тех же Google показывают, что вероятность ухода пользователя без целевого действия при времени загрузки более 1-3 секунд возрастает на 32%, а при времени более 10 секунд — на 123%.

Другое исследование показывает, что уменьшение времени загрузки на 0,1 секунду может улучшить конверсию до 10%.

В 2021 году Google представила новый набор факторов Core Web Vitals, направленных на оценку качества пользовательского опыта. В эту группу входят три параметра:

• LCP: время рендеринга основных или наибольших элементов (текст, картинка, видео). Для обеспечения наилучшего пользовательского опыта сайты должны стремиться к тому, чтобы время отрисовки контента не превышало 2,5 секунды.

  

• INP: оценка отзывчивости страницы на взаимодействие с пользователем. Этот показатель заменил FID (First Input Delay), который учитывал только задержку первого ввода и не был полностью объективной метрикой. Конечным значением данной метрики будет самое продолжительное наблюдаемое взаимодействие с пользователем. Задержка не должна превышать 200 мс.

  

• CLS: оценка устойчивости верстки и элементов во время рендеринга. Оптимальным является значение, не превышающее 0,1. Подробнее о методе расчета можно прочитать здесь.

  

Таким образом, мы выяснили, что скорость работы сайта оказывает существенное влияние на ранжирование и конверсию, а также разобрались в методах оценки. Поэтому возникает вопрос: как же можно улучшить эту скорость?

Основные способы ускорения работы сайта

1. CDN

Одним из самых повсеместных способов ускорения работы веб-приложений является внедрение CDN. CDN — это сеть серверов, распределённых по разным географическим регионам, которая обеспечивает ускоренную доставку контента пользователям веб-сайтов и онлайн-сервисов. Серверы CDN strategically размещаются таким образом, чтобы минимизировать задержку и сократить время отклика для посетителей, обеспечивая более быстрый и стабильный доступ к ресурсам.

Проще всего описать работу CDN следующим образом: представим веб-сервис, которым пользуются миллионы людей по всему миру. Основные сервера расположены в США, поэтому здесь пользователи могут рассчитывать на минимальную задержку при запросах к серверу. Но как же быть людям, находящимся за тысячу километров? Тут на помощь приходит CDN, представляющий собой сотни кэширующих серверов по всему миру. Таким образом, пользователи будут переадресовываться к географически ближайшему серверу в составе CDN. Такие сервера называются кэширующими, потому что после запроса к главному серверу, все данные кэшируются на ближайшем сервере.

Также стоит уделить внимание следующей проблеме: представим, у нас есть один главный сервер в Бразилии и два кэширующих во Владивостоке и Казани. При запросе пользователя из Владивостока все данные будет закэшированы на ближайшем сервере для того, чтобы обеспечить минимальную задержку при запросе пользователя из Казани, так как существует технология регионального извлечения. Суть данной технологии состоит в том, чтобы соседние серверы, входящие в состав CDN, забирали контент друг у друга, а не обращались к оригинальному серверу.

2. Сжатие файлов

Сжатие файлов является одним из наиболее эффективных способов уменьшения времени их загрузки. Чем меньше размер файлов, тем быстрее они будут доставляться пользователю. Одним из популярных методов сжатия является использование GZIP, что стало стандартной практикой в современной веб-разработке.

GZIP — это файловый формат и утилита для сжатия, которая уменьшает размер текстовых файлов, находя повторяющиеся строки кода и заменяет их ссылками. Такой подход позволяет значительно сократить объём файлов. Большинство современных веб-серверов активно используют сжатие в данном формате, применяя встроенные средства или сторонние модули, чтобы ускорить передачу данных и повысить эффективность взаимодействия с клиентом.

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

3. Lazy Loading

Еще одним популярным способом уменьшения времени загрузки веб-страниц является использование ленивой загрузки (lazy loading). Эта техника позволяет отложить загрузку медиаконтента, который не является необходимым в данный момент.

<img src="big-image.jpg" width="1024" height="768" alt="Картинка">

Браузер загрузит это изображение сразу после открытия страницы, что может привести к значительным проблемам с производительностью. Для решения этой проблемы был введен атрибут loading="lazy", который позволяет подгружать контент динамически, только когда пользователь достигает соответствующей части страницы.

Ленивая загрузка помогает повысить производительность веб-сайта, снижая нагрузку на сервер и сеть, а также ускоряя загрузку страниц для пользователей. Эта технология особенно полезна для сайтов с большим объёмом медиаконтента, например, новостных порталов или блогов, где нужно эффективно управлять загрузкой изображений и видео, загружаемых по мере прокрутки страницы.

4. Кэширование

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

5. SSR

SSR — это метод, при котором веб-страница создаётся на сервере, а не в браузере пользователя. Вместо того чтобы пользователь наблюдал пустую страницу во время загрузки веб-приложения, сервер отправляет уже сгенерированный HTML, ускоряя отображение содержимого. Это позволяет пользователю сразу увидеть страницу и работать с ней, пока приложение завершает загрузку и инициализацию. Такой подход исключает дополнительные запросы данных с клиента и обеспечивает быструю первую содержательную отрисовку.

SSR является одним из двух методов визуализации веб-страниц. Ввиду его ограничений, которые мы рассмотрим далее, иногда целесообразнее использование другого способа.

CSR — это подход к веб-разработке, при котором рендеринг (отображение) веб-страниц происходит на стороне клиента, то есть в браузере пользователя. В этом случае сервер отправляет клиенту минимальный HTML-код, а затем JavaScript берет на себя задачу динамического построения и обновления контента.

Среди преимуществ серверного рендеринга выделяют следующие факторы:

• SEO-оптимизация.

• Уменьшенное время начальной загрузки.

• Отлично подходит для статических сайтов.

В то же время CSR также имеет ряд преимуществ, а именно:

• Быстрая отрисовка после начальной загрузки.

• Лучшая реакция на действия пользователей.

• Отлично подходит для веб-приложений.

Таким образом, SSR отлично подходит для образовательных платформ, маркетплейсов и приложений с простым интерфейсом, где количество страниц, функций и динамических данных невелико. В свою очередь, CSR идеально справляется с задачами динамических веб-приложений, таких как социальные сети или мессенджеры, где данные постоянно обновляются, а высокая скорость обработки имеет ключевое значение.

6.Минификация

Минификация (или минимизация) кода — это процесс уменьшения его размера за счёт удаления ненужных символов, таких как пробелы, комментарии и отступы. Этот процесс помогает снизить объём файлов без утраты их функциональности, что ускоряет их загрузку и выполнение. Минификации чаще всего подвергаются файлы JavaScript и CSS.

Процесс минификации включает:

• Удаление лишних строк, переносов, запятых, пробелов и комментариев.

• Сокращение имен переменных до одного символа.

• Упрощение названий цветов и других сущностей.

Инструменты для минификации:

• NPM-плагины: такие как, CSSNano и CSS-Minify, которые можно легко интегрировать в процесс сборки проекта.

• Онлайн-сервисы: например, Minify, CSS Minifier и Minify Code, которые позволяют минифицировать код прямо в браузере.

• CDN-серверы. Некоторые CDN-серверы автоматически минифицируют файлы перед их доставкой пользователям.
  

  Минификация — это простой, но эффективный способ улучшить производительность вашего сайта. Уменьшение размера файлов и снижение времени загрузки помогает улучшить пользовательский опыт и повысить конверсию. Включение минификации в процесс сборки проекта позволяет автоматизировать этот процесс и обеспечить постоянную оптимизацию кода.

Заключение

В этой статье мы рассмотрели важность скорости загрузки веб-страниц и обсудили основные метрики, как LCP, INP и CLS, которые входят в группу Core Web Vitals и помогают оценить качество пользовательского опыта. Для ускорения работы сайта можно использовать различные методы, такие как серверный рендеринг (SSR), использование CDN, кэширование, lazy loading и т.д.

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

Спасибо за внимание!
Больше авторских материалов для frontend-разработчиков от моих коллег читайте в соцсетях SimbirSoft – ВКонтакте и Telegram.