Пяць парадактов link rel, які вказваюць на швальнае выкарыстоўвання First Contentful Paint

Калькі з адказна выбраных тагоў <link> у частцы дакумента, якая знаходзіцца ў верхней частыне, можа паспрабаваць пакращыць час першага атрымання зместу (First Contentful Paint) і час атрымання найбольшага за вялічыней зместу (Largest Contentful Paint), калі вялікія частка оптымаўзацый вже была застосавана. Яны не заменяюць правіла ўтратачы колькасці зображэнняў чы аператыў CSS; яны прыводзяць браузер да ранейшага адкрыцця з’єднання DNS, TLS і працы з ресурсамі для тых атрыбутаў, якія, як вядома, маюць значэнне.

Пяць значэнняй rel пакрываюць звычныя сцэнарыі. Кораткая дамаўка ўсіх іх выглядае так:

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://google-analytics.com">

<link rel="prefetch" href="/js/dashboard.js" as="script">
<link rel="prefetch" href="/css/dashboard.css" as="style">
<link rel="prefetch" href="/dashboard" as="document">

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

Прыяўленне з’єднання да важлівых домэнаў

rel="preconnect" прасіць браузер адкрыць з’єднанне раней: выкарыстоўваецца пошук DNS, TCP і процес узгоджэння TLS для хоста, пра які вы вяруеце, што сторанка скора з’явіцца. Калі пазнейшы запит досягне таго CDN чы API, процес узгоджэння вже будзе завершаны, таму перадача данных пачнёцца раней.

Існавайце яго адзіно. Кожны прыяўленне займае сокеты і CPU. Старацца, каб на адной сторанцы было прыблізна чатыры або меньш такіх прыяўленняў, выдзержаных для рэсурсаў, якія практычна навядома будуць выкарыстоўваны ў критычным шляху.

Пачніце завантажэння раней за дапамогою preload

rel="preload" паднімае конкрэтныя файлы ў чергу завантажэння, так што яны не будуць блакаваць процес адрасавання сторанцы так дужа. Класычныя проблемы выступаюць з фонтамі або важлівымі ресурсамі, якія з’яўляюцца пазней: парсер адкрывае іх толькі пасля обработкі CSS або макета, і сторанца застаецца порожней пакуль яны не прыбудуць. Адзначэнне такіх файлаў за дапамогою preload дазволяе браузеру завантажыць іх як толькі будзе адпрацаваны частака head.

Для шрыфтам неабяжнае ўжыццё як as="font", так і crossorigin. Якшто прыціснуць хоць адна з гэтых наявнасцей, прыгледач можа спрацаваць запрос падготовкі як адзінэчны запрос, не падобны да запросу @font-face, і тады файл будзе завантажаны два разы. Пераканайцеся, чытаючы старонку MDN пра атрыбут preload, у ўсім списку дазволеных значэнняў as і супаўзяных абмежэннях.

Падказка па неабяжных выканальніках за дапамой dns-prefetch

rel="dns-prefetch" — гэта простыяй варіант атрыбута preconnect. Ён рашуе толькі імя выканальніка і прыгначвае цэлы процес наладжвання TLS. Выбірайте preconnect для CDN-аў і API, якія вы будете вядома использоваць; выбірайте dns-prefetch для сервераў аналітыкі чыста для дадзейніх CDN-аў, якія можуць быць завантажаны пазней чы проста не будуць завантажаны. Такое раздзеленне дазволяе выкорыстоўваць дорогія процесы наладжвання звязку толькі з ключовымі выканальнікамі, а простыя пошукі імен — з усімі іншымі.

Падготавьце тое, што патрэбна для наступнага переходу

rel="prefetch" просіць браузер завантажыць і зберагчыць ресурсы на фоне з низкай праўамою прыорітэта. Браузер і так актыўна зберагчыць ресурсы сам, але функцыя prefetch ўжыткова, калі вядомы наступны крок корыстніка — напрыклад, скрыпты і стылі для сторонніцы аблікавання пасля таго, як ён перайшоў на стартовую стороніцу маркетынгавага проекту. Працяванне гэтага зберагчыка дапамагае робіць наступную навігацыю швейчэй, не перакрываючы критычныя процесы чынной сторонніцы.

Адшыранне графікаў ES-модуляў за дапамогою modulepreload

Сучасныя фронтэнды выкладваюцца як ES-модулі. Імпорт main.js проста паведамляе браузер аб гэтым файле; внутрошні імпорты, такія як header.js або link.js, выкрываюцца толькі пасля таго, як кожны вышэйшы файл будзе завантажаны і апрацаваны. Таму глыбокія структуры дадзеных модуляў перавараюць сецію інтэрнету па хвілінах.

modulepreload скорачвае процес адкрыцья модуляў, пра важнасць каторых вы вялікі час знаеце. Ён не ператварае весь граф — гэта бы паспела знішчыць принцып модулярнасці — але дазваляе явна назначыць ключовыя точкі запуску:

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

За дапамогою гэтых падказакоў браузер можа негайна завярнуць і падготавіць app.js і components.js, замест таго каб чакаў, пакуль ланцюг імпорта яных будзе адкрываць. Гэты метод є просты, а не спектакулярны, пры тым я ёсць практычны спосаб, калі Lighthouse або даны з практыкы паказваюць затрымкі у обробцы модуляў.