Низкая скорость загрузки сайта негативно влияет как на позицию в поисковой выдаче, так и на поведение пользователей. Исследования показали, что более половины пользователей покидают сайт, если страница загружается дольше трех секунд.
Расскажем, что такое Core Web Vitals, почему это так важно, как улучшить загрузку медленного сайта и увеличить доход от рекламы на примере работы с сайтом «TechInsider».
Содержание статьи
Страницы, которые загружаются в течение двух секунд, имеют средний показатель отказов 9%, в то время как на страницах, которые загружаются за пять секунд, показатель отказов взлетает до 38%
Как проверить скорость загрузки сайта?
Чтобы понимать как сайт ведёт себя у вашей аудитории, необходимо собирать и анализировать скорость загрузки на реальных устройствах всех посетителей. Для этого можно использовать легковесную js-библиотеку https://www.npmjs.com/package/web-vitals, которая позволяет легко получить показатели, вам останется только отправлять эти цифры в ту систему аналитики, которой обычно пользуетесь, для визуализации и анализа.
Полезным будет сервис PageSpeed Insights. Измерения скорости он проводит в лабораторных условиях и не отражает объективную картину, однако покажет подробные рекомендации, которые помогут улучшить показатели скорости загрузки сайта.
Core Web Vitals — по каким критериям можно оценить сайт?
В мае 2021 года Google сформировал международные стандарты, которые помогают не только верно оценить текущую скорость загрузки сайта, но и выбрать основные направления для оптимизации
Три ключевых индикатора соответствия международным критериям качества (Core Web Vitals):
- Large Contentful Paint (LCP) — скорость отрисовки основного контента страницы. LCP 2,5 секунды или меньше — хороший результат.
- Задержка первого ввода (FID) — скорость ответа сайта на взаимодействие c пользователем. FID 100 миллисекунд или менее — хороший результат.
- Накопительный сдвиг макета (CLS) оценивает визуальную стабильность страницы. Рейтинг CLS 0,1 или менее — хороший результат.
Как мы ускорили загрузку сайта?
Динамика CWV показателей на примере сайта ПМ в 2021 году:
* % посетителей сайта, показатели CWV у которых соответствуют хорошему результату.
Архитектура приложения
Для выполнения тяжелой логики основного приложения и дополнительных сервисов мы используем вычислительные мощности облачного провайдера. При этом для ускорения доставки контента, мы настроили проксирующие и кэширующие серверы, которые физически находятся максимально близко к нашим читателям, это значительно снижает время, необходимое на передачу контента. Серверы связаны с облаком по выделенному скоростному каналу, что обеспечивает надежность связи.
Базовый рефакторинг. Оптимизировали внутреннее хранилище, устранили лишние вычисления и оптимизировали сложные запросы.
Работа с адаптивностью. Ранее структуры страниц мобильной и десктопной версии сайта отличались, что создавало дополнительную нагрузку. После введенных изменений была введена идентичная структура для всех размеров браузера. Теперь блоки, которые отличаются в десктопной и мобильной версиях, скрываются или отображаются исключительно с помощью стилей.
Шрифты. Отказались от использования тяжелых кастомных шрифтов. Изменили логику подключения шрифтов с fonts.googleapis.com: отказались от использования директивы @import, внедрив статичные стили для подключения шрифтов в наших файлах.
Рефакторинг компонентов статьи.Провели рефакторинг компонентов статьи. Исправили привязки к размерам окна, чтобы "