Как ускорить загрузку сайта — опыт «TechInsider»

Страницы, которые загружаются в течение двух секунд, имеют средний показатель отказов 9%, в то время как на страницах, которые загружаются за пять секунд, показатель отказов взлетает до 38%

Чтобы понимать как сайт ведёт себя у вашей аудитории, необходимо собирать и анализировать скорость загрузки на реальных устройствах всех посетителей. Для этого можно использовать легковесную js-библиотеку https://www.npmjs.com/package/web-vitals, которая позволяет легко получить показатели, вам останется только отправлять эти цифры в ту систему аналитики, которой обычно пользуетесь, для визуализации и анализа.

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

В мае 2021 года Google сформировал международные стандарты, которые помогают не только верно оценить текущую скорость загрузки сайта, но и выбрать основные направления для оптимизации

Три ключевых индикатора соответствия международным критериям качества (Core Web Vitals):

Динамика CWV показателей на примере сайта ПМ в 2021 году:

* % посетителей сайта, показатели CWV у которых соответствуют хорошему результату.

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

Базовый рефакторинг. Оптимизировали внутреннее хранилище, устранили лишние вычисления и оптимизировали сложные запросы.

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

Шрифты. Отказались от использования тяжелых кастомных шрифтов. Изменили логику подключения шрифтов с fonts.googleapis.com: отказались от использования директивы @import, внедрив статичные стили для подключения шрифтов в наших файлах.

Рефакторинг компонентов статьи.Провели рефакторинг компонентов статьи. Исправили привязки к размерам окна, чтобы стабилизировать загрузку шаблонов страницы.

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

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

Оптимизация сторонних ресурсов. Замедлять загрузку страницы может сторонний скрипт. Мы провели их тщательную ревизию и разработали сценарии работы для каждого, опираясь на перфоманс и бизнес показатели. Критично важные, к примеру, AdFox, максимально ускорили, в том числе реализовав предзагрузку вызова в первом экране.

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

SPA. Несмотря на то, что наше фронтовое приложение работает по принципу SPA (Single Page Application), нам приходится применять серверный рендеринг первого запроса для того, чтобы сайт хорошо индексировался поисковыми роботами. Это вносит определенные особенности. Необходимо аккуратно продумывать логику первого рендера, чтобы с одной стороны в первом экране была вся информация, необходимая поисковикам, но при этом не отображались дополнительные блоки, которые не видны пользователю при первоначальной загрузке, и могут быть подгружены после отображения основного контента. Нам удалось добиться корректной индексации контента роботами ПС Google и Яндекс.

Мы полностью переработали микроразметку сайтов, обновили генерацию в стандарте Schema.org и через синтаксис JSON+ld и в формате микроданных через itempror|itemscope и др. Помимо данных об объектах в статье, страницы сайта дополнительно сообщают ПС о таких данных, как BreadcrumbList (строки навигации), Organization (информация о компании) и прочих, что повышает полноту данных, представленных на сайте.

* Сравнение двух равных временных периодов на одинаковом количестве визитов

Independent Media – российский медиахолдинг. В портфолио компании входит десять известных во всем мире брендов: Cosmopolitan, Cosmopolitan Shopping, Cosmopolitan Beauty, «Домашний Очаг», Harper’s Bazaar, Grazia, Esquire, Robb Report, «TechInsider», Men's Health.

Совокупная аудитория холдинга составляет более 75 млн пользователей.