За сколько секунд должен загружаться веб-сайт в 2020, что такое «быстро», и причем тут зеркала в лифтах?

    Казалось бы, померил время от HTTP-запроса браузера до загрузки последнего байта страницы — и готово. Not so fast! У Google, например, целых 6 метрик для оценки скорости работы сайта. Под катом НЕ будет перевода документации Lighthouse и НЕ будет советов по написанию SEO текстов, зато вы узнаете:


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


    (не) Google'ом единым


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


    Скорость


    История со скоростью загрузки страниц началась еще в далеком 2009 году, когда Google выступила с инициативой “Let’s make the web faster”. В ее основе лежало видение сооснователя компании Ларри Пейджа: "Переход от одной веб-страницы к другой должен быть таким же быстрым, как перелистывание глянцевого журнала". За этим последовал выпуск набора инструментов для оптимизации сайта PageSpeed tools и функции предварительной загрузки первых результатов поиска в Chrome. В 2010 Google объявила, что при ранжировании будет учитывать скорость загрузки страниц в десктоп версии. Но на релизе это повлияло только на 1% от всех страниц. Google открыто заявила, что скорость — не ключевой фактор, и специалисты по SEO продолжили спокойно сочинять тексты и добавлять ссылки. И на этом все на следующие 7 лет.


    “Browsing the web should be as fast as turning the pages of a magazine”
    Larry Page

    Мобильные версии сайтов


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


    mobile_share


    В 2017 году Google выпустила свой хрестоматийный отчет "Mobile page speed new industry benchmarks". В 2018 году вышла его обновленная версия. Мы поговорим подробнее о них чуть позже. Летом 2018 вышел "Speed update", который внес изменения в алгоритм индексирования страниц. C июля 2018 года Google учитывает скорость работы мобильных версий страниц при ранжировании и наказывает медленные.


    Ровно через год — 1 июля 2019 года — Google начала индексировать все новые страницы с приоритетом мобильного контента. Такое индексирование означает, что рейтинг страниц зависит главным образом от их мобильной версии. Буквально на днях Google анонсировала, что с 1 сентября 2020 года все страницы будут индексироваться таким образом. Пока же Google переводит на мобильное индексирование страницы, которые считает готовыми к этому. Таких веб-страниц порядка 70%. Получается, с осени этого года, помимо прямой зависимости ранжирования от скорости работы мобильных страниц вашего сайта, добавляется косвенная. Чем быстрее работает сайт — тем больше страниц Googlebot для смартфонов успеет проиндексировать (на каждом ресурсе бот проводит ограниченное время).


    Безопасность


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


    В 2014 Google начала поощрять сайты, использующие SSL, поднимая их в выдаче.


    С января 2017 Chrome сообщает, что веб-страница “Not secure”, если она содержит поля для ввода паролей и не использует SSL.


    С июля 2018 года небезопасными считаются любые страницы, не использующие SSL.


    В 2019 Яндекс тоже начал "штрафовать" сайты без SSL шифрования.


    google_https


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


    Если с использованием TLS все более-менее понятно (есть — хорошо, нет — плохо), то со скоростью загрузки страниц все не так очевидно. Что такое быстро? На что влияет скорость? Какие показатели в среднем по сети?


    Измеряем время до...


    Итак, берем страницу, измеряем время с отправки HTTP-запроса браузером клиента до момента, когда последний байт страницы загружен — готово! Not so fast… Time to Fully Loaded (TTFL), именно его мы только что померили, не очень-то отражает реальное положение дел. TTFL не достаточно, чтобы понять насколько сайт быстрый. Еще одна популярная характеристика оценки скорость работы сайта — Time to First Byte (TTFB). Это время между отправкой HTTP-запроса пользователя и получением первого байта информации запрашиваемой страницы. Она отражает "отзывчивость" сервера, на котором находится сайт. Чтобы проверить TTFB, можно использовать отладчик браузера или консоль. В Chrome и Firefox нажмите комбинацию "Ctrl+Shift+I". Выберите вкладку "Сеть". После этого перезагрузите страницу, отфильтруйте ресурсы по типу HTML и найдите document файл. Поле "Ождиание" и есть TTFB.


    TTFB


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


    Time to First Contentful Paint (TTFCP), если коротко, — время до отображения первого элемента на экране устройства пользователя. Цветной фон, картинки, svg файлы, текст — все, за исключением встраиваемых элементов.


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


    Ну, теперь то все? — нет. Люди не заходят на страницу с секундомером в руках, чтобы засечь, когда на экране их телефона появилось хоть что-то. Главное для пользователя — восприятие времени загрузки или perceived loading duration. То, сколько он скучал, прежде чем начать пользоваться страницей.


    Объективная оценка субъективного восприятия


    Чувство восприятия времени user'а можно "обмануть", скрасив мучительные секунды ожидания. Вот любопытное исследование на эту тему — "Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations". Исследователи из Питтсбурга выяснили, что пульсирующая полоса progress bar'а кажется на 11% быстрее, чем обычная монохромная. Может, это одна из причин сложившегося предубеждения: "мак работает быстрее"?


    progress_bar


    Вот еще интересный пример манипуляции, но уже с переносом зоны ответственности. Разработчики приложения Facebook для iOS провели A/B тестирование и сравнили реакцию пользователей на кастомный индикатор загрузки и стандартный. Выяснилось, если показывать стандартный спиннер, большинство пользователей будут считать медленным не приложение, а свой телефон. Вот так можно повысить лояльность пользователей, просто заменив анимацию.


    animation_fb


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


    elevator


    И как раз тут на сцену выходит Speed Index и First Meaningful Paint. Speed Index — довольно "хитрая" характеристика. Как мы уже убедились, если пользователя развлекать — ожидание не будет для него такой большой пыткой, и время загрузки пройдет "быстрее". Speed Index во многом отражает ощущения пользователя. Итак, пусть у нас есть две одинаковые веб-страницы с TTVC 12 секунд. Страница "А" отображает большую часть контента за 1 секунду, а "B" — только под конец TTVC.


    compare


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


    graph1


    Speed Index будет определятся площадью над этим графиком (учитывая, что мы ограничим его сверху ста процентами). Для самых любопытных оставил формулу для расчета.


    graph2


    Чем Speed Index ниже — тем лучше. Получается, это совсем никакая не скорость, а скорее время, ну а по большому счету и не время вовсе. Вот такая семантическая путаница. Итак, если Time to Visually Complete отражает время до результата — полной отрисовки контента страницы в браузере — то Speed Index учитывает еще и путь, по которому мы добираемся до этого результата.


    First Meaningful Paint (FMP) показывает, когда на мониторе или экране телефона пользователя уже можно что-то почитать или посмотреть — начать потреблять контент. Если кратко, ее определяют как время за которое с отображаемой страницей происходят наибольшие перемены. Подробнее можно прочитать тут. FMP для страниц "А" и "B" будут выглядеть вот так:


    FMP


    Наконец, давайте разместим все рассмотренные метрики (события) на временной шкале.


    loading_steps.png


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


    Какие количественные данные использовать, если мы хотим оценить реакцию посетителей на скорость загрузки страниц? Для этого хорошо подходят величины, традиционно используемые в SEO для оценки UX:


    • показатель отказов (bounce rate) — отношение числа посетителей покинувших сайт со страницы входа к их общему числу.
    • время на сайте (time per visit) — время, которое посетитель провел на сайте, прежде чем уйти
    • число страниц за посещение (pageview per visit) — сколько страниц посетитель просмотрел, прежде чем уйти
      Эти метрики зависят от многих факторов, но скорость работы веб-страницы — один из важнейших. Давайте смотреть, что нам сообщают исследования.

    Что говорят сами пользователи


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


    52% пользователей готовы отказаться от анимации и видео на сайте, если это сделает его быстрее.


    Уже после трех секунд ожидания половина посетителей покинут страницу, и это не удивительно. У большинства веб-страниц нет progress bar'а. User не знает, сколько ему еще осталось ждать — секунду, две или десять. Он перейдет на другую вкладку, нажмет "back to previous page" или вообще закроет браузер и откроет Instagram. Учитывая, что attention span зумеров сильно сократился из-за Instagram, TikTok и прочих Twitter'ов, страницы должны загружаться молниеносно.


    79% пользователей повторно не вернутся за покупкой на медленно работающий сайт.


    66% пользователей считают скорость работы сайта важной частью имиджа компании.
    Более того, по разным оценкам от 12% до 44% пользователей поделятся своим негативным опытом и предостерегут знакомых от использования медленного ресурса. Как заметил Дуглас Адамс в 5 части своего культового цикла "Автостопом по галактике": "Ничто не движется со скоростью большей, чем скорость света, за исключением, может быть, плохих новостей, которые подчиняются своим, особенным законам"


    "Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws"
    Mostly Harmless, Douglas Adams

    Что показывает статистика


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


    prob


    Akamai опубликовала результаты с еще более резкими зависимостями. Каждые 100 миллисекунд ожидания снижают конверсию на 7%. Каждые 2 секунды ожидания увеличивают вероятность отказа на 103%.
    The Daily Telegraph совместно с Optimizely провели свое исследование в 2016 году. Они внесли дополнительную искусственная задержку при загрузке страниц, результаты — на картинке ниже. The Daily Telegraph — одна из самых популярных газет Великобритании с ежемесячной посещаемостью в 70 млн., достаточно возрастной (читай терпеливой) и лояльной аудиторией. Учитывайте это, когда будете смотреть на график.


    telegraph


    Ну и вдогонку еще несколько оценок от гигантов e-commerce. Walmart и Amazon сообщают, что каждые сэкономленные 100 миллисекунд времени загрузки их сайта увеличивают прибыль на 1%. На Edge of Future Commercials 2016 AliExpress [заявили], что после того, как они снизили время загрузки своего сайта на 36%, число заказов возросло на 10.5%. Среди новых покупателей конверсия выросла на 27%.


    Сколько секунд — хорошо?


    Веб-мастера Google могли дать фору многим политикам, отвечая на вопросы про скорость загрузки в рубрике Ask Google Webmasters. Они так и не дали четкого временного интервала допустимой скорости загрузки. Нам посоветовали делать сайт настолько быстрым, насколько возможно, не впадая в крайности при погоне за PSI score, и как обычно рекомендовали сосредоточится на контенте.Прочитать про PSI score и измерить его для любого сайта вы можете здесь, а вот пост на Хабре, где его померили за вас.
    Большинство ресурсов, на которые я здесь ссылаюсь, сходятся на том, что хорошее время загрузки — не более трех секунд. Разные источники понимают под этим временем разные вещи, как минимум это Visually Complete, как максимум — полная загрузка. Как показывают исследования, среднее время загрузки мобильных и десктоп страниц сильно больше этого показателя.


    В первой версии отчета "Mobile page speed new industry benchmarks" среднее время загрузки лендинговых страниц составило 22 секунды.


    В обновленной версии 2018 года, этот показатель улучшился до 15.3 секунд.


    В 2019 году Backlinko проанализировали 5 миллионов страниц и установили, что среднее время полной загрузки мобильной страницы — 27 секунд! А среднее время полной загрузки десктоп версии — 10 секунд.


    Цифры отличаются потому, что Google анализировал только лендинговые страницы, а Backlinko — все подряд. Теперь немного статистики по Speed Index. На картинке ниже — сравнение средних показателей времени загрузки веб-страниц в 2019 году. Еще раз убеждаемся, насколько Speed Index и Visually Complete — разные вещи.


    backlinko


    В 2010 году Мэйли Охей (Maile Ohye), на тот момент Developer Programs Tech Lead в Google, сказала, что они нацелены на показатель в пол секунды. Спустя десять лет ее заявление выглядит примерно, как 2015 год в Back to the Future II.


    "...studies by Akamai who found that two seconds is actually the threshold for e-commerce site acceptability. Meaning that that’s what users like to shop with. At Google, we aim for under a half second..."
    Maile Ohye

    backtofuture


    Самое главное


    • В 2020 большая часть интернета все еще очень медленная, а хорошее подключение к сети позволяет в этом убедиться.
    • Скорость загрузки существенно влияет на доход, будь это продажи или реклама.
    • Люди заходят в интернет с мобильных устройств чаще, чем с десктопа.
    • Удобство и скорость мобильной версии сайта не менее важны, чем его настольной версии.
    • Удобным, быстрым и безопасным сайт нужно делать, прежде всего, для реальных пользователей, а уже потом — чтобы Google по голове погладил.
    • При индексировании сайтов в приоритете у Google мобильные версии.
    • Время полной загрузки страницы не всегда отражает реальный опыт пользователей. Нет магического числа, которое бы однозначно показывало скорость работы сайта, но есть набор общепринятых метрик.
    • Скорость работы для пользователя важнее красивой анимации, видео (если это не стриминговый сервис) и других декоративных элементов.
    • Если ваш сайт выглядит готовым к работе через 3 секунды после перехода — это хорошо.

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

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

    Больше всего раздражает в сайтах

    • 15,8%медленные страницы22
    • 0,7%неработающие видео / неотображаемые картинки1
    • 9,4%недружелюбный UI13
    • 73,4%pop-up'ы с рекламой / опросами / предложениями102
    • 0,7%другое1

    Приемлемое время загрузки / я готов подождать (супер уникальныйсуперуникальный контент в расчет не берем)

    • 6,8%19
    • 18,2%224
    • 30,3%340
    • 34,1%545
    • 10,6%714

    Чаще всего я потребляю контент

    • 59,3%десктоп версий83
    • 10,0%мобильных версий14
    • 30,7%поровну43
    DDoS-Guard
    Комплексные решения для защиты и ускорения сайтов

    Комментарии 26

      +7
      Больше всего раздражает в сайтах

      Вылезающий с громким чпокающим звуком на четверть экрана «чат с консультантом» и мигающее на тайтле вкладки «1 новое сообщение».
        +4

        И баннер об использовании куки

          +1
          Особенно на телефоне — занимает не меньше полэкрана
            –1
            Никто бы этот баннер в здравом уме не вешал, если бы не штраф в 75 тысяч рублей за его отсутствие, если на сайте есть хоть какая нибудь завалящая форма обратной связи.
              +1
              А можно пруф про 75 тысяч рублей?
              0

              А какая связь между формой обратной связи и кукой?

                0

                Csrf токен

                +1
                Не путайте законы ЕС и РФ.
                  –1

                  Да я как бы не путаю. 19.7 КоАП РФ. «ЭЖ»: В споре Роскомнадзора с МТС (дело № А40-14902/16) суд решил, что пользовательские данные, собираемые с помощью cookie-файлов, тоже являются персональными данными и нужно получать согласие на их обработку.

                    +1
                    Только для этого не нужно всплывающее окно для формы обратной связи/регистрации и т.п. достаточно чекбокса типа: «Я принимаю пользовательское соглашение и подтверждаю, что согласен с политикой конфиденциальности» и ссылок на эти документы, для каждого сайта они свои. Если же ведётся ком. деятельность и в ЕС, то тут да, нужно всплывающее предупреждение о том что вы собираете куки.
            0
            В начале статьи нам говорят, что существуют шесть метрик скорости загрузки сайта, потом рассказывают про разницу между ttfcp и ttvc. А потом в опросе просто «сколько вы готовы ждать»? Ждать чего?
            Текст и стили должны загружаться и отображаться так чтобы ты этого толком не успевал заметить. Если на странице есть ещё полноцветные картинки и т.п. которые просто не могут успеть прокачаться за миллисекунды, то они могут грузиться сколько надо. Если их нет, то секунда это уже долго.
            До того как интернет обмазали толстым слоем джаваскрипт оно приблизительно так и было. И сейчас можно найти много старых сайтов, которые грузятся меньше чем за секунду. При этом не сказать что там не хватает функций. Даже JS есть, только не мегабайтами.
              0
              79% пользователей повторно не вернутся за покупкой на медленно работающий сайт.

              Если сайт продаёт на лучших условиях (цена/качество/etc) чем быстро работающий — то ещё как вернутся.


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

                +1
                Но если условия у конкурентов не отличаются — но там работает сайт быстрее… Не вернутся…
                И сайт не только должен работать быстрее, а ещё и удобнее… На скорость правда я лично редко обращаю внимание (если он реально не очень тормозной), а вот юзабилити — очень важно… А потом — скорость обработки заказа, скорость доставки и т.п.

                Вот у алиэкспресса — ужасный сайт… Но они вывозят на другом
                  0

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

                    0
                    или им просто пофиг — клиент всё равно вернётся…
                      0
                      Поэтому я считаю верным решение гугла понижать в выдаче медленные сайты… Хотя к их метрикам вопросы есть, но сама идея — хороша
                        +1

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


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

                          0
                          Я ж не говорю про прямое отношение скорости к позиции в выдаче. А о том что именно тормознутые и очень медленные сайты нужно принудительно понижать в позиции…
                  +2
                  Бичь 2019-2020 года — это всплывающие уведомления, онлайн помощники, пуш нотификации и прочая ересь которую приходится отключать (на это тратится куда больше времени чем на ожидание)
                  Может за всеми этими свистелками и скрывают долгую отдачу контента? )
                    0
                    кстати ко времени ожидания надо добавить время потраченное на закрытие всех этих уведомлений, пушей и т.п.
                    Т.е. надо считать время от ввода адреса (нажатия на ссылку) до возможности полноценно пользоваться контентом сайта… Хм. Ютуб получается тут вообще сильно проигрывает (если не пользоваться адблоками)…
                    +1
                    Гугл — мы хотим чтобы странички грузились быстрее. Он же — выпускает новый гмайл.
                      +1

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

                        +1
                        Вот кстати да. С трудом представляю себе ситуацию, когда я закрою сайт, потенциально содержащий искомую мной информацию, через 3-5-7 секунд. Но вот тормозящий «обвес» иногда все же вынуждает это сделать.
                        0
                        Когда сайт долго подгружается — это действительно раздражает и сказывается на поведении пользователей. Однако когда дело касается продаж, на решение потребителя купить тот или иной товар все-таки в большей степени будет влиять его цена, а не то, как быстро загрузился ресурс, где он размещен. Если на условно медленном сайте цена более приемлема, конечно человек туда вернется.

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

                        Резюмируя, тенденция такова, что чем дольше загружается сайт, тем ниже его эффективность в плане конверсии, но это не самый критичный фактор, когда дело касается конечного решения о покупке.
                          0
                          Согласен. Привлекательность для потребителя зависит от многих факторов. Иначе говоря, это многомерная функция. Поэтому предлагаю смотреть на анализ следующим образом: есть магазин, и у этого магазина — два сайта. Медленный и быстрый. Понятно, что цены и ассортимент одни и те же — магазин то один. Вот такой сферической конь в вакууме. Хотя, например, The Daily Telegraph именно такой эксперимент провели: одним пользователям подсовывали медленные страницы, а остальным обычные.

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

                        Самое читаемое