Проверить скорость загрузки страницы сайта


Все способы, как проверить скорость загрузки сайта

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

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

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

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


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

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

Если все собрать воедино, то низкая скорость сайта повлечет за собой:

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

Что влияет на скорость загрузки сайта

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

Плагин WP Super Cache

Плагин Hyper Cache

Оптимизация базы данных

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


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

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

А ближайшее будущее я планирую перейти с виртуального хостинга (когда много сайтов расположены на одном и том же сервере) на VPS виртуальный выделенный сервер, вот тогда мой блог точно будет летать. Главное не пропустите это событие! :)

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

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

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


Сервис PageSpeed Insights

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

PR-CY. Популярный сервис в Рунете, который имеет в своем арсенале много инструментов для вебмастера. С помощью массовой проверки скорости сайта вы получите возможность не только узнать, время загрузки проекта, его среднюю скорость, но и сравнить одновременно до 10 URL адресов.

Проверка сайтов в PR-CY

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

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

WebWait

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

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

Анализ PingDom Tools


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

Load Impact. Современный сервис, который протестирует вас сайт на стойкость к тысячным посещениям пользователей.

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

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

Load Impact

Рекомендую проверить сайт таким способов, кто знает вдруг вы завтра глюкнет Яндекс и к вам на проект хлынет 10000 армия пользователей. :)

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

Мониторинг в SiteSpeed

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

Web Page Test. Этот сервис подойдет опытным вебмастерам. Имеет расширенный ассортимент сканируемых параметров: статистика по каждому элементу страницы, как отвечает сервер на каждый из полученных запросов, количество потоков по всем загрузкам, определение места откуда поступил запрос и другие.


Web Page Test

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

Web Tool Hub. Еще один сервис для измерения скорости работоспособности сайтов. Если поставить галочку «Show advanced information», то будут показаны дополнительные сведения по сайту: размер изображения, CSS и JavaScript файлов.

Web Tool Hub

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

Gomez Networks. Этот сервис предоставляет внушительных размеров отчеты по тестируемым сайтам. Время загрузки страниц, DNS, IP-адрес, время соединения, Secure Sockets Layer, размер содержимого всех элементов.

Gomez Networks

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

PageScoring. Усовершенствованный сервис тестирования скорости веб-ресурсов. Разработчики убрали все лишнее, оставив только одну строку для ввода адреса домена.


PageScoring

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

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

Monitis Tools

Главной фишкой monitis.com является то, что данные по скорости одновременно собираются из разных уголков планеты: США, Европы и Азии.

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

Metrix берет данные исходя из Google Page Speed и Yahoo, а на выходе предоставляет информацию по решению найденных недочетов.

Gt Metrix

Присутствует возможность проверить скорость загрузки сайта из разных мест земного шара.

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


WhichLoadFaster

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

CloudMonitor. Еще один сервис для анализа сайтов, которой имеет в наличии инструмент для определения скорости загрузки страниц из разных стран: Италии, Германии, Швеции и других.

CloudMonitor

В таблице отчетов предоставлены, как временные данные по сайту, так и графические.

Web Page Analyzer. Один из инструментов огромного сервиса по оптимизации веб-сайтов. Все что нужно это ввести URL адрес сайта в специальную строку и получаете подробный отчет по содержимому проверяемой страницы и времени загрузки ее элементов.

Проверка скорости сайта в Web Page Analyzer

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


:)

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

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

seoslim.ru

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

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

WEBWAIT

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

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

HOST-TRACKER

Также можно воспользоваться сервисом HOST-TRACKER. Его специфика работы уже сложнее: используется не ваш интернет, проверяется доступность сайта с различных точек нашей планеты. Всего используется около 90 различных мест Земли. Для каждой точки определяется свое время, а затем вычисляется среднее арифметическое. Как можно заметить на скрине ниже, данный блог (его главная страница) грузится немногим более одной секунды – отличный результат.


Проверить скорость загрузки страницы сайта

WEBO

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

SITE-PERF

SITE-PERF – альтернативный вариант. Этот сервис предоставляет мощный инструмент по анализу скорости загрузки страниц сайта. Его отличие от других заключается в том, что он выдает время загрузки каждого отдельного элемента страницы (включая таблицы  и файлы). Имеется возможность выбрать сервер, который проверит сайт, и указать ряд других настроек.

LOAD IMPACT

LOAD IMPACT – другой способ проверить скорость загрузки сайта. Этот сервис как бы имитирует ddos-атаку на сайт: можно провести до 50 одновременных посещений, открывая при этом по 10-20 страниц. Т.е. общая нагрузка на сайт будет равна 50*(10-20)=500-1000 загрузок страниц. После проверки сервис рисует график: если он ровный, то сайт справляется с нагрузкой, в противном случае стоит подумать о смене тарифа хостинга или же оптимизировать скорость загрузки сайта.

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


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

  • оптимизируйте скрипты и сценарии;
  • оптимизируйте таблицы стилей;
  • воспользуйтесь кешированием.

Если вы используете Java-скрипты, то постарайтесь их организовать так, чтобы они как можно меньше нагружали сервер сайта. Например, если ваш скрипт загружает картинки, то пусть эти картинки будут расположены не на вашем сайте, а на фото-хостинге. Также постарайтесь расположить скрипты как можно ниже в коде страницы (т.к. браузер, встретив java-скрипт, прекращает загрузку страницы и начинает выполнять сценарий). Можно объединить ряд скриптов, выполняющих схожие функции.

уменьшаем время загрузки сайта

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

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

Вот такие способы повышения скорости загрузки сайта я знаю. А какие известны вам?

great-world.ru

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

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

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

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

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

    Проверить скорость загрузки страницы сайта

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

    1. объединил некоторые картинки из темы оформления сайта в так называемые спрайты
    2. а также по возможности уменьшил путем объединения число подгружаемых файлов стилей (CSS) и скриптов
    3. кроме этого имеется смысл включить Gzip сжатие статики на сервере
    4. и оптимизировать все используемые на сайте картинки

    Проверить скорость загрузки страницы сайта

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

    Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на мониторинг сайта на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.

    Для измерения пинга для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».

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

    Проверить скорость загрузки страницы сайта

    На первой диаграмме уделяете внимание положению фиолетовой вертикальной линии — это будет время окончания отрисовки сайта. Вторая вертикальная линия (синяя) будет означать время полной загрузки. Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая — раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд — то нужно озабачиваться исправлением этой ситуации.

  3. Google PageSpeed Insights — это инструмент для разработчиков от самого Гугла. Он дает оценку скорости загрузки вашего сайта (а точнее оптимизации этой скорости) по стобальной шкале. 100 — это идеал, который недостижим, а вот 80-90 получить вполне реально, тем более, что сервис дает очень подробные рекомендации по исправлению выявленных недочетов.

    Проверить скорость загрузки страницы сайта

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

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

    У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:

    Проверить скорость загрузки страницы сайта

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

  4. Test my Site — новый сервис опять же от Гугла. В основном он делает акцент на оценку мобильной версии вашего сайта в том числе и по критерию его скорости загрузки:

    Проверить скорость загрузки страницы сайта

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

  5. GTmetrix — опять таки «не мудрствуя лукаво» вводите Урл нужной страницы и чуток ждете окончания анализа. В результате вы получите отчет, сформированный на основе данных двух плагинов для браузеров — Page Speed (читайте о работе с ним ниже) и YSlow. Собственно, каким данным доверять и чьим рекомендациям следовать — решать вам.

    Проверить скорость загрузки страницы сайта

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

  6. Ping Admin — аналогичный онлайн ресурс для измерения время ответа сервера с разных уголков нашей огромной планеты.
    Проверить скорость загрузки страницы сайта
  7. Host Tracker — практически то же самое, только страны другие.
  8. ByteCheck — позволяет измерить значение TTFB (Time To First Byte) для вашего сайта, на который часто обращают внимание при оптимизации. Это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером, что есть плохо. Читайте советы по оптимизации загрузки сайтов.
  9. Load Impact — это не совсем про скорость, но тоже важный сервис. Он позволяет протестировать нагрузочную способность вашего сайта и то, падает ли при этом скорость загрузки страниц. Весьма полезная штука.
  10. Web Page Speed — онлайн-сервис с дизайном начала девяностых, но вполне себе такой информативный, если приспособитесь к отсутствию юзабилити. Внизу даются общие рекомендации по исправлению ситуации.

Так ли важно отслеживать скорость загрузки страниц?

Но вернемся от измерения скорости к поиску возможностей ее увеличения. В Гугл Вебмастере, о котором я писал тут, раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.

Проверить скорость загрузки страницы сайта

В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог KtoNaNovenkogo.ru загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.

Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).

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

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

На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):

Проверить скорость загрузки страницы сайта

Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать…

Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.

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

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

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

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

Page Speed — анализ скорости и советы по ее увеличению

P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.

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

Проверить скорость загрузки страницы сайта

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

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

Проверить скорость загрузки страницы сайта

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

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

У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/, ибо он испльзует АПИ PageSpeed) для https://ktonanovenkogo.ru была такой:

Проверить скорость загрузки страницы сайта

Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера»), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.

Если нажать на спойлер рядом с этой надписью, то появится список различных файлов, которые не удовлетворяют оптимальным требованиям кэширования статических объектов (скрипты, CSS файлы, файлы изображений используемых на web странице) в браузерах пользователей (т.е. у читателей):

Проверить скорость загрузки страницы сайта

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

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

Оптимизация кэширования в браузере и проверка его работы

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

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

Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (FTP клиент FileZilla был описан мною тут), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла .htaccess.

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

Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.

После этого переименуйте этот файл в .htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.

Наиболее популярные способы включения данной опции на веб-сервере под управлением Апач — с помщью модулей mod_headers или mod_expires. Расположенный ниже код поможет помочь вам включить кеширование статики в браузере, если онлайн-сервис хотя бы один из этих модулей Апача у вас на серваке установлен.

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

<ifModule mod_headers.c>  #кэшировать html и htm файлы на один день  <FilesMatch ".(html|htm)$">  Header set Cache-Control "max-age=43200"  </FilesMatch>  #кэшировать css, javascript и текстовые файлы на одну неделю  <FilesMatch ".(js|css|txt)$">  Header set Cache-Control "max-age=604800"  </FilesMatch>  #кэшировать флэш и изображения на месяц  <FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$">  Header set Cache-Control "max-age=2592000"  </FilesMatch>  #отключить кэширование  <FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">  Header unset Cache-Control  </FilesMatch> </IfModule>

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

Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires, где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:

<ifModule mod_expires.c>  ExpiresActive On  #по умолчанию кеш в 5 секунд  ExpiresDefault "access plus 5 seconds"  #кэшировать флэш и изображения на месяц  ExpiresByType image/x-icon "access plus 2592000 seconds"  ExpiresByType image/jpeg "access plus 2592000 seconds"  ExpiresByType image/png "access plus 2592000 seconds"  ExpiresByType image/gif "access plus 2592000 seconds"  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  #кэшировать css, javascript и текстовые файлы на одну неделю  ExpiresByType text/css "access plus 604800 seconds"  ExpiresByType text/javascript "access plus 604800 seconds"  ExpiresByType application/javascript "access plus 604800 seconds"  ExpiresByType application/x-javascript "access plus 604800 seconds"  #кэшировать html и htm файлы на один день  ExpiresByType text/html "access plus 43200 seconds"  #кэшировать xml файлы на десять минут  ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>

Комментарии опять же потом можно будет удалить.

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

  1. <IfModule mod_expires.c>  ExpiresActive On  ExpiresByType application/javascript "access plus 1 year"  ExpiresByType text/javascript "access plus 1 year"  ExpiresByType text/css "access plus 1 year"  ExpiresByType image/gif "access plus 1 year"  ExpiresByType image/jpeg "access plus 1 year"  ExpiresByType image/png "access plus 1 year" </IfModule>
  2. <IfModule mod_headers.c>  <FilesMatch .*.(js|css)$>  Header set Cache-control: private  </FilesMatch>  <FilesMatch .*.(gif|jpg|png)$>  Header set Cache-control: public  </FilesMatch> </IfModule>
  3. <IfModule mod_setenvif.c>  BrowserMatch "MSIE" force-no-vary  BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary </IfModule>
  4. FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </filesmatch> </ifmodule>

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

Проверить скорость загрузки страницы сайта

Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.

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

ktonanovenkogo.ru

Проверка скорости сайта: как это делается

Хорошая скорость загрузки страницы — 0.35–0.38 секунд. Такие результаты показывают сайты в топе выдачи. Чтобы посчитать это время, нужно измерить так называемую «скорость ответа сервера» — как быстро он реагирует на запрос клиента (браузера).

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

Google PageSpeed Insights

Google PageSpeed Insights бесплатно измеряет скорость загрузки и на мобильных, и на стационарных устройствах. Рейтинг определяется по 100-балльной шкале: чем больше баллов, тем лучше. Если ваш сайт получил более 85, значит, все хорошо. Не стремитесь получить 100 баллов. Это не удается даже сервисам Google.

Чтобы проверить сайт, введите URL в строку на странице developers.google.com. Сервис оценит скорость и предложит варианты, как улучшить показатели:

Проверка скорости загрузки сайта google
Это простой и понятный сервис без тяжелого функционала.

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

Яндекс.Вебмастер

Посмотреть скорость ответа сервера на запрос робота «Яндекса» можно с помощью  инструмента webmaster.yandex.ru. Он покажет время ответа в миллисекундах:

Проверить скорость загрузки сайта яндекс
Если код ответа — «200 ОК», с сайтом все в порядке. Если какой-то другой («404 Not Found», «301 Moved Permanently»), у вас проблемы.

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

Pingdom

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

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

Сервис собирает статистику скорости за период времени и предоставляет подробный отчет об ошибках. Тип проверки можете выбрать сами: HTTP(S), TCP port, Ping, DNS, UDP, SMTP, POP3 and IMAP.

Самый большой минус Pingdom — то, что сервис платный. Цены начинаются с $9,95 в месяц.

Sitespeed.ru

Еще один популярный инструмент в рунете — sitespeed.ru. Интерфейс простой и понятный: пишешь URL, запускаешь тест, получаешь результат. Сервис дает подробное описание, как справиться с каждой проблемой сайта:

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

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

blog.completo.ru

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

Чем быстрее загружаются страницы вашего сайта, тем это лучше для пользователей. Вам же не будет приятно, когда вы хотите прочитать какую-то информацию, а пост с нею открывается более 10 – 15 секунд? За это время вы уже можете передумать и просто закрыть вкладку с сайтом. Так мыслят и ваши клиенты. Они хотят видеть результат здесь и сейчас, а слишком долгое ожидание может послужить причиной отказа.

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

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

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

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

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

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

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

PageSpeed Insights

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

Скопируйте адрес сайта в поле и нажмите кнопку “Анализировать”. Процесс может занимать от 30 секунд до минуты. После завершения вам будут выведены результаты.

Проверить скорость загрузки страницы сайта

Обычно PageSpeed Insights советует переместить JS-скрипты в нижнюю часть HTML-страницы, потому как они могут в значительной степени замедлять загрузку. Также этот инструмент “любит” давать советы по сжатию изображений, минификации CSS-файлов.

На фрилансе очень часто можно встретить заказы, когда клиент просит выполнить оптимизацию по Google PageSpeed. Вполне оправданное решение, учитывая, что после выполнения всех пунктов, вы можете ускорить свой сайт в 3 – 10 раз.

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

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

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

SeoLik

Еще один сравнительно популярный способ проверки ресурсов – SeoLik. Работает по тому же принципу, что и все остальные онлайн-инструменты. Вы вводите адрес, выбираете устройство проверки (мобильный или компьютер), после чего жмете большую цветную кнопку.

Проверить скорость загрузки страницы сайта

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

Проверить скорость загрузки страницы сайта

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

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

Проверить скорость загрузки страницы сайта

Причем вам даже будут предоставлены ссылки-примеры. С их помощью вы сможете быстро определить источник и далее устранить его. Удобно, не правда ли?

PR-CY

Один из старейших инструментов для проверки оптимизации ресурсов.

PR-CY работает точно так же, как и Google PageSpeed. Там даже даются ссылки на советы по оптимизации из гугловской документации.

Проверить скорость загрузки страницы сайта

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

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

Проверить скорость загрузки страницы сайта

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

Уменьшить вес изображений на сайте можно как с помощью плагинов (если мы говорим о WordPress), так и вручную – используя графические редакторы или онлайн-сервисы. Последние не особо актуальны, т. к. в большинстве случаев они очень сильно портят качество картинок.

Pingdom Tools

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

Проверить скорость загрузки страницы сайта

Другими словами, это многофункциональный сервис, сродни Google PageSpeed. Однако, в отличие от последнего, вся информация предоставляется в удобном, разбитом на группы виде. Здесь есть подробные данные о каждом килобайте вашего сайта. Страницы, JS или CSS-файлы, их размер и многое другое.

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

Проверить скорость загрузки страницы сайта

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

Site Speed

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

Проверить скорость загрузки страницы сайта

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

Проверить скорость загрузки страницы сайта

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

Проверить скорость загрузки страницы сайта

Чтобы узнать подробности, мы должны кликнуть на соответствующие вкладки. Здесь они, к сожалению, не такие полные.

Web Page Analyzer

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

Проверить скорость загрузки страницы сайта

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

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

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

Проверить скорость загрузки страницы сайта

Заключение

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

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

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

Если вы хотите стать опытным вебмастером и зарабатывать на своих проектах, то я рекомендую вам курс Василия Блинова “Как создать блог”. Разработка сайта на WordPress, оптимизация его под поисковые системы и монетизация – все эти вещи будут рассмотрены на курсе, который постоянно обновляется и дорабатывается.

iklife.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

About the Author: admind

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

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

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