Google недавно начал измерять скорость загрузки страниц и их качество по принципу «прошел / не прошел», как фактор ранжирования в поиске.
Google уделяет повышенное внимание общему впечатлению посетителей и создал Google Core Web Vitals для отслеживания скорости загрузки страницы, стабильности макета страницы и того, как быстро пользователь может начать взаимодействовать со страницей.
Google недавно начал измерять скорость загрузки страниц и их качество по принципу «прошел / не прошел», как фактор ранжирования в поиске.
Новый подход может негативно повлиять на издателей, поскольку реклама, назначение ставок в заголовках, таргетинг и другие рекламные технологии могут еще больше повлиять на восприятие страницы в целом и на скорость её загрузки.
По сути Google PageSpeed Insights показывает, каким будет охват вашего издания. Если ваш сайт загружается медленно, посетители уйдут вперёд, а вы останетесь позади.
Google PageSpeed Insights и Core Web Vitals Score
Google разработал инструмент PageSpeed Insights для анализа содержания и скорости загрузки сайта. Новый инструмент оценивать производительность сайта и даёт издателям информацию, которая помогает повысить скорость загрузки сайта.
Google использует инструмент под названием Lighthouse для оценки сайтов по шкале от 1 до 100. Десктопы и мобильные версии оцениваются отдельно. Хорошей оценкой является 90 и более.
Первоначально PageSpeed Insights в основном ориентировалась на факторы скорости загрузки, но недавно Google переключился на общий опыт работы с сайтом.
Google заявляет: «Оптимизация качества взаимодействия с пользователем является ключом к долгосрочному успеху любого сайта в Интернете».
Google создали Core Web Vitals (CWV), который фокусируется на трех показателях пользовательского опыта: стабильность страницы, скорость загрузки контента и скорость взаимодействия с страницей.
Специалисты по SEO считают, что для ранжирования в поиске используются только полевые данные Google, и что качественный контент по-прежнему играет большую роль в факторах ранжирования.
Каковы показатели Google Core Web Vitals?
Core Web Vitals от Google — это три показателя, которые оценивают стабильность страницы, скорость загрузки страницы и то, как быстро страница реагирует на действия пользователя. Core Web Vitals измеряют веб-показатели как для десктопов, так и для мобильных устройств, и доступны из Google Search Console, а также на странице разработчика PageSpeed Insights.
Чтобы измерить скорость загрузки сайта, нужно ввести URL-адрес страницы и система выдаст отчет → https://developers.google.com/speed/pagespeed/insights/
Выглядеть он будет примерно так:
Где
LCP (Largest Contentful Paint) — это показатель, насколько быстро страница загружает основной контент для страницы. LCP 2,5 секунды или меньше — хороший результат.
FID (First Input Delay) — показывает, сколько времени требуется веб-странице, чтобы отреагировать на действие, предпринимаемое пользователем. Таймер для этого измерения запускается, когда на странице появляется что-то визуальное, на что пользователь может отреагировать, и заканчивается, когда страница может отреагировать на это действие посетителей. Если страница не может ответить пользователю, потому что она отвечает на многие другие скрипты, которые она загружает первой, то пострадает оценка FID. Для успешной оценки FID 100 миллисекунд или меньше является хорошей оценкой.
CLS (Cumulative Layout Shift) — измеряет визуальную стабильность страницы и дизайн-макета. Если вы нажмете вкладку вниз, что-то изменится? У вас есть объявления, изображения или элементы страницы, которые загружаются позже и вызывают смещение макета страницы? Это приводит к плохой оценке CLS. Рейтинг CLS 0,1 или меньше — хороший результат.
Этот видео-пример от группы разработчиков Google иллюстрирует проблему CLS. Пользователь пытается отклонить покупку, но при нажатии на него макет смещается, и он случайно нажимает кнопку «Купить», что приводит к очень неприятным впечатлениям.
Рекомендации Google для издателей, проводящих собственный аудит скорости страницы: «Считайте, что страница проходит, если она соответствует рекомендуемым целям на 75% для всех трех вышеперечисленных показателей».
Скорость загрузки страницы и основные показатели Web Vitals были интегрированы в инструмент разработчика Chrome, доступный из браузера Chrome. Режим разработчика Chrome даже делает снимок страницы на протяжении всего процесса загрузки, чтобы точно определить, где возникают проблемы.
Как увеличить скорость загрузки страниц и улучшить основные веб-показатели
Издатели должны регулярно выполнять по крайней мере следующие три шага для повышения производительности сайта:
во-первых, регулярно проводить тесты скорости страницы и взаимодействия;
во-вторых, удалять элементы, которые не используются или не нужны, например старые шрифты или сценарии css;
в-третьих, оптимизировать изображения, CSS, видео и JavaScript-ы по размеру и скорости загрузки с помощью сжатия, уменьшения или каскадного соединения.
В конце текста перечислены ресурсы для издателей, где детально обсуждаются технические вопросы оптимизации.
А вот дополнительные шаги, которые помогут сократить время загрузки сайта, улучшить основные веб-показатели и улучшить качество обслуживания посетителей.
Внедрите отложенную загрузку (Lazy load), чтобы улучшить работу FID Web Vital
Ленивая загрузка откладывает загрузку изображений или других элементов до тех пор, пока основное содержимое страницы и макет не будут загружены и станут доступны пользователю. Это улучшает пропускную способность и метрику FID. Подумайте об изображениях и элементах, загрузку которых можно отложить, чтобы убедиться, что первый опыт пользователей будет быстрым и интерактивным.
Используйте сети доставки контента CDN
Используйте Сеть доставки контента (CDN) и убедитесь, что она правильно настроена. CDN может уменьшить время загрузки страницы, размещая копии ваших мультимедийных файлов географически ближе к пользователям.
Например, посетитель в Канаде может получить ваш контент с помощью сервера CDN в Торонто, в то время как посетитель в Индии может получить контент, доставленный из Ченнаи, и все это оптимально управляется CDN.
Сжимайте изображения и видео для более быстрой загрузки страниц
Большие медиафайлы являются одними из наиболее частых виновников медленной загрузки страницы, и это легче всего устранить.
Ранжируйте все изображения на своем сайте по размеру и обращайте внимание на те, которые составляют 100 Кб и больше. Вы можете сканировать свой сайт с помощью такого инструмента, как Screaming Frog, чтобы идентифицировать все большие изображения за считанные минуты.
WordPress и современные системы CMS часто имеют встроенные инструменты сжатия изображений, их можно найти в админке. Иногда вы можете добиться большего с помощью сторонних инструментов, созданных специально для сжатия изображений, таких как tinypng или jpeg-optimizer.
Удаляйте неиспользуемые файлы JavaScript, чтобы повысить скорость рендеринга страницы
JavaScript блокирует рендеринг, ведь его необходимо вызвать, загрузить, проанализировать, оценить и выполнить, прежде чем страница сможет завершить рендеринг. У вас есть неиспользуемые файлы JavaScript? Файлы JavaScript могут накапливаться для таргетинга, систем CMS, настройки пикселей отслеживания, социальных тегов, загрузки шрифтов и многого другого. Вы можете детально определить, какая часть вашего JavaScript не используется, с помощью функции Coverage в Chrome DevTools.
При запуске инструмента скорости загрузки страниц Google он идентифицирует любой JavaScript с более чем 20 килобайтами неиспользуемого кода.
Минимизируйте CSS и скрипты для повышения скорости загрузки
Минимизация этих скриптов сохраняет их машинно-читаемость, но значительно ускоряет их загрузку. Для минимизации скриптов доступно несколько инструментов; RankRed собрал хороший набор инструментов и описаний для минимизации скриптов. Вы также можете сэкономить на обращениях к серверу, если объедините файлы JavaScript или CSS.
Оптимизируйте кэш для Core Web Vitals
Стратегия кеширования должна использовать функции PI-кеширования, таких как Cache-control и Last-Modified. Разработчики Google предоставляют некоторые рекомендации и контрольный список для параметров кеширования, а также параметры конфигурации для популярных серверов. Вы можете предварительно загрузить кеш, чтобы страница была оптимизирована еще до прибытия робота Google для оценки производительности.
Производитель инструментов веб-анализа WP Rocket предполагает, что предварительная загрузка кеша может быть ключевым подспорьем для повышения скорости страницы. В этом видео объясняется, как именно (англ. яз.).
Помогите браузерам выделить пространство, чтобы избежать сдвига макета
- Укажите атрибуты высоты и ширины изображения, чтобы браузер мог планировать их неподвижность (стабильность), даже если позже они будут загружаться по технологии Lazy load.
- Зарезервируйте место для рекламы, окон iframe и динамического содержания. Используйте контейнеры, чтобы избежать сдвигов макета во время рендеринга.
- Рассмотрите возможность оптимизации отображения шрифтов с помощью ссылки rel = ”preload” и font-display: optional.
Анализируйте!
Периодическое выполнение теста PageSpeed даст вам максимум информации о ваших основных веб-показателях. Вы можете не только увидеть показатель скорости страницы, но и узнать, сколько элементов загружается и как быстро они загружаются. Ваши отчеты покажут элементы, которые могут сдерживать скорость загрузки вашей страницы.
Вот несколько инструментов для просмотра отчетов о загрузке страницы, скорости страницы и оптимизации для поисковых систем:
Вот несколько ссылок по которым можно найти подробные технические обсуждения оптимизации скорости загрузки страниц:
- Nitropack: How to Measure and Improve Core Web Vitals
- SearchEngineWatch – 28 Ways to Supercharge Your Site
- Smashing Magazine – Guide to Measuring Core Web Vitals
- Web.dev – Improve Site Performance with Fast Load Times
По материалам Michael Yeon, агентство Admiral