Скорость отображение первой графики. Почему так важно?
Процесс загрузки любой страницы можно разделить на несколько этапов: белый экран, первое отображение контента, загрузка значимой информации и полная загрузка. Нужно как можно раньше показать пользователю какой-либо значимый контент. Например, для новостного сайта, это заголовки новостей, для страницы интернет-магазина это фильтр товаров, который позволяет начать ознакомление с ассортиментом. Именно с отображения значимого контента и начинается процесс изучение страницы.
Когда пользовать кликает по ссылке, сначала он видит белый экран. Затем отображается первый текст и изображения. Время, которое пользователь тратит на созерцание белого экрана, - потерянное время. Важно отметить, что пользователь составляет впечатление о сайте за 15 секунд. Если 8 из них, он видит белый экран, то вероятность удержать его очень низкая.
Как показать первый контент как можно раньше
Важно показать пользователю информацию как можно раньше. Далее мы перечислим способы этого добиться.
Передвиньте JavaScript в конец страницы
Браузеры загружают файлы в порядке их следования в коде страницы. Если вы разместите JavaScript в начале страницы, они отложат загрузку текста, картинок и CSS файлов, следующих за ними. Из-за этого отображения значимого контента сильно откладывается.
Используйте ленивую загрузку контента
Ленивая загрузка - это метод отображения страницы, когда необходимый контент загружается динамически по мере необходимости. Хороший пример этой техники — лента Инстаграм. Сайт загружает новые фото во время прокручивания контента. Ленивая загрузка часто применяется в интернет-магазинах на страницах списка товаров.
Сократите количество запросов к серверу
Браузеры одновременно загружают не более 4 файлов. Даже если загружается маленькая картинка весом 1Kb, он всё равно тратит около 0.2 секунды для служебные операции. Если страница состоит из 50 файлов, пользователь потратит 2.5 секунды только на ожидание, даже если у него супербыстрый интернет. Группируйте CSS и JS файлы в один файл, для множества мелких изображений используйте спрайты, а для иконок глиф шрифты.
Укажите generic и safe шрифты
Если вы используйте нестандартные шрифты на своём сайте, то на их загрузку нужно время. В момент окончательной загрузки файлов дизайн текста может резко измениться. Чтобы исключить резкий переход со стандартных шрифтов на ваши, заранее укажите наборы generic и safe шрифтов того же семейства что и ваши. Тогда в момент окончательной загрузки страницы, пользователь не увидит, как дизайн текста резко меняется. Список generic и safe шрифтов вы можете найти здесь https://www.w3schools.com/cssref/css_websafe_fonts.asp.
Эти приёмы позволяют выиграть битву за несколько секунд внимания пользователя. Advanced Site Checker моментально найдёт и даст рекомендации по исправлению этих и многих других проблем.
*Соцсеть запрещена на территории Российской Федерации