Скорость загрузки непосредственно влияет на показатель эффективности сайта и поведенческие факторы. Служба Search Console Google подготовила отчеты, в которых фигурируют следующие данные: рост скорости от 1 до 3 секунд способствует ухудшению показателей отказов на 32 %, а замедление загрузки до 6 секунд – увеличению до 106%. В силу этого мы не перестаем писать о необходимости оптимизации скорости работы сайта.
Влияние скорости загрузки на сайт
Начнем рассматривать влияние скорости загрузки на сайт с отказов. Отказ происходит тогда, когда посетитель сайта закрывает ресурс и переходит на другую страницу. Браузер предполагает, что данный сайт не удовлетворяет запросу пользователя. Отказы не связаны напрямую при ранжировании. Однако, не следует забывать про поисковую оптимизацию (SEO), на которую отказы влияют косвенно.
Процент, при котором ухудшается распределение, неизвестен. Тому пример исследование выдающегося специалиста по поисковому продвижению Рэнда Фишкина. Данные получились неопределенными: место в поиске и количество отказов взаимосвязаны, однако правила, по которым идет расчет, так и не определены.
Теперь о показателе эффективности сайта. Цифровые данные о конверсии (CR) представляет только mPulse Mobile, занимающаяся контролем мобильных приложений и измерением уровня удовлетворенности пользователей. Она вычислила, что у ресурсов с загрузкой:
• 2,4 секунды CR составляет 1,9%,
• 3,3 секунды CR составил 1,5%,
• 4,2 секунды CR составил 1%,
• 5,7+ секунд CR составил 0,6%.
Это не единственный проект, который делится недавними цифрами. Тенденция интернет-магазина с товарами французского производителя Rossignol, занимающегося созданием товаров для туризма и спорта, сохраняется. Повышение скорости загрузки до 1,9 секунд способствовало росту CR на 94% относительно предыдущего года. Компания убеждена, что повышение показателя коэффициента конверсии нельзя определенно приурочить к ускорению, но оптимизация скорости, без сомнения, повлияла на это.
Скорость загрузки мобильной и десктопной версии
По статистике с 2019 года мобильный трафик по всему миру преобладает над декстопным. Это важно для бизнеса, ведь тогда, акцентировать внимание следует на увеличении скорости загрузки мобильных версий сайтов. Поэтому и для Google, на первом месте, именно мобильные версии.
Адаптивный шаблон для мобильной и декстопной версий позволяет оптимизировать работу: код, сценарии и стили подгружаются одни и те же. Кроме того, скорость загрузки улучшается для любых устройств. Для этого разработчику нужно только один раз проработать технические вопросы. Если для мобильной и декстопной версий разрабатывались отличные друг от друга варианты, то следует сначала проработать мобильную версию. Потому как мобильная версия является популярнее.
Параметры оценки скорости
На данный момент у Google существуют 6 параметров оценки скорости:
1. FCP — метрика, использующаяся для измерения воспринимаемой скорости загрузки страницы.
2. SI — индекс скорости загрузки, показывающий насколько быстро страница перестает меняться визуально.
3. LCP — время, за которое крупные элементы предстают перед пользователем в нормальном виде.
4. TTI — время вывода на экран первого интерактивного элемента страницы.
5. TBT — временной интервал, через который появляется основной контент. Измеряется в миллисекундах.
6. CLS — метрика, показывающая, насколько элементы на странице смещаются во время ее загрузки.
Сервис PageSpeed до сих пор использует метрику FID. Однако в новой версии движка Lighthouse 6 показатель FID убрали, а функцмю метрики распределили между параметрами TBT и LCP. Пользуясь случаем, предлагаем познакомиться с калькулятором баллов Lighthouse, позволяющий сравнить версии Lighthouse, поработать с метрика, наглядно убедиться в важности отдельного показателя и его влиянии на итоговую оценку. Это очень интересно и познавательно!
Улучшение FCP
Показатель FCP имеет большое значение. Благодаря ему можно понять, насколько сайт удовлетворяет запросу пользователя. Посетителю важно, чтобы содержание сайта прогружалось быстро, поэтому разработчику обязательно нужно устранить со страницы элементы, блокирующие отрисовку. Можно, например, реализовать отложенное выполнение сценариев.
Оптимизируем LCP
Для повышения ускорения метрики LCP необходимо сначала определить, что на главной странице выступает крупным контентом. Например, слайдер в шапке или H1.
После того, как были найдены крупные контенты, необходимо предусмотреть факт того, что они не должны быть в отложенной загрузке. В противном случае, это приведет к падению параметра в красную зону. Кстати говоря, изображения, H1 или шрифты, особенно те, которые в Google Fonts, вообще можно внести в предзагрузку.
Кроме упомянутых способов оптимизации метрики LCP, можно попробовать бинарную версию протокола — HTTP/2. Протокол HTTP/2 обеспечивает предварительную загрузку сценариев, стилей и картинок, запрос которых планирует пользователь. Технический процесс не вызывает затруднений, однако HTTP/2 оптимизирует скорость загрузки до 30%.
Извлечение TTI из красной область
Метрика TTI попадает в красную зону из-за сторонних сценариев. Если их тяжело заменить родными, следует отодвинуть их на несколько секунд. Хотя даже родные сценарии, бывают тяжелыми. Для оптимизации метрики TTI нужно их разделить на более мелкие или отложить. Это позволит посетителю как можно быстрее взаимодействовать с сайтом.
Подгрузку видеохостингов, карт и другого iFrame контента, также рекомендуется отсрочить. Данный подход не блокирует основной поток отрисовки, а начинает работу исключительно по желанию пользователя (после клика по кнопке запуска). Метрика TTI связана еще и с тяжелыми библиотеками, которые оказывают на нее влияние. Например, старая библиотека jQuery.
Как ускорить TBT
Представим наличие на странице большого скрипта. В этом случае работа метрики TBT, зависящая от длительных задач, наиболее значительна.
Для исключения метрики из красной области необходимо разделить сценарии на более мелкие, запуск которых происходит последовательно. В таком случае сценарии не будут препятствовать друг другу. Вполне хватит паузы в 10 миллисекунд. Такой способ позволяет вывести сайт по метрике TBT в зеленую область.
Для ускорения TBT происходит отложение функционала, который не так важен при отрисовке, на несколько секунд. Примером служит уточнение местоположения.
Корректирование CLS
Улучшить показатель CLS можно только одним способом: выделением места под каждый ключевой блок страницы.
Каким способом оптимизировать SI?
Метрика SI имеет прямую связь с TTI, FCP и LCP, потому мы разбираем ее последней. Когда каждая из показателей переходит в зеленую область, то автоматически в эту область переходит и индекс скорости загрузки.
Чем еще можно воспользоваться для оптимизации?
Новый хостинг или сервер. На самом деление ограниченный объем ОЗУ тормозит ресурс. Это заметно при скачущей нагрузке. Чаще всего, проекты вырастают из ранее потребляемого трафика, им не хватает начального тарифа. Встает выбор: хостинг или сервер? Хостинг подойдет корпоративному проекту, имеющему не более 10 страниц. Чего не скажешь о магазинах, с большим ассортиментом, у которого достаточно много страниц. Для такого случая, лучше использовать виртуальный отведенный сервер. Кроме того, выделенный физический сервер, обеспечивает безопасность, потому, их лучше использовать сайтам госорганизаций и крупным сетевым СМИ.
CDN. CDN обеспечивает быструю загрузку содержимого страницы, перенаправляя посетителя на ближайший кэширующий сервер в сети. Местоположение пользователя сильно влияет на время ответа: чем дальше он от сервера, тем дольше приходится ждать. Услуга CDN платная. Однако эффективность ее работы покрывает все затраты.
А если задуматься об этом позже?
Не стоит откладывать на потом то, что можно сделать прямо сейчас. 17 августа 2020 г. в блоге Google объявили о маркировке быстрых сайтов. В 85-й и дальнейших выпусках Chrome для Android особым знаком «Быстрая страница» будут маркироваться только быстрые ресурсы. Google также поработает над оценкой: планирует ввести метрики Core Web Vitals.
Есть действенный способ, чтобы проверить, как поисковая система маркирует ваш сайт на текущей версии Chrome. Для этого нужно выполнить следующие шаги:
1. Набрать в строке Chrome://flags
2. Активировать опцию «Информация о производительности контекстного меню и удаленное получение подсказок»
Почему в этой статье мы охватили наиболее трудные, но и наиболее действенные методы повышения скорости работы? Скорее всего, вы уже знакомы со стандартными способами настройки кэширования, сжатия графики и пр., знания которых вам недостаточно. Поэтому, этой статье место быть. Однако, для осуществления вышеперечисленного, нужны разработчики, имеющие опыт. Если среди вашего окружения они есть, то пользуйтесь моментом и ускоряйте ваш сайт, пока другие на стадии рассуждения. Если таких знакомых нет – обращайтесь к нам. Мы грамотно подойдем к делу и вы забудете о долгой загрузке вашего ресурса.