Google PageSpeed Insights — инструмент для измерения скорости загрузки сайтов с рекомендациями. Скорость загрузки определяет позиции сайта в поисковой выдаче, как пользователи ведут себя, загружая страницу. От этого зависит конверсия, глубина просмотров. С помощью PageSpeed можно проанализировать скорость как на десктопных, так и на мобильных устройствах.
Реальная скорость загрузки и рейтинг PageSpeed
Важность скорости загрузки
Google Pagespeed Insights — инструмент для оценки качества оптимизации страниц в интернете. Основной показатель, которым оперирует предлагаемый в нём анализ — скорость загрузки страницы. Данная метрика является одной из ключевых, будучи важным поведенческим фактором, о которых у нас есть хорошая информативная статья.
Как минимум, с пользовательской точки зрения, необходимо, чтобы сайт работал быстро — это экономит наше время и приносит положительный опыт.
В Google провели исследование, обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.
В январе 2018 было объявлено, что с июля данного года Google вводит page speed в качестве фактора ранжирования для мобильного поиска. Это связано с упомянутым исследованием, в котором ясно показано: скорость имеет значение. Здесь Google рекомендует разработчикам заняться оптимизацией своих сайтов и предлагает для анализа их эффективности использовать инструменты:
- Chrome User Experience Report. Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
- Lighthouse. Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
- PageSpeed Insights. Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.
Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.
О чём говорит Google Pagespeed Insights
Всё говорит о том, что скорость загрузки сайта — важнейший показатель, влияющий и на лояльность пользователей, и на позиции в выдаче. Как в улучшении данной метрики помогут Google Insights?
Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.
- Данный инструмент не измеряет скорость загрузки страниц.
- Показатель Page Insights не влияет на ранжирование.
- Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.
Можно привести огромное множество примеров, когда топ выдачи занимают сайты с вопиюще низким показателем, а под 100 баллов получают сайты на одном HTML без каких-либо удобств и функций.
Проверим верность утверждения на запросе авиабилеты.
Два топовых сайта показывают удручающие, с точки зрения сервиса, показатели.
А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.
Разработчикам, которых интересует скорость загрузки сайта, будут полезны сервисы:
- Pingdom Tools. Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
- WebPageTest. Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
- GTmetrix. Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.
Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
Обновление алгоритмов Google PageSpeed Insights
Летом 2020 года Google запустил новый алгоритм Speed Update, по которому поисковая система учитывает скорость загрузки сайта при ранжировании. Изменения продолжились в ноябре — сервис начал работать на базе Lighthouse. Это инструмент для аудита с открытым исходным кодом, помогает разработчикам улучшить производительность веб-страниц. Раньше сервис оценивал сайты в соответствии с определенными условиями и выполнением поставленных задач. Теперь высокий балл присуждается только за скорость загрузки.
Также появилась функция раскадровки — на слайдах видно, в каком порядке загружается контент на сайте. Гугл Спид анализирует изображения на страницах и советует форматы более легких по весу файлов.
Как пользоваться PageSpeed
Чтобы получить сводки для оптимизации веб-сайта, нужно перейти на страницу PageSpeed Insights и указать в пустой строке домен. После алгоритм запускается, анализирует информацию и выдает ряд показателей для анализа. Максимальный балл, который можно набрать по одному показателю — 100. Хорошим считается результат от 80 баллов.
Сервис считает показатели, в числе которых:
- время демонстрации первой части страницы;
- задержки при загрузке;
- окончание работы ЦП;
- скорость загрузки;
- период загрузки до начала взаимодействия.
PageSpeed Insights помогает рассчитать время для полной подготовки к взаимодействию с пользователем.
Как ускорить загрузку своего сайта на любых устройствах
Тем не менее, с помощью Google Pagespeed Insights вы можете определить недостатки страницы, чтобы исправить их и оптимизировать загрузку.
Оптимизация изображений
Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:
- Предварительная оптимизация
При загрузке изображений откуда-либо и последующей их вставке на сайт позаботьтесь о том, что их размер минимально возможный. Речь идёт не о весе в килобайтах, а именно о пикселях.
Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.
Сделайте так, чтобы на картинке или фото не оставалось полей и лишних элементов — это может замедлить загрузку. При создании коллажей постарайтесь не допускать много свободного пространства между отдельными изображениями — пустоты увеличивают размер файла и замедляют сайт.
- Подберите формат
В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.
Сложно сказать, правы ли здесь авторы, так как PNG входит в перечень наиболее оптимизированных для веб форматов. У него, в отличие от JPEG, имеется возможность загрузки изображений неправильной формы без необходимости дорисовки до прямоугольника. Если нужна круглая кнопка, JPEG добавит к кругу непрозрачные уголки, чтобы изображение вышло квадратным. Загружая PNG, вы оставляете только ту графику, которую хотели, а остальное пространство между вашим изображением и прямоугольным контейнером остаётся прозрачным.
Старайтесь прибегать к JPEG для размещения фотографий. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.
- Сжимайте изображения
Вот сейчас самое время сжать картинки и по весу. В интернете есть несколько бесплатных или частично платных сервисов, уменьшающих размер картинок без потери качества:
Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.
- Используйте атрибуты с правильным размером
Если разработчик загружает большое изображение и ограничивает его до меньшего атрибутами width и height, ему кажется, что он оптимизировал своё время. Но он на самом деле отнял время у пользователя, который загрузит файл целиком, а увидит его в уменьшенном размере.
Для облегчения задачи пакетного сжатия Google предлагает загрузить сжатые в ходе диагностики картинки в архиве. Вы можете распаковать их прямо в директорию соответствующей страницы и обновить старые изображения. Пакетное сжатие лучше провести в PunyPNG.
Оптимизация JavaScript и CSS
Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.
Разумеется, JavaScript, загружаемый внизу страницы или асинхронно, ускоряет загрузку. Но разработчики редко прибегают к этому действию, так как перенос скриптов в футер систематически нарушает функционирование сайта. Тем более, это касается готовых шаблонов для CMS, в которых страницы редактируются через интерфейс, а в отдельных вставка кода существенно ограничена.
Аналогично и со стилями. В случае, когда пользователь загружает страницу, где CSS находятся внизу, он с большой вероятностью загрузит каркас страницы без стилей. Это выглядит неприглядно — посетитель сочтёт такое отображение ошибкой и, скорее всего, покинет сайт.
Впрочем, есть несколько действенных мер, которые могут облегчить код и ускорить работу страниц ресурса.
- Сокращение CSS
Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor. В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.
Последний вариант сжатия превращает код в строку, что неудобно в случае необходимости его дальнейшего редактирования. Есть смысл прибегать к этой опции в том случае, если вы уверены — файл стилей содержит окончательные данные.
Если вы единственный разработчик, прекрасно ориентируетесь в коде и ваше эстетическое восприятие не перетекает в перфекционизм, то комментарии можно удалить полностью — в зависимости от их размера, это может сильно облегчить файл.
- Сокращение JavaScript
Для такой задачи подойдёт инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.
Просто вставьте код в окно и запустите сжатие. После процедуры замените код в своих файлах на сайте и проверьте его производительность.
- Загрузка контента из Google CDN
Интернет представляется единым пространством без расстояний, но это не так. На самом деле удалённость серверов играет большую роль. CDN реализует функционал перемещения контента сайта — скриптов, стилей или изображений в специальную сеть.
Пользователь не должен ждать, если он находится в одной точке мира, и его обслуживает один сервер, а сервер вашего сайта располагается в нескольких тысячах километров. CDN делает так, что посетитель подгружает контент с сервера, ближе всего расположенного к нему. Файлы ранее оказались там благодаря особому кешированию в данной сети.
GZIP сжатие
GZIP — это тип сжатия, концептуально схожий с обычным сжатием файлов на компьютере, но в вебе. Файлы, обеспечивающие отображение страницы, загружаются с сервера в сжатом виде. Существует целый перечень алгоритмов сжатия, но gzip наиболее применим и популярен в интернете. Его поддерживают любые современные браузеры.
Существует 2 типа сжатия gzip: динамическое и статическое.
- Динамическое сжатие
В данном случае файлы архивируются прямо на сервере, отправляются пользователю и разархивируются в браузере. Такой подход эффективен, но создаёт нагрузку на сервер, что может быть неприемлемо для некоторых владельцев сайтов.
Метод реализуется с помощью редактирования файла .htaccess, находящегося в корневом каталоге ресурса, расположенного на сервере Apache. Если сайт работает на Nginx, то подход не сработает. Вам необходимо будет включить в файл соответствующие модули или связаться с администрацией, если ваши возможности в этом вопросе ограничены.
- Статическое сжатие
При статическом сжатии ресурсы сервера не используются, хотя при этом пропадает возможность динамического сжатия HTML — метод работает со статическими скриптами и CSS.
Суть подхода состоит в ручном архивировании файлов методом gzip и последующем размещении сжатых копий на сервере. Таким образом, пользователь при загрузке сайта будет сразу обращаться к сжатым файлам без затрат мощностей сервера.
Использование кеша
Как и при сжатии, для внедрения кеширования существует небольшой нюанс — сервер должен работать под Apache. В противном случае вам так или иначе придётся связываться с администрацией хостинга.
Суть кеширования заключается в том, что файлы, за счёт которых работает сайт, уже не подгружаются пользователем с сервера ни в каком виде. Вместо этого он хранит файлы у себя на компьютере, вследствие чего кратно вырастает скорость загрузки страниц.
Для реализации функционала кеширования вам опять предстоит работать с .htaccess. Найдите этот файл в корне и откройте для редактирования. Если он не отображается, в настройках FTP-клиента используйте функции отображения скрытого содержимого. Найдя .htaccess и открыв его, внесите в него директивы для кеширования статических элементов в браузере пользователя.
С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control.
Чаще всего хранятся на пользовательской машине файлы изображений, стилей и скриптов.
Сокращение времени ответа сервера
Чтобы сократить время ответа, можно установить на сайт плагин для кеширования и сжатия стилей и скриптов. Важно, чтобы у него было разграничение между мобильной и десктопной версией сайта, иначе у пользователей возникнет проблема с отображением страниц. Оптимальным вариантом будет выбор плагина Hyper Cache, у которого есть разделение по мобильному и обычному кешу.
Как анализировать Pagespeed по отчетам веб-аналитики
Стандартные сервисы для проверки оценивают сайт глазами пользователя, в то время как отчеты по веб-аналитике демонстрируют реальный результат. На основании этой статистики можно увидеть фактическую скорость загрузки страниц и посмотреть, как этот показатель взаимодействует с другими. Например, по отказам и конверсии можно увидеть и оценить реакцию пользователей на скорость загрузки.
Яндекс.Метрика
Отчеты Яндекс.Метрики помогают проанализировать скорость страниц на всех этапах. Это можно сделать через вкладку «Стандартные отчеты» в разделе «Мониторинг», а затем — «Время загрузки страниц». В появившемся поле будет видно, сколько времени на загрузку уходит у пользователей из разных стран и регионов. Оценка показателей в отчете формируется с помощью квантиля, значение которого стандартно составляет 50%. Пользователь может корректировать это значение, повышая точность анализа. Также предусмотрена возможность сегментации данных, их сопоставления с другими параметрами исследования — временем на сайте, числом отказов.
Google Analytics
Найти сведения о скорости загрузки сайтов в Google Analytics можно через вкладку «Отчеты» в разделе «Поведение». Форма отчета напоминает Яндекс.Метрику: сверху расположена карта, в которой отображаются сведения о загрузки для жителей разных регионов. Снизу находится таблица со статистикой в удобной форме: она связывает показатель скорости загрузки страницы с просмотрами и отказами.
Есть отдельные категории отчетов, например, «Пользовательское время». Они нужны для детального анализа эффективности отдельных элементов на сайте: кнопок, разделов, фотографий.
Стоит ли пользоваться Google Pagespeed Insights
Ответ на этот вопрос положительный, с тем условием, что вы не придаёте данному инструменту чрезмерного значения. Он удобен для проверки конкретной страницы на предмет оптимизации её составляющих, но не годится в качестве инструмента сравнения page speed разных страниц. Для больших проектов имеет смысл пользоваться более глубокими инструментами аналитики.
Следуя рекомендациям Pagespeed Insights, уделяйте внимание главным методам оптимизации:
- Оптимизация JavaScript и CSS;
- Оптимизация изображений;
- Сжатие gzip;
- Кеширование в браузере.
Какие параметры важны при измерении скорости сайта
Есть несколько основных параметров, с помощью которых определяется итоговая оценка скорости загрузки сайта. В 2020 появились новые метрики, которые сосредоточены на скорости отклика. Они помогают подробнее проанализировать удобство пользователя на начальном этапе взаимодействия с сайтом.
Largest Contentful Paint (LCP)
Это один из новых показателей PageSpeed Insights, который демонстрирует время отображения самого большого элемента на странице. Алгоритм метрики отслеживает изображения, видео с poster-изображением, текст в блочных элементах. Размер рассчитывается по формуле: ширина, умноженная на высоту. Если какой-то элемент на странице частично скрывается за видимой областью, он не учитывается при расчете показателя.
Время ответа сервера
Время ответа сервера — это промежуток от запроса в браузере до загрузки первого байта страницы сайта. Сервис Google не дает отчет по этому показателю, для измерения времени отклика есть специальные сервисы, например, ping.loading.express. Чтобы получить результат, в поисковую строку нужно загрузить адрес сайта.
Время загрузки первого контента
Это время с момента открытия страницы, начала загрузки ее контента до появления первого элемента. К ним относятся текстовые блоки или картинки, которые подгружаются в ответ на запрос пользователя. Если пользователь увидит белый экран, он может подумать, что сайт не работает или просто не захочет ждать и закроет страницу.
Индекс скорости загрузки
Индекс скорости загрузки демонстрирует скорость загрузки содержимого сайта до момента, когда на странице прекращаются визуальные изменения. Это время от начала загрузки видимых элементов страницы и до того, как пользователь видит сайт с правильным расположением содержимого. Speed Index — это один из значимых показателей, на основе которого PageSpeed Insights выставляет оценку скорости загрузки сайта.
Время загрузки для взаимодействия
Это самый важный параметр оценки скорости в PageSpeed Insights с самым тяжелым весом. Показатель отображает необходимый промежуток времени для загрузки, после которого посетитель сайта сможет кликать по странице, выбирая контент для изучения. Если значение метрики больше 20 секунд, это говорит о потенциальной проблеме с кликами и долистываниями.
Время загрузки достаточной части контента
Метрика основывается на том промежутке времени, за который на странице загружается основная часть представленного материала. Этот показатель демонстрирует скорость, необходимую для взаимодействия с пользователем.
В некоторых случаях время загрузки достаточной части контента совпадает с временем выгрузки первого контента или превышает его. В первом случае пользователь сразу видит часть текста, а во втором — фон или рамку изображения.
Время окончания работы ЦП
Это значение фиксирует момент достаточной загрузки процессора, отвечающего за загрузку сайта при переходе пользователя. Метрика показывает время, необходимое процессору, чтобы откликаться на действия посетителя. Это значит, что большая часть элементов страницы доступна: кнопки, изображения, ссылки. По стандарту, длительность ответа не может быть более 50 миллисекунд.
Приблизительное время задержки при вводе
Этот показатель демонстрирует среднее время отклика страницы на действия посетителей в первые пять секунд загрузки. Если страница реагирует на запрос дольше 50 миллисекунд, пользователь думает, что страница тормозит. Это наименее значимая характеристика при оценке скорости страниц сайта.
Дополнительные инструменты от Google
PageSpeed Insights — полезный, но не единственный инструмент для измерения показателей скорости загрузки. Есть и другие сервисы Google, которые оценивают производительность сайта и дают рекомендации по оптимизации.
Pingdom Tools
Это полезный инструмент для работы, чтобы оценить доступность и производительность сайтов. Он разработан американской компанией по выпуску программного обеспечения SolarWinds. Тест показывает не только общее время загрузки, но и дает представление о других параметрах страницы: количестве запросов для формирования страницы, времени загрузки документа. Pingdom Tools сообщает коды сервера, определяет размер страниц и вес контента на сайте. После анализа он оценивает эффективность работы веб-страниц и дает рекомендации по оптимизации.
UpTrends
Это сервис с бесплатным доступом на 30 дней для мониторинга сайтов, серверов, мобильных приложений. Для теста предоставляются 9 локаций США, Азии, Европы и Австралии. Перед началом проверки можно указать используемый браузер, тип соединения, размер экрана. Замер скорости происходит как в десктопных версиях, так и в мобильных. Инструмент измеряет коды ответов, распределяя их по объектам и весу, исследует время загрузки на всех этапах взаимодействия с пользователем. UpTrends предлагает опцию RUM — проверку реальных пользователей.
WebPageTest
Это некоммерческий сервис с открытым исходным кодом. В нем принимают участие юридические компании и физические лица, настроенные развивать тестовую инфраструктуру веб-сайтов по всему миру.
Сервис показывает не только параметры загрузки страниц, но и ответы на запросы сервера. WebPageTest дает обширный выбор браузеров, типов соединений и стран проживания. Однако в проекте отсутствуют локации СНГ. Для начала работы нужно выбрать подходящую страну, указать остальные вводные параметры и выбрать число необходимых тестов.
Заключение
Скорость загрузки страницы — важный показатель, влияющий на положение сайта в поисковой выдаче и пользовательскую реакцию при переходе. Для оценки его эффективности существуют специальные сервисы с возможностью анализа сайта по ключевым позициям, выявления проблем и разработке стратегии по их устранению.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
