Анализ скорости сайта google

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

1. Google PageSpeed Insights

Инструмент Google PageSpeed Insights

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

2. Pingdom Tools

Проверка скорости с помощью сервиса Pingdom Tool

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

3. WhichLoadFaster


Which Load Faster - Сравнение двух сайтов по скорости

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

4. Web Page Performance Test

Подробная статистика по Web Page Performance Test

Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США).

5. GTmetrix


GTmetrix - сводная статистика по скорости и история

Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).

6. Load Impact

Load Impact - легкий ДДОС для теста сайта

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

7. Monitis Tools

Monitis Tools - проверка скорости загрузки с разных участков Земли

Анализирует загрузку сайта с разных участков Земли — серверы в США, Европе и Азии. Отображает сводную статистику по каждому тесту.

8. SiteSpeed.me


SiteSpeed.me - с каких географических участков скорость наилучшая или наихудшая

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

9. PR-CY

PR CY - массовая проверка скорости загрузки сайтов

Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.

devaka.ru

Chrome User Experience Report

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

  • First Paint и First Contentful Paint.
  • First Meaningful Paint (FMP) и Hero Element Timing.
  • Time to Interactive.
  • Long Tasks.

Эти метрики показывают этапы загрузки сайта (кроме Long Tasks). Нужны, чтобы лучше понимать, как загружается страница. Этапы выглядят так:

Как загружается сайт по этапам

Про остальные метрики вы можете прочитать на сайте Google – «Chrome User Experience Report». Учтите, что материал на английском.

Теперь перейдём к первому ключевому этапу загрузки страницы.

First Paint и First Contentful Paint

First Paint (FP) – это время до начала прорисовки и появления контента. Первый ключевой момент, на который следует обращать внимание.

First Contentful Paint (FCP) – показывает время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице.

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

Для отслеживания FP / FCP понадобится аккаунт в Google Analytics. Используя данные Google Analytics, нужно добавить в код сайта следующее:

<head>  <!-- Add the async Google Analytics snippet first.    
> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <!-- Register the PerformanceObserver to track paint timing. --> <script> const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // `name` will be either 'first-paint' or 'first-contentful-paint'. const metricName = entry.name; const time = Math.round(entry.startTime + entry.duration); ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: metricName, eventValue: time, nonInteraction: true, }); } }); observer.observe({entryTypes: ['paint']}); </script> <!-- Include any stylesheets after creating the PerformanceObserver. --> <link rel="stylesheet" href="..."> </head>

Таким образом вы сможете отслеживать скорость загрузки FP и FCP.

Для оптимизации FP/FCP попробуйте уменьшить время до отображения первого контента, удалив из <head> документа любые скрипты или стили, которые могут препятствовать отображению. Выберите минимальный набор стилей <head>, чтобы пользователь видел, что сайт начал загружаться.

First Meaningful Paint (FMP) и Hero Element Timing

First Meaningful Paint (FMP) и Hero Element Timing – это время загрузки наиболее важной части страницы.


Элемент, который должен грузиться в первую очередь, ещё называют «hero element». Чтобы понимать, что на странице должно быть «hero element», ответьте себе на вопрос «Полезна ли эта часть?». Само понятие «полезности» весьма специфично, но определить элемент легко – это наиболее полезная пользователю область страницы. Она и должна грузиться в первую очередь. Пример таких областей:

Пример областей «hero element»

В YouTube основной «hero elements» – видео – будет наиболее важной частью страницы. В Twitter, вероятнее всего, это будут значки уведомлений и первый твит. В приложении для прогноза погоды – область с прогнозом погоды. На новостном сайте – вероятнее, область с основным сюжетом и картинкой анонса.

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

Отслеживать FMP и «hero elements» сложно, так как нет стандарта для определения FMP. Учитывая, что все страницы Вашего сайта могут быть разными, то и «hero elements» на них могут отличаться. Лучше всего смотреть в контексте одной страницы. Тогда FMP будет моментом, когда «hero elements» лучше всего видны на экране.


Как определить эту метрику, Google рекомендует прочесть в статье Стива Сандерса: «User Timing and Custom Metrics». Материал на английском, но если он Вас заинтересует, пишите в комментариях – мы сделаем перевод этой статьи.

Для оптимизации FMP выберите наиболее важные элементы страницы и убедитесь, что исходная загрузка скрипта содержит только тот код, который необходим для отображения «hero elements». Любой код, не связанный с вашим «hero elements», но содержащийся в исходном JavaScript, замедлит время загрузки. Не нужно принуждать пользователя ждать, а его устройство – анализировать код JavaScript, который ему сразу не нужен.

Time to Interactive

Time to Interactive (TTI) – время загрузки элементов взаимодействия, которые будут надёжно реагировать на действия пользователя.

Также очень важная метрика. Позволяет понять, как быстро пользователь сможет взаимодействовать с сайтом. Представьте, что вы вводите запрос в Google на телефоне, нажимаете «поиск», но ничего не происходит, а загрузка началась только после 6 нажатия на кнопку «поиск». Время, которое прошло, чтобы кнопка среагировала на нажатие, и будет TTI.

Отслеживать TTI нам снова поможет Google Analytics. В этот раз используем следующий код:

import ttiPolyfill from './path/to/tti-polyfill.js';    ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {  ga('send', 'event', {  eventCategory: 'Performance Metrics',  eventAction: 'TTI',  eventValue: tti,  nonInteraction: true,  });  });  

Подробная инструкция по его установке и использованию – «Time to Interactive Polyfill».


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

Long Tasks

Long Tasks – это задачи (скрипты), на выполнение которых уходит более 50 миллисекунд. Исходя из рекомендаций RAIL, они воспринимаются как долгие.

Нужно стараться упрощать Long Tasks. Так как скрипты грузятся поочерёдно, в случаях, когда выполнение одного скрипта занимает много времени, он блокирует загрузку других скриптов в очереди. Пользователь может принять это за лаг, что портит впечатление о сайте.

Пример Long Tasks

Для отслеживания Long Tasks нужно создать новый PerformanceObserver:

const observer = new PerformanceObserver((list) => {  for (const entry of list.getEntries()) {  ga('send', 'event', {  eventCategory: 'Performance Metrics',  eventAction: 'longtask',  eventValue: Math.round(entry.startTime + entry.duration),  eventLabel: JSON.stringify(entry.attribution),  });  }  });    observer.observe({entryTypes: ['longtask']});  

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

Рекомендую к ознакомлению руководство на английском языке: «User-centric Performance Metrics».

Также есть видео на английском:

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

Сервис Google Developers PageSpeed Insights

Google Developers PageSpeed Insights

Сервис PageSpeed Insights довольно популярный у SEO-специалистов и веб-мастеров. Я уже писал о нём в статье: «Как провести анализ сайтов конкурентов? 7 видов анализа». С момента её написания прошло немного больше месяца, но сервис решили обновить перед выходом «Speed Update». Несколько недель назад в него добавили новый отчёт, который показывает общие данные о скорости загрузки всех страниц.

Для получения данных в поле ввода нужно ввести следующую конструкцию:

origin:https://www.site.ru/

Рассмотрим на примере сайта группы «Metallica»: https://www.metallica.com/.


Скриншот обычной проверки в Google PageSpeed Insights сайта https://www.metallica.com/

Так выглядит обычный отчёт после проверки сайта в PageSpeed Insights.

Теперь используем новую конструкцию:

Скриншот проверки в Google PageSpeed Insights конструкции origin:https://www.metallica.com/

На втором скриншоте мы видим сводный отчёт. Кроме того, в обоих отчётах данные о событиях первой отрисовки контента – это метрика FCP.

Несмотря на то, что Google рекомендует этот сервис для оценки производительности страниц, стоить помнить, что PageSpeed Insights показывает базовую информацию вроде: «Оптимизировать изображения» или «Использовать кеш браузера». Для более детального отчёта лучше использовать сервис Lighthouse.

Lighthouse

Lighthouse

Lighthouse – это автоматизированный сервис с открытым исходным кодом, который используется для проверки и анализа страниц. Рассмотрим, как его использовать.

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

Для его использования потребуется браузер Chrome и плагин Lighthouse. После установки плагина открываем интересующий сайт, нажимаем на иконку маяка около адресной строки и на Generate report.

Запускаем Lighthouse

Так как проверяется больше метрик, анализ займёт больше времени, чем в случае с PageSpeed Insights.

Отчет проверки сайта https://www.metallica.com/ сервисом Lighthouse

В результате получаем несколько отчётов:

  • Performance.
  • Progressive Web App.
  • Accessibility.
  • Best Practices.
  • SEO.

Каждый из этих отчётов содержит информацию о том, что на сайте сделано хорошо, а что нужно исправить.

Например, отчёт о производительности (Performance) содержит данные об интересующих нас метриках: FCP, TTI, FMP.

Отчет проверки сайта https://www.metallica.com/ сервисом Lighthouse с метриками FCP, TTI, FMP

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

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

Запуск Lighthouse Audit на сайте http://www.webpagetest.org/

Отчёт в нём выглядит так:

Отчёт Lighthouse Audit в http://www.webpagetest.org/

Мне удобнее проводить анализ через плагин, не нужно ждать очереди на проверку в WebPagetest.

И ещё один сервис анализа Google, но уже от меня.

Compare your mobile site speed

Сервис Compare your mobile site speed позволяет сделать сравнение скорости загрузки нескольких мобильных версий сайтов (ограничение в 10 доменов). Вот так это выглядит на практике:

Результат сравнения скорости загрузки Big Four через Compare your mobile site speed

Сервис позволяет указать регион и тип сети: 3G или 4G. Подойдёт для быстрого базового анализа вашего сайта и сайтов конкурентов.

siteclinic.ru

Google Analytics

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

  1. Скорость загрузки ресурса, вычисляемая для определенной выборки просмотров страниц. С помощью данной выборки можно проанализировать, как изменяется скорость загрузки веб-страниц в зависимости от местоположения пользователей, операционной системы, браузера, разрешения дисплея и целого ряда иных параметров.
  2. Быстрота выполнения/загрузки для единичного запроса или действия. Например, можно определить скорость загрузки графического элемента (изображения, GIF-файла и т.п.) или время отклика на нажатие кнопки.
  3. Эффективность обработки документа на сайте и скорость предоставления этого файла пользователю.

Какие же действия необходимо выполнить для использования функционала Google Analytics?

  1. Необходимо завести аккаунт Google и авторизоваться в системе.
  2. Перейти по адресу www.analytics.google.com.
  3. Создать учетную запись для сайта, если ее нет.
  4. Выбрать соответствующее представление.
  1. Во вкладке “Отчеты” кликнуть по пункту “Поведение”.
  1. Жмем по ссылке “Скорость загрузки сайта”.

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

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

Вкладкой ниже в подпункте “Ускорение загрузки” приведен перечень страниц с предложениями по оптимизации данных страниц посредством сервиса PageSpeed Insights. Также в предлагаемой таблице есть показатель “Уровень скорости загрузки страниц”, который показывает, насколько можно повысить скорость загрузки той или иной страницы. Чем меньше этот показатель, тем больших результатов в повышении скорости загрузки страницы можно добиться.

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

PageSpeed Insights

Данный онлайн-сервис отображает эффективность выполнения запросов для мобильных устройств и обычных ПК. Результаты проверки сайта отображаются в баллах, а не в секундах. Оценка в 85+ баллов, обычно указывает на то, что сайт функционирует отлично и в ускорении не нуждается, а вот более низкие оценки говорят о необходимости оптимизации.

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

PageSpeed Insights отображает следующие результаты:

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

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

Результат отображается с помощью индикаторов, которые представлены в трех цветах:

  • красный – выполнение рекомендаций приведет к изрядному повышению скорости загрузки;
  • желтый – простые исправления улучшат работу ресурса;
  • зелёный – проблем нет или они практически не отражаются на эффективности работы сайта.

Проверить реакцию любой интернет-страницы можно, перейдя по ссылке www.developers.google.com/speed/pagespeed/insights/. В строку поиска вставляем интересующий URL и жмем “Анализировать”.

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

Для каждого пункта присутствует подробное руководство по устранению выявленных ошибок с указанием проблемных файлов и элементов ресурса. Необходимо только нажать на соответствующий текст “Как исправить”.

Консоль разработчика Google Chrome

Проверить скорость загрузки сайта можно также при помощи браузера Google Chrome и консоли отладчика. Для того чтобы выполнить проверку, зайдите на интересующий вас сайт и нажмите клавишу F12. После этого откроется окно разработчика – перейдите на вкладку “Network” и обновите страницу с помощью нажатия клавиши F5. По мере загрузки страницы можно будет увидеть перечень прогружаемых файлов (изображений, скриптов и т.п.), а также количество времени, которое потребовалось на загрузку того или иного элемента.

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

GTmetrix

С помощью зарубежного сайта GTmetrix можно проанализировать скорость страниц через Google PageSpeed и YSlow. Для проверки используется единый сервер, расположенный в Ванкувере. Эксплуатация ресурса аналогична: вставляем адрес и жмем “Analyze”.

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

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

Для продвинутых пользователей пригодится вкладка “Waterfall”, на которой отображаются все файлы, найденные на странице и скорость их загрузки. Интерфейс вкладки весьма похож на интерфейс консоли разработчика в Google Chrome или инструмент Firebug Net Panel для Mozilla Firefox.

Кнопка “Download PDF” скачает на ПК отчет по сайту в формате PDF. Результаты тестирования можно сохранить, что дает возможность сравнить их с итогами тестов после внедрения исправлений.

WebPage Analyzer

Процесс проверки с помощью WebPage Analyzer является практически аналогичным предыдущим онлайн-сервисам – вставляем URL-адрес веб-ресурса и жмем кнопку “Отправить”:

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

Исходя из этого скрипт предоставляет объекты страницы и их параметры, а также содержит поле комментариев:

После данной таблицы находятся подробные характеристики и рекомендации по исправлению ошибок:

Pingdom

Предлагает простой тест скорости загрузки страницы с возможностью изменения места расположения сервера (Австралия, США, Швеция).

Открываем адрес https://tools.pingdom.com/, вставляем ссылку на интересующий сайт, определяемся с сервером и кликаем “Start test”.

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

Ниже в сводной таблице проверки отображаются данные по каждому запросу к серверу (java-скрипты, различные стили, медиафайлы и т. п.).

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

WebPagetest

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

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

Что же необходимо, чтобы проверить скорость ответа сайта?

  1. Для быстрой проверки кликаем по ссылке http://www.webpagetest.org и активируем вкладку “Simple Testing”.
  2. Вставляем адрес ресурса в текстовую форму, указываем скорость соединения (мобильный интернет, 3G, высокоскоростное подключение) и жмем “Start test”.

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

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

Load Impact

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

Вставляем адрес ресурса и кликаем “Run free test”:

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

WhichLoadFaster

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

После вставки ссылок на интересующие ресурсы и щелчка по пиктограмме “GO” начнется загрузка сайтов, а результаты проверки будут в реальном времени визуализироваться на экране, разделенном надвое:

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

Monitis Tools

Анализирует посещение URL с серверов, расположенных по всему земному шару, показывая информацию о каждом соединении. Алгоритм проверки выглядит аналогично другим похожим сервисам – необходимо просто вставить URL и нажать кнопку “Start test”:

Это один из немногих сервисов, разгружающих себя от роботов благодаря использованию сервиса капчи для запуска теста. По окончанию проверки на экране отобразится отчет, где красным цветом на временной линии отображаются файлы, отрицательно влияющие на показатель скорости загрузки сайта. Испытать сервис можно по ссылке: http://www.monitis.com/pageload/.

Проверка осуществляется с помощью трех различных местоположений серверов – США (United States), Европа (Europe), Азия (Asia/Pacific).

PR-CY

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

Вставляем ссылку в форму по URL http://pr-cy.ru/speed_test/ и кликаем “Анализировать”.

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

Seo28

Отечественный сервис Seo28 после теста отобразит сведения о времени генерации и загрузки страницы со скриптами и стилями, ее размере и выставит общую оценку скорости сайта. Рекомендации по увеличению скорости загрузки не предоставляются.

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

Выводы

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

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


Будем признательны за каждый лайк:

« Older Article

apollon.guru

Google PageSpeed Insights — проверка скорости загрузки страницы сайта

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

Для анализа сайта перейдите по ссылке — https://developers.google.com/speed/pagespeed/insights/

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

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

Рекомендации обычно у всех стандартные:

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

  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

  • Используйте кеш браузера

  • Сократите CSS

  • Оптимизируйте изображения — это обычно сильно повышает показатель по PageSpeed Insights

  • Сократите JavaScript

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

Скорость загрузки сайта - Google PageSpeed Insights

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

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

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

Сервисы для анализа скорости загрузки сайта

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

  • GTmetrix
  • WhichLoadFaster
  • Pingdom Tools
  • Web Page Performance Test
  • Monitis Tools
  • SiteSpeed.me
  • Load Impact
  • WebPage Analyzer

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

Как улучшить скорость загрузки страниц сайта

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

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

Проверьте, а не весят ли картинки сайта на слайдере главной страницы или в других блоках по несколько мегабайт — и такое бывает!

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

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

Во-первых подгоняю размер изображения под нужный мне на сайте. Нет смысла в картинке 2000 пикселей по ширине, если она будет сжата на сайте до 800 пикселей.

Также обратите внимание на разрешение изображения. Если фото напрямую с фотоаппарата, то этот показатель скорее всего 300 dpi и можно смело его уменьшать до 72 dpi — этого более чем достаточно для сайта.

В фотошопе я сохраняю картинку в режиме «Сохранить для Web» — это также плюс оптимизации изображения.

Сокращение время ответа сервера

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

Даже если Вы смотрите в сторону смены хостинга, выбирайте тот, что хотя бы работает на SSD дисках — это уже большой плюс к скорости будет. Я сначала для клиента, а затем и сам перебрался на fornex.com

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

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

Используйте кэширования страниц сайта

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

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

Если Ваш сайт сделан на wordpress, то наилучшим решением будет плагин WP Fastest Cache, но будьте осторожны — плагин может конфликтовать с некоторыми скриптами. Например, недавно начал сильно тупить слайдер на сайте клиента, оказалось что именно данный плагин перестарался с кэшированием. Но в целом такие случаи единицы и можете попробовать на своем проекте.

На этом пожалуй все. Быстрых сайтов всем моим читателям!

Поделитесь статьей с друзьями

alexbrush.com

Page Speed Online

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

Pingdom Tools

Анализ скорости сайта google

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

Whichloadsfaster

Анализ скорости сайта google

Интересный сервис, основная цель которого — «столкнуть лбами» два сайта. Штуки веселая, можно сравнить скорость своего сайта с конкурентами или просто известными сайтами. Я вот увидел, что по общей оценке, мой сайт на 36% медленнее Хабра, но по скорости отклика — на 11% быстрее. Вот такая забавная статистика.

Webpagetest

Анализ скорости сайта google

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

Websiteoptimization

Анализ скорости сайта google

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

Showslow

Анализ скорости сайта google

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

Site-Perf

Анализ скорости сайта google

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

Loadimpact

Анализ скорости сайта google

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

Octagate

Анализ скорости сайта google

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

BrowserMob

Анализ скорости сайта google

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

Для интересующихся тиЦем и прочими SEO штуками  — обмен ссылками ЯК, от автора блога WebArb.com. Рекомендую, тема хорошая.

Удачного дня

gering111.com

Правда о важности оценки Google PageSpeed

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

Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.

Исследования Google

Давайте рассмотрим некоторые недавние исследования: согласно Google среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.

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

  •  При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
  •  От 1 до 5 секунд до 90%
  •  От 1 до 10 секунд вероятность отказа уже 123%
  • Не трудно догадаться, какое количество посетителей мы теряем.

Скорость страниц будет важным фактором для ранжирования

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

А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.

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

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

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

  •  1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
  •  2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
  •  3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
  •  4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
  •  5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.

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

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

page-speed.ru

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

page speed loading google

Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?

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

Стартовые показатели подопытного сайта — 87/100.

В итоге, после применения определенных манипуляций, было получено следующие результаты:

100/100 page speed

О том, как удалось достичь таких показателей, читайте далее.

 

Как ускорить загрузку страниц?

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

Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).

Итак, приступим:

Шаг № 1: Оптимизация изображений

оптимизация изображений

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

  • Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
  • Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.

Загрузка оптимизированных изображений

Шаг № 2: Минимизация JavaScript, CSS и HTML 

В примере, Google предлагает сократить объемы JavaScript и CSS файлов.

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

сократить размеры java script, css

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.

Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание». 

Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

В случае использования WordPress, рекомендуется устанавливать плагин Autoptimize.

Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool. 

Вот результаты, полученные после минимизации JavaScript и CSS:

результаты минимазации javascript и css

Шаг № 3: Использование кэш браузера

Использование кэш браузера

Для многих веб-мастеров этап использования кэширования браузера является самым сложным.

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.

Вот визуализация того, как работает CDN:

CDN

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

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

кэширование браузера скриншот

Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.

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

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

Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.

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

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

скриншот из Pingdom Tools

Шаг № 4: Удаление блокирующих кодов

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

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

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

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force JavaScript» и установите ее на «Inline all CSS».

Шаг № 5: Включение сжатия

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

Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-  

Шаг № 6: Оптимизация мобильного формата

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

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите: 

меню (гамбургер) настроек и управления браузером

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

uaweb.ua


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Adblock
detector