Предварительная загрузка, предварительное подключение, предварительная выборка: улучшите производительность своего сайта с помощью подсказок ресурсов

Современные веб-браузеры используют всевозможные методы для повышения общей производительности вашего веб-сайта — от определения приоритетов наиболее важных ресурсов и их загрузки в первую очередь до угадывания того, какую страницу пользователь посетит следующей.

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

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

Вот тут-то и появляются подсказки ресурсов.

В следующих строках мы рассмотрим их и то, как наилучшим образом использовать их преимущества.

Давайте углубимся в это.

Как работают браузеры (в двух словах)

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

Мы могли бы разделить весь процесс загрузки страницы браузером на три этапа:

• Установление соединения;
• Скачивание, парсинг и рендеринг кода;
• Сделать страницу интерактивной;

На первом этапе браузеру необходимо установить соединение с сервером, чтобы загрузить ресурсы. Это включает в себя поиск доменного имени и преобразование его в IP-адрес, настройку соединения с сервером и шифрование соединения для обеспечения безопасности.

Когда все сделано, браузер может продолжить загрузку и анализ информации, построение объектной модели документа (DOM) и объектной модели CSS (CSSOM), а затем визуализацию содержимого.

Последняя часть — сделать страницу интерактивной. Все вышеперечисленные процессы происходят в основном потоке. Итак, после того, как основной поток браузера завершил синтаксический анализ, рендеринг и отрисовку страницы, пришло время позаботиться об отложенных файлах JavaScript, чтобы сделать страницу доступной для прокрутки, касания и других взаимодействий.

В двух словах, это закулисный процесс каждый раз, когда загружается страница.

Давайте посмотрим, как вы можете положительно повлиять на каждый из этих этапов, интегрировав подсказки ресурсов.

Подсказки ресурсов: предварительная выборка, предварительное подключение, предварительная загрузка

Как следует из названия, подсказки ресурсов — это подсказки или инструкции, которые сообщают браузеру, как он должен обрабатывать определенные ресурсы или веб-страницы. Другими словами, этот набор инструкций позволяет вам помочь браузеру в определении приоритетов источников или ресурсов, которые необходимо получить и отобразить.

Все подсказки ресурсов используют атрибут rel элемента link , который вы найдете в заголовке ваших HTML-документов.

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

И теперь, когда основы позади, давайте перейдем к той части, ради которой вы здесь — обзор подсказок ресурсов, их преимуществ и того, когда их использовать.

Предварительная выборка

link rel=prefetch — это подсказка ресурса с низким приоритетом, которая позволяет браузеру извлекать ресурсы, которые могут понадобиться позже, и сохранять их в кэше браузера.

Поскольку предварительная выборка устанавливает очень низкий приоритет, не используйте эту подсказку для файлов высокой важности .

Одним из замечательных вариантов использования является использование предварительной выборки для улучшения времени загрузки последующих страниц. Например, вы можете применить директиву prefetch во время аутентификации пользователя. Таким образом, вы можете использовать время, необходимое им для ввода своих учетных данных, чтобы предварительно загрузить ресурсы, необходимые для страницы, которую они увидят следующей.

Предугадывая шаги посетителей на вашем сайте и предварительно извлекая ресурсы, вы можете улучшить такие показатели, как «Первая содержательная отрисовка» и «Время до интерактивности». Что-то, что Netflix сделал и сократил свое время до интерактивности на 30%.

Все, что мы упоминали до этого момента, относится к предварительной выборке, также известной как предварительная выборка ссылок. Но есть два других типа предварительной выборки, которые одинаково важны, и мы должны упомянуть:

1. Предварительная выборка DNS
Браузер должен выполнить поиск DNS, чтобы преобразовать имя хоста (URL) в IP-адрес перед подключением к хосту (исходному серверу).

Хотя это обычно занимает всего миллисекунды, если веб-сайт загружает файлы со стороннего доменного имени, что делает большинство веб-сайтов, браузер должен выполнять поиск DNS для каждого домена. Некоторые сайты (например, новостные сайты) используют много внешних ресурсов, а это означает, что для каждой страницы могут потребоваться десятки запросов DNS.

В этих случаях использование подсказки dns-prefetch может сэкономить несколько миллисекунд, поскольку инструкция сообщает браузеру о необходимости немедленного запуска этого процесса, а не когда необходимость обнаруживается позже в процессе загрузки.

Как было предложено в Web Almanac 2021, хорошей практикой является сочетание dns-prefetch с подсказкой перед подключением для достижения оптимальных результатов. Вы можете понять, почему в разделе, где мы говорим о предварительном подключении .

2. Пререндеринг
Предварительная отрисовка очень похожа на предварительную выборку в том, что она оптимизирует ресурсы, к которым пользователь может перейти дальше. Разница в том, что предварительный рендер фактически отображает всю страницу, а не определенные ресурсы.

Предварительное подключение

Как и dns-prefetch , директива preconnect помогает браузеру устанавливать ранние соединения перед отправкой начального запроса на сервер.

Однако подсказка перед подключением делает еще один шаг вперед. Хотя он выполняет поиск DNS, он также включает согласование TLS и рукопожатия TCP. Это, в свою очередь, устраняет задержку в оба конца и экономит еще больше времени.

Но тут возникает вопрос:

Если preconnect делает все, что делает dns-prefetch , и выше, зачем мне вообще использовать dns-prefetch ?

В большинстве случаев preconnect предпочтительнее dns-prefetch , но проблема в том, что preconnect не поддерживается некоторыми браузерами:

Источник: caniuse.com

Хорошо, что вы можете использовать их вместе, чтобы получить максимальную отдачу от них. Вы можете извлечь выгоду из предварительного подключения в браузерах, которые его поддерживают, заменив его на dns-prefetch :

Согласно Google:

Еще в 2019 году Chrome удалось улучшить свое время до интерактивности почти на 1 секунду, предварительно подключившись к важным источникам.

Предварительная загрузка

Прежде чем объяснять, как работает директива preload , мы должны кое-что прояснить.

Хотя предварительная загрузка регулярно упоминается как «подсказка по ресурсам», это не так. Предварительная загрузка — это декларативная выборка, и она обязательна для браузеров , что делает ее скорее командой, чем подсказкой.

При этом предварительная загрузка используется для того, чтобы заставить браузер загрузить ресурс раньше, чем браузер его обнаружит, потому что это имеет решающее значение для страницы.

Директива предварительной загрузки лучше всего работает с ресурсами, которые являются частью критического пути рендеринга, но не могут быть легко обнаружены браузером. Например, шрифты, CSS или критический JavaScript.

Еще одно отличие от подсказок dns-prefetch и preconnect заключается в том, что хотя им нужны только атрибуты rel и href , предварительная загрузка более сложна. Вы должны добавить атрибут as , который указывает тип контента ресурса, который вы хотите предварительно загрузить.

По словам Адди Османи, технического менеджера Google, использование атрибута as при предварительной загрузке является обязательным:

Вот полный список as значений, которые вы можете указать:

Включение атрибута as помогает браузеру установить приоритет предварительно загруженного ресурса в соответствии с его типом и определить, существует ли уже ресурс в кэше.

Ознакомьтесь с документом «Приоритеты и планирование ресурсов Chrome», чтобы узнать больше о том, как расставляются приоритеты для различных типов ресурсов.

Для некоторых ресурсов, таких как шрифты, необходимо также включить атрибут crossorigin .

Атрибут crossorigin устанавливает режим запроса на запрос HTTP CORS. CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет серверу указывать любые источники, кроме своего собственного, из которых браузер должен разрешать загрузку ресурсов. Мы не будем углубляться в это, так как это не является предметом этой статьи, но вы можете найти дополнительную информацию здесь.

Как и в случае с атрибутом as , при предварительной загрузке шрифтов без перекрестного происхождения будет выполняться двойная выборка. Вот еще один отрывок из статьи Эдди Османи на эту тему:

Больше советов по ресурсам, больше проблем

Прочитав все до сих пор, вы можете начать думать, что использование как можно большего количества подсказок ресурсов приведет только к тому, что браузеры будут молниеносно загружать ваши страницы.

К сожалению, это не случай.

Вот некоторые из неудач, которые вы должны учитывать при интеграции подсказок ресурсов:

1. Предварительная выборка может увеличить потребление данных

Хотя предварительная выборка устанавливает низкий приоритет загрузки, это не означает, что она безвредна. Его использование может увеличить потребление данных на вашем сайте, что может создать проблемы как для вас (увеличение трафика на вашем сервере), так и для ваших пользователей (ненужное чрезмерное потребление ресурсов). Кроме того, вы можете в конечном итоге загрузить дополнительные байты, которые в конечном итоге могут не использоваться. Так что подумайте дважды, прежде чем интегрировать его.

2. Пререндеринг может привести к потере пропускной способности

Азартная игра с prerender даже больше, чем с prefetch , поскольку вы загружаете целые страницы заранее. Это делает подсказку ресурсоемкой и может привести к потере пропускной способности, особенно на мобильных устройствах. И хуже всего то, что пользователи могут даже не увидеть эффекта подсказки, если они не запрашивают страницу.

3. Предварительное подключение может привести к дополнительной загрузке ЦП

Хотя предварительное подключение является подсказкой с низким приоритетом, оно все равно может повредить производительности вашего сайта. Если установленное соединение не используется быстро (в течение 10 секунд в Chrome), то директива preconnect только увеличивает нагрузку на ЦП, и браузер автоматически закроет его. Кроме того, вы должны экономно использовать предварительное подключение , так как размер сертификатов шифрования составляет около 3 КБ, что будет конкурировать с пропускной способностью для других важных ресурсов.

4. Предварительная загрузка переопределяет приоритеты, установленные анализатором браузера

preload — мощная инструкция, поскольку она позволяет заставить браузер немедленно загрузить ресурс. Однако современные веб-браузеры довольно хорошо расставляют приоритеты ресурсов, поэтому чрезмерное использование предварительной загрузки может привести к негативным результатам. Например, если вы добавите директиву предварительной загрузки , соответствующую URL-адресу асинхронного ресурса, браузер будет получать его быстрее, поэтому он будет быстрее анализировать его, сводя на нет эффект вашего асинхронного атрибута, прерывая основной поток в самом начале загрузки страницы.

Резюме

В этой статье мы рассмотрели много вопросов, поэтому давайте кратко повторим наиболее важные моменты:

• dns-prefetch и preconnect используются для определения приоритета доменных имен (например, https://example.com).
• prefetch и preload используются для определения приоритета загрузки ресурсов. В то время как предварительная выборка используется для сокращения времени загрузки последующих страниц, предварительная загрузка лучше всего работает на критических ресурсах для текущей страницы.
• prerender ссылается на всю страницу (например, blog.html).
• prefetch , prerender и preconnect являются подсказками ресурсов, и они выполняются так, как считает нужным браузер. Директива preload является обязательной для браузеров.
• При использовании preload не забудьте указать атрибуты as и crossorigin , чтобы избежать двойной выборки.
• Хотя подсказки ресурсов являются инструкциями с низким приоритетом, они по-прежнему представляют угрозу для производительности вашего сайта. Используйте их умеренно и только в случае необходимости.
• preload — это мощная директива, которая может переопределить приоритеты анализатора браузера. Не забывайте, что современные браузеры довольно хорошо расставляют приоритеты ресурсов, поэтому используйте «подсказку» предварительной загрузки с осторожностью.

Используйте новые знания о подсказках ресурсов, чтобы ускорить доставку контента и ресурсов и повысить общую производительность вашего сайта. И не забывайте тестировать свой веб-сайт в реальном мире (ориентируйтесь на полевые данные) каждый раз, когда вносите изменения.