Элемент отрисовка самого крупного контента как исправить

В мае Google определил новый способ оценки пользовательского опыта. Показатель называется Google Core Vitals, он связан со скоростью загрузки сайта и появления на нем контента.

Google Core Vitals состоит из трех метрик:

• FID — First Input Delay — время между первым взаимодействием пользователя со страницей и ответом бразуера.
• CLS — Cumulative Layout Shift — показатель смещения элементов во время загрузки страницы.
• LCP — Largest Contentful Paint — определяет время, за которое браузер отрисовывает самый крупный видимый объект в области просмотра.

Про CLS у нас есть подробный материал «Как оптимизировать CLS: сдвиги макета страницы, которые мешают пользователям», в этой статье поговорим о показателе LCP и способах его улучшить.

Что такое LCP — показатель Largest Contentful Paint

Largest Contentful Paint — время рендеринга самого большого элемента, видимого в области просмотра пользователем — изображения, текстового блока, видео или другого контента. Учитываются те размеры элементов, которые видны пользователю. Если элемент частично скрыт за областью просмотра, эти невидимые части не берутся в расчет.

Самый аккуратный способ определить время отображения основного содержимого страницы — использовать API Largest Contentful Paint (LCP).

Как это происходит:

При загрузке страницы контент может меняться, поэтому каждый раз, когда появляется новый большой элемент, браузер отправляет PerformanceEntry c типом largest-contentful-paint. Когда пользователь начинает взаимодействовать со страницей, отправка метрики прекращается. Нужное значение — время самого последнего отправленного события.

Отрисовка самого большого элемента может происходить и до полной загрузки страницы. К примеру, логотип Instagram — самый большой элемент, он загружается относительно рано и остается самым большим элементом, пока постепенно отображается остальной контент.

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

Инструменты, которые позволяют измерить показатель LCP:

• Отчет Core Web Vitals в Search Console, он находится в Отчете об основных интернет-показателях
• PageSpeed Insights

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

Какой показатель LCP считается хорошим

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

Инструменты для измерения показывают сводный показатель LCP для 75 % посещений URL.

Как улучшить показатель LCP

На LCP влияют четыре фактора:

• время ответа сервера;
• JavaScript и CSS с блокировкой рендеринга;
• время загрузки ресурса;
• рендеринг на стороне клиента.

Рассмотрим эти факторы, сопутствующие им проблемы и способы оптимизировать показатели.

Медленный ответ сервера

Чем быстрее браузер получает контент с сервера, тем быстрее загрузка страницы и тем лучше показатель LCP.

Вы можете улучшить TTFB — время до первого байта. Какие есть способы:

1. Обратитесь к рекомендациям по производительности сервера.
   Многие веб-фреймворки, работающие на сервере, имеют такие рекомендации, нужные для ускорения. Как исправить перегруженный сервер
2. Используйте CDN (Content Delivery Network).
   CDN хранят контент и быстро отдают его клиентам из разных географических точек. Подробнее есть в нашей статье. По выводам из исследования, использование CDN коррелировало с улучшением показателей скорости загрузки TTFB, особенно на десктопах.
3. Кэшируйте страницы.
   Статичный HTML, который редко изменяется, можно закэшировать в браузере пользователя, чтобы при каждом визите не загружать контент заново. О кэшировании, сжатии gzip и brotli и других способах оптимизации есть отдельный материал.
4. Попробуйте сервис-воркеры
   Service Worker могут перехватывать запросы с сервера и управлять кэшем — например, кэшировать только часть страницы или обновлять кэш только при изменении содержимого.
5. Устанавливайте сторонние подключения на раннем этапе.
   На LCP могут влиять запросы сервера к сторонним источникам. Можно дать сигнал браузеру, что страница как можно скорее собирается установить соединение, для этого есть rel=» preconnect «.

<link rel="preconnect" href="https://site.ru>

Другой вариант — dns-prefetch для ускорения поиска DNS, подходит для браузеров, которые не поддерживают preconnect.

<link rel="dns-prefetch" href="https://site.ru">

Можно использовать оба варианта для разных браузеров.

<link rel="preconnect" href="https://site.ru">
  <link rel="dns-prefetch" href="https://site.ru">

Блокировка рендеринга JavaScript и CSS

Браузер преобразовывает разметку HTML в дерево DOM, а потом уже отображает контент. Он не сможет продолжать работу, если обнаружит ресурсы, блокирующие рендеринг: внешние таблицы стилей link rel=»stylesheet» и сценарии JavaScript script src=»main.js». Чтобы ускорить загрузку содержимого страницы, нужно отложить все некритические JavaScript и CSS.

Неиспользуемый JavaScript и CSS можно найти с помощью Chrome DevTools на вкладке Coverage.

Найденный неиспользуемый CSS можно вообще удалить или переместить в другую таблицу стилей, если он нужен на других страницах сайта.

Если CSS не нужен для начального рендеринга, можно использовать loadCSS для асинхронной загрузки файлов, который использует rel=»preload» и onload.

<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">

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

Как автоматизировать добавление встроенных стилей на сайт:

• Critical, CriticalCSS и Penthouse извлекают и встраивают верхний CSS;
• Critters встраивает критический CSS и загружает остальные в отложенном режиме.

Для JavaScript также можно использовать асинхронную загрузку.

Еще полезна минификация или минимизация кода CSS и JavaScript — удаление символов, которые не нужны браузеру для чтения кода. Минификаторы удаляют отступы, интервалы, разделители и комментарии, файл по сути не меняется, но становится легче.

Список бесплатных инструментов для минимизации CSS, JS, HTML-файлов есть в статье.

Долгая загрузка ресурсов

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

Что можно сделать:

1. Оптимизировать изображения.
   Если на сайте много больших по размеру изображений, которые замедляют загрузку страниц, попробуйте lazy loading картинок — постепенную подгрузку, которая обычно зависит от действий пользователя на странице. Еще можно сжать изображения, если они много весят, попробовать новый формат WebP, обратиться к CDN.
2. Загрузить важное сначала
   Критически важные ресурсы, например, шрифты, изображения или видеозаписи, нужно загрузить первым делом. Для придания ресурсу приоритета есть < link rel = «preload» >.
3. Использовать сервис-воркеры
   В предыдущем пункте упоминали сервис-воркеры для выборочного кэширования, их можно использовать и для изображений и других элементов, которые редко обновляют на странице.
4. Использовать gzip или brotli
   Эти виды сжатия могут значительно уменьшить размер файлов HTML, CSS и JavaScript при их передаче между сервером и браузером. Об настройке в статье «Как ускорить сайт с помощью gzip, brotli, минификации и других способов».

Рендеринг на стороне клиента

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

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

Что можно сделать:

• минифицировать код JavaScript — сократить и сжать файл;
• выявить неиспользуемые элементы JavaScript, удалить или отложить их;
• минимизировать неиспользуемые полифиллы, которые используют для работы сайта в старых браузерах. Сведите к минимуму неиспользуемые полифилы и ограничьте их использование средами, где они необходимы.

В некоторых случаях можно использовать предварительный рендеринг. В таком способе рендер выполняется в headless браузере типа Chrome, который генерирует статические файлы HTML, а их уже подставляют в ответ сервера.

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

Скорость загрузки ресурса на компьютере и мобильных устройствах можно проверить в Анализе сайта от PR-CY. Он проверяет сайт по 70+ параметрам, включая скорость загрузки и отображения контента, анализирует, что реализовано на сайте для ускорения, и дает советы, что еще можно улучшить.

Некоторые подробные тесты и графики, а также проверка внутренних страниц и отслеживание позиций доступны на платных тарифах. Но мы даем новым пользователям неделю на бесплатный тест сервиса — оставайтесь, если понравится! 

Подключить

---

Подробнее о LCP в статьях «Largest Contentful Paint (LCP)» и «Optimize LCP».

В комментариях напишите, о чем еще вам было бы интересно почитать по теме оптимизации и работы с техническими характеристиками сайта.

Автор: Ольга Зарзечна – консультант по техническому SEO, создатель SEOSLY. Работает в области поисковой оптимизации с 2012 года.

Сигналы Google Page Experience показывают, как пользователи сайта воспринимают взаимодействие со страницей. В настоящее время удобство страницы включает в себя Core Web Vitals (LCP, FID, CLS), оптимизацию для мобильных устройств, HTTPS, Безопасный просмотр и следование рекомендациям в отношении навязчивых межстраничных объявлений.

Все эти сигналы, кроме Core Web Vitals, уже учитываются при ранжировании сайтов в Google. Предстоящее обновление, запуск которого ожидается в мае, также добавит CWV в число факторов удобства страницы.

Если вы хотите, чтобы ваш сайт успешно ранжировался в 2021 году, то вам нужно знать:

• Как у него дела с точки зрения сигналов Google Page Experience;
• Почему у сайта есть проблемы в любой из этих областей;
• Как проводить оптимизацию для Page Experience.

Всю эту информацию вы найдёте в данном руководстве.

Инструменты для аудита Google Page Experience:

• Google Search Console
• Google PageSpeed Insights
• Chrome DevTools
• Lighthouse
• WebPageTest
• Проверка оптимизации для мобильных
• Screaming Frog SEO Spider
• Semrush 

Практически все эти инструменты, за исключением Screaming Frog SEO Spider и SEMrush, доступны на бесплатной основе.

Core Web Vitals

Вспомним вкратце, что представляют собой так называемые «основные интернет-показатели» (Core Web Vitals).

Web Vitals – это инициатива Google, направленная на предоставление помощи и рекомендаций по самым важным сигналам качества, которые определяют пользовательский опыт в интернете.

Core Web Vitals, которые являются подгруппой Web Vitals, включают три метрики:

• LCP (отрисовка самого крупного контента);
• FID (задержка после первого ввода);
• CLS (совокупное смещение макета).

Каждый из этих показателей измеряет разный аспект пользовательского опыта: загрузку (LCP), интерактивность (FID) и визуальную стабильность (CLS). Core Web Vitals оцениваются на постраничной основе.

Как провести аудит сайта с точки зрения Core Web Vitals? Давайте разбираться.

Отрисовка самого крупного контента (LCP)

1. Проходит ли страница проверку по LCP?

Показатель «Отрисовка самого крупного контента» связан со скоростью загрузки сайта. LCP измеряет время визуализации самого крупного элемента (текстового блока или изображения) в области просмотра.

Сайт пройдет проверку по LCP, если отрисовка самого крупного контента происходит в течение первых 2,5 секунд с начала загрузки страницы.

Как узнать LCP

• Запустите проверку главной страницы и еще нескольких страниц, используя PageSpeed Insights

Это даст хорошее представление о работе сайта с точки зрения LCP – при условии, что отчет Chrome User Experience содержит достаточно данных по тестируемой странице.

Если «полевых» данных недостаточно, то показатель будет более оценочным. Поэтому лучше использовать данные Google Search Console.

• Отчет об основных интернет-показателях в Google Search Console (рекомендуется)

Находясь в GSC, перейдите в раздел «Улучшения», выберите «Core Web Vitals», а затем – «Mobile».

Откройте отчет, чтобы просмотреть детали по всем URL на сайте:

Это определенно самый лучший способ аудита LCP, поскольку данные поступают из Chrome User Experience Report, в котором собрана информация по реальным посетителям.

• Получите отчет по странице в Lighthouse

Откройте сайт в браузере Chrome, нажмите на иконку Lighthouse и выберите пункт «Generate report».

Имейте в виду, что это инструмент с «лабораторными», т.е. оценочными данными, но он также может дать некоторые идеи.

• Проверьте сайт с помощью инструмента WebPageTest

Выберите более медленное соединение (3G) и более старую модель смартфона (например, Moto G6).

Это тоже хороший инструмент для оценки работы сайта, несмотря на то, что все данные – лабораторные.

Среди типов элементов, учитываемых при оценке LCP, значатся <img>, <image> внутри <svg>, <video>, а также элементы с фоном, загружаемым через url (), и текстовыми элементами встроенного уровня.

Если сайт не проходит проверку по LCP, обратите внимание на следующие факторы:

• Длительное время ответа сервера;
• Время загрузки ресурсов;
• Блокирующие рендеринг JavaScript и CSS;
• Рендеринг на стороне клиента.

Что можно сделать, чтобы улучшить CLS:

• Сократите время ответа сервера (для его измерения можно использовать показатель Time to First Byte);
• Используйте сеть доставки контента (CDN) – например, Cloudflare;
• Внедрите серверное кеширование, используйте сервис-воркеры;
• Используйте rel=”preconnect” для раннего установления сторонних подключений;
• Сократите время блокировки JS и минимизируйте критический JavaScript;
• Минимизируйте CSS, отложите загрузку некритического CSS и встройте критический CSS;
• Минимизируйте JavaScript и неиспользуемые полифиллы, отложите загрузку неиспользуемого JS;
• Оптимизируйте изображения и уменьшите их размер;
• Реализуйте предварительную загрузку важных ресурсов;
• Уменьшите размер текстовых файлов;
• Используйте серверный рендеринг или пререндеринг.

LCP достиг допустимого уровня? Отлично. Переходим к следующему пункту.

Задержка после ввода (FID)

2. Проходит ли страница проверку по этому показателю?

FID – это показатель, оценивающий интерактивность сайта. Он измеряет время между первым взаимодействием со страницей и ответом на это действие.

Сайт имеет достаточно хорошую интерактивность, если FID меньше 100 мсек.

Как узнать FID

• Проверьте главную страницу и самые важные страницы сайта, используя PageSpeed Insights

Это даст представление о работе сайта с точки зрения интерактивности – если в Chrome User Experience Report достаточно данных о пользовательском опыте посетителей тестируемого URL.

Если данных недостаточно, то самый лучший способ оценить FID, – использовать Google Search Console.

• Проверьте отчет об основных интернет-показателях в GSC (рекомендуется)

Перейдите в раздел «Улучшения» и кликните по «Core Web Vitals»:

После этого откройте отчет «Mobile», чтобы просмотреть детали:

Это определенно самый лучший способ проверки FID, поскольку отчет о Core Web Vitals в GSC предоставляет «полевые» данные, поступающие от актуальных пользователей и отражающие их опыт взаимодействия с сайтом. Более того, вы получаете данные для всех страниц сайта, а не только для одной, как в PageSpeed Insights.

Если сайт имеет плохой показатель FID, то обычно это связано c выполнением «тяжелого» JavaScript.

Основные факторы, влияющие на FID:

• Выполнение пользовательских скриптов (раздувание размера JavaScript, неэффективное разбиение на фрагменты, большое время выполнения скриптов);
• Dafa Fetching;
• Выполнение сторонних скриптов (например, сторонних тегов).

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

• Разбивайте длинные задачи на более мелкие асинхронные.
• Оптимизируйте готовность к взаимодействию (например, используя прогрессивную загрузку кода).
• Изучите сторонний код и расставьте приоритеты при загрузке.
• Используйте веб-воркеры (Comlink, Workway, Workerize).
• Уменьшите время выполнения JS (отложите неиспользуемый JS, минимизируйте неиспользуемые полифиллы).

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

3. Проходит ли сайт проверку по этому показателю?

Показатель CLS связан с визуальной стабильностью сайта. Он измеряет сдвиги видимого контента в области просмотра, и как меняется расстояние между элементами вследствие этих смещений.

Сайт имеет достаточно хорошую визуальную стабильность, если CLS меньше 0,1.

Как узнать CLS

• Проверьте главную страницу и несколько других страниц сайта в PageSpeed Insights

Это даст вам представление о том, как дела у сайта с точки зрения визуальной стабильности, если в Chrome User Experience Report достаточно данных о посетителях тех URL, которые вы тестируете.

Если данных недостаточно, следует обратиться к отчету об основных интернет-показателях в Google Search Console.

• Проверьте отчет по Core Web Vitals в Search Console (рекомендуется)

Как и в случае с LCP и FID, это оптимальный способ проверки CLS.

• Получите отчет Lighthouse для страницы

Откройте сайт в Chrome, нажмите на иконку Lighthouse и выберите «Generate report»:

Помните, что это инструмент с лабораторными, т.е. оценочными данными, но с его помощью можно получить примерное представление о CLS.

• Проверьте сайт с помощью инструмента WebPageTest

Это еще один инструмент с лабораторными данными, который позволяет проверять Core Web Vitals, используя разные параметры, такие как устройство, браузер или тип интернет-соединения.

Проверьте сайт, используя медленное соединение (например, 3G) и более старую модель смартфона.

• Проверка CLS и других Core Web Vitals в Chrome DevTools

Отройте Chrome DevTools и выберите устройство.

Перейдите на вкладку «Performance», поставьте галочку возле «Core Web Vitals» и перезагрузите страницу.

Если у сайта плохой CLS, то это обычно связано с одним или несколькими из следующих факторов:

• Рекламные блоки, встроенный контент и iframes без прописанных параметров;
• Изображения без прописанных параметров;
• Динамическая вставка контента;
• Веб-шрифты, вызывающие FOIT/FOUT.

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

• Зарезервируйте место для рекламных объявлений, встроенного контента и iframe;
• Не размещайте рекламу близко к верхней части области просмотра;
• Не вставляйте новый контент над существующим;
• Используйте атрибут font-display, Font Loading API или <link rel=”preload”> для основных веб-шрифтов.

CLS удалось улучшить? Отлично! Переходим к следующему пункту.

Оптимизация для мобильных устройств

С учетом предстоящего перехода на mobile-first индексацию и доминирования мобильного трафика, оптимизация для мобильных устройств должна быть одним из основных приоритетов для любого сайта.

4. Оптимизирован ли сайт для мобильных устройств?

Самый лучший вариант для сайтов в 2021 году – адаптивный дизайн. Сайт, не оптимизированный для мобильных устройств или с отдельной мобильной версией (по типу m.domain.com), у которого разный контент в десктопной и мобильной версиях, будет иметь проблемы с ранжированием в Google.

Чтобы проверить сайт, используйте инструмент «Проверка оптимизации для мобильных» (Mobile-Friendly Test) от Google.

• Откройте инструмент, введите URL и нажмите «Проверить страницу».

• Если сайт дружествен к мобильным устройствам, то вы увидите примерно такой результат:

• Если же с оптимизацией проблемы, то инструмент покажет предупреждение:

Есть и другие способы проверить, оптимизирован ли сайт для мобильных.

Как сделать сайт дружественным к мобильным устройствам:

• Донесите клиенту, насколько важно, чтобы сайт был оптимизирован для мобильных.
• Мы часто советуем перестроить сайт с нуля и перенести его на WordPress. Однако рекомендации будут зависеть от конкретного случая, и такой вариант не всегда возможен.

Сайт оптимизирован для мобильных устройств? Отлично! Переходим к следующему пункту.

5. Есть ли у сайта проблемы с загрузкой?

Если сайт оптимизирован для мобильных устройств, это отлично. Однако будет еще лучше, если у него не будет каких-либо проблем с загрузкой. Такие проблемы могут негативно влиять как на пользовательский опыт, так и на способность сайта ранжироваться в Google.

Для проверки этого параметра также можно использовать Mobile-Friendly Test от Google.

• Запустите проверку страницы и посмотрите, есть ли отметка о проблемах с загрузкой сразу под заголовком «Результаты проверки». В идеале их не должно быть.

• Если же есть оповещение о таких проблемах есть, нажмите «Подробнее», чтобы узнать, с чем они связаны.

• После этого вы увидите сведения о тех ресурсах, которые не удалось загрузить:

Что можно сделать, чтобы устранить проблемы с загрузкой:

• Просмотрите список проблем;
• Выясните, это внутренние или внешние ресурсы;
• Внесите все эти проблемы в отчет по результатам аудита и рекомендуйте исправление или удаление этих ресурсов.

Если проблем с загрузкой нет, отлично! Переходим к следующему пункту.

Безопасный просмотр

Безопасный просмотр – это сервис Google, который вносит в черный список URL-адреса с вредоносным ПО и фишинговым контентом. Технология помогает защищать более 4 млрд устройств по всему миру, показывая предупреждения об опасных сайтах или загрузках. Это определенно делает интернет более безопасным местом.

6. Есть ли у сайта проблемы, связанные с Безопасным просмотром?

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

Лучший способ проверить, есть ли на сайте проблемы безопасности – использовать Google Search Console.

• Откройте отчет «Проблемы безопасности» в GSC:

• В идеале проблем быть не должно:

• Если проблемы есть, то очень вероятно, что сайт был взломан и уже понижен в поиске. Это требует немедленных действий.

Что делать, если на сайте есть проблемы безопасности:

• Проанализируйте детали проблемы.
• Просканируйте все файлы сайта, чтобы найти и удалить вредоносное ПО. Пометьте этот пункт в результатах аудита как приоритетный и выделите его красным.
• В зависимости от настроек сайта вы можете попросить хостинговую компанию запустить ascan или использовать специальное ПО, такое как Wordfence или Sucuri.

Сайт чист? Отлично! Переходим к следующему пункту.

7. Убедитесь, что сайта нет в черном списке Безопасного просмотра

Если у вас нет доступа к Search Console, то есть лишь один способ проверить, чист ли сайт в глазах Google:

• Откройте инструмент проверки статуса сайта в Безопасном просмотре в отчете о прозрачности сервисов и данных Google;
• Укажите URL и нажмите «Enter»:

• Желательно, чтобы результат был примерно таким:

Если сайт не пройдет проверку, то вы можете:

• Изучить подробнее возможные причины.
• Просканировать сайт с помощью специального ПО, такого как Wordfence или Sucuri. 
• Сделать решение этой проблемы основным приоритетом.

С сайтом все в порядке? Отлично! Переходим к следующему пункту.

8. Внедрены ли на сайте хотя бы базовые защиты?

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

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

Вот те меры безопасности, которые должен иметь практически каждый сайт:

• SSL-сертификат;
• Сильные пароли, имена пользователей, отличающиеся от «admin»;
• Безопасный брандмауэр хоста и веб-приложения (например, Sucuri);
• Регулярное резервное копирование всех файлов и базы данных;
• Отключенный просмотр каталогов;
• В случае использования WordPress и других систем управления контентом важно, чтобы CMS, темы и плагины были обновлены до последней версии.

На сайте не внедрены базовые защиты? Вот что можно сделать:

• Рекомендуйте внедрить максимум из тех пунктов, что перечислены выше;
• Если возможно, сделайте это самостоятельно.

С сайтом все в порядке? Переходим к следующему пункту.

HTTPS

Этот пункт тесно связан с предыдущими двумя.

9. Используется ли на сайте HTTPS?

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

Как проверить, является ли соединение с сайтом защищенным:

• Введите URL сайта в адресную строку Chrome или Firefox;
• Если соединение защищенное, вы увидите значок в виде закрытого замка:

• Нажмите на этот значок, чтобы просмотреть более детальную информацию:

• Если на сайте не используется HTTPS, то вы увидите предупреждение «Не защищено».

Что делать, если сайт незащищен:

• Сделайте переход на HTTPS абсолютным приоритетом;
• Если возможно, добавьте на сайт SSL-сертификат. Не забудьте настроить 301 редиректы с HTTP на HTTPS.
• Просканируйте сайт, чтобы убедиться, что все переадресации работают.

У сайта уже есть SSL-сертификат? Отлично, переходим к следующему пункту.

10. Есть ли у сайта проблемы с SSL-сертификатом?

Наличие SSL-сертификата необязательно означает, что у сайта нет проблем в этой области.

Как проверить, есть ли такие проблемы:

• Откройте инструмент для проверки SSL-сертификатов SSL Shopper.
• Введите название сайта и нажмите «Check SSL».

• Просмотрите информацию и убедитесь, что проблем нет.

Если проблемы все же есть, то можно сделать следующее:

В зависимости от типа проблем с SSL-сертификатом устраните их или рекомендуйте их устранение. Следуйте статье, посвященной этому типу проблем, от Google.

С SSL-сертификатом все в порядке? Хорошо, переходим к следующему пункту.

11. Есть ли у сайта проблемы со смешанным контентом?

Даже при валидном SSL-сертификате у сайта могут быть проблемы со смешанным контентом. Смешанное содержимое возникает, когда некоторые ресурсы на HTTPS-сайте (такие, как видео, изображения или скрипты) загружаются через HTTP.

Браузер Chrome блокирует смешанный контент и предупреждает пользователей о том, что на сайте содержится незащищенное содержимое.

Как проверить сайт на наличие смешанного контента:

• Просканируйте сайт с помощью SEMrush, Ahrefs или Screaming Frog.

• В результатах сканирования найдите раздел для смешанного контента.

В идеале, в нем не должно быть никаких URL.

Если на сайте все же есть смешанный контент, то вот что можно сделать:

• Выясните, какие HTTP-ресурсы были обнаружены на сайте.
• Если это внутренние ресурсы, проверьте, корректно ли настроена переадресация 301 на HTTPS-версии этих ресурсов.
• Если таких редиректов нет, то нужно их добавить и обновить ссылки на ресурсы, чтобы это были HTTPS-ссылки.
• Внешние незащищенные ресурсы нужно удалить или заменить на HTTPS-версии.

Смешанного контента больше нет? Отлично, переходим к следующему пункту.

12. Правильно ли настроены редиректы на HTTPS?

Наличия SSL-сертификата недостаточно. На сайте также должна быть настроена переадресация всех незащищенных HTTP-ресурсов на защищенные HTTPS-версии. И это должны быть 301 (постоянные) редиректы.

Как проверить правильность редиректов с HTTP на HTTPS:

• Просканируйте сайт с помощью SEMrush, Ahrefs или Screaming Frog SEO Spider и проверьте список переадресаций.
• Находясь в браузере Chrome, введите URL главной страницы и URL некоторых страниц с HTTP, чтобы проверить, переадресованы ли они на HTTPS. Для этого можно использовать расширение The Link Redirect Trace.

Если у сайта есть проблемы с редиректами на HTTPS-версию, то вот что можно сделать:

• Исправьте некорректные перенаправления или порекомендуйте это сделать.

Все редиректы работают хорошо? Отлично, переходим к следующему пункту.

Отсутствие навязчивых межстраничных элементов

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

13. Есть ли на сайте навязчивые всплывающие окна?

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

Как проверить сайт на наличие назойливых всплывающих окон:

• Откройте сайт в режиме инкогнито и просмотрите его в течение некоторого времени, чтобы увидеть, что появляется.
• Сделайте то же самое на смартфоне. Мобильные поп-апы особенно вредоносны.

Если такие элементы на сайте есть, то мы рекомендуем их удалить.

Примером допустимого поп-апа является запрос на разрешение использовать файлы cookie.

На сайте нет навязчивых всплывающих окон? Отлично, двигаемся дальше.

14. Есть ли навязчивые межстраничные объявления на сайте?

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

Как проверить сайт на наличие таких элементов:

• Откройте сайт в режиме инкогнито и просмотрите его в течение некоторого времени, чтобы увидеть, появляются ли такие объявления.
• Сделайте то же самое на смартфоне. Можно использовать разные мобильные браузеры.

Если такие элементы есть, то в зависимости от их типа вы можете рекомендовать или полностью их удалить, либо показывать только на конкретных типах страниц, либо после того, как пользователь прокрутит страницу вниз.

Если это предложение подписаться на рассылку, то вы можете рекомендовать отключить его или заменить на форму подписки в тексте.

Примером допустимого межстраничного объявления является просьба подтвердить возраст.

На сайте нет навязчивых межстраничных объявлений? Хорошо, двигаемся дальше.

15. Есть ли навязчивые рекламные объявления на первом экране страницы?

Часть страницы, видимая до прокрутки, – это обычно то пространство, по которому и пользователи, и поисковые роботы составляют первое впечатление о сайте.

Если эта область выглядит как межстраничное объявление, а основной контент виден после прокрутки, то Google и пользователям это может не понравиться.

Как проверить эту часть сайта:

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

Единственной допустимой ситуацией, когда объявление или баннер могут быть расположены на первом экране – это если они занимают разумное пространство и не закрывают основной контент.

Вместо заключения

Довольно много работы, не так ли? Надеемся, что теперь у вас есть вся необходимая информация для аудита показателей, входящих в  новый сигнал ранжирования Page Experience.