Скорость отображение первой графики. Почему так важно?

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

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

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

Как показать первый контент как можно раньше

Это главная страница YouTube в первые секунды загрузки. Ожидание легче, когда отображён каркас страницы.
Это главная страница YouTube в первые секунды загрузки. Ожидание легче, когда отображён каркас страницы.

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

Передвиньте JavaScript в конец страницы

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

Используйте ленивую загрузку контента

Ленивая загрузка - это метод отображения страницы, когда необходимый контент загружается динамически по мере необходимости. Хороший пример этой техники — лента Инстаграм. Сайт загружает новые фото во время прокручивания контента. Ленивая загрузка часто применяется в интернет-магазинах на страницах списка товаров.

Сократите количество запросов к серверу

Так выглядит спрайт сайта Instagram.
Так выглядит спрайт сайта Instagram.

Браузеры одновременно загружают не более 4 файлов. Даже если загружается маленькая картинка весом 1Kb, он всё равно тратит около 0.2 секунды для служебные операции. Если страница состоит из 50 файлов, пользователь потратит 2.5 секунды только на ожидание, даже если у него супербыстрый интернет. Группируйте CSS и JS файлы в один файл, для множества мелких изображений используйте спрайты, а для иконок глиф шрифты.

Укажите generic и safe шрифты

Загрузка страницы занимает 15 секунд. Вы видите, как на 6 секунде резко меняются шрифты.
Загрузка страницы занимает 15 секунд. Вы видите, как на 6 секунде резко меняются шрифты.

Если вы используйте нестандартные шрифты на своём сайте, то на их загрузку нужно время. В момент окончательной загрузки файлов дизайн текста может резко измениться. Чтобы исключить резкий переход со стандартных шрифтов на ваши, заранее укажите наборы generic и safe шрифтов того же семейства что и ваши. Тогда в момент окончательной загрузки страницы, пользователь не увидит, как дизайн текста резко меняется. Список generic и safe шрифтов вы можете найти здесь https://www.w3schools.com/cssref/css_websafe_fonts.asp.

Эти приёмы позволяют выиграть битву за несколько секунд внимания пользователя. Advanced Site Checker моментально найдёт и даст рекомендации по исправлению этих и многих других проблем.

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