Чем быстрее человек сможет начать взаимодействие со страницей, тем выше вероятность, что он на ней останется. Персональные компьютеры отображают контент быстрее, а в мобильных устройствах на получение доступа к данным, зачастую уходит более 10 секунд. При этом, рекомендованное Google время отображения, при котором пользователь не потеряет интерес к странице, составляет 3 секунды. После этого начинается точка ухода.
Чтобы повысить конверсию, необходимо провести оптимизацию страницы. Другими словами — уменьшить время отрисовки. Для этого следует выполнить настройку загрузки критических ресурсов JS/CSS, отложив загрузку остальных. В данной статье мы разберём что это, зачем это нужно и как осуществить задуманное.
Что происходит при загрузке страницы
В тот момент, пока пользователь ожидает отображения информации на экране своего монитора, система активно работает. Пока не будут выполнены все шаги в определённой последовательности, информация не станет доступной. Вся эта цепочка, которая требуется для первичного отображения, имеет название Critical Rendering Path или Критический Путь Рендеринга. И без него обойтись невозможно.
Что происходит в этот момент физически. Вся информация на сайте зашифрована в HTML, JavaScript и CSS. Представить её пользователю в таком виде невозможно — он не будет читать скрипты, пытаясь получить нужные ему данные. Следовательно, система должна преобразовать их в фактические пиксели на экране. До того момента, пока этот процесс не будет завершён, человек будет наблюдать белый лист. И чем дольше это будет длиться, тем выше вероятность, что потенциальный потребитель просто покинет сайт. Это особенно критично для продающих ресурсов, так как каждый «юзер» — потенциальный покупатель и ему необходимо создать максимально комфортные условия.
Если ваша страница открывается не 3-5 секунд, а значительно дольше, стоит задуматься, а эффективно ли выполнены настройки её рендеринга. Чтобы от запроса до первой визуализации проходило как можно меньше времени, потребуется оптимизировать критические сценарии, за счёт которых и происходит первая отрисовка.
Что такое критический ресурс
PageSpeed Insights показывает не только скорость с которой страница загружается и с ней можно вступать во взаимодействие, но и даёт целый ряд рекомендаций. Их выполнение позволяет существенно ускорить загрузку ресурса, не потеряв при этом пользователей. Важно сделать это корректно, чтобы не произошло сбоев в других сценариях. Ссылки, которые тормозят или блокируют рендеринг, Lighthouse разделяет на 3 типа:
▪ Таблицы стилей
▪ Скрипты
▪ Импорт HTML
В ряде случаев, ресурсы будут иметь пометку «критический». Это значит, что данный ресурс необходим для первой отрисовки, либо же имеет решающее значение для основных функций страницы. Их необходимо оптимизировать в первую очередь. После этого, разработчиками проводятся мероприятия, которые позволяют провести их отсрочку, либо загрузку с минимальной потерей времени.
Что необходимо для оптимизации критического пути рендеринга
Все критические ресурсы, которые блокируют первоначальное отображение страницы выявлены. Появляются пути для их оптимизации. Это возможно достичь следующими инструментами:
▪ Сократив число критических ресурсов за счёт их откладывания
▪ Сократив критический путь, установив приоритеты по первоочередной загрузке контента
▪ Сократив число критических байтов, уменьшив размер файлов.
В первую очередь, необходимо сократить число критических ресурсов, отложив блокирующие рендеринг. При этом, потери файлов не происходит.
Как сократить критические сценарии и ссылки
Как мы выяснили выше, существует несколько типов ссылок, которые «ответственны» за блокировку рендеринга. В зависимости от каждого из них, оптимизацию необходимо проводить по определённому алгоритму.
▪ Для критических сценариев рассмотрите возможность их встраивания в ваш HTML. Для некритических сценариев рассмотрите возможность пометить их атрибутами async или defer.
▪ В отношении таблиц стилей, проанализируйте существует ли вероятность разделить стили на различные файлы, в зависимости от медиа-запросов. Следом потребуется добавить media атрибут в каждую из ссылок, которые указывают на таблицу. В процессе загрузки страницы, браузер проводит блокировку исключительно первой отрисовки таблиц стилей в соответствии с типом устройства пользователя.
▪ Что касается некритического импорта HTML, то его необходимо отметить атрибутом async. Важно, чтобы он на максимум использовал импорт HTML.
Чтобы определить код блокировки визуализации, то есть рендера, потребуется открыть вкладку «Покрытие» в Chrome DevTools. Она отображает критические и некритические JS, а также CSS (Рисунок 1).
Рисунок 1. Вкладка Покрытие
Какие типы ресурсов относятся к блокирующим
Существует всего три типа блокирующих ресурсов. К таковым относятся:
Тег <script> если он:
▪ Расположен в <head> файла
▪ Оснащён атрибутом отсрочки (defer)
▪ Не прописан асинхронный атрибут (async)
Тег <link rel = “stylesheet”>, в случае когда:
▪ Не предусмотрен отключённый атрибут (disabled). Если он предусмотрен, то часть браузеров не загружает таблицу стилей. Важно понимать, что данный атрибут поддерживают не все браузеры.
▪ Если нет атрибута media, который поддерживается гаджетом пользователя.
Тег <link rel = “import”>, если в нём:
▪ Нет асинхронного атрибута (async)
Стоит учитывать, что ряд плагинов могут «конфликтовать» между собой и потребуется вносить изменение в код. В противном случае, информация и изображения могут стать не читабельными и потребуется их полная перерисовка. Поэтому, перед внедрением того или иного изменения, потребуется его тестирование.
Проведение оптимизации позволит отображать имеющийся на сайте контент значительно быстрее. Тем самым, сокращается как визуальное, так и интуитивное восприятие загрузки страницы. Это, в свою очередь, увеличивает конверсию посетителей.
