Сайт глазами посетителей

29.08.2014

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

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




По данным исследования американской компании Akamai:

• 47% пользователей ожидают, что веб-страница загрузится в течение 2 секунд;
• 40% посетителей могут уйти с сайта, который грузится более 3 секунд;
• 52% утверждают, что быстрая загрузка влияет на их лояльность;
• 3 секунды ожидания уменьшают лояльность клиентов примерно на 16%
  

Вдумайтесь, половина посетителей вашего сайта уйдут, если он не загрузится за ДВЕ секунды!

То, что скорость загрузки сайта влияет на поведение пользователей, подтверждается и в другом исследовании — The Gomez Peak Time Internet Usage Study, проведённом Equation Research:

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

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

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

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

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

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

Как мы решили данную проблему

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

Встречайте новый инструмент, интегрированный в «1С-Битрикс: Управление сайтом», который покажет вам реальную скорость отображения вашего проекта у ваших клиентов.

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




В приведенном примере сайт у последней 1000 посетителей открылся, в среднем, со скоростью 0,76 секунды, что характеризуется как «быстро».

Перейдем на страницу с подробной информацией, нажимая на слово «Быстро» или «Рабочий стол -> Настройки -> Производительность -> Скорость сайта»:




Перед нами откроется страница с подробным состоянием замеров скорости.

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

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

На скорость загрузки сайта оказывают влияние различные факторы:

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

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

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



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

Как работает технология?

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




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

Человек вводит адрес сайта в строку браузера.

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

2 ЭТАП. Дальше отрабатывает DNS (DNS Lookup). В большинстве своем, запрос к DNS по скорости близок к нулю, так как данные кешируются и браузерами, и самими серверами DNS (локальными, серверами провайдера и т.п.). Мы учитываем этот параметр и выводим его на график.

На скриншоте наглядно отображено, как это выглядит и сколько на это тратится времени:



3 ЭТАП. Дальше происходит «Подключение к серверу» (Connect to Server) и разрешение на дальнейшие действия. Это некое «рукопожатие», мы так же выводим это время на график:




4 ЭТАП. Следующий шаг – это «Ответ сервера» (Request Document). Этот параметр мы также выводим на график, Чем дальше от ваших клиентов находится сервер, тем больше будет этот показатель. По нему можно ориентироваться, сколько теряется времени на ответ сайта посетителю.

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

Давайте посмотрим на скриншоте:


5 ЭТАП. Дальше происходит загрузка HTML (Receive Document). Здесь учитывается время загрузки HTML-страницы для ее последующей обработки. Например, при загрузке ресурсов на этот параметр сильно влияет размер страницы.

Этот процесс отображен на следующем графике:




6 ЭТАП. После того, как страница загрузилась, начинается процесс ее обработки – «Обработка HTML» (Process the Document and Load the DOM, но здесь учитывается не весь блок, а только от domLoadding до domInteractive) и загрузки ресурсов.

Вот здесь при наличии ошибок в разработке, процесс загрузки страницы может очень «просесть». В момент обработки некоторые браузеры могут параллельно загружать ресурсы (CSS, JS) в многопоточном варианте, поэтому постарайтесь в процессе разработки вынести загрузку ресурсов в тег «HEAD».

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

В этом случае вам поможет включение объединения CSS и JS, которое предусмотрено в «1С-Битрикс: Управление сайтом». Все ваши файлы будут объединены в один и загружены намного быстрее.

Обратите внимание, объединение работает, только если файлы подключаются через механизмы продукта:



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

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

Как это выглядит в теле страницы:




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

Посмотрим, как это выглядит на нашем графике:




8 ЭТАП. Ресурсы загрузились или продолжают загружаться, и начинается процесс «Отрисовки страницы». Это уже не одиночный процесс, это сумма всех процессов, которую лучше показать на рисунке:



Давайте посмотрим, как это отображается у нас на графике:





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




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

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