Проверка производительности сайта с помощью инструмента PageSpeed Insights от Google Speed Update


Содержание материала:

15 инструментов тестирования скорости сайта для анализа веб-производительности

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

Как тестирование скорости сайта может помочь в анализе?

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

  • Определение скриптов, шрифтов и плагинов, вызывающих увеличение времени загрузки ( HTML, JavaScript, CSS );
  • Проверка минимизации скриптов;
  • Обнаружение больших изображений;
  • Тестирование времени до получения первого байта ( TTFB );
  • Анализ общего времени загрузки, размера страниц и запросов;
  • Проверка производительности для различных географических точек;
  • Проверка скорости вывода в различных браузерах;
  • Анализ HTTP-заголовков ;
  • Измерение производительности сети (« доставка » контента );
  • Проверка, какие элементы корректно загружаются из CDN .

Концепции скорости сайта

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

Время до получения первого байта (TTFB)

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

Блокирующий код Javascript и CSS

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

Javascript

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

Проверка производительности сайта с помощью инструмента PageSpeed Insights от Google Speed Update

Почему у меня быстрый интернет, а сайты открываются медленно? Это вызывает недоумение. А дело вот в чем:

  • браузер находит сайт в интернете через DNS (быстро)
  • браузер запрашивает у сервера, на котором расположен сайт, страницу (скорость зависит как от сервера, так и от сайта)
  • браузер скачивает страницу (быстро)
  • браузер скачивает дополнительные ресурсы (скорость зависит от количества и размера ресурсов, и кеширования)
  • браузер отрисовывает страницу (задержка обычно зависит от сложности CSS, скорости JavaScript и порядка их следования)

Комплексную оценку этих показателей дает Google PageSpeed Insights.

Ничто так не раздражает, как медленный интернет. Если у посетителя подключение 100Мбит/сек и выше, он ожидает, что сайт откроется практически мгновенно. Как минимум, в первые секунды должна быть прогружена основная часть, даже без изображений. Значит сайт работает. Если посетитель видит, что сайт думает, он уходит, ведь результатов в поиске много!

Примерно половина трафика приходит c мобильных устройств, где интернет часто медленный. С другой стороны, приложения на смартфонах работают очень быстро, поэтому люди хотят видеть ту же скорость и от сайта. С помощью инструмента Google PageSpeed Insights можно также объективно оценить скорость мобильной версии сайта, и получить рекомендации для приближения к заветным 100 баллам.

Проверка скорости загрузки сайта в Google Page Speed

Чем он может быть полезен? Давайте разберёмся.

Скорость загрузки страниц принято мерять в миллисекундах. В процессе проведения исследований специалисты Amazon посчитали, что продажи снижаются на 1% вследствие падения скорости загрузки страниц на 100 мс.

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

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

В свое время Google представил сервис Page Speed – официальный инструмент для измерения скорости сайтов. Подобных сервисов немало, но по понятной причине веб-мастера предпочитают ориентироваться на рекомендации поисковика, в котором им предстоит продвигать свои проекты.

Как пользоваться Page Speed?

Для получения сводки и рекомендаций по оптимизации любого сайта достаточно перейти на страницу Page Speed Insights (PSI) и ввести в единственное поле интересующий домен. Запуск процесса, минута ожидания, и вы получаете целую гору полезной информации.

Результат тестирования делится на 2 группы показателей – для обычной и мобильной версии. Для каждой из них система покажет набранное количество баллов, исходя из всех задержек и обнаруженных проблем. Максимум можно набрать 100 попугаев. Отличным результатом считается показатель от 80. Свыше 90 – шикарным.

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

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

Полученные результаты система под капотом сравнивает с другими сайтами, которые находятся в базе. Если ваши пузомерки окажутся выше 98% других сайтов, но вы получите 100 баллов. Если лучше 75% — то всего лишь 50. То есть характеристика относительная, конкурирующая. Чем больше быстрых сайтов в системе, тем ниже по отношению к ним будут показатели какого-то условного ресурса, если его не оптимизировать постоянно.

Другими словами, на показатели PSI можно и нужно ориентироваться. Они дают представление о скоростных параметрах, влияющих на отношение и самого поисковика, и пользователей к ресурсу. Игнорировать их нельзя. Но и расстраиваться не стоит, увидев результат ниже 100 баллов, — всё представлено в сравнении, а не натуральной величиной в вакууме.

Самое ценное, что даёт Page Speed – это рекомендации по увеличению производительности. Статистика даёт советы с короткой расшифровкой в действиях и показывает приблизительную экономию времени загрузки в миллисекундах. Список рекомендаций может быть очень длинным. Говоря по-честному, понимать это всё может только опытный веб-мастер. Но и для новичков есть понятные советы – сжать картинки (напр. TinyPNG), изменить формат чего-то, снизить количество переадресаций, убрать избыточные виджеты и т. д.

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

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

Выводы и рекомендации

Google Page Speed – крайне полезный инструмент веб-мастера. Своего рода бенчмарк скорости работы сайтов от главной поисковой системы мира. На него ориентируются все в большей или меньшей степени.

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

Имитация загрузки страниц в PSI происходит с помощью Lighthouse – опенсорсного программного комплекса для оценки качества сайтов. Всё вышеописанное бесплатно.

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

Google обновила инструмент для анализа веб-сайтов PageSpeed Insights

Google рассказала об изменениях в новой версии инструмента для анализа веб-сайтов PageSpeed Insights (PSI). Разработчики изменили движок для проверки технической части на Lighthouse. При этом данные о том, насколько удобно использовать сайт, инструмент получает от Chrome User Experience Report (CrUX). Также компания сообщила о прекращении поддержки устаревших версий API PSI в ближайшие полгода.

Данные веб-сайтов в Pagespeed Insights

Google поделилась, какую информацию разработчикам предоставляет PSI:

  • Лабораторные данные. PSI собирает данные и анализирует их с помощью инструмента Lighthouse. Последний моделирует загрузку сайта на мобильном устройстве и выставляет баллы производительности от 0 до 100.
  • Мониторинг пользователей. PSI также отображает показатели — первую отрисовку контента (FCP) и задержку ввода (FID) — для веб-сайта и его исходных данных.
  • Возможности. Инструмент предлагает решение возникших затруднений в работе сайта, а также способы увеличения скорости его работы.
  • Диагностика. PSI сравнивает решения, использованные в создании сайта, с актуальными в веб-разработке.

Google сообщила об изменениях в правилах ранжирования сайтов в мобильной поисковой выдаче в середине января 2020 года. В связи с этим компания рекомендовала ознакомиться с инструментами PageSpeed Insights и Lighthouse. Обновлённый поисковый алгоритм заработал в начале июля 2020 года.

Оптимизация скорости загрузки сайта по Google PageSpeed Insights

Краткое содержание статьи:

PageSpeed Insights — инструмент от Google, анализирующий производительность страницы на мобильных и десктопных устройствах с предоставлением рекомендаций по их улучшению. Зачем его использовать? В лидирующих поисковых системах скорость сайта является важным критерием ранжирования. От того, насколько быстро произошла загрузка страницы, зависят не только трафик и позиции сайта, но и конверсия, глубина просмотров, лояльность пользователей и прочие важные параметры интернет-маркетинга.

Кратко об изменениях в работе инструмента

Раньше при оценке сайта Google основывался на своих метриках и правилах. Из недостатков: инструмент мог показывать оптимизированные страницы с быстрой загрузкой, но по факту страница могла грузиться долго, и при этом оценка отображаться высокой. Была и обратная ситуация: страницы загружались быстро, а оценка была низкой. 12 ноября 2020 года инструмент был обновлен. Формулы подсчета показателей полностью сменились, а также добавились новые.

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

На странице инструмента необходимо ввести интересующую вас страницу в поле и нажать кнопку «Анализировать». Проверка происходит достаточно быстро. Домены в зоне .рф проверяются несколько дольше. Проверка осуществляется как для мобильной, так и для десктопной версии. Их значения могут отличаться друг от друга.

Первое, что вы увидите — это оценка эффективности страницы. Она определяется с помощью Lighthouse, о котором мы писали выше. Эффективность загрузки страницы измеряется по шкале:

  • 90 или выше – быстрая;
  • от 50 до 89 – средняя;
  • ниже 49 – медленная.

Данные наблюдений и Origin Summary

Далее располагаются данные наблюдений и Origin Summary, которые отображаются в том случае, если хватает данных для статистики. В целом они показывают сводную информацию о скорости проверяемой страницы в сравнении с другими страницами, по которым были собраны данные за последние 30 дней. Origin Summary отличается от «Данных наблюдений» тем, что оценивает скорость всех страниц вашего сайта.

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

  • Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
  • Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

Имитация загрузки страницы

Имитация загрузки страницы оценивается по 6 показателям:

  • Время загрузки первого контента (FCP).
  • Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
  • Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
  • Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
  • Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
  • Максимальная потенциальная задержка (FID).
Топ-пост этого месяца:  Простая адаптация с помощью фоновых изображений CSS

«Оптимизация», «Диагностика» и «Успешные аудиты»

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

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

Раздел «Успешные аудиты» показывает параметры, которым соответствует ваша страница. Здесь остаётся только облегченно вздохнуть и порадоваться, что это дорабатывать не нужно.

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

  • Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
  • Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
  • Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

  • Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
  • Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media=»print» в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:

  • На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.
  • С самописными сайтами будет более-менее понятно, что и куда переносить, но на сайтах с готовыми CMS это будет сделать сложнее. В этом случает помогут следующие плагины:

    • Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
    • Для Joomla плагины JCH Optimize.
    • Для Drupal плагины JCH Optimize.
    • В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
    • Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

    Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

    Используйте современные форматы изображений

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

    Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

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

    • Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
    • Плагин AdobeWebM для Adobe Photoshop CC.
    • Плагины для CMS:
      1. для WordPress плагин WebP Express.
      2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта — оптимизация css, js и картинок» и Ammina Optimizer.
      3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
      4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
      5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

    Настройте эффективную кодировку изображений

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

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

    • PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
    • JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
    • GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

    Оптимизация изображений может происходить следующим образом:

    • Вручную с помощью Adobe Photoshop и с использованием экшенов.
    • Пакетное преобразование с помощью FastStone Image Viewer.
    • Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
    • С помощью доработки кода, например в Bitrix.
    • С помощью плагинов:
      1. для WordPress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
      2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
      3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
      4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
      5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

    Удалите неиспользуемый код CSS

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

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

    Сократите время ответа сервера (время до получения первого байта)

    Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

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

    • Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
    • Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
    • Оптимизируйте таблицы базы данных MySQL.
    • Если используете старую версию CMS, лучше обновите её до последней версии.
    • Включите кеширование сайта браузером.
    • Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
    • Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
    • Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
    • Выполните рекомендации из разделов Google PageSpeed Insights, описанных выше.

    Дополнительные варианты плагинов для популярных CMS, которые помогут в сокращении ответа сервера:

    1. Для WordPress плагины WP Super Cache, PHP Speedy WP, Optimize DB.
    2. Для Bitrix предлагаем варианты, в которых можно ознакомиться, как ускорить сайт.
    3. Для Joomla уже упоминаемый плагин JCH Optimize, а также включение кеширования в админ-панели.
    4. Для Drupal модули «Authenticated User Page Caching (Authcache)», «CSS GZIP», «JavaScript Aggregator», «eAccelerator».
    5. Для Opencart модули Smart Optimizer, Turbo OpenCart.

    Уменьшите размер кода JavaScript

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

    Настройте показ всего текста во время загрузки веб-шрифтов

    Данный раздел сообщает о том, что пользователи сайта не увидят ваш контент до тех пор, пока шрифты не будут подгружены. Добавьте в тег link параметр display=swap, таким образом браузер будет отображать дополнительный шрифт, пока основной шрифт не будет загружен полностью.

    Далее в стилях к основному шрифту необходимо подключить дополнительный шрифт в font-family. Например:

    Если же вы отдаёте предпочтение локальным шрифтам, то в @font-face добавьте свойство «font-display: swap;»:

    Минимизируйте работу в основном потоке

    В этом разделе подразумевается оптимизация кода JS: удалите неиспользуемый JS, первым загружайте только необходимый, сожмите данные JS. Более подробно смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите размер структуры DOM

    DOM (от англ. Document Object Model – «объектная модель документа») может нанести ущерб производительности страницы, если оно имеет большое дерево. Дерево DOM состоит из объектов, которые называются узлами, например это элементы HTML, текстовое содержимое, закомментированный код и пр. Оптимальное количество узлов в DOM 1500, глубина – 32 узла, количество дочерних и родительских элементов – менее 60.

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

    Задайте правила эффективного использования кеша для статических объектов

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

    Сократите время выполнения кода JavaScript

    Здесь снова говорится об улучшении кода JS – необходимо уменьшить размер фрагментов кода JS: использовать только тот, который нужен для правильной работы сайта; сократить, сжать данные кода и кешировать. Более подробно о том, что может помочь смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите глубину вложенности критических запросов

    В этом разделе говорится о цепочке критических запросов, которые позволяют браузеру загружать страницу как можно быстрее, с определением приоритетов загружаемых ресурсов и порядком их загрузки. Например, браузер обрабатывает HTML, к нему подключены CSS ресурсы, он начинает обрабатывать их, а далее обнаруживается, что к HTML подключены и шрифты, для обработки которых ему снова нужно отправить запросы. Решить проблему можно добавлением в тег link значение rel=preload. Более подробно смотрите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте подходящий размер изображений

    Помимо рекомендации сжатия всех изображения без потери качества, есть еще несколько вариантов исправления данной ошибки в PageSpeed Insights:

    • Внедрение адаптивных изображений, у которых есть несколько версий размеров.
    • Использование SVG – векторный формат изображений.
    • Адаптивные изображения на основе клиентских подсказок, которые сообщают браузерам информацию о ширине области просмотра, ширине изображения и пр.

    Отложите загрузку скрытых изображений

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

    • Использование Intersection Observer API.
    • Скрипты Lazy loading (David Walsh), BLazy, Lazy Load XT jQuery, Yall, Lazysizes.
    • Для WordPress плагины Lazy Load, a3 Lazy Load, Rocket Lazy Load.
    • Для Bitrix решение «Ленивая загрузка изображений».
    • Для Joomla плагин LLFJ Lazy Load.
    • Для MODX плагины Lazy load, Lazy image.
    • Для Opencart плагин Lazy Load Images.

    Уменьшите размер кода CSS

    Сокращение CSS может улучшить загрузку страниц вашего сайта. Для сжатия CSS вы можете использовать различные сервисы, например: cssresizer.com, csscompressor.com, css-minifier.com, а также плагины.

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

    Включите сжатие текста

    Для текстового содержимого рекомендуем использовать алгоритмы сжатия GZIP, Deflate или Brotli на вашем сервере. GZIP является наиболее распространенным, так как поддерживается большинством браузеров. На некоторых хостингах по умолчанию включено сжатие. Также можно воспользоваться плагинами по сжатию текста, которые мы перечислили в ранее упоминаемых разделах.

    Используйте предварительное подключение к необходимым доменам

    Для быстрого соединения с внешними ресурсами, указанными в коде вашего сайта (напр. Google Fonts) рекомендуется добавлять подсказки preconnect или dns-prefetch, чтобы сообщить браузеру, что загрузка должна быть установлена как можно быстрее. Примеры:

    Избегайте большого количества переадресаций

    При цепочках редиректов возникает замедление скорости загрузки страницы, так как браузеру приходится несколько раз запрашивать ресурс. В данном разделе инструмент укажет ресурсы, которые перенаправляются, также их можно найти с помощью программы Netpeak Spider, redirectdetective.com, redirect-checker.org и пр. онлайн-сервисами. Чтобы найти, где задана цепочка редиректов проверьте: .htaccess, nginx.config, PHP, HTML и JavaScript.

    Настройте предварительную загрузку ключевых запросов

    Предварительная загрузка позволяет быстрее отобразить страницу. Реализовать её можно путём добавления в тег link значение rel=»preload». Более подробно было рассмотрено выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Используйте видеоформаты для анимированного контента

    Для повышения производительности вашего сайта не рекомендуется использовать большие GIF-файлы с анимацией, лучше – использовать форматы MPEG4, WebM. Для конвертации можно воспользоваться сервисами: convertio.co, ezgif.com, onlineconvertfree.com и пр.

    Предотвратите чрезмерную нагрузку на сеть

    Чрезмерная нагрузка на сеть происходит из-за неоптимизированных ресурсов вашего сайта. Это могут быть: изображения, стили, скрипты, текст и пр. Чтобы исправить эту ошибку, рекомендуем ознакомиться с вышеописанными разделами. В целом здесь поможет сжатие и сокращение текста, HTML, JS, CSS, смена формата изображений на WebP и включение кеширования.

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

    Инструмент Google PageSpeed ​​Insights. Советы для оценки 100/100

    Главное меню » Продвижение сайта » Инструмент Google PageSpeed ​​Insights. Советы для оценки 100/100

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

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

    Топ-пост этого месяца:  Урок 1. Регистрация пользователей PHP

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

    Правда в том, что если вашему веб-сайту требуется более 2-3 секунд для загрузки, люди сразу же от него откажутся, потому что так поступают 40% людей. Следовательно, вы должны убедиться, что вы должным образом позаботились об оптимизации скорости вашего сайта.

    Что такое инструмент Google PageSpeed Insights?

    Чтобы сделать это, инструмент Google PageSpeed Insights является действительно удобным инструментом. Все новые и существующие владельцы веб-сайтов, которые либо занимаются созданием сайта, либо поддерживают его, обязательно должны использовать этот инструмент.

    Инструмент Google PageSpeed Insights анализирует внешнюю производительность вашего сайта и предлагает рекомендации по оптимизации. Предоставление вашему сайту баллов от 0 до 100 баллов; 85 баллов и выше, указывающие на хорошо работающую страницу, этот инструмент может дать вам отличное представление о производительности вашего сайта.

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

    Теперь новый обновленный тест Google PageSpeed Tool выглядит следующим образом:

    Советы по доведению вашего PageSpeed ​​Insights до 100

    Теперь давайте рассмотрим элементы, о которых вам нужно позаботиться, если вы стремитесь к этим 100/100 в тесте Google PageSpeed вашего сайта.

    1. Позаботьтесь обо всех проблемах со скоростью

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

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

    2. Уделять внимание видимому контенту

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

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

    3. Сокращение кода является обязательным

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

    Минификация имеет решающее значение, потому что она создает меньшую, но быструю для серверной версии файла. Три ресурса CSS, HTML, JavaScript требуют минимизации с помощью инструментов CSSNano, HTML Minifier, Closure compiler/Uglify JS соответственно.

    main-body <
    background: #f0f;
    color: #3f3;
    font-family: Lato,sans-serif;
    >

    Пример Minified CSS:
    main-body

    если у вас веб-сайт на WordPress, вы можете легко это исправить.

    Вы также можете использовать плагины, такие как WP Super Minify или Fast Velocity Minify.

    4. Оптимизируйте свои изображения

    Мы все знаем, что оптимизация изображений, представленных на веб-сайте, может помочь нам ускорить загрузку наших сайтов. Вы можете либо выбрать оптимизацию вручную или сжать изображения на вашем веб-сайте (но это займет целую вечность), либо вы можете просто использовать плагины оптимизации изображений для своего сайта WordPress, такие как Smust it или EWWW Image optimizer. Для других ваших веб-сайтов вы можете использовать инструменты сжатия изображений, такие как TinyPNG, Compress JPEG или другие доступные инструменты.

    5. Сжатие является ключом

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

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

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

    Возможно, на вашем веб-хостинге уже есть служба кэширования браузера. Если вы все еще хотите, вы можете получить плагин Caching для вашего сайта WordPress, такой как WP Super Cache или плагин W3 Total Cache.

    7. Снимите блокировку рендера JavaScript

    Самый важный способ улучшить скорость загрузки вашей страницы – не допустить загрузки ресурсов CSS или JS до вашего контента. Для этого вы можете просто встроить свой код CSS и JavaScript вместо использования файлов .css и .js. Избавившись от этой «блокировки рендера», вы определенно сможете повысить скорость загрузки своей страницы.

    8. Ускоренные мобильные страницы

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

    AMP – сокращение от «Ускоренные мобильные страницы». Он помогает мгновенно загружать ваши мобильные веб-страницы, избавляясь от ненужного форматирования и контента для бесперебойной работы на мобильных устройствах.

    Заключение

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

    Следуя приведенному выше руководству, вы определенно приблизитесь не только к достижению 100/100 с помощью инструмента Google PageSpeed ​​Insights, но и к увеличению трафика и коэффициентов конверсии на своем веб-сайте.

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    PageSpeed Insights: как получить 100/100 и зачем это нужно?

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

    Этот миф – замечательная иллюстрация того, что стремление к совершенству может быть самоубийственным. Увы, многие SEO-оптимизаторы страдают «синдромом Икара» – 4-5 строчки их не устраивают, ТОП-3 подавай. А если по Google Page Speed красная зона – то это вообще позор на несколько поколений вперед. Нужно выбраться по крайней мере в жёлтую – и плевать, сколько это будет стоить и какие позиции по запросам сейчас. Однако PageSpeed Insights (его еще называют Page Speed Ins >

    Что за PageSpeed такой?

    Один мой знакомый SEO-шник настолько верил в «силу» аналитических способностей PageSpeed, что отказывался вести работу над сайтом дальше, пока программисты не довели бы его до желтой зоны. Настолько его впечатлил анонс нового фактора ранжирования Google под названием «Speed Update» – скорости загрузки сайта на мобильных устройствах. Он считал, что с плохим баллом по PageSpeed чуда однозначно не случится, и доводил программистов до исступления изнуряющими ТЗ. Те же доводили владельца бизнеса до обморока кошмарными счетами за работы. В итоге этого парня уволили. Это к слову об Икаре и совершенстве.

    Но что же за капризный инструмент, которому никак не угодишь? На самом деле крайне примитивный сервис, который доступен по ссылке https://developers.google.com/speed/pagespeed/insights/. Пользоваться им просто – вставляешь URL страницы в поле и нажимаешь «Анализировать».

    Ждешь 2-3 минуты – и готово! Speed Test завершен, ты убеждаешься, что твой сайт, по мнению Google – «улитка».

    Проверить на Page Speed можно любой сайт – и это бесплатно!

    Какие рекомендации дает сервис от Гугл?

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

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

    Залипнуть можно не на один час! Я же вкратце перечислю типичные рекомендации:

      Отложить загрузку скрытых изображений. Здесь речь о технологии Lazy Loading. Использовать современные форматы изображений. Сервис советует отказаться от PNG и JPG в пользу экзотических форматов – вроде WebP. Устранить ресурсы, блокирующие отображение страницы. Речь об излишних JS и CSS. Настроить эффективную кодировку изображений. Если перевести на русский – сжать картинки. Сократить время хранения кэша. Если кэш хранится долго, то при повторном посещении страница будет загружаться медленно. Уменьшить влияние стороннего кода. То есть по максимуму выбросить различные счетчики, оставить только Analytics, который (опять же по данным PageSpeed, который в некоторых вопросам может быть – хм, хм – необъективен) почти не замедляет сайт, в отличие от «Метрики».

    PageSpeed Insights измеряет отдельно версии сайтов для мобильных и для компьютеров. И если десктопные довести хотя бы до жёлтой зоны реально, то с мобильными версиями у большинства – катастрофа.

    Оптимизация сайта по PageSpeed: что нужно делать?

    Согласитесь, задача по оптимизации кода JavaScript способна поставить в тупик как простого сайтовладельца, так и SEO-шника. Везунчиками можно считать тех, чьи сайты собраны на CMS WordPress – для этой платформы есть плагины на все случаи жизни.

    Я как раз из числа таких везунчиков, поэтому знаю плагины, с помощью которых можно массово пожать картинки и настроить Lazy-Loading. Однако их я не использую, поскольку нашёл более красивое решение – плагин Autoptimize.

    Autoptimize – настоящий бальзам на раны тех, кто устал видеть сайт в красной зоне PageSpeed. Один-единственный плагин позволяет настроить Lazy-Loading, оптимизировать JS, CSS и код HTML, конвертировать картинки в WebP и включает в себя еще много полезных «плюшек» – например, Try-Catch обертывание для исправления ошибок JS. Optimizer настраивается действительно гибко – можно, например, некоторые скрипты добавить в список исключений, чтобы программа их не жала и не объединяла с другими.

    Autoptimize эффективен. Я могу это подтвердить результатами замеров до и после активации плагина.

    ДО

    ПОСЛЕ

    Однако плагин я ставил не только ради самоуспокоения и красивой картинки. Я также хотел докопаться до истины, стоит ли обращать внимание на PageSpeed или это пузомерка-«пустышка». Поэтому я поставил простой эксперимент.

    Влияет ли скорость по PageSpeed на позиции?

    Суть эксперимента заключалась в том, чтобы замерить позиции по группе ключевых слов и трафик сайта до и после оптимизации по рекомендациям Google PageSpeed. Конечно, я понимаю, что такая проверка не является идеальной, поскольку рост позиций (и, как следствие, трафика) может быть вызван апдейтом поисковой системы либо, скажем, обновлением информации о поведенческих факторах. Но это все же лучше, чем заявлять о бесполезности RageSpeed Insights совершенно голословно, как делается на большинстве тематических порталов.

    Активировал плагин Autoptimize 04.10.2020 года. Снял позиции спустя неделю – 11.10.2020 года. Посчитал, что недели достаточно, чтобы ПС заметили «ускорение» моего сайта. Позиции снимал бесплатным инструментом BE1, трафик смотрел в «Метрике».

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

    Страница 1 11.окт 04.окт Динамика
    оценка сайта 16 17 1
    оценить сайт 14 14
    оценка сайта онлайн 15 19 4
    оценить стоимость сайта 13 13
    оценить сайт онлайн 18 17 -1
    узнать стоимость сайта онлайн 13 14 1
    узнать стоимость сайта 11 12 1
    стоимость сайта оценить онлайн 13 12 -1
    Страница 2
    сеоспринт отзывы 22 25 3
    seosprint отзывы развод или нет 12 15 3
    сеоспринт отзывы о заработке 20 20
    seo sprint ru заработок отзывы 20 23 3
    seosprint net отзывы развод или нет 14 15 1
    seosprint net отзывы 20 19 -1
    seosprint отзывы развод или нет 2020 15 10 -5
    seo sprint ru заработок отзывы 2020 14 10 -4
    сеоспринт отзывы о заработке 2020 15 14 -1
    Страница 3
    режим инкогнито в хроме 6 10 4
    режим инкогнито в гугл хром 7 10 3
    режим инкогнито chrome 5 10 5
    google chrome режим инкогнито 9 18 9
    режим инкогнито в хроме горячие клавиши 2 4 2
    как в хроме включить режим инкогнито 4 7 3
    режим инкогнито в гугл хром как включить 5 8 3
    режим инкогнито гугл 12 16 4
    Страница 4
    режим инкогнито в яндекс браузере 23 22 -1
    как отключить режим инкогнито в яндексе 20 20
    режим инкогнито в яндекс на телефоне 28 48 20
    режим инкогнито в яндекс на телефоне андроид 36 32 -4
    режим инкогнито в яндекс браузере на мобильном 44 25 -19
    режим инкогнито в яндекс 19 20 1
    как включить режим инкогнито в яндекс 20 20
    как сделать режим инкогнито в яндекс 16 23 7
    как открыть режим инкогнито в яндекс браузере 19 16 -3
    как перейти в режим инкогнито в яндексе 17 19 2
    режим инкогнито в яндекс браузере клавиши 9 16 7
    Всего запросов 36
    Общий рост позиций 47
    Сколько запросов выросло 21
    Сколько запросов упало 10
    Запросов вошло в Топ-10 2
    Запросов выпало из Топ-10
    Запросов вошло в Топ-5 3
    Запросов выпало из Топ-5

    Если коротко – чуда не произошло. Из сводки видно, что в целом позиции улучшились, «подросших» запросов вдвое больше, чем «упавших».

    Здесь бы и возликовать, но есть два «но»: во-первых, рост позиций неоправданно мал, во-вторых, если посмотреть на детализированный отчет, то можно увидеть – позиции выросли, по сути, только у одного из 4-х кластеров, а у остальных +/-1. Если бы рост позиций был обусловлен увеличением скорости работы сайта по PageSpeed, он был бы общим для всех запросов, а не избирательным.

    Давайте посмотрим, как изменился органический трафик в разрезе двух поисковых систем. В «Яндексе» резко полетел наверх. До оптимизации трафик по будням был в районе 160-180 посетителей. После оптимизации держался строго выше 200, а в среду и четверг превзошел отметку 250.

    А вот с Google все куда хуже. Можно даже говорить, что трафик по Гуглу немного просел:

    Мне показалось по меньшей мере странным, что после оптимизации по рекомендациям инструмента Google у меня вырос трафик из «Яндекс», а сам Google на все мои потуги смотрел, равнодушно лузгая семечки.

    Топ-пост этого месяца:  NetBeans командная строка пошаговый пример использования

    Так для чего действительно нужен PageSpeed?

    Результаты – а точнее, отсутствие их – оказались для меня большим разочарованием. Рассчитывал, что после оптимизации все запросы мигом залетят в Топ-5, но подобным и не пахнет. Хорошо еще, что обошелся бесплатным плагином – представляю досаду тех, кто за «зеленую зону» PageSpeed платит «зеленые» программистам.

    Но что тогда толку от этого Пэйдж Спид?

    Кокшаров (aka Девака), Трудов и другие известные SEO-шники сходятся во мнении:

    Гнаться за «соткой» по PageSpeed – бессмысленная затея!

    Дело в специфике работы сервиса, которую, как считают перечисленные специалисты, большинство оптимизаторов неправильно понимает. PageSpeed не годится для сравнительного анализа страниц разных сайтов. Страница с оценкой 3 по «Пейдж Спид» может фактически загружаться быстрее, чем страница с оценкой 80. И ПС будет смотреть именно на фактическое время, а не на оценку сервиса.

    PageSpeed сравнивает страницу с её идеальной версией. И выявляет резервы.

    Страница с оценками по PageSpeed 3 (мобильная) / 30 (десктопная) совершенно спокойно может находиться в Топ-3 по высокочастотным запросам – я убедился в этом на личном опыте. Вы тоже можете поэкспериментировать и проверить страницы сайтов в Топе – наверняка увидите, что у лидеров с PageSpeed все отнюдь не гладко.

    Подводим итоги

    Вместо криков ликования – сплошное разочарование! Оптимизация по PageSpeed не дала существенных результатов для моего сайта. Как я эти результаты замерил:

      Снял изначальные позиции по запросам из небольшого семантического ядра. Установил и активировал бесплатный плагин Autoptimize, который значительно повысил показатели сайта по Page Speed. Снял позиции спустя 7 дней после оптимизации скорости и сравнил с изначальными. Проанализировал динамику трафика через «Яндекс.Метрику» в разрезе 2-х ПС.

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

    А ты заморачиваешься с Google PageSpeed? Или смотришь на его рекомендации сквозь пальцы? Расскажи, что думаешь об этом инструменте!

    8 лучших инструментов для проверки скорости загрузки сайта

    03.07.2020 Время прочтения: 6 минут

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

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

    Короткий перечень сервисов без подробностей:

    Дальше — разбираем особенности каждого из этих инструментов.

    Google PageSpeed Insights — официальный инструмент от Гугл для проверки скорости загрузки сайта. Один из самых используемых среди веб-мастеров и SEO-оптимизаторов.

    В 2020 году этот сервис глобально обновился. Новый интерфейс выглядит так:

    Возможности и функции сервиса также изменились.

      Повысились планки метрик: быстрой веб-площадкой теперь может считаться та, которая получает показатель от 90 до 100 баллов. Раньше для максимальной оценки достаточно было 80.

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

  • Появился отчет «Данные наблюдений»: он будет доступен, если по сайту достаточно статистических данных. Похожий отчет в этом сервисе был и раньше, от него осталась одна из характеристик по источнику — «Первая отрисовка контента», которая оценивает время до того момента, когда на экране пользователя появляется контент страницы. Новая метрика здесь — «Первая задержка ввода»: она отображает время между первым взаимодействием пользователя с веб-ресурсом и ответом страницы на это действие.
  • Новый раздел «Имитация загрузки страницы»: сервис имитирует загрузку страницы в условиях 3G и оценивает ряд параметров. Эти параметры принципиально меняют оценку сайта:

    • время загрузки первого контента — когда браузер начал отображать первый элемент на странице;
    • индекс скорости загрузки — время, по истечении которого весь контент страницы становится доступен для просмотра;
    • время загрузки для взаимодействия — за какое время страница полностью прогружается для взаимодействия пользователя;
    • время загрузки достаточной части контента — когда становится виден основное содержимое сайта;
    • время окончания работы ЦП (центрального процессора) — показатель серверных настроек: время, за которое основной поток страницы разгружен, чтобы обрабатывать пользовательские команды ручного ввода;
    • максимальная потенциальная задержка FID — период в миллисекундах, который занимает ответ страницы на действия пользователя.

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

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

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

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

    Сервис оценивает скорость загрузки в миллисекундах и дает общие рекомендации.

    С помощью Pingdom можно анализировать время работы веб-ресурса, производительность и взаимодействие с пользователями.

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

    Проверять ресурс можно, имитируя обращения к серверу из разных стран (Япония, Германия, Великобритания, США, Австралия и Бразилия).

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

    Тестовый запрос производится из канадского Ванкувера.

    Фишки сервиса: хранит историю (можно сравнить, что стало лучше или хуже) и включает в себя анализ Google PageSpeed Insights и YSlow. Предлагает соответствующие рекомендации по разным типам ошибок (редиректы, оптимизация изображений, использование JavaScript и HTML и другие).

    Есть платная версия с бо́льшим количеством функций и расширений.

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

    Так же, как и Gtmetrix, показывает в том числе оценку от Google PageSpeed Insights:

    Анализирует содержимое веб-ресурса и отображает сведения в виде графиков и таблиц:

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

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

    В платных версиях в инструменте можно задавать до 60 адресов для сравнительного анализа и проверки внутренних страниц (коды ответов сервера, скорость загрузки каждой страницы, метатеги).

    Как и в случае с Uptrends, при начальной настройке Web Page Test можно выбрать геолокацию, браузер и девайс для имитации запроса.

    Сервис проводит три теста и сравнивает число обращений. Так выявляются ошибки в организации кэширования, собираются данные по каждой загрузке:

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

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

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

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

    Завершает хит-парад хардкорный Load Impact — один из самых требовательных сервисов проверки скорости загрузки веб-ресурса. Тест этого сервиса по сути проводится по принципу DDOS-атаки. На сайт производится симуляция больше сотни активных соединений и несколько десятков обращений от пользователей.

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

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

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

    Проверка скорости загрузки сайта в Google Page Speed

    Чем он может быть полезен? Давайте разберёмся.

    Скорость загрузки страниц принято мерять в миллисекундах. В процессе проведения исследований специалисты Amazon посчитали, что продажи снижаются на 1% вследствие падения скорости загрузки страниц на 100 мс.

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

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

    В свое время Google представил сервис Page Speed – официальный инструмент для измерения скорости сайтов. Подобных сервисов немало, но по понятной причине веб-мастера предпочитают ориентироваться на рекомендации поисковика, в котором им предстоит продвигать свои проекты.

    Как пользоваться Page Speed?

    Для получения сводки и рекомендаций по оптимизации любого сайта достаточно перейти на страницу Page Speed Insights (PSI) и ввести в единственное поле интересующий домен. Запуск процесса, минута ожидания, и вы получаете целую гору полезной информации.

    Результат тестирования делится на 2 группы показателей – для обычной и мобильной версии. Для каждой из них система покажет набранное количество баллов, исходя из всех задержек и обнаруженных проблем. Максимум можно набрать 100 попугаев. Отличным результатом считается показатель от 80. Свыше 90 – шикарным.

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

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

    Полученные результаты система под капотом сравнивает с другими сайтами, которые находятся в базе. Если ваши пузомерки окажутся выше 98% других сайтов, но вы получите 100 баллов. Если лучше 75% — то всего лишь 50. То есть характеристика относительная, конкурирующая. Чем больше быстрых сайтов в системе, тем ниже по отношению к ним будут показатели какого-то условного ресурса, если его не оптимизировать постоянно.

    Другими словами, на показатели PSI можно и нужно ориентироваться. Они дают представление о скоростных параметрах, влияющих на отношение и самого поисковика, и пользователей к ресурсу. Игнорировать их нельзя. Но и расстраиваться не стоит, увидев результат ниже 100 баллов, — всё представлено в сравнении, а не натуральной величиной в вакууме.

    Самое ценное, что даёт Page Speed – это рекомендации по увеличению производительности. Статистика даёт советы с короткой расшифровкой в действиях и показывает приблизительную экономию времени загрузки в миллисекундах. Список рекомендаций может быть очень длинным. Говоря по-честному, понимать это всё может только опытный веб-мастер. Но и для новичков есть понятные советы – сжать картинки (напр. TinyPNG), изменить формат чего-то, снизить количество переадресаций, убрать избыточные виджеты и т. д.

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

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

    Выводы и рекомендации

    Google Page Speed – крайне полезный инструмент веб-мастера. Своего рода бенчмарк скорости работы сайтов от главной поисковой системы мира. На него ориентируются все в большей или меньшей степени.

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

    Имитация загрузки страниц в PSI происходит с помощью Lighthouse – опенсорсного программного комплекса для оценки качества сайтов. Всё вышеописанное бесплатно.

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

    Повышение результатов PageSpeed Insights

    Настройки сервера

    1. Переведите сайт на PHP 7, по сравнению с PHP 5 работает гораздо быстрей, сокращается время отклика сервера.

    2. Включите кеш и gzip в .httacess:

    Сжатие HTML кода не дает особых результатов, но сделать можно.

    Из-за удаления пробелов и переносов строк может поехать вёрстка.

    Весь код нужно сжать, есть много сервисов, например https://snipp.ru/tools/css-compress

    Далее возможны три варианта оптимизации CSS стилей:

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

    2. Соединить все файлы CSS в один и подключить в .

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

    Также нужно исключить инлайновые стили у тегов и включения внутри .

    2. Вынести подключение скриптов из .

    3. Сделать задержку инициализации галерей и других плагинов.

    Также повышает скорость использование библиотек из CDN Яндекс, Google.

    Preload

    Добавит пару балов «предзагрузка» ресурсов.

    Изображения

    1. По возможности перевести изображение в вектор (svg).

    2. Сожмите png и jpg программами PNGGauntlet, FileOptimizer или TinyPNG.

    3. Гугл предлагает форматы JPEG 2000, JPEG XR и WebP – очень сомнительно, первые два поддерживаются единицами, WebP не откроются в Safari (iOS) и много где еще, что критично.

    Счетчики и виджеты

    Яндекс.Метрика, Google Analytics, консультанты отнимают до 20 балов и с ними ни чего не сделать, но можно скрыть их от теста, проверяя $_SERVER[‘HTTP_USER_AGENT’] .

    PageSpeed Insights использует следующие user-agent:

  • Добавить комментарий