Измеряем скорость сайта, скорость хостинга, скорость соединения до сайта: зачем и как?

Зачем измерять скорости сайта?

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

Эти цифры не являются абстрактными «пузомерками», они могут дать довольно важную и интересную информацию. Например, если сервер формирует страницы вашего сайта долго, то можно предположить: а) перегруженность сервера — если нагрузка возрастёт, то сервер будет формировать страницы оооочень долго, или вообще будет пропускать запросы; б) ваш сайт настолько неоптимизирован и тяжёлый, на него настолько много навешано плагинов и прочего, что сервер просто не справляется — стоит подумать об оптимизации. И естественно, посетителям намного больше понравится, если сайт будет отображаться мгновенно, без задержки в 2-7 секунды.

Итак, мы будем мерить:

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

Чтобы было чуть нагляднее, я буду изменять сразу два сайта, условно «лёгкий» (http://mi-al.ru/) и условно «тяжёлый» (https://codeby.net/blogs/).

1. Проверяем скорость сервера

Нам в этом поможет WEBO Pulsar. Вводим адрес своего сайта и ждём результата.

Вот результат для «лёгкого» сайта:

А вот для «тяжёлого»:

Самое интересное значение здесь – «Ожидание ответа». По сути, это время между отправкой запроса и получения готовой страницей на стороне клиента. Оно зависит от скорости выполнения серверной логики, запросов к базе данных. Большое время ожидания ответа сервера (500-1000 миллисекунд и больше) обычно говорит о необходимости оптимизации серверной логики.

Разница между тяжёлым и лёгким сайтом — в разы.

Если у вас значение больше 2000 миллисекунд, вам однозначно нужно что-то менять. Если это связано с большой нагрузкой (большой посещаемостью), то нужно задуматься по переходе на VDS. Если посетителей немного, а значение всё-равно очень высокое, то нужно проводить анализ, почему сервер так долго отвечает? Может быть, ваш сайт перегружен плагинами и прочим, может быть, вы выбрали очень плохой хостинг со слабым оборудованием, в любом случае, нужно что-то менять. Ведь при повышении нагрузки время ответа ещё больше возрастёт, возможно, сервер просто начнёт пропускать некоторые запросы и вы растеряете часть своих посетителей.

Пункт «Создание соединения» всегда будет равен 0, если у вас нет SSL-сертификата. Т.к. здесь отображается время создания защищенного соединения (SSL).

«Загрузка ответа» – тоже интересная величина, она показывает время загрузки ответа, полученного от сервера. Зависит от пропускной способности канала. К неё мы скоро вернёмся.

2. Проверяем скорость соединения с сервером из разных уголков РФ

Воспользуемся бесплатными услугами от Айри.

Цвет времени ответа сервера и времени загрузки страницы варьируется от зеленого (все отлично, до 0,2с время ответа сервера и до 2с время полной загрузки страницы) до красного (время ответа сервера более 1с, время полной загрузки страницы более 10с).

Для лёгкого сайта:

Для тяжёлого сайта:

Для лёгкого сайта всё замечательно, а вот у тяжёлого сайта не всё так благополучно — ещё один повод задуматься об оптимизации

3. Стресс тест – измерение падения производительности сайта из-за большого притока пользователей

Смысл в том, что сейчас мы узнаем, а как наш сайт будет себя вести, если на него одновременно зайдут 20 человек, или 30, или 50 (количество эмулируемых сессий больше, чем количество пользователей). Для этого воспользуемся услугами Load Impact.

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

Полный отчёт для лёгкого сайта здесь.

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

Полный отчёт для тяжёлого сайта здесь.

Зависимость скорости ответа сервера в зависимости от количества посетителей для тяжёлого сайта:

Надо отдать должное моему хостеру – «удар» он держит, если даже на мой тяжёлый сайт одномоментно будет заходить по 50 человек, то скорость ответа сервера не замедлится. Это говорит и о хорошем (производительном) оборудовании хостера и о высоком качестве пропускных каналов.

4. Что замедляет открытие нашего сайта в браузере?

Чтобы посмотреть, какие элементы грузятся дольше других, что именно замедляет наш сайт, воспользуемся услугами Pingdom Website Speed Test.

Полный отчёт для лёгкого сайта здесь.

Скриншот:

Полный отчёт для тяжёлого сайта здесь.

Кстати, этот тест раскрыл загадку долгой загрузки тяжёлого сайта. Главная страница открывается довольно быстро, но общую загрузку замедляют даже не многочисленные файлы .js и .css, а картинки и ресурсы с других серверов — разные счётчики и виджеты социальных сетей.

5. Самая детальная информация о скорости загрузки элементов сайта и советы по итогам анализа

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

Лёгкий сайт:

Полный отчёт для тяжёлого сайта здесь.

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

Инструмент от Гугл PageSpeed Insights во многом повторяет последние два сервиса. Но он предоставляет отдельный анализ по скорости открытия (и не только) для мобильных устройств и даёт очень подробные советы по исправлению выявленных проблем в скорости загрузки.

Полный отчёт для лёгкого сайта здесь.

Посмотрите на скриншоты — действительно, очень полезные и толковые советы:

Полный отчёт для тяжёлого сайта здесь.

Как ускорить сайт?

Несколько вполне очевидных советов:

• мощный хостинг;
• правильная настройка серверов;
• неперегруженность подключаемыми файлами .js и .css;
• оптимизированные (сжатые) файлы изображений;
• дополнительная оптимизация исходя из советов по итогам тестов.

Вывод

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

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

---

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

codeby.net

Проверка времени ответа сервера — WEBO Pulsar

Войти в WEBO Pulsar

Создать аккаунт

Назад Просмотр проверок Вперед

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

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

Назад Создание проверки Вперед

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

По URL проверки, WEBO Pulsar автоматически определит ее тип. Не забудьте указать частоту проверки. Проверки с меньшей частотой стоят дешевле. Множество вариантов уведомлений не дадут пропустить момент, когда ваш веб-ресурс будет нуждаться в помощи.

Назад Просмотр баланса Вперед

Цена 1 составляет примерно 10 копеек. Наиболее популярные проверки HTTP/HEAD, раз в 10 минут стоят всего 40 копеек в сутки. Средства за проверки списываются постепенно, в течение суток. Средства за разовые операции, например, за отправку СМС или создание отчета, списываются единовременно.

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

Создать аккаунт

webopulsar.ru

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

16.12.2019 18:20

Навигация по нашим инструментам стала более удобной и быстрой

Наших инструментов становится много, но у каждого пользователя есть свои часто используемые. Теперь их можно выделить и очень быстро найти — http://s.be1.ru/8qsjn

03.12.2019 13:13

Добавили возможность сохранения галочки Google в чекере позиций

Нарастив ресурсы для съема позиций в Google, теперь мы можем дать возможность сохранять проекты с галочкой — https://be1.ru/s/kdx9o

28.11.2019 18:21

Дополнили функционалом инструмент по проверке позиций сайта

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

12.08.2019 10:00

Разработали новый SEO-инструмент, определяющий частотность запросов!

Инструмент поможет определить базовые виды частотностей поисковых запросов, данные тянутся непосредственно из Яндекс Вордстат. Ссылка на инструмент: https://be1.ru/wordstat/

02.07.2019 12:00

Обновили дизайн старого инструмента!

Мы до неузнаваемости обновили инструмент определяющий IP адрес компьютера, теперь в нем куча плюшек и современный дизайн! Ссылка на инструмент: https://be1.ru/my-ip/

13.06.2019 14:34

Добавили новый SEO-инструмент!

Он умеет быстро и бесплатно определять систему управления контентом (CMS) сайта.

07.05.2019 10:05

Мы переехали на новый сервер!

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

26.03.2019 10:47

Падение сервера 25.03.18

Остановка в работе сервиса связанна c DDoS атакой, в данный момент работа Be1 полностью восстановлена. Будем укрепляться и ждать следующую волну. Извините за временные неудобства.

19.02.2019 10:00

Новое расширение для анализа сайтов!

Наше расширение помогает бесплатно в один клик провести глубокий SEO-анализ сайта. Рекомендуем: https://be1.ru/goto/extension

14.12.2017 12:07

Обновления для Антиплагиата!

Функциональность инструмента Антиплагиат обновилась — исчезла строка «Исключить URL». Теперь эта функция работает автоматически при использовании вкладки «Проверить URL». Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку «Расширенная проверка».

be1.ru

Как проверить скорость загрузки и адаптивность сайта: 10 бесплатных инструментов

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

Рассказываем, какими инструментами можно проверить скорость загрузки сайта и его адаптивность.

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

Факт: скорость загрузки влияет и на позиции в поиске, и на конверсии. Утверждение из блога Google для вебмастеров.

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

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

1. PageSpeed Insights

PageSpeed Insights от Google оценивает эффективность страниц для мобайла и десктопа, дает рекомендации по оптимизации сайта.

Важно: оценка от 1 до 100 зависит не только от скорости загрузки. Это внутренняя метрика сервиса, основанная на ряде правил. Рекомендации PageSpeed Insights не стоит воспринимать как призывы к действию, о чем предупреждают и сами разработчики.

В общем, тут как с «Главредом» – нельзя слепо подгонять под максимальное количество баллов, надо думать головой.

2. Pingdom Tools

Pingdom Tools показывает оценку Google PageSpeed Insights, время загрузки, количество запросов и размер страницы. Еще в сводке виден результат сравнения с другими тестируемыми сайтами.

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

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

3. WebPageTest

Сервис не очень с точки зрения дизайна, зато дает больше выбора в плане локаций – их свыше 40 (правда, РФ опять нет в списке). Плюс есть возможность выбрать разные браузеры и даже устройства, если запускать тест из Далласа.

Еще в сервисе можно включить слайдшоу или видео, чтобы наглядно оценить, как идет загрузка страницы. И, наконец, WebPageTest умеет сравнивать скорость нескольких сайтов: добавляйте URL конкурентов и смотрите, как у них.

4. GTmetrix

Еще один сервис по проверке скорости загрузки сайта. Достоинства в сравнении с WebPageTest:

• Приятный интерфейс.
• Возможность выбрать скорость соединения.
• Дополнительная оценка от Yahoo – пригодится для продвижения за рубежом.
• Есть выгрузка отчета в PDF.
• Можно настроить регулярный мониторинг страницы. Бесплатно – не чаще 1 раза в день с сервера в Ванкувере.

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

У GTmetrix есть и платная версия – для тех, кому нужно проверять больше, чаще и детальнее.

5. Sitespeed

Sitespeed позволяет проверить, как сайт загружается сразу с нескольких точек. Наконец-то, русскоязычный сервис и есть сервера РФ и Украины.

Если есть желание помочь проекту, вариант – стать спонсором: добавить свой сервер.

Чтобы проверить свой сайт, можно также использовать Google Analytics и «Яндекс.Метрику». В обеих системах есть отчеты по скорости (времени) загрузки сайта (страниц).

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

5 сервисов для проверки сайта на адаптивность

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

Так согласно данным CoMagic мобайл почти сравнялся с десктопом по числу конверсий.

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

Мораль: надо одинаково уважать пользователей с разными устройствами, экранами, ОС и браузерами. Тогда и трафик пойдет, и конверсии будут.

Мы делаем лендинги уже более 5 лет. Добиваемся высокой конверсии любыми путями. Обращайтесь! Подробнее

Перечень инструментов для проверки на адаптивность /кроссбраузерность / кроссплатформенность:

1. Mobile-Friendy Test

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

Никакой интерактивности и выбора разрешения – только скриншот первого экрана.

Кстати, в «Яндекс.Вебмастере» есть похожий инструмент – правда, там можно проверить лишь страницы собственного сайта.

2. Browserling

Browserling – инструмент кроссбраузерного тестирования. Как запустить:

• Выбрать нужную версию Android / Windows.
• Указать браузер вместе с версией.
• Нажать “Test now”.

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

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

3. Adaptivator

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

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

Адаптивная верстка vs. мобильный сайт

4. Screenfly

Screenfly – такой же бесплатный, как Adaptivator, но более функциональный инструмент. Можно выбрать один из 30 вариантов экранных размеров или – прописать высоту и ширину самостоятельно.

Чтобы видеть все элементы страницы, надо еще включить прокрутку – нажать в меню на кнопку “Allow scrolling”.

5. I love adaptive

I love adaptive – удобный инструмент проверки на адаптивность и кроссплатформенность.

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

Минус: для ПК и ноутбуков нельзя выбрать операционную систему. Еще для работы с некоторыми сайтами надо обязательно устанавливать расширение на Chrome.

Чтобы изучить, как с вашим сайтом взаимодействуют пользователи разных устройств, ОС и браузеров – используйте также соответствующие отчеты Analytics и «Метрики».

P. S. Если мы забыли какой-то важный и полезный инструмент, напомните в комментариях. И – будем благодарны за репосты.

Да пребудет с вами юзабилити!

Чек-лист по юзабилити: 200+ пунктов на проверку kak-proverit-skorost-zagruzki-i-adaptivnost-sayta-besplatnye-instrumenty

texterra.ru

10 лучших инструментов для проверки скорости загрузки страниц сайта — Devaka SEO Блог

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

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

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

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

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

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

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

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

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

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

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

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

devaka.ru

проверка, анализ и способы оптимизации

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

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

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

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

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

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

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

Основные составляющие скорости сайта

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

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

1. DNS-запрос названия сайта.
2. Связь с сервером по проверке IP (по протоколу TCP).
3. Установка безопасного соединения при использовании протокола HTTPS (TLS соединение).
4. Запрос по URL-адресу HTML-страницы и ожидание сервера (на основе HTTP-протокола).
5. Загрузка HTML-кода страницы.
6. Анализ HTML-документа на стороне браузера и дальнейшее формирование серии запросов к ресурсам веб-документа.
7. Дальнейшая загрузка и разбор таблиц каскадных стилей (CSS). Загрузка и выполнение JS-кодов.
8. Дальше осуществляется рендеринг отображения страницы и активация JS-скриптов.
9. Следующий этап – подгрузка имеющихся шрифтов.
10. Отображение картинок и других элементов страниц.
11. Окончание отображения полной страницы, выполнение отстроченных скриптов и кодов.

В вышеописанном процессе некоторые этапы могут проходить одновременно, а иногда меняться местами, но суть при этом не меняется.

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

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

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

1. Время для получения начального байта (TTFB). Это временный отрезок с начала загрузочного процесса и до получения первых данных. Этот параметр можно считать основной метрикой оптимизации сервера.
2. Начало отображения страницы (начало рендеринга, первые цвета). Такой показатель демонстрирует время до конца периода «белого экрана» в браузере, когда страница начинает прорисовываться.
3. Загрузка базовых элементов страницы (фактическое время загрузки). Оно включает обработку всех ресурсов для взаимодействия со страницей, после чего стрелки браузера, которые отображают загрузку ресурса, перестают вращаться.
4. Полная загрузка веб-страницы.  Время перед завершением основных действий браузера, когда уже обработаны все основные и отложенные модули кода.

Все вышеперечисленные параметры скорости измеряются в секундах. Но очень полезно при анализе 3 и 4 показателя обращать внимание на количество трафика. Это важно для того, чтобы оценить, как скорость соединения сказывается на времени загрузки. Дальше надо разобраться, как проверять скорость.

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

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

Для быстрой оценки оптимизации клиентской составляющей, можно использовать службу Google PageSpeed Insights, либо Sitechecker (наш сервис включает API-интерфейс сервиса Google).

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

1. Отчет Яндекс Метрики по скорости страниц

Чтобы найти отчет, следуйте этому пути.

Яндекс.Метрика > Отчеты > Стандартные отчеты > Мониторинг > Время загрузки страниц

2. Отчет Google Analytics по скорости страниц

Чтобы найти отчет, следуйте этому пути.

Google Analytics > Поведение > Скорость сайта > Предложения по скорости

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

Оптимизация сервера

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

1. Хостинг (серверные ресурсы)

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

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

2. DBMS (сервер базы данных)

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

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

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

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

3. Влияние CMS и программного кода

Распространено мнение, что определяющим фактором для скорости сайта является его движок (система управления контентом / CMS). Это приводит к тому, что вебмастера делят все движки на быстрые и медленные. Но это очень далеко от истины.

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

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

Найдите страницы с лишним кодом

Запустите аудит сайта и найдите страницы с соотношением текста к коду меньше 10%

Довольно часто проблемы с быстротой загрузки возникают при неправильном применении системы. Хороший пример в этом контексте – создание интернет-магазина на движке, предназначенном для ведения блогов (такое часто бывает, например, с WordPress). А иногда CMS для генерации небольших сайтов используют как основу для разработки портала.

4. Кэширование

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

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

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

• далеко не все ресурсы могут кэшироваться;
• кэш следует правильно отключать / сбрасывать.

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

5. Оптимизация TCP, TLS, HTTP/2

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

В настройке TCP сегодня нуждаются многие большие проекты и те сервера, где передается большой трафик. Важно понимать, что сетевые подсистемы обновляются на регулярной основе, с каждым выпуском нового ядра Linux. Поэтому их стоит обновлять. Правильная настройка TLS (HTTPS) поможет вам добиться высокого уровня безопасности и минимизирует время установки безопасного соединения. Рекомендуем использовать обновления, выпущенные Mozilla.

Новая версия HTTP-протокола – HTTP/2, создана для того, чтобы ускорить загрузку сайтов. Хотя стандарт появился относительно недавно, уже сегодня его активно использует каждый пятый сайт. В целом, механизм акселерации скорости работы сайтов уже налажен в HTTP/2. Но теперь важно сократить эффект задержек сети при загрузке страницы (множественные запросы). Вместе с тем, ускорение на HTTP/2 не всегда проходит гладко, поэтому не стоит возлагать большие надежды на этот протокол.

Клиентская оптимизация

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

1. Критический путь оптимизации CSS и JS

Критический путь рендеринга (critical rendering path) – это набор ресурсов для начала рендеринга страницы в браузере. В основном такой набор включает HTML-документ сам по себе, веб-шрифты, стили и JS-коды.

Главная задача при оптимизации скорости сайта здесь будет состоять в двойном сокращении: времени (включая задержки сети) и трафика (подразумевая медленные соединения).

Наиболее простой способ определиться с критическим курсом – запустить инструменты аудита, которые доступны в браузере Chrome (в панели разработчика). Плагин Lighthouse определяет его структуру и время загрузки, при этом особое внимание уделяется медленному соединению.

Основная техника сокращения критического пути: удалить всё, что является лишним, или то, что можно отложить. К примеру, значительную часть Java Script кода допустимо откладывать до загрузки страницы. Для этого вызов JS-ресурса помещают в конец HTML-кода или пользуются атрибутом Async.

Для отложенной загрузки CSS-стилей достаточно применить динамическое соединение этих компонентов через JS (ожидание события domContentLoaded).

2. Оптимизация веб-шрифтов

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

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

Главной целью оптимизации становится сокращение объема трафика, потраченного на веб-шрифты и получение их в максимально краткий срок. Для сокращения трафика следует использовать современные прогрессивные форматы: WOFF для совместимости и WOFF2 для браузеров. Другой аспект – использование кодировки. Вы можете включать только те наборы знаков, которые есть на вашем веб-ресурсе (Латиница, Кириллица и т. д.).

Чтобы повлиять на быстрое отображение веб-шрифтов, можно использовать спецификацию rel=”preload” и свойство отображения шрифтов в CSS. Предварительная загрузка поможет максимально быстро сообщить браузеру о необходимости загрузки файла шрифтов. Она обеспечит гибкий способ отображение шрифтов, а также управление поведением браузера в случае задержки файла (не придется ждать более трех секунд).

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

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

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

Кроме указанных форматов, недавно появился еще и новый стандарт: WebP от Google. Он сможет заменить сразу два вышеупомянутых стандарта (PNG и JPEG), поскольку поддерживает сжатие с и без потери качества. Он применяется для файлов со слоями и анимационных картинок.

Для использования WebP достаточно создать в нем копию картинки и предоставить её браузерам, которые поддерживают этот формат.

Чтобы оптимизировать PNG можно использовать множество удобных сервисов для сжатия размера. К наиболее известным относятся OptiPNG, PNGout, EWWW Image Optimizer и другие.

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

Для JPEG также существует два типа оптимизации: без потери и с потерей качества. В большинстве случаев рекомендуется использовать инструмент Mozilla JPEG package. Он разработан с целью улучшить компрессию в этом формате. Для конвертации без потери качества смотрите в сторону jpegtran, а если качество вторично – cjpeg.

4. Кэширование хедера (header)

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

При использовании сервера Nginx, просто добавьте инструкцию:

add_header Cache-Control "max-age=31536000, immutable";

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

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

5. Сжатие данных

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

Во-первых, коэффициент сжатия настраивается и должен приближаться к максимальному.

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

В-третьих, можно применять более совершенные способы компрессии: zopfli (совместим с gzip) и brotli (новый алгоритм сжатия). Стоит отметить, что Brotli будет работать только с веб-ресурсом на протоколе HTTPS. Поскольку эти методы (особенно zopfli) обходятся для сжатия очень дорого, эксперты советуют использовать их в статической версии.

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

Использование CDN

Использование CDN (сеть доставки контента / content delivery network) для ускорения работы веб-сайта – очень разрекламированный способ, который кроме технологической составляющей включает много маркетинговых добавок.

1. Как CDN появился

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

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

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

2. Возможное влияние

Можно ли ускорить веб-ресурс при использовании CDN? На самом деле ответ утвердительный. Соединение пользователя с ближайшим сервером (по времени) устанавливается быстрее и эффективнее подключаются TCP и TLS протоколы. А если контент размещен на сервере CDN, то юзер может быстрее получить нужные данные.

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

3. Недостатки использования CDN

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

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

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

Фиксируем результаты

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

Любой успешный интернет-проект постоянно растет и меняется, обновления касаются как общих шаблонов (оформления сайта, его интерфейсов), так и содержания. Вместе с тем меняется и код ресурса (особенности работы сервера и клиента).

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

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

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

sitechecker.pro

Проверка скорости загрузки сайта, 9 отличных инструментов

Вступление

Увеличивающееся количество веб-ресурсов, заставляют поисковики обращать внимание на скорость загрузки сайтов и мотивировать веб-мастеров к оптимизации скорости загрузки. Для качественной и количественной оценки скорости загрузки веб-ресурса есть специальные сервисы тестирования, на которых делается точная проверка времени загрузки сайта. О 9+ инструментах тестирования в этой статье.

Базовые инструменты

Яндекс.Метрика

Для использования инструмента на сайте нужно установить счетчик Яндекс.Метрика. Инструмент анализа времени загрузки страниц, находится на вкладке: Яндекс.Метрика>>>Отчеты>>>Стандартные отчеты>>>Мониторинг>>>Время загрузки страниц.

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

проверка скорости загрузки сайта Яндекс.Метрика

Google Analytics

Для использования этого инструмента на сайте необходимо установить код слежение Google Analytics. Сам инструмент находится на вкладке: Google Analytics>>>Поведение>>>Скорость загрузки сайта.

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

проверка скорости загрузки сайта Google Analytics

Качественная проверка скорости загрузки сайта

Инструменты качественной оценки скорости загрузки сайта, не дают абсолютных величин времени загрузки в секундах. В этих инструментах есть некая условная шкала, где сайт, удовлетворяющий всем параметрам быстрой загрузки, имеет 100% соответствия. Зона удовлетворительного соответствия лежит в пределах 70-90%. Ниже 70% красная зона плохой оптимизации сайта по скорости загрузки.

Ведущий инструмент качественной оценки оптимизации сайта для быстрой загрузки, это инструмент Google PegeSpeed Insights (//developers.google.com/speed/pagespeed/insights/).

Google PegeSpeed Insights

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

• Файлы CSS должны быть в <head>;
• Все скрипты должны быть в конце <body>;
• Фото сайта должны быть максимально сжаты;
• Коды HTML и CSS сайта должны быть валидными.

Обратите внимание. После всех рекомендаций Google, появилась строка «Скачать оптимизированные изображения, файлы JS и CSS для этой страницы». Это значит, что сервис сам сжал (оптимизировал) все файлы, указанные в рекомендациях. Далее, просто скачиваете архив сжатых файлов по ссылке и заливаете их на сайт по нужным адресам. Адреса смотрим в рекомендациях.

Серсис Pr-cy.ru

http://pr-cy.ru/speed_test/

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

Проверка скорости загрузки сайта Pr-cy.ru

Сервис Seogadget.ru

http://www.seogadget.ru/sitespeed

Анализ скорости загрузки главной страницы из дата центра в Москве. Этот инструмент, не дает расширенного анализа времени загрузки, только качественные, но точные значения четырех основных параметров: ответ сервера (сек), размер ответа (кБ), соединение с сервером (сек), скорость отдачи.

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

Инструменты для тонкой оценки

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

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

Используя эти сервисы важно понимать, что каждый из них, тестирует сайт от своих дата центров, чаще расположенных в Америке или Европе. Это нужно учитывать.

Pindom.com

https://tools.pingdom.com/

Отличный инструмент (язык английский) для анализа скорости загрузки сайта. Тестирование идет от пяти дата центров: 3 в США, 1 в Австралии, 1 в Швеции (Стокгольм).

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

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

Webpagetest.org

http://www.webpagetest.org/

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

Отличается данный сервис, количеством точек проверки. Их 50 точек по всему миру, России нет.

Выполнить бесплатный тест скорости сайта можно из 50 мест по всему миру с помощью реальных браузеров (IE и Chrome) и на скорости реального присоединения потребителя. Вы можете запускать простые тесты или выполнять предварительное испытание, включая многоэтапных операций, захват видео, блокирование контента и многое другое. Ваши результаты дадут богатую диагностическую информацию, включая загрузку ресурсов в виде диаграмм Page Speed с проверками оптимизации и предложений по улучшению.

Webpagetest.orgтаблица результатов Webpagetest.org

Gtmetrix.com

https://gtmetrix.com/

Этот сервис (английский язык) позволяет оценить скорость загрузки из дата-центров: Vancouver, Canada, используя для анализа браузер Firefox.

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

сервис Gtmetrix.com отчет теста

Примечание: Для WordPress есть плагин «GTmetrix for WordPress» (https://ru.wordpress.org/plugins/gtmetrix-for-wordpress/), который позволяет анализировать скорость сайта из административной панели.

Webo.in (Россия)

https://webo.in/

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

Однако, это единственный сервис, данного обзора, который анализирует скорость загрузки сайта по основным регионам России (Москва, Урал, Дальний Восток), а также, Европе и Украины.

Результаты анализа отдает качественной оценкой (как на фото) и расширенной таблицей с результатами по всем файлам сайта.

Webo.in (Россия)

Проверка скорости ответов серверов (доступность сайта)

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

• https://webopulsar.ru/test/

Отличный сервис, показывающий ответ сервера, разложенный на составляющие. Оценка идет из России, Москвы, С-Петербурга, Европы.

• http://sitespeed.me/ru/
• https://www.host-tracker.com

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

©www.wordpress-abc.ru

Статьи по теме

Похожие посты:

www.wordpress-abc.ru