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

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

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

Почему время загрузки страниц сайта имеет ключевое значение

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

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

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

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

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

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

• Увеличение количества посетителей сайта.

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

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

• Повышение качественного уровня пользовательского опыта.

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

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

Источник: shutterstock.com

• Удержание посетителей ресурса.

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

В результате полученных данных было выявлено, что у ресурсов, загрузка которых длится 5 секунд, продолжительность нахождения посетителей на сайте увеличивается на 70 %, а процент отказов снижается на 35 %. Рекламные объявления на таких сайтах просматриваются на 25 % чаще, чем на ресурсах, время загрузки которых составляет 19 секунд.

• Увеличение конверсии.

Конверсия пользователей во многом зависит от удержания посетителей. Ресурсы с длительным временем загрузки дают меньшую прибыль. По статистике компании Mobify, каждое увеличение скорости загрузки главной страницы ресурса на 100 мс приводило к росту конверсии на 1,11 %, что в денежном выражении приводило к увеличению поступлений на 380 тыс. $.

Такие же исследования в отношении страницы корзины привели к еще более положительным выводам: уменьшение времени загрузки на 100 мс повысило конверсию на 1,55 % и поспособствовало повышению среднегодового дохода на 530 тыс. $.

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

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

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

Источник: shutterstock.com

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

1. Запрос Domain Name System на название сайта.

2. Установка связи с сервером (проверка IP по TCP-протоколу).

3. Безопасное соединение происходит, используя HTTPS-протокол с соединением TLS.

4. Запрашивается HTML-страница по URL-адресу, ожидание сервера (HTTP-протокол).

5. Загрузка HTML-кода.

6. Браузер анализирует HTML-документ, далее он формирует запросы к ресурсам, которые имеются у веб-документа.

7. Загрузка и разбор Cascading Style Sheets (таблицы каскадных стилей). Выполнение загрузки JS-кодов.

8. Процесс отрисовки страницы, активизация скриптов JS.

9. Подгрузка шрифтов.

10. Загрузка изображений и прочих элементов.

11. Загрузка оставшихся кодов и скриптов, итоговое отображение страницы.

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

Стадии 1–4 пунктов связаны с оптимизацией на сервере. А все остальные этапы — оптимизация самого пользователя. Разные сайты имеют индивидуальное время на проведение каждого этапа. Грамотному специалисту необходимо узнать метрики, чтобы проводить проверку на скорость загрузки сайта. Так вы сможете обнаружить и исправить проблемы быстрее.

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

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

• Воспользоваться панелью разработчика из браузера.

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

• Использовать один из веб-сервисов для проверки времени загрузки сайта. Об этом мы расскажем ниже.

• Для определения времени загрузки сайта «Гугл» имеет собственный сервис Google PageSpeed Insights. С помощью ресурса можно быстро и четко понять, почему сайт работает медленно, однако полного отчета сервис не предоставляет.

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

Для вычисления скорости сервера веб-мастер должен проверить следующие параметры:

• Хостинг.

• Сервисы базы данных.

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

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

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

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

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

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

Поисковый гигант сделал вывод: если выдавать в поиске медленные ресурсы, компания будет нести огромные денежные потери. С того момента (2010 год) Google всегда учитывает скорость загрузки сайтов при выдаче их в поиске.

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

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

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

Измеряется время загрузки сайта в секундах. Сегодня выделяют три вида скорости загрузки сайта. А именно:

• Нормальная — 1 с.

• Средняя — до 2 с.

• Медленная — более 3-4 с.

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

Главное — нужно определить, что мы хотим измерить.

1. TTFB (Time To First Byte), или время до получения первого байта. То есть промежуток времени с момента загрузки до момента получения первого байта страницы. Данный параметр является основной метрикой, по которой можно судить об оптимизации.

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

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

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

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

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

1. Инструменты «Яндекса»

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

Чтобы в Яндекс-отчетах найти необходимую информацию, перейдите во вкладку «Отчеты», далее выберите подраздел «Стандартные отчеты». Затем «Мониторинг», где и находятся нужные данные по времени загрузки.

Отчет содержит следующую информацию:

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

• Продолжительности загрузки одной страницы.

• Скорость загрузки Турбо-страницы.

• Качество работы сайта и его скорость в различных географических точках.

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

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

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

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

• Система доменных имен (обработка запросов). Критерий, который выражает все затраченное на обработку запросов время в процессе загрузки страницы. Учитываются значения выше 0. Система доменных имен (DNS) зависит от скорости работы серверов, которые ее обслуживают.

• Редирект. Учитываются затраты по времени на проведение HTTP-переадресации в процессе. Естественно, подсчеты формируются во время загрузки сайта. Важны лишь значения, которые выше 0.

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

• Ответ сервера. Время, за которое HTTP-сервер запросил информацию на страницу и получил ее в ответ от браузера. Параметр также учитывает лишь значения, которые не равны нулю. Время может менять значение в зависимости от веса страницы, скорости Интернета и генерации ответа от сервера.

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

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

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

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

2. Инструменты Google Chrome

Google предоставляет своим пользователям разнообразные инструменты для анализа интернет-ресурсов. Лучший набор функций представлен в Chrome. В подразделе «Сеть» есть возможность определить время загрузки нескольких показателей (также HTML-файл).

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

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

3. Google Analytics

Многофункциональный сервис аналитики от «Гугла», позволяет проверить и увеличить количество запросов на любом ресурсе. Сначала Google Analytics может выглядеть немного сложным для работы, однако постоянная практика изменит это мнение. После нескольких сессий в этой программе вы будете без проблем находить нужные вкладки и наслаждаться работой.

Данный инструмент сможет провести анализ следующих параметров:

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

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

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

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

• Зарегистрировать аккаунт в «Гугле».

• Пройти авторизацию.

• Зайти на www.analytics.google.com.

• Завести учетную запись.

• Выбрать нужное представление.

• Зайти в раздел «Отчеты», выбрать подраздел «Поведение».

• Пройти по ссылке «Скорость загрузки сайта».

• В разделе «Время загрузки страниц» найти нужную информацию. Полученные сведения можно фильтровать и сортировать по различным параметрам и критериям системы.

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

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

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

4. Google PageSpeed Insights

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

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

PageSpeed Insights показывает такие результаты, как:

• время с отправки запроса до момента, когда начала прорисовываться верхняя часть страницы;

• время полной загрузки страницы (всех элементов).

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

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

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

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

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

5. YSlow

Инструмент проводит тестирование времени загрузки страниц в несколько этапов:

• Сканирование DOM. Помогает обнаружить все элементы страницы (видео и картинки, коды и т. п.).

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

• Анализ и оценка собранных данных.

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

6. GTmetrix

Сервер расположен в Канаде (Ванкувер). Инструмент дает возможность проводить анализ загрузки с помощью Google PageSpeed и YSlow.

Пользоваться сервисом легко. Достаточно вставить URL-адрес и нажать «Анализировать». Результатом будет сортировка объектов от худшего показателя и выше. Это даст пользователю полную картину мест, которые необходимо улучшать.

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

Если вы уже не новичок в GTmetrix, воспользуйтесь функцией «Waterfall». В ней вы найдете список файлов, существующих на странице, и указанные для них скорости работы. Сервис также предоставляет возможность загрузить отчет в формате PDF. Сам сервис визуально напоминает инструмент у Chrome или Firebug Net Panel.

Отчеты сохраняется в истории, что очень полезно. Можно сравнить данные в последующие анализы работы.

7. Web Page Analyzer

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

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

8. Pingdom Tools

Несложный в использовании сервис, определяющий работоспособность и время загрузки сайта. Веб-мастеру доступна функция смены геолокации сервера (три точки на выбор: Австралия, Америка и Швеция). В https://tools.pingdom.com/ копируем нужный нам сайт, выбираем сервер и начинаем тест.

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

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

9. Which Load Faster

Онлайн-сервис Which Load Faster сравнивает характеристики страниц и скорость их загрузки для двух сайтов. К примеру, вашего ресурса и сайта конкурента.

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

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

10. Web Page Performance Test

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

• использование ПК или мобильного устройства;

• операционная система;

• вид браузера;

• геолокация сервера;

• используемый интернет-канал;

• количество проводимых тестов;

• работа видео и изображений, кодов и т. п.

С Web Page Performance Test легко проанализировать сайт. Достаточно лишь зайти на официальную страницу сервиса — webpagetest.org и перейти на «Simple Testing». Ссылку на тестируемый сайт вставляем в открывшееся окно. Далее нужно выбрать скорость вашего Интернета (3G, 4G или другой вид подключения) и начать тест.

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

11. KeyCDN Speed Test

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

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

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

12. Load Impact

Сервис требует больше времени на проверку, чем большинство других ресурсов. Однако качество тестов будет на высоте.

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

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

13. DareBoost

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

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

14. Varvy Pagespeed Optimization

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

Отчет от Varvy Pagespeed Optimization включает 5 разделов. Внутри вы найдете подробное описание диаграмм, JavaScript, анализа каскадных таблиц стилей, обнаруженных проблем, влияющих на скорость работы объекта.

15. Uptrends

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

16. dotcom-monitor

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

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

17. PageScoring

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

• Домен.

• Время, необходимое для соединения.

• Время для перенаправления.

• Размер страницы.

• Время полной загрузки страницы.

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

18. Yellow Lab Tools

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

Yellow Lab Tools оценивает сайты на скорость, используя нижеперечисленные параметры:

• Запросы по странице.

• Вес отдельной страницы.

• DOM.

• Неправильно настроенные скрипты JS.

• Некачественно настроенные каскадные таблицы стилей.

Взаимодействия DOM отображаются в графике JavaScript в процессе загрузки.

19. Monitis Tools

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

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

http://www.monitis.com/pageload/ — по этой ссылке можно проверить сервис. Его серверы расположены в трех точках земного шара: в Америке, Европе и Азии.

20. SiteSpeed.me

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

21. PR-CY

С помощью данного сервиса вы сможете увидеть скорость загрузки сайта визуально. После получения отчета вам будут даны советы по улучшению работы сайта как для ПК, так и для мобильных устройств. Используем http://pr-cy.ru/speed_test/, далее выбираем «Анализировать».

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

22. Seo28

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

Одна из функций — ссылка на предыдущие результаты проверки скорости сайта.

23. Sucuri Load Time Tester

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

24. Pagelocity

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

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

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

Как уменьшить время загрузки сайта: пошаговая инструкция

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

Шаг 1. Оптимизация картинок

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

На что следует обратить внимание?

1. Размеры (ширина и высота изображений)

   Фотографии с шириной на уровне 5000 пикселей можно, не задумываясь, уменьшать до ширины 1600. Чаще всего такого размера вполне достаточно. Исключением могут считаться онлайн-магазины, где есть возможность рассматривать продукцию с «лупой», но и в этом случае увеличенное изображение грузится, только если покупатель нажал соответствующую кнопку.

2. Вес изображений в килобайтах

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

3. Миниатюры к большим изображениям

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

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

Шаг 2. Gzip-сжатие

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

При установленной утилите Gzip проверка PageSpeed покажет, что присутствуют «Внедренные приемы оптимизации».

Шаг 3. Кэширование на стороне браузера

При загрузке страниц сайта браузер сохраняет часть данных в свою память (кэш, cache). Благодаря этому при повторном посещении страницы поисковик не будет тратить время на то, чтобы опять получить файлы, стили и другие данные, а просто подгрузит нужную информацию из кэша. Чтобы очистить cache своего браузера, можно воспользоваться комбинацией клавиш CTRL + F5 или использовать кнопку «Очистить кэш» в настройках браузера.

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

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

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

Шаг 4. Минимизация css- и js-файлов

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

Плагины и библиотеки, пользующиеся популярностью у веб-мастеров (jQuery, Bootstrap и т. д.) имеют сокращенные версии скриптов и стилей. На сайт стоит подключать именно минимизированные варианты. К примеру, стандартный вариант скрипта jQuery весит 265 Кб, а сокращенная версия — всего 85 Кб. Разница существенная.

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

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

Шаг 5. Порядок загрузки css- и js-файлов

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

Чтобы обеспечить эффективную загрузку файлов в браузере, следует в начале кода страницы подключать все файлы стилей (css) и шрифтов (в теге <head>), а файлы со скриптами (js) лучше расположить в конце, перед закрывающим тегом </body>.

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

Шаг 6. Лишние плагины или счетчики

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

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

Шаг 7. Использование CDN

CDN (Content Delivery Network, сеть доставки контента) — это сеть многочисленных серверов, которые распределены по территории страны и всего мира. Каждый такой сервер дублирует информацию, полученную с основного хостинга ресурса (дублирование контента осуществляется при первом запросе посетителя). Полученные данные будут храниться некоторое время.

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

Рассмотрим два варианта использования CDN:

1. Загрузка использованных скриптов. Это могут быть популярные плагины jQuery, Bootstrap, шрифты WebFonts и т. д. К примеру, можно дать браузеру указание по загрузке скриптов не с основного сервера, а с серверов Google, Bootstrap и других CDN.

2. Загрузка изображений картинок и скриптов со своих CDN. Наиболее мощные интернет-ресурсы (Ozon, Avito и т. д.) настраивают собственные CDN на своих серверах или сервера CDN-сетей (к примеру, Google Cloud или Stack Path). В функционал наиболее популярных CMS-платформ уже включена поддержка CDN. Так, Битрикс использует бесплатный плагин «Ускорение сайта (CDN)».

Шаг 8. Сокращение числа http-запросов

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

Вручную объединять файлы не очень удобно. К тому же в будущем может возникнуть необходимость в замене одного из скриптов. Чтобы избежать сложностей, следует использовать автоматическое слияние файлов, для которого у многих CMS есть специальные плагины (к примеру, Autoptimize для WordPress).

Снизить количество http-запросов для браузера позволяют также настройки кэширования (шаг 3) и удаления лишних скриптов (шаг 6).

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Шаг 9. Оптимизация шрифтов

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

Оптимизации размера страниц будет способствовать и отказ от устаревших форматов. Старые шрифты, чтобы нормально отображаться в браузерах, загружались в форматах eot, ttf, woff, svg, а для новых используются только два формата: woff и woff2.

Более того, наиболее популярные шрифты загружаются с Google Fonts. Это не только уменьшает нагрузку на сервер хостинга, но и оптимизация файлов будет выполняться «Гуглом».

Шаг 10. Сокращение HTML-кода

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

Шаг 11. Оптимизация работы сервера

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

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

Шаг 12. Оптимизация скриптов и баз данных

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 17.01.2020

Последние статьи этого автора:

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

Забрать гарантированный подарок

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

Скачать 3,2 MB