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

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

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

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

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

1. Google Page speed

Официальный сайт Google Page speed - https://developers.google.com/ . Совсем недавно он стал доступен для проверки всем желающим.

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

Самым главным в отчете является цифра по 100 бальной шкале. Чем она выше, тем лучше. Встретить сайт со 100 баллами - это большая редкость в интернете. Грубо говоря это означает, что по мнению Google сайт не имеет проблем со скоростью загрузки.

Сервис очень удобен тем, что здесь же есть рекомендации по ускорению работы сайта. Это очень-очень удобно. Выполнив по пунктам все рекомендации, как правило, можно ускорить работу сайта минимум на 10..20%.

Google Webmaster

У Гугла есть второй инструмент для определения скорости загрузки сайта - это http://www.google.com/webmasters/ .

Правда этот сервис является доступным только для владельца сайта. Чтобы увидеть скорость загрузки через Google Webmaster откройте вкладку "Сканирование" -> "Статистика сканирования". Здесь можно посмотреть историю времени загрузки сайта:

2. Проверка скорости загрузки с Tools pingdom

Переходим по следующей ссылке http://tools.pingdom.com/fpt/ . Вводим адрес нашего сайта и осуществляем проверку. По окончании тестирования программа выдает полный отчет. Удобный и простой способ.

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

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

3. Webo Pulsar

Чтобы проверить скорость загрузки через WEBO (сайт: https://webopulsar.ru/test/) придется немного подождать. Сервис требует ввести данные: Имя, адрес сайта, e-mail и телефон. После чего на почту придут результаты тестирования сайта.

Сервис показывает интересную информацию и сообщает средние данные по интернету.

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

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

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

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

• 0,1-0,5 секунды или 100-500 мс - мгновенно, пользователь даже не заметить никаких задержек. Другое дело, что такая скорость загрузки невозможна для современных сайтов, переполненных различными изображениями, скриптами и стилями;
• 1 - 3 секунды - оптимальный вариант, пользователь заметит небольшую паузу, но это не вызовет раздражения и он продолжит работу на сайте. К такому результату нужно стремиться;
• 5-10 секунд и больше - очень плохо, пользователю придется ждать и он может попросту уйти, или, по крайней мере у него останется неприятное впечатление о сайте.

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

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

1. Google Chrome

Самый первый инструмент, который стоит использовать - это ваш браузер. Тут вы можете детально посмотреть с какой скоростью загружается страница у вас и какие элементы создают большую нагрузку. Откройте ваш сайт, например, главную страницу, и нажмите сочетание клавиш Ctrl+Shift+J, затем перейдите на вкладку "Perfomance" :

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

Внизу страницы мы видим результат, она загружена за 8,1 секунды, это плохо, но первые элементы на странице появились уже в 2 секунды, а значит пользователи не почувствовали много неудобств. Тут вы можете найти множество полезной информации, какие материалы грузились долго можно посмотреть развернув надпись "Network" :

Например, у меня время загрузки для различных стилей составляет около 400 мс, это много. Сворачиваем "Network" и смотрим "Frames" . Синий индикатор показывает, когда завершилась загрузка основных компонентов и пользователь увидел первые элементы на странице (DOM Loaded):

Загрузка элементов отображается на графике "Main" , синим - HTML код, желтым - скрипты, зеленым - медиа данные, розовым - стили.

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

2. Pingdom tools

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

Страница загрузилась за 7.22, почти тот же результат, что и в Google Chrome и при этом со страницы было отправлено 115 запросов различных файлов и общий вес страницы 1,9 мегабайт.

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

Можно отсортировать по "Load Time" в поле "Sort by" :

• Розовый - время получения IP по DNS;
• Пурпурный - время установки соединения SSL;
• Синий - ожидание подключения к серверу;
• Оранжевый - время передачи данных;
• Желтый - время ожидания ответа сервера;
• Зеленый - время, потраченное на загрузку данных.

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

На время получения DNS и рукопожатие SSL мы повлиять не можем, и оно выполняется только один раз. Далее подключение к серверу, зависит от нагрузки на сеть, можно оптимизировать только одним путем - использовать https и новый протокол http2, тогда соединение будет выполняться только раз, а все данные будут передаваться в одном потоке.

Затем идет время ожидания ответа сервера. Этот параметр зависит от многих факторов - насколько долго запрос обрабатывается веб-сервером, php, загруженности сети и так далее. Время ожидание в 100 мс - это еще норма, но когда оно составляет 300 мс для статических файлов - это уже проблема. Допустим, на странице загружается 20 картинок, 20*300 - это уже шесть секунд, а возьмите статью, в которой картинок еще больше - 30, 50. Вот вам и время загрузки.

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

3. Host-tracker

Минус Pingdom в том, что там можно проверить скорость сайта только на заграничных ресурсах. Если нас интересует Россия, то лучшие использовать host-tracker:

Но здесь совой недостаток, загружается только html код страницы и все. Никакие изображения и вообще структура DOM загружены не будут. Например, в Москве, html код страницы загружается за 79 мс, а в Австралии за 2,5 секунды. Например, в Pingdom этот же показатель был примерно 800 мс. Тут не выполняется проверка скорости страниц сайта. Если вы хотите проверить скорость загрузки отдельного ресурса на странице, то вам нужно будет набирать его url отдельно.

4. Проверка скорости в терминале

Проверка скорости сайта в терминале Linux позволит получить больше всего необходимой информации, чтобы принять правильное решение по оптимизации. Мы выяснили, что самую большую проблему после проблемных файлов представляет время ожидания ответа веб сервера. Теперь нужно понять откуда оно берется. Утилита curl позволяет узнать скорость загрузки сайта, замерять время до получения первого байта, по сути, это и есть wait time + connect + dns + ssl + read. Команда выглядит вот так:

curl "https://сайт" -s -o /dev/null -w "response_code: %{http_code}\n
dns_time: %{time_namelookup}\n\




total_time: %{time_total}"

Значение каждой переменной:

• time_namelookup - время преобразования домена в IP адрес;
• time_connect - время установки соединения по TCP;
• time_appconnect - время, затраченное на соединение SSL;
• time_pretransfer - время, затраченное на подготовку к передаче данных;
• time_starttransfer - время получения первого байта от сервера;
• time_total - общее время загрузки страницы, только html, без скриптов и изображений.

Фактически здесь выходит, что время ожидания веб-сервера меньше 100 мс. Время отправки данных можно принять за 0, тогда wait time от pingdom будет time_starttransfer - time-pretransfer. Мы можем проверить другой ресурс, например, изображение:

Здесь уже видим тот же wait time до 140 мс. Плохо, учитывая, что у серверов Google этот параметр до 5 мс. Дальнейший анализ нужно продолжить на вашем сервере. Мы посмотрим насколько быстро веб-сервер возвращает результат с помощью tcpdump. Дальнейшую инструкцию можно выполнить только на VPS/VDS, на хостингах у вас это не выйдет. Авторизуйтесь на вашем сервере по SSH и выполните там такую же команду:

$ curl "http://test..png" -s -o /dev/null -w "response_code: %{http_code}\

dns_time: %{time_namelookup}\n\
connect_time: %{time_connect}\n\
AppCon time:\t%{time_appconnect}\n\
pretransfer_time: %{time_pretransfer}\n\
starttransfer_time: %{time_starttransfer}\n\
total_time: %{time_total}"

Результат будет совсем другим, моему серверу понадобилось 63 миллисикунды на обработку этого запроса. Из чего можно сделать вывод, что все остальные задержки - проблема работы сети. Мы еще можем отследить как передаются пакеты и заголовки с помощью tcpdump, только нужно отключить SSL, иначе вы ничего там не разберете:

tcpdump -n -S -s 0 -vvvvv -A "(tcp dst port 80 or tcp src port 80) and (dst host ваш_ip or src host ваш_ip)"

Вы можете подробнее почитать в отдельной статье. Фактически, этот фильтр означает, что нужно отображать все пакеты, полученные на порт 80 или отправленные с порта 80, при том, что они будут отправлены либо с вашего ip либо на ваш ip. Теперь в другом терминале выполните curl запрос к http версии сайта, в tcpdump вы увидите полный список пакетов и их содержимое:

14:30:08.392309 IP (tos 0x0, ttl 54, id 61543, offset 0, flags , proto TCP (6), length 129)
95.133.238.84.landmarks > 185.22.173.108.http: Flags , cksum 0x9f58 (correct), seq 1691128117:1691128194, ack 3071477496, win 229, options , length 77
[email protected]..._..T...l...Pd..5.........X.....
.Laa2../GET / HTTP/1.1
Host: test.сайт
User-Agent: curl/7.50.1
Accept: */*

14:30:08.392357 IP (tos 0x0, ttl 64, id 65431, offset 0, flags , proto TCP (6), length 52)
185.22.173.108.http > 95.133.238.84.landmarks: Flags [.], cksum 0xb483 (incorrect -> 0x6fa7), seq 3071477496, ack 1691128194, win 227, options , length 0
E..4..@[email protected]_..T.P......d..............
2..p.Laa
14:30:08.402702 IP (tos 0x0, ttl 64, id 65432, offset 0, flags , proto TCP (6), length 2948)
185.22.173.108.http > 95.133.238.84.landmarks: Flags [.], cksum 0xbfd3 (incorrect -> 0x2316), seq 3071477496:3071480392, ack 1691128194, win 227, options , length 2896
E.....@.@.{~...l_..T.P......d..............
2..{.LaaHTTP/1.1 200 OK
Server: nginx/1.13.3
Date: Fri, 18 Aug 2017 11:30:08 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Expires: Fri, 18 Aug 2017 21:30:08 GMT
Pragma: public
Cache-Control: max-age=36000, public
X-Powered-By: W3 Total Cache/0.9.5.4

• 14:30:08.392309 - отправлен запрос на страницу;
• 14:30:08.402702 - получен ответ.

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

Выводы

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

Об авторе

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

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

Зачем нужна проверка скорости загрузки сайта

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

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

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

Проверка скорости загрузки страницы сайта с помощью Google PageSpeed

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

Оценка PageSpeed составляет от 0 до 100 баллов. Результат 85+ считается очень хорошим. Обратите внимание, что алгоритм сервиса постоянно развивается, поэтому оценка может меняться.

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

Предложения по оптимизации загрузки страниц

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

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что размер изображений на странице можно уменьшить без особого ущерба качеству. Для решения этой проблемы сервис предлагает несколько инструментов, с помощью которых можно сжать изображения jpeg и png без потери качества. Сам же я использую tinypng.com .

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

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

Есть несколько способов решения этой проблемы:

1. Если подключаемый внешний скрипт небольшой, его можно подключить напрямую в HTML, чтобы избавиться от необходимости выполнять внешний запрос;
2. Чтобы код JavaScript не блокировал загрузку страницы, используйте атрибут async. Например:

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

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

А вот ресурс , описывающий настройку кеширования через файл.htaccess

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

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

1. Apache: используйте mod_deflate.
2. Nginx: используйте HttpGzipModule.

Сократите JavaScript, HTML и CSS

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

Google также предлагает нам несколько сервисов по сокращению кода:

1. Расширение для браузеров PageSpeed Insights для оптимизации HTML
2. Для уменьшения объёма CSS используйте cssmin.js
3. Для оптимизации JavaScript можно использовать Closure Compiler , JSMin или YUI Compressor

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

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

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

1. Нажмите правой кнопкой на любое место на странице;
2. В появившемся контекстном меню выберите "Показать код элемента ";
3. Нажать на кнопку Toggle device toolbar (или Ctrl+Shift+M);
4. Выбрать гаджет, экран которого надо эмулировать;

Заключение

Теперь вы знаете как проходит проверка скорости загрузки страницы, однако вот еще 1 важный совет :

Не надо стремиться набрать все 100 баллов! 70+ - это уже очень хороший результат . Посмотрите, допустим, на сайт ВК, один самых крутых интернет-ресурсов в России. На момент написания статьи ВК набрал 71 балл на мобильных устройствах и 82 на компьютерах. Так что не заморачивайтесь, подбивая сайт ради нескольких бесполезных баллов.

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

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

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

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

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

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

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

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

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

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

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

Javascript

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

function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;

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 , выявленные проблемы со скоростью страницы и используемые сервисы.

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 раза превышает объем внешних скриптов.

Добрый день, дорогие друзья! Сегодня мы обсудим с вами скорость загрузки сайта.

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

В конце статьи вас ждет несколько новостей.

Скорость загрузки страниц сайта имеет огромное значение.

Если Вы с этим не согласны, то предлагаю ознакомиться со статистикой:

• Дополнительные 400 миллисекунд приводят к падению трафика на 5-9%.
• Для Google дополнительные 500 миллисекунд приводят к тому, что его поиском пользуются на 20% меньше посетителей.
• 100 миллисекунд стоят Amazon 1% прибыли;
• 1 из 4 пользователей Интернета закрывает сайт, если он загружается дольше 4 секунд. Думаю, и Вам иногда надоедало ждать загрузки какого-нибудь сайта и вы искали информацию в другом месте. Мне приходилось.
• 50% пользователей, которые выходят в сеть с мобильных телефонов, закрывают сайт, если ожидание превышает 10 секунд.
• Кроме того, трое из пяти больше не вернутся на этот сайт.
• 8 секунд ожидания и вы можете потерять более 47% пользователей (стоит забеспокоиться и начать действовать)

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

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

Почему Google уделяет такое значение скорости

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

А во-вторых, Гугл, как и любая компания, желает сократить свои расходы, а медленный сайт стоит ему дорого.

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

Время загрузки и время отображения страницы

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

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

Как люди воспринимают загрузку страницы

• Память и внимание человека ограничены. Он не может воспринимать множество вещей одновременно и он может легко отвлекаться на что-то новое.
• Человек любит контролировать то, что он делает и ненавидит ждать (это точно:)).
• Время отклика 0,1 секунды дает людям впечатление мгновенности.
• Время отклика в 1 секунду производит впечатление спонтанности и непрерывности. Пользователь может почувствовать задержку, но не обратит на нее особого внимания.
• От 1 до 10 секунд и у пользователя складывается впечатление, что он зависит от милости компьютера, что его очень раздражает. За 10 секунд вы определенно потеряете внимание пользователя.

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

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

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

1. tools.pingdom.com

Указываете название блога и нажимаете «Test Now». Получаете результат. Лучше проверить несколько раз, так как результат каждый раз будет отличаться, и вывести среднее арифметическое.

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

2. www.seomastering.com/site-speed-checker.php

Указываете домен и жмете «Continue». Данный сервис позволяет проверять одновременно до 10 сайтов.

3. www.pr-cy.ru/speed_test

Все как и в предыдущем сервисе только на русском языке.

4. cloudmonitor.ca.com/en/checkit.php

Можно проверять скорость ресурса 5 раз в день.

5. host-tracker.com

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

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

7. Page Speed Insights

Скорость загрузки вы также можете проверить с помощью Инструментов вебмастеров от Google. Выбираете раздел «Лаборатория» — «Эффективность сайта» -«Page Speed Insights»:

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

Данный сервис является онлайн вариантом расширения для браузеров Page Speed. Он удобен, но я предпочитаю 2 других. О них и расскажу далее.

8. gtmetrix.com

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

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

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

9. Плагин Page Speed

Работает по этому же принципу, но его достоинством является то, что он руссифицирован, а значит будет легче разобраться, что делать.

Расширение Page Speed существует и для Google Chrome, и для Firefox, но я рекомендую использовать его в последнем браузере. В Chrome данное разрешение у меня выдает подсказки, но вот количество баллов не показывается.

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

Как вы видите, различные сервисы дают совершенно разные результаты: от долей секунды до нескольких секунд, поэтому и проверять стоит несколькими инструментами. У меня наибольшее доверие вызывает Page Speed. А какой сервис предпочитаете вы?

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