Содержание

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

В компании Google сделали исследование поведения пользователей на сайтах разных направлений, с целью выявления лучших показателей. В результате данного теста, выяснилось, что если страница сайта загружается более 3 секунд — вероятность отказа повышается в 2.5 раза. И в этом исследовании ясно показано: скорость имеет значение! Поэтому для повышения рейтинга сайта гугл требует чтобы загрузка любой страницы сайта была не более 3-х секунд, оптимальным показателем является 1-2 секунды. Поэтому Google рекомендует разработчикам сайтов заняться оптимизацией своих проектов и предлагает для анализа эффективности скорости загрузки страницы использовать инструмент: Google PageSpeed.


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

Рассмотрим основные аспекты оптимизации скорости загрузки сайта

Оптимизация базы данных (связи, индексы)

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

Оптимизация SQL запросов

Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)

Кеширование результатов SQL запросов

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

Пример кеширования результатов SQL запросов в PHP

Оптимизация (сжатие) изображений

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

  • Все изображения на сайте сжать, используя онлайн инструменты Compressor.io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
  • Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

Подключение файлов JavaScript, CSS желательно объединить в общий CSS файл и общий JS файл для того чтобы уменьшить количество коннектов при заргузке страницы.

Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.

В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено

Пример отложенного вызова CSS файла через JavaScript

В подключении шрифтов font-display параметр swap может показывать текст не дожидаясь полной загрузки всего шрифта.

Пример на CSS

Обязательно загружайте все изображения с помощью отложенной загрузки lazyload

При этом обязательно нужно подключить lazyload. min.js

Если у вас на странице есть svg элементы, то их лучше добавлять в HTML коде, без дополнительного обращения к тегу img. И svg необходимо ужимать тоже.

Минимизация (сжатие) JavaScript, CSS и HTML

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

Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

Включение сжатия gzip

GZIP это формат сжатия в вебе. Перед отображением страницы, файлы загружаются с сервера уже в сжатом виде. Данный тип сжатия поддерживают все современные браузеры.

Включить gzip сжатие файлов вы можете в настройках вашего хостинга.

Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression

Удаление блокирующих кодов

Устранение блокирующих кодов является сложным этапом в повышении скорости загрузки страницы, требующий технических знаний. Нужно проводить анализ всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.

Более детально можно посмотреть по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

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

Анализ мобильного формата показывает адаптивность мобильной верстки сайта под различные размеры экранов, использование динамических размеров шрифтов, и наличие правильной навигации.

Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно. Это связано с спецификой программной организации бесплатной CMS и использованием шаблонных решений, которые оптимизировать не всегда удается или удается на небольшой процент(: Плюс не каждый специалист сможет это сделать так как данный процесс требует определенные знания и опыт, и нужно будет вносить коррективы в ядро системы.

Помогла ли вам статья?

349 раз уже помогла

Комментарии: (1)

Александр29 марта 2021

Отличная статья. По ней оптимизировал свой сайт.

Ответить

Скорость загрузки сайта. Или что такое PageSpeed Insights

Если у вас есть собственный веб-сайт, вы, скорее всего, беспокоитесь о том, насколько он удобен для пользователей. И это правильно, ведь его удобство напрямую влияет на конверсию. Одним из ключевых аспектов удобства сайта является его скорость. Банальный поиск инструментов для определения скорости сайта в 99% случаев приведёт вас на сервис PageSpeed Insights от Google.

Что такое PageSpeed Insights

Сервис PageSpeed Insights создан для анализа и диагностики веб-страниц. На основании произведённых проверок он определяет примерный индекс скорости сайта (от 0 до 100 баллов) и предлагает некоторые решения для его ускорения.

Этот сервис пользуется большой популярностью у пользователей, т.к. является удобным и простым в использовании.

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

Инструмент анализирует не работу сайта в целом, а лишь конкретную запрашиваемую страницу. Для проверки перейдите в PageSpeed Insights и введите в поле URL-адрес страницы, которую хотите проверить.

Вы получите 2 результата анализа — для мобильных устройств и десктопов.

Алгоритмы и инструменты расчётов PageSpeed Insights (далее PSI) постоянно меняются и совершенствуются. Баллы вашего сайта также постоянно будут меняться, в зависимости от текущих требований сервиса.

На момент написания статьи PSI использует 6 версию Lighthouse. Lighthouse — это инструмент, который анализирует время загрузки, доступность и поисковую оптимизацию веб-страниц.

Какие основные критерии оценивает PageSpeed Insights?

Среди всех производимых проверок PSI выделяет шесть основных показателей, на основании которых вычисляется итоговый балл:

  1. First Contentful Paint

    Первая отрисовка контента. Определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста.
  2. Speed Index
    Индекс скорости загрузки. Показывает, как быстро на странице появляется контент. Т. е. время до того момента, когда страница перестанет визуально меняться и обретёт конечный вид.

  3. Largest Contentful Paint
    Отрисовка крупного контента. Определяет время, когда на экран выводится самый большой элемент содержимого в области просмотра (на первом экране).

  4. Time to Interactive
    Время загрузки для взаимодействия. Время, в течение которого страница становится полностью готова к взаимодействию с пользователем. Т. е. время до момента, когда можно спокойно кликать и скроллить.

  5. Total Blocking Time
    Сумма всех периодов от первой отрисовки контента до загрузки для взаимодействия. Этот показатель означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время (менее 50 мс).

  6. Cumulative Layout Shift
    Совокупное смещение макета. Процентная величина, на которую смещаются видимые элементы области просмотра при загрузке. Смещение макета происходит каждый раз, когда видимый элемент изменяет своё положение.

Обратите внимание!
Google сам предупреждает, что эти значения приблизительны и изменчивы.

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

Ещё раз акцентируем внимание!
Сервис не определяет фактическую скорость загрузки страниц, а лишь имитирует их загрузку и замеряет показатели, которые лишь теоретически могут повлиять на скорость.

Влияние баллов PageSpeed Insights на работу сайта и на выдачу в поисковых системах?

Если коротко — минимально.

На фактическую работу сайта баллы в принципе не влияют. Может получиться так, что вы не будете испытывать неудобств в работе с сайтом, но баллы PSI всё равно будут низкими.

С точки зрения пользователя сайт будет загружаться быстро и не будет вызывать отторжения. Но с точки зрения PSI сайт будет определён как медленный.

Анализ PSI — это всего лишь имитация загрузки веб-страниц. К тому же сервис расположен на серверах, которые находятся в Европе. А скорость загрузки страниц напрямую зависит от местоположения сервера. Чем ближе сервер находится к пользователю, тем быстрее загружаются страницы.

Что касается поисковой оптимизации (SEO), то по заявлениям Google с июля 2018 года скорость сайта включена в число факторов ранжирования поиска. Это изменение получило название «Speed Update». Сервис PageSpeed Insights в нём приводится, как инструмент для примерной оценки состояния сайта.

Но прежде чем приступать к работам по увеличению баллов PSI, стоит помнить, что этот показатель далеко не первостепенный при ранжировании сайтов. Есть более важные параметры для SEO-продвижения: мета-теги, адаптивность, качественный контент. И если с этими параметрами полностью всё улажено, только тогда стоит задумываться об оптимизации баллов PSI.

Рекомендации от PageSpeed Insights

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

Эти меры разделены на 3 секции:

Оптимизация

Выполнение этих рекомендаций наиболее вероятно может повлиять на показатели, по которым производится расчёт баллов PSI.

Диагностика

Эти рекомендации приводятся не столько для оптимизации скорости, сколько для улучшения общей производительности вашего сайта.

Успешные аудиты

Тут приводится перечень уже произведённых оптимизаций.

Основные пути увеличения баллов

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

Многие рекомендации действительно полезны и помогают ускорить загрузку страниц. Но далеко не все из них могут оказаться эффективными и быть совместимыми с используемыми на вашем сайте плагинами и библиотеками инструментов. Слепое выполнение всех рекомендаций PSI может значительно ухудшить работу вашего сайта.

Исходя из нашего опыта в оптимизации сайтов, мы с уверенностью можем выделить некоторые из рекомендаций, выполнение которых с большой вероятностью приведёт не только к улучшению баллов PSI, но и к фактическому ускорению вашего сайта:

  • Выбор оптимального хостинга
    Парадоксально, но многие из проблем со скоростью загрузки могут даже не зависеть от самого сайта. Зачастую проблемным местом может оказаться сервер, который обслуживает ваш сайт. Многие не придают особого значения тому, какой именно хостинг они используют. Стремятся к наиболее дешёвому и простому решению в угоду функциональности и производительности. Мы рекомендуем крайне внимательно и обдуманно подойти к вопросу выбора хостинга.

    К слову в одной из предыдущих статей мы уже разбирали этот вопрос.

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

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

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

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

  • Настройка ленивой загрузки изображений (lazy-loading)
    Суть задачи — настроить сайт таким образом, чтобы изображения на странице загружались не все сразу, а только по мере просмотра страницы пользователем. По принципу «Загружаем только то, что увидит пользователь — и не больше».

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

  • Сжатие текста
    Наверно вам знакомо понятие архивации файлов, и вы нередко встречались с файлами, форматов .zip или .rar? Так вот, данная рекомендация сводится к настройке серверного ПО вашего сайта таким образом, чтобы данные, которые он отправляет пользователям проходили предварительно процесс сжатия (архивацию). Это позволяет значительно сократить общий сетевой трафик и ускорить получение информации с сервера.

  • Максимальное уменьшение количества подключаемых инструментов
    Зачастую для определения и увеличения конверсии сайта вам необходимо собрать статистику пользовательского опыта, настроить различные метрики и внедрить доп. инструменты: GTM, Яндекс.Метрика, сервисы обратной связи (онлайн-чатики) и т. п. Это нормально и это правильно. Но всегда стоит помнить о том, что все эти подключаемые решения создают дополнительную нагрузку на сайт, требуют времени для активации и, как следствие, приводят к замедлению скорости его загрузки.

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

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

    И помните, каждый новый плагин — уменьшение баллов PSI.

Выводы

PageSpped Insights от Google — отличный инструмент для тестирования сайта и выявления не всегда очевидных проблем. Его использование может помочь вам в определении примерной картины скорости загрузки и привести её к простому показателю в виде балла от 0 до 100.

Не стоит акцентировать большое внимание на получении наибольшего балла и попадании в так называемую «Зелёную зону» (90−100 баллов). Главная суть использования PSI — поиск и целесообразное исправление основных проблемных мест сайта. Всё это должно производиться не для получения желаемых 100 баллов, а в первую очередь для создания максимально удобного и быстрого сайта с точки зрения именно пользователя.

Руководствуйтесь следующими моментами:

  • Google сам предупреждает, что эти баллы приблизительны и изменчивы;
  • Гонка за «Зелёно зоной» может оказаться не спринтом, а марафоном, т. к. алгоритм проверки постоянно изменяется, и чтобы ему удовлетворять, необходимо будет постоянно вносить корректировки в работу сайта;
  • Сервис не определяет фактическую скорость, а лишь имитирует загрузку страниц;
  • Выполнение всех рекомендаций PSI может оказаться трудоёмким процессом и в итоге не привести к увеличению баллов.

Всегда помните про Закон Парето:
20% усилий дают 80% результата, а остальные 80% усилий — лишь 20% результата.

Общая оптимизация кода, скорее всего, поможет минимальными усилиями достичь средних значений в 50−70 баллов (и этого достаточно). А вот дальнейшие более детальные работы — это долго и дорого. И далеко не факт, что они приведут вас к заветной «Зелёной зоне».

Как увеличить скорость загрузки сайта в 2022: основные способы

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

  • Измерение;
  • Основные способы;
  • Для чего это нужно.

Измерение скорости загрузки сайта

Для проверки скорости загрузки сайта подойдут такие инструменты, как:

  • Google PageSpeed insights. Наиболее популярный инструмент, позволяющий проводить анализ как мобильной, так и десктопной версии сайта. Дополнительно сервис дает рекомендации по улучшению показателей;
  • Pingdom Tools. Еще одни инструмент измерения скорости загрузки сайта, показывающий время в миллисекундах и выдает баллы для оценки данного показателя.

Тестирование и примеры

Для того, чтобы проверить эффективность части методов, которые были описаны использовалась проверка одной и той же страницы (мобильной версии), имеющей следующие показатели:

  • Баллов: 85;
  • Время загрузки первого контента: 2,1 сек;
  • Время загрузки для взаимодействия: 5,2 сек.

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

Сжатие изображений (Способ №1)

Для того, чтобы уменьшить размер страницы достаточно сжать изображения при помощи сервисов, например:

  • https://www.iloveimg.com/ru/compress-image
  • https://imagecompressor.com/ru/
  • https://compressjpeg.com/ru/

Это позволит снизить размер изображений на 60-90% и как следствие значительно снизить размер страницы.

Сжатие страницы (Способ №2)

Для того, чтобы улучшить скорость загрузки страницы по протоколу HTTP лучше всего использовать технологию:

  • ZIP;
  • GZIP.

Проверить результаты сжатия можно на сайте:

https://www.whatsmyip.org/http-compression-test/

Использование WebP (Способ №3)

Формат WebP даст возможность сделать страницу еще «легче», например. Данный формат позволяет получить размер на 26% меньше, чем PNG. Без его использования можно получить следующие результаты:

  • Баллов: 79;
  • Время загрузки первого контента: 2,3 сек;
  • Время загрузки для взаимодействия: 5,7 сек.

Lazy load изображений (Способ №4)

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

Результаты до:

  • Баллов: 40;
  • Время загрузки первого контента: 2,5 сек;
  • Время загрузки для взаимодействия: 13 сек.

Кэширование (Способ №5)

Кэширование — это способ оптимизации Web при котором медленные SQL запросы заменяются статическим HTML-кодом. Как правило, сохраняется код на некоторое время (час, день, неделя или любое другое), после чего кэш очищается и начинается генерация нового файла.

Результаты без кэширования.

  • Баллов: 77;
  • Время загрузки первого контента: 2,6 сек;
  • Время загрузки для взаимодействия: 5,6 сек.

Сократить css и Javascript (Способ №6)

При помощи использования специальных средств для упрощения код JavaScript и CSS можно снизить «вес» страницы.

Пример, кода без сжатия.

  • Баллов: 81;
  • Время загрузки первого контента: 2,7 сек;
  • Время загрузки для взаимодействия: 5,3 сек.

Для того, чтобы выполнить эту операцию достаточно использовать инструмент:

https://jscompress.com/

Уменьшить количество запросов (Способ №7)

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

Пример Google, который выглядит максимально просто, поэтому имеет идеальные данные по Google PageSpeed insights.

Уменьшить расстояние сервер клиент (Способ №8)

Расстояние между сервером и пользователем играет важную роль в оптимизации скорости загрузки сайта. Для решения проблемы можно использовать CDN-сервисы, которые загрузят нужные файлы (как правило, картинки) с собственного сервера, находящегося ближе всего к пользователю.

Для чего это нужно?

В первую очередь согласно данным Google (исследование SOASTA) скорость загрузки сайта сильно влияет на конверсию сайта. Так, оптимальное время за которое должна открыться страница составляет менее 2,2 секунд.

Согласно другим исследованиям компания Walmart добилась увеличения коэффициента конверсии на 2% за каждую 1 секунду ускорения. Также IT-гигант Mozilla смогла повысить количество загрузок на 15% уменьшив время на отображение страницы на 2.2 секунды.

Также данный Kinsta.com утверждает, что загрузка страницы за менее чем 100 миллисекунд дает пользователю ощущение моментальной загрузки. Как показали исследования около половины (40%) посетителей откажутся от сайта, если он загружается более 3 секунд. Было замечено, что при превышении времени загрузки контента 2-х секунд показатель отказов увеличивается на 30%.

Дополнительным стимулом для вебмастеров становится влияние этого фактора на мобильную выдачу в Google с июля 2018 года.

О PageSpeed ​​Insights | Разработчики Google

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

PSI предоставляет как лабораторные, так и полевые данные о странице. Лабораторные данные полезны для отладки проблемы с производительностью, так как он собирается в контролируемой среде. Однако может не захватывать узкие места в реальном мире. Полевые данные полезны для захвата истинного, реального пользователя опыт, но имеет более ограниченный набор метрик. Посмотрите, как думать О Speed ​​Tools для получения дополнительной информации о двух типах данных.

Данные реального взаимодействия с пользователем

Данные реального взаимодействия с пользователем в PSI основаны на пользовательском интерфейсе Chrome. Отчет (CrUX) набор данных. PSI сообщает о реальных пользователях First Contentful Paint (FCP), первая задержка ввода (FID), Самая большая содержательная отрисовка (LCP) и совокупный макет Shift (CLS) за предыдущий 28-дневный период сбора. PSI также сообщает опыт для экспериментальных метрик Interaction to Next Paint (INP) и время до первого байта (TTFB).

Чтобы показать данные о пользовательском опыте для данной страницы, для нее должно быть достаточно данных. для включения в набор данных CrUX. На странице может быть недостаточно данных, если она была недавно опубликован или имеет слишком мало образцов от реальных пользователей. Когда это произойдет, PSI упадет вернуться к детализации исходного уровня, которая охватывает весь пользовательский опыт на всех страницах Веб-сайт. Иногда у источника может быть недостаточно данных, и в этом случае PSI будет не может показать какие-либо данные о реальном опыте пользователя.

Оценка качества опыта

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

Хорошо Требуется улучшение Бедный
ФКП [0, 1800 мс] (1800 мс, 3000 мс] более 3000 мс
ПИД [0, 100 мс] (100 мс, 300 мс] более 300 мс
ЛКП [0, 2500 мс] (2500 мс, 4000 мс] более 4000 мс
CLS [0, 0,1] (0,1, 0,25] свыше 0,25
ИЯФ (экспериментальный) [0, 200 мс] (200 мс, 500 мс] более 500 мс
ТТФБ (экспериментальный) [0, 800 мс] (800 мс, 1800 мс] более 1800 мс

Распределение и выбранные значения показателей

PSI представляет распределение этих показателей, чтобы разработчики могли понять диапазон опыт для этой страницы или источника. Это распределение разделено на три категории: «Хорошо», «Требуется улучшение» и «Плохо», которые представлены зелеными, желтыми и красными полосами. Например, 11 % в пределах желтой полосы LCP означает, что 11 % всех наблюдаемых значений LCP падают между 2500 мс и 4000 мс.

Над полосами распределения PSI сообщает 75-й процентиль для всех показателей. 75-й процентиль выбран так, чтобы разработчики могли понять наиболее разочарование пользователей на их сайте. Эти значения метрик поля классифицируются как хорошо/нуждается в улучшении/плохо, применяя те же пороговые значения, что и выше.

Основные веб-показатели

Core Web Vitals — это общий набор сигналов производительности, критически важных для весь веб-опыт. Метрики Core Web Vitals — это FID, LCP и CLS, и они могут собраны либо на уровне страницы, либо на уровне источника. Для агрегатов с достаточным количеством данных во всех три метрики, агрегация проходит оценку Core Web Vitals, если 75-й процентиль все три показателя являются хорошими. В противном случае агрегат не проходит оценку. Если агрегации недостаточно данных для FID, то она пройдет оценку, если и 75-й процентили LCP и CLS являются хорошими. Если в LCP или CLS недостаточно данных, страница или агрегирование на уровне источника не может быть оценено.

Различия между полевыми данными в PSI и CrUX

Разница между полевыми данными в PSI и Набор данных CrUX в BigQuery заключается в том, что данные PSI обновляются ежедневно, в то время как набор данных BigQuery обновляется ежемесячно и ограничивается данными на уровне источника. Оба источника данных представляют конечные 28-дневные периоды.

Диагностика производительности

PSI использует Lighthouse для анализа данного URL-адреса, создавая показатель производительности, который оценивает эффективность страницы по различным показателям, в том числе: Первая содержательная краска, Самая большая содержательная краска, Индекс скорости, Совокупный сдвиг макета, Время интерактива, и общее время блокировки.

Каждая метрика оценивается и помечается значком:

  • Хорошее обозначено зеленым кружком
  • Требует улучшения отмечен желтым информационным квадратом
  • Плохо обозначается красным предупреждающим треугольником

Оценка производительности

В верхней части раздела PSI предоставляет оценку, которая обобщает имитацию страницы. производительность. Эта оценка определяется запуском Lighthouse для сбора и анализа диагностических данных. информация о странице. Оценка 90 или выше считается хорошим. от 50 до 90 баллов который нуждается в улучшении, а ниже 50 считается плохим.

Аудиты

Lighthouse разделяет свои аудиты на три секции:

  • Возможности предоставляют предложения по улучшению показателей производительности страницы. Каждое предложение в этом разделе оценивает, насколько быстрее будет загружаться страница, если реализовано улучшение.
  • Диагностика предоставить дополнительную информацию о том, как страница лучше всего соответствует практика веб-разработки.
  • Passed Audits указывает аудиты, которые были пройдены страницей.

Часто задаваемые вопросы (FAQ)

Какие устройства и сетевые условия использует Lighthouse для имитации загрузки страницы?

В настоящее время Lighthouse имитирует условия загрузки страницы устройства среднего уровня (Moto G4). в мобильной сети для мобильных устройств и emulated-desktop с проводным подключением для рабочего стола. PageSpeed ​​также работает в Google центр обработки данных, который может варьироваться в зависимости от условий сети, вы можете проверить местоположение, в котором было просмотром блока окружающей среды Lighthouse Report:

Примечание. PageSpeed ​​сообщит о работе в одной из следующих стран: Северная Америка, Европа или Азия.

Почему полевые и лабораторные данные иногда противоречат друг другу?

Данные поля представляют собой исторический отчет о том, как работал конкретный URL-адрес, и представляют анонимные данные о производительности от пользователей в реальном мире на различных устройствах и в сети условия. Лабораторные данные основаны на смоделированной загрузке страницы на одном устройстве и фиксированных набор сетевых условий. В результате значения могут отличаться. См. Почему лабораторные и полевые данные могут отличаться (и что с этим делать) для получения дополнительной информации.

Почему для всех показателей выбран 75-й процентиль?

Наша цель — убедиться, что страницы хорошо работают для большинства пользователей. Ориентируясь на 75-й значения процентиля для наших показателей, это гарантирует, что страницы обеспечивают хорошее взаимодействие с пользователем в самых сложных условиях устройства и сети. См. Определение пороговых значений показателей Core Web Vitals. для получения дополнительной информации.

Почему FCP в v4 и v5 имеют разные значения?

FCP в v5 сообщает о 75-м процентиле (по состоянию на 4 ноября 2019 г.).), ранее это был 90-й процентиль. В v4 FCP сообщает медиану (50-й процентиль).

Почему значения FID в v5 разные?

FID сообщает о 75-м процентиле (по состоянию на 27 мая 2020 г.), ранее это был 95-й процентиль.

Что такое хорошая оценка лабораторных данных?

Любой балл по зеленому (90+) считается хорошим, но обратите внимание, что хорошие лабораторные данные не обязательно означает, что реальный пользовательский опыт также будет хорошим.

Почему показатель производительности меняется от запуска к запуску? Я ничего не менял на своей странице!

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

Почему данные CrUX реального пользователя недоступны для URL-адреса или источника?

В отчете об опыте использования Chrome собраны реальные данные о скорости из подписавшиеся пользователи и требует, чтобы URL-адрес был общедоступным (сканируемый и индексируемый) и иметь достаточное количество отдельных образцов, которые обеспечивают репрезентативное анонимное представление производительности URL или источника.

Еще вопросы?

Если у вас есть конкретный вопрос об использовании PageSpeed ​​Insights, на который можно ответить, задайте свой вопрос на английском языке в Stack Overflow.

Если у вас есть общие отзывы или вопросы о PageSpeed ​​Insights, или вы хотите начать общее обсуждение, начните тему в списке рассылки.

Если у вас есть общие вопросы о показателях Web Vitals, начните обсуждение в группе обсуждения web-vitals-feedback.

Обратная связь

Была ли эта страница полезной?

Большой! Спасибо за ваш отзыв! Если у вас есть конкретный вопрос об использовании PageSpeed ​​Insights, на который можно ответить, задать вопрос на английском в стеке Переполнение. Для общих вопросов, отзывов и обсуждений создайте тему в список рассылки. Жаль это слышать. Если у вас есть конкретный вопрос об использовании PageSpeed ​​Insights, на который можно ответить, задать вопрос на английском в стеке Переполнение. Для общих вопросов, отзывов и обсуждений создайте тему в список рассылки.

Как набрать 100 % в Google PageSpeed ​​Insights

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

Если у вас нет быстрого веб-сайта, люди будут отказываться от него быстрее, чем вы успеете сказать «конверсии».

Однако ускорить работу вашего веб-сайта — задача не из легких.

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

Вам нужно быстро решить эти проблемы, потому что Google не исправит ваш сайт, если вы этого не сделаете.

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

К счастью, Google предлагает инструмент PageSpeed ​​Insights, чтобы узнать, что вам нужно исправить.

К сожалению, они не дают вам наилучших инструкций по доведению вашего счета до 100%.

Вот как получить идеальные 100% в Google PageSpeed ​​Insights и почему вам нужно достичь этого подвига.

Почему скорость страницы имеет значение

Скорость страницы – это решающий фактор для повышения рейтинга вашего веб-сайта в результатах поиска Google.

Если ваш веб-сайт не входит в десятку лучших страниц органического поиска, вы не попадете на первую страницу.

Таким образом, сосредоточение внимания на скорости страницы имеет первостепенное значение для успешной компании и веб-сайта, который конвертируется.

Компания Backlinko недавно провела исследование, в ходе которого они проанализировали более одиннадцати миллионов страниц результатов поиска (SERP) в Google.

Они хотели выяснить, какие факторы наиболее распространены среди сайтов, попавших в первую десятку результатов.

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

Тем не менее, Google утверждает, что скорость страницы имеет значение. Об этом даже было целое обновление.

Это соединение зарезервировано и поддерживается новыми отраслевыми тестами Google PageSpeed.

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

Это означает, что если ваша страница загружается 10 секунд, вероятность того, что кто-то покинет ваш сайт еще до того, как он загрузится, увеличивается на более 120 процентов!

Но, согласно недавнему исследованию более 5 миллионов сайтов, среднему веб-сайту требуется 10,3 секунды для полной загрузки на компьютере и 27,3 секунды для загрузки на мобильных устройствах.

Это означает, что почти все мы не достигаем цели, когда речь идет о быстродействующем веб-сайте.

Другое исследование, проведенное BigCommerce, показало, что коэффициент конверсии для веб-сайтов электронной коммерции составляет в среднем от одного до двух процентов.

Обнаружено, что скорость страницы может резко увеличить коэффициент конверсии.

Снижение скорости до двух секунд может увеличить трафик и доход.

Итак, что заставляет страницу загружаться медленно?

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

Если вы посмотрите на любой веб-сайт в современную эпоху, он, вероятно, до предела заполнен изображениями.

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

Размер и вес страницы часто измеряются в байтах веса страницы. Проще говоря, байты веса страницы показывают общий размер веб-страницы, измеренный в байтах.

Тестовые данные Google показывают, что наилучший вариант для размера или веса страницы — менее 500 КБ:

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

Одна из концепций, которая больше всего запомнилась мне в отчете Google, исходит из этой короткой, но впечатляющей цитаты:

«Несмотря ни на что, чем быстрее, тем лучше, а меньше значит лучше».

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

Как использовать инструмент PageSpeed ​​Insights

Большинство сайтов работают медленно из-за больших изображений, занимающих слишком много места.

Но это не всегда так для каждого сайта.

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

Для начала откройте инструмент PageSpeed ​​Insights и введите URL своего веб-сайта в строку:

Нажмите «Анализ», чтобы Google провел быструю проверку вашего сайта.

Готовый отчет расскажет вам все, что вам нужно знать о вашем сайте и о том, что может мешать его работе.

Вот как выглядит мой отчет:

Это 87/100.

Это не очень хорошо. Впрочем, это тоже не страшно.

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

Во-первых, давайте посмотрим на элементы, которые я оптимизировал и усовершенствовал:

Теперь обратите внимание, что в этом списке всего несколько элементов по сравнению с моим списком «Возможные оптимизации»:

Эта информация говорит мне, что элементы в «Возможные оптимизации» немного менее эффективны, чем те, которые я уже оптимизировал.

Очевидно, вам нужно позаботиться о каждом элементе, чтобы получить 100% результат в инструменте Page Speed ​​Insights.

Начать нужно с самых приоритетных предметов (подробнее об этом позже).

Далее мы хотим протестировать наш мобильный сайт отдельно.

Вы можете использовать тестер мобильных сайтов в инструменте PageSpeed ​​Insights, но Google выпустил обновленную, более точную версию.

Перейдите на страницу Test My Site , чтобы попробовать. Введите URL-адрес вашего веб-сайта и нажмите Enter:

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

Он даже сообщит вам, сколько посетителей вы можете потерять из-за более низкой скорости страницы.

Вот как выглядят мои данные:

Мое время загрузки на мобильном устройстве составляет четыре секунды.

Помните: рекомендуемое время загрузки составляет три секунды или меньше.

Это означает, что моя скорость не соответствует отраслевым стандартам.

Из-за этого я теряю до 10 процентов посетителей просто из-за плохой скорости работы!

Вот как выглядит мой мобильный тест, когда я сравниваю его с отраслевыми стандартами:

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

Прокрутите вниз еще ниже, и Google даст вам оценку того, что ваши лучшие исправления могут сделать для вашего веб-сайта:

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

Это означает, что я потенциально могу заставить свой веб-сайт загружаться с отметкой в ​​одну секунду!

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

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

В этом следующем разделе я расскажу вам, как исправить проблемы со скоростью страницы, чтобы помочь вам набрать 100 % в инструменте PageSpeed ​​Insights.

4 способа получить идеальную оценку PageSpeed ​​Insights

Получить 100% идеальный результат с помощью инструмента Google PageSpeed ​​Insights — непростая задача.

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

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

Это может быть утомительно и утомительно, но вам нужны эти преобразования. Нельзя лениться и рисковать, оставляя трафик и профит на столе.

Вот четыре основных способа, с помощью которых вы можете ускорить работу своего сайта и набрать 100% баллов в Google.

1. Сжатие изображений

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

Когда я исправил это на своем собственном сайте, я обнаружил огромное влияние на скорость.

Одним из лучших методов оптимизации для фиксирования размера изображения является сжатие.

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

Если вы используете WordPress, одним из лучших способов сделать это, не тратя много времени, является использование плагина, такого как WP Smush Image.

WP Smush предлагает множество потрясающих бесплатных функций.

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

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

Вы можете сжимать до 50 изображений одновременно, что делает его одним из самых быстрых инструментов на рынке:

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

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

WP Smush — отличный бесплатный инструмент для обычного пользователя WordPress.

Скорость важнее релевантности?

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

Ясный ответ на это: релевантность важнее.

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

Как измеряется PageSpeed ​​веб-сайта?

Чтобы улучшить результаты поиска, Google использует данные о времени загрузки и поведении веб-сайта. Это собирается с помощью пользовательских данных собственного браузера Chrome.

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

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

Чтобы учесть эти возможности, Google использует данные браузера реальных посетителей сайта. Когда вы посещаете веб-сайт, браузер автоматически записывает основные веб-жизненные показатели, то есть LCP (наибольшая содержательная отрисовка), FID (первая задержка ввода) и CLS (кумулятивное смещение макета), и передает эту информацию в Google.

Значение PageSpeed, также известное как Lighthouse Score, также можно использовать для оценки скорости загрузки веб-сайта. Он варьируется по шкале от 0 до 100 и рассчитывается отдельно для настольных и мобильных устройств.

Как можно проверить PageSpeed ​​веб-сайта?

Google PageSpeed ​​Insights

Вы можете использовать инструменты Google, чтобы узнать, нуждается ли ваш сайт в оптимизации. Инструмент Google PageSpeed ​​Insignts проверяет ваш сайт всего за несколько секунд. В дополнение к лабораторным данным, которые он собирает, PageSpeed ​​Insights также отображает некоторые полевые данные из отчета Chrome UX, а также указывает, прошла ли рассматриваемая страница Web Vitals Test.

Данные этого поля могут отображаться в отчете Core Web Vitals в Google Search Console для всех соответствующих URL-адресов:

Lighthouse

Другой инструмент, который Google делает доступным непосредственно в консоли разработчика Chrome, — это Lighthouse, автоматизированный инструмент с открытым исходным кодом. для улучшения качества сайтов. Lighthouse работает в браузере Google Chrome и позволяет тестировать веб-сайты, включая закрытые или локальные среды разработки.

Слева находится тестируемый сайт. Справа панель производительности Chrome DevTools с отчетом Lighthouse.

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

SISTRIX PageSpeed ​​Tool

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

Сравните скорость страницы прямо здесь

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

Что говорит Google?

Если вы можете ускорить свой сайт, это действительно хорошо для пользователей, а также для поисковых систем… Это [скорость страницы] является лишь одним из более чем 200 факторов ранжирования.

Источник: Matt Cutts

Более подробная информация об инструментах проверки скорости страницы здесь.

Как повысить скорость страницы?

Мы написали руководство по оптимизации скорости страницы, в котором описаны наиболее распространенные проблемы и способы их устранения. Например, сжатие на стороне сервера, уменьшение задержки и веб-шрифты.

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