Тест скорости гугл

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

 

Ссылка на ресурс:

https://developers.google.com/speed/pagespeed/insights/

 

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

Проверить скорость работы сайта, google developers pagespeed insights

 

 

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

 

Optimize images

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

 

Enable Compression

Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.

 

Leverage browser caching

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

 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.

Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>

Minify CSS

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

 

Minify HTML

Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.

 

Avoid landing page redirects

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

 

Prioritize visible content

В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.

server-gu.ru

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

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

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

Шаг #1: Оптимизируем изображения

lhyAb0mKmp5aPP8XkyMlLhHHTKbMURRWciyzWOeM

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

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

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

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

Шаг #2: Максимально сократите CSS и JavaScript код

Jx0tpLCXrENgH1FJ-rGL_t0lA1IzMZ_KATNuSJiw

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

3TaxMR3WaJjlByzESo6hO1FT65ZWD8BUfExWGpH1

может быть сокращен до:

Cf02oz7-5rKEFmSUJB4SrKaDDfhMocAVgKbQoRUZ

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

А для сайтов на WordPress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

_T-5CIADwmap_A8EoAvgUm07z6qXX17q9rcVHn3j

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

CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

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

-QtxReg-QXJ4wGEz_8J1BydkLAMzsPvIy_HBbdqt

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

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

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

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

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

yg-2HcJJmFYRkXmeaDXOHJpdPLH1NDPd75qFiylQ

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

Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

_vBJHGRwaF9MI8M2fxdvbgaexSLSfwXbzO5bSkDR

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

vYDPyti8-3XD9RH89CIyZWLZL5RHMpW8LAND_9Mp

Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.

Заключение

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

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

  1. Используйте сеть CDN (content delivery network).
  2. Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
  3. Оптимизируйте размер изображений и сожмите их.

Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?

(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)

spark.ru

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

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

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

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

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

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

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

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

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

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

Javascript

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

CSS

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

  • Надлежащие имена файлов CSS;
  • Уменьшение количества файлов CSS;
  • Использование меньшего объема кода CSS в целом.

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

Минимизация ресурсов

Минимизация ресурсов означает удаление из HTML, JavaScript и CSS кода символов, которые не требуются для загрузки. Таких как:

  • Пробелы;
  • Символы новой строки;
  • Комментарии;
  • Разделители блоков.

Это увеличивает скорость сайта, поскольку уменьшает объем кода, который должен быть запрошен с сервера. Чтобы удалить все ненужные символы, можно использовать такие инструменты, как Dan’s CSS и Javascript Minify. Если вы работаете с WordPress, можно использовать плагин Autoptimize, который минимизирует HTML, JavaScript и CSS.

HTTP-запросы

Когда браузер извлекает данные с сервера, он делает это, используя протокол HTTP (Hypertext Transfer Protocol). Это процесс обмена «запрос / ответ» между клиентом и хостингом. Чем больше HTTP-запросов выполняет веб-страница, тем медленнее она будет загружаться.

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

  • Объединение файлов CSS и Javascript;
  • Встроенные скрипты Javascript (только если они небольшие);
  • Использование CSS-спрайтов;
  • Уменьшение количества используемых ресурсов, таких как сторонние плагины, которые выполняют большое количество внешних запросов.

Список инструментов для тестирования скорости сайта

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

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

Список инструментов

1. KeyCDN Speed Test

Это быстрый и простой способ тестирования скорости, чтобы получить представление о производительности сайта. Он предлагает на выбор 14 мест для тестирования по всему земному шару. Тест включает в себя разбивку процесса загрузки и визуализацию предварительного просмотра сайта. Можно быстро узнать, сколько HTTP-запросов было выполнено, а также полный размер запрашиваемой страницы и время загрузки.

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

2. Google PageSpeed Insights

Сервис позволяет проверить скорость сайта и выставляет ему по шкале от 1 до 100. Чем больше число, тем лучше оптимизирован ваш сайт. Все, что выше 85, указывает на то, что ресурс работает хорошо.

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

PageSpeed Insights определяет, насколько страница может быть оптимизирована по таким показателям:

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

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

3. Pingdom

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

В анализе страницы приведен подробный обзор с дополнительной информацией: анализ размера, размер каждого домена (можно легко сравнить CDN-элементы с доменными), количество запросов на домен. А также, какой тип контента выполнял наибольшее количество запросов:

4. GTmetrix

Он проверяет как показатели PageSpeed, так и YSlow, присваивая сайту категорию от F до A. Сводный отчет разбит на пять разделов, включающих PageSpeed, YSlow, разбивку процесса загрузки, видео и историю.

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

Вы можете проверить и сравнить показатели сайта для различных типов соединений (например, кабель против dial-up), чтобы определить, как это влияет на скорость загрузки страницы. В числе других функций можно отметить воспроизведение видео для анализа и выявления проблем при загрузке, а также возможность запуска Adblock Plus. При отключенной рекламе можно увидеть, как она влияет на загрузку анализируемого сайта:

5. WebPagetest

Предлагает на выбор для тестирования более 40 локаций и 25 браузеров (включая мобильные). Инструмент присваивает сайту категорию от F до А на основе различных тестов производительности, таких как FTTB, сжатие, кэширование, эффективное использование CDN и т.д. Финальный отчет разбит на шесть разделов, включающих в себя общую оценку, детализацию, обзор производительности, проблемы при загрузке контента и скриншоты.

Сервис помогает диагностировать, какие задержки возникают во время первого поиска DNS (о чем упоминалось ранее). WebPagetest содержит также более продвинутые функции, такие как захват видео, отключение Javascript, игнорирование сертификатов:

6. DareBoost

При анализе скорости сайта он учитывает более 100 контрольных параметров. Из них складывается общая оценка от 1 до 100 баллов. Можно сравнить показатели загрузки сайта на стационарных и мобильных устройствах, в Firefox и Chrome, а также для пяти различных географических точек.

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

7. Varvy Pagespeed Optimization

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

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

8. Uptrends

Предлагает более 35 географических точек для тестирования скорости сайта. Предоставляемый отчет состоит из двух разделов: разбивка процесса загрузки и группы доменов. Раздел «Группы доменов» содержит уникальную информацию, так как в нем ресурсы классифицируются по различным источникам: собственные, статистика, CDN, социальные, реклама:

9. dotcom-monitor

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

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

10. PageScoring

Предлагает простой и понятный отчет о производительности. В нем отображается:

  • Поиск домена;
  • Время соединения;
  • Время перенаправления;
  • Размер страницы;
  • Время загрузки.

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

11. Yellow Lab Tools

Это новый инструмент для тестирования скорости загрузки и качества front-end. Yellow Lab Tools предоставляет много полезной информации и содержит уникальные функции, которых нет в других инструментах. Например, отслеживание того, как взаимодействует JavaScript с DOM во время загрузки страницы.

Сайт получает суммарную оценку на основе следующих критериев:

  • Вес страницы;
  • Запросы;
  • DOM;
  • Некачественные скрипты Javascript;
  • Некачественные стили CSS;
  • Конфигурация сервера.

График JavaScript показывает фактические взаимодействия DOM во время загрузки страницы:

12. DevTools Google Chrome

Это очень простой в использовании инструмент для проверки скорости сайта. Его можно запустить в Google Chrome, используя сочетания клавиш:

  • Windows: F12 или Ctrl + Shift + I;
  • Mac: Cmd + Opt + I.

В последнем обновлении инструментов для разработчиков в графики процесса загрузки были добавлены панели сводных данных. Это позволяет увидеть, на загрузку какого элемента требуется большего времени. Чтобы увидеть эту информацию, кликните по панели шкалы времени и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем можно кликнуть по панели «Сводка» и «Сводные данные«:

В инструментах для разработчиков можно увидеть точное время загрузки контента DOM и общее время загрузки. Для просмотра этой информации кликните по панели «Сеть«, нажмите на кнопку «Показать обзор» и Ctrl + R (Ctrl + R), чтобы обновить страницу. Синяя линия будет показывать время загрузки контента DOM, а красная — общее времени загрузки. Обычно все, что находится слева или соприкасается с синей линией — это элементы, которые блокируют DOM (ресурсы блокирующие вывод):

13. Sucuri Load Time Tester

Инструмент предоставит полную оценку производительности по шкале от A до F. Тест измеряет, сколько времени проходит от подключения к сайту или одной странице до полной загрузки. Параметр «время до получения первого байта«, показывает, сколько времени потребовалось для начала обработки страницы:

14. Pagelocity

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

Инструмент показывает, работает ли сайт через HTTPS, каково значение TTFB, и через диаграмму в графической форме отображает время загрузки элементов DOM:

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

15. YSlow

YSlow выполняет тестирование скорости сайта в три этапа:

  • Сканирует DOM, чтобы найти все компоненты (изображения, скрипты и т.д.);
  • Получает информацию о размере каждого из компонентов (Gzip, неактуальные заголовки и т.д.);
  • Принимает данные и дает оценки по каждому из правил.

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

Тестирование скорости сайта с помощью расширений для браузера Google Chrome

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

Вот некоторые из них:

  • Page Load Time;
  • app.telemetry Page Speed Monitor;
  • Performance-Analyser;
  • LoadFocus Load Testing.

Тестирование скорости мобильных версий сайтов

Это позволяют сделать следующие инструменты:

  • WebPageTest;
  • GTMetrix;
  • DareBoost;
  • dotcom-monitor.

Другой способ проверить скорость сайта — использовать инструменты для разработчиков Chrome в режиме устройства. Чтобы войти в режим устройства, кликните по иконке телефона в Chrome DevTools или нажмите Ctrl + Shift + M (Cmd + Shift + M). После этого можно выбрать устройство, которое нужно имитировать. Также можно изменить настройки сети, чтобы увидеть, как сайт будет отображаться при 2G или 4G соединении.

Затем на вкладке «Сеть» можно запустить тест скорости:

Заключение

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

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

Перевод статьи «15 Website Speed Test Tools for Analyzing Web Performance» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

You May Also Like

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

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

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