В один прекрасный момент вы решаете протестировать свою страницу при помощи инструментов и сервисов, которые есть в общем доступе. Как правило, первым используется PageSpeed Insights API. Он не просто наглядно демонстрирует скорость загрузки страницы и выставляет оценку, но и показывает факторы, которые её снижают. Ошибки отображаются в списке проведённых аудитов. Там же находятся и рекомендации по их устранению.
Нерадивые веб-разработчики, получив задачу ускорить сайт, зачастую просто проходятся по этим рекомендациям поверхностно и заканчивают свою работу достигнув показателя 100%. И такой подход в корне неправильный. Большинство недочётов кроется внутри, а соответственно и копнуть нужно глубже.
Для проведения адекватного тестирования одного инструмента не достаточно. Наша команда проводит их несколько десятков, буквально «разбирая сайт по косточкам». Таким образом можно найти скрытые ошибки, которые влияют на скорость загрузки. Даже если PageSpeed Insights API их не отображает в своём аудите. На выходе, получается эффективный сайт, к которому нет претензий ни у пользователей, ни у поисковых систем. Это повышает его ранжирование при поисковой выдаче, а значит и конверсию. Не стоит забывать, что интернет-ресурс — такой же маркетинговый инструмент как и все остальные. И если в него вы вкладываете деньги, пусть и небольшие, он должен их многократно отрабатывать.
Одна из задач, которую веб-разработчику необходимо обязательно выполнить, расставить ресурсы по приоритету. При загрузке страницы браузер в первую очередь загружает критические ресурсы, непосредственно влияющие на работу и важные для пользователя. Но для того, чтобы он сделал это правильно, ему необходимо оставить подсказки.
Что такое приоретизация ресурсов и как её понимает браузер
Браузер отлично знает, что далеко не каждый байт, который ему приходит от сервера и он должен отобразить, имеет для пользователя идентичную степень важности. У него есть эвристика, и она на интуитивном уровне пытается понять, какие ресурсы являются первоочередными, а с какими можно подождать. К примеру, браузер всегда будет отображать CSS раньше, чем сценарии или изображения.
Но интуиция правильно подсказывает не всегда, и браузеру в том числе. Иногда он может принять неправильное решение и чаще всего это происходит по причине недостаточной информированности. А соответственно, ему необходимо рассказать, что и в каком порядке потребует загрузки.
Исходные приоритеты в браузере
Браузер самостоятельно раздаёт приоритеты в зависимости от типа ресурса и степени их важности. К примеру, Как упоминалось ранее, браузер назначает разные относительные приоритеты разным типам ресурсов в зависимости от их важности. К примеру, тег <script> находящийся в <head>, получит высокую степень приоритета. Но ниже CSS, который имеет высшую степень важности. И так идёт по нисходящей. Можно применить и правила асинхронных атрибутов.
Если начать изучать производительность сайта, то становится понятна и важность приоритетов. Следовательно, помимо обычных методов измерения и анализа критического пути рендеринга, необходимо знать и приоритеты каждого ресурса. При использовании в качестве браузера Chrome, их можно найти на панели «Сеть» в Developer Tools.
Эти приоритеты позволяют получить представление о степени важности, которую браузер придает каждому ресурсу. Стоит учитывать, что даже самых минимальных различий для браузера достаточно, чтобы назначить другой приоритет. Скажем, изображение, которое является частью начального рендеринга, имеет более высокий приоритет, чем изображение, которое начинается за кадром.
Если в процессе аналитики выяснится, что часть ресурсов имеют иной приоритет нежели тот, который вам нужен, это необходимо оперативно исправить. Это можно сделать используя один из двух инструментов — предзагрузка или предварительное подключение. В то же время, если браузеру указать, что загрузка ресурсов должна производится позже, только после выполнения основных действий, целесообразно использовать prefetch.
Предзагрузка и как её применить
Если установлен тег <link rel=»preload»>, то браузер получает информацию, что ресурс необходим в рамках текущей навигации и запустить его нужно как можно скорее. Отображается это следующим образом:
Это позволяет указать браузеру тип загружаемого ресурса, чтобы его обработка прошла правильно. В противном случае, браузер не использует предварительно загруженный ресурс. Стоит учитывать, что <link rel=»preload»> является обязательной инструкцией для браузера. Иные ресурсы скорее подсказывают браузеру, что делать. Это же — прямая команда, которая не терпит отступлений. Поэтому, прежде чем применить данный линк, нужно провести тщательное тестирование, чтобы убедиться, что вы не заставите выполнять не нужные действия и извлекать не нужные данные.
Ресурсы, которые извлекаются с использованием <link rel=»preload»>, но не используются текущей страницей в течение 3 секунд, вызовут предупреждение в консоли в Chrome Developer Tools, и за этим нужно следить обязательно. Применяется предзагрузка к примеру в шрифтах или критическом пути CSS и JavaScript.
Предварительное подключение
Предварительное подключение ресурсов осуществляется с использованием команды <link rel=»preconnect»>. Она сообщает браузеру, что страница намерена установить соединение с другим источником, и что это нужно осуществить максимально быстро.
Установление соединений часто требует значительного времени в медленных сетях, особенно когда речь идет о безопасных соединениях, так как это может включать в себя поиск DNS, перенаправления и несколько обратных вызовов к конечному серверу, который обрабатывает запрос пользователя. Если заблаговременно позаботиться о подключении сторонних источников, то страница станет значительно быстрее. Это связано с тем, что огромная часть времени при установлении соединения тратится на ожидание, а не на обмен данными.
Для того, чтобы браузер узнал о конкретной задаче, необходимо её прописать. К примеру, таким образом:
Это ни что иное, как сообщение браузеру о том, что он должен подключиться к условному ресурсу и получить информацию оттуда. Стоит учитывать, что <link rel=»preconnect»> в любом случае потребляет ресурсы и может замедлять трафик. К тому же, если текущая страница не использует его 10 секунд и более, браузер его закроет. Поэтому, <link rel=»preconnect»> стоит применять только в крайних случаях.
Как отложить запуск наименее важных ресурсов
Иногда браузеру нужно рассказать не только о том какие ресурсы необходимо загружать в первую очередь, но и о том, что стоит отложить на позже. К примеру, это ожидаемые действия пользователя в процессе дальнейшей навигации, которые браузер пытается предугадать. Для этого используется команда <link rel=»prefetch»>. Стоит обязательно учитывать, что данный тег не используется для понижения приоритета ресурсов. Он работает как способ подготовить браузер к дальнейшим действиям пользователя.
