Dans le dernier module sur l'optimisation du chargement des ressources, vous avez découvert Les ressources de la page, comme les fichiers CSS et JavaScript, peuvent avoir une incidence sur la vitesse de chargement de la page vous pouvez les optimiser ainsi que leur livraison pour accélérer l'affichage d'une page. C'est le moment idéal pour aborder un aspect plus avancé des ressources ce qui implique d'aider le navigateur à les charger plus rapidement des indices de ressources.
Les indications de ressources peuvent aider les développeurs à optimiser davantage le temps de chargement des pages
au navigateur comment charger et hiérarchiser les ressources. Un ensemble initial de ressources
Les suggestions telles que preconnect et dns-prefetch ont été les premières à être introduites.
Toutefois, au fil du temps, preload et l'API Fetch Priority ont suivi pour
offrent des fonctionnalités supplémentaires.
Les indices de ressources indiquent au navigateur d'effectuer certaines actions à l'avance ce qui peut améliorer les performances de chargement. Les optimisations de ressource permettent d'effectuer des actions : comme l’exécution des premières résolutions DNS, la connexion aux serveurs à l’avance, et même récupérant des ressources avant que le navigateur ne les découvre en temps normal.
Les optimisations de ressources peuvent être spécifiées en HTML, le plus souvent au début de l'<head>
ou défini comme en-tête HTTP. Dans le cadre de ce module,
preconnect, dns-prefetch et preload sont abordés, ainsi que
les comportements d'extraction spéculative fournis par prefetch.
preconnect
La suggestion preconnect permet d'établir une connexion avec une autre origine à partir de
où vous récupérez les ressources critiques. Par exemple, vous hébergez peut-être
des images ou des éléments sur un CDN ou un autre multi-origine:
<link rel="preconnect" href="https://example.com">
En utilisant preconnect, vous prévoyez que le navigateur prévoit de se connecter à un
un serveur multi-origine spécifique dans un avenir très proche, et que le navigateur
doit ouvrir la connexion le plus tôt possible, idéalement avant que la requête
un analyseur HTML ou un scanner de préchargement.
Si vous disposez d'une grande quantité de ressources multi-origines sur une page, utilisez preconnect
pour les ressources les plus
essentielles pour la page actuelle.
<ph type="x-smartling-placeholder">preconnect peut
atténuer en établissant des connexions plus tôt, plutôt qu'au moment
la découverte de la ressource multi-origine.
Google Fonts est un cas d'utilisation courant de preconnect. Recommandations de Google Fonts
que vous preconnect au domaine https://fonts.googleapis.com diffusé
les déclarations @font-face et au domaine https://fonts.gstatic.com qui
diffuse les fichiers de police.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L'attribut crossorigin permet d'indiquer si une ressource doit être
récupérées à l'aide du partage des ressources entre origines multiples (CORS). Lorsque vous utilisez la
Conseil preconnect, si la ressource téléchargée depuis l'origine utilise
(les fichiers de police, par exemple), vous devez ajouter l'attribut crossorigin au fichier
Indice sur preconnect.
dns-prefetch
Si l'ouverture précoce des connexions
aux serveurs d'origine différente peut
améliorer le temps de chargement initial de la page, il se peut qu'il ne soit ni raisonnable, ni possible
d'établir des connexions avec plusieurs
serveurs multi-origines à la fois. Si vous êtes préoccupé(e)
que vous utilisez peut-être preconnect de manière excessive, la ressource suivante peut s'avérer bien moins coûteuse
Indice dns-prefetch.
Comme son nom l'indique, dns-prefetch n'établit pas de connexion vers un réseau d'origines multiples
serveur, mais effectue simplement la recherche DNS à l'avance. Un DNS
de recherche se produit lorsqu'un nom de domaine est résolu en son adresse IP sous-jacente.
Bien que les couches de caches DNS au niveau de l'appareil et du réseau contribuent à rendre
un processus généralement rapide, cela prend encore un certain temps.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Les résolutions DNS sont assez peu coûteuses et, en raison de leur coût relativement faible,
Dans certains cas, ils peuvent s'avérer plus appropriés qu'un preconnect. Dans
en particulier, il peut s'agir d'une indication de ressource souhaitable à utiliser dans les cas de liens
accéder à d'autres sites Web qui,
selon vous, l'utilisateur est susceptible de suivre.
dnstradamus est l'un de ces outils qui effectue automatiquement cette opération à l'aide de JavaScript,
et utilise l'API Intersection Observer pour injecter des indications dns-prefetch dans la
le code HTML de la page actuelle lorsque l'utilisateur fait défiler des liens vers d'autres sites Web
fenêtre d'affichage.
preload
L'instruction preload permet de lancer une demande anticipée de ressource.
nécessaire pour l'affichage de la page:
<link rel="preload" href="/lcp-image.jpg" as="image">
Les directives preload doivent être limitées aux ressources critiques récemment découvertes.
Les cas d'utilisation les plus courants sont les fichiers de police et les fichiers CSS récupérés via @import.
ou les ressources background-image CSS susceptibles d'être La plus grande
Candidats au LCP (Contentful Paint). Dans de tels cas, ces fichiers ne seraient pas
découverte par l'analyseur de préchargement, car la ressource est référencée dans des
ressources.
Comme pour preconnect, la directive preload exige que l'élément crossorigin
si vous préchargez une ressource CORS, comme des polices. Si vous n'ajoutez pas
l'attribut crossorigin (ou ajoutez-le pour les requêtes autres que CORS), la ressource
est téléchargée deux fois par le navigateur, gaspillant ainsi de la bande passante
mieux investir dans d'autres ressources.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Dans l'extrait de code HTML précédent, le navigateur est invité à précharger
/font.woff2 à l'aide d'une requête CORS, même si /font.woff2 se trouve sur le même domaine.
prefetch
<ph type="x-smartling-placeholder">
L'instruction prefetch permet de lancer une demande de faible priorité pour une
ressource susceptible d'être utilisée pour de futures navigations:
<link rel="prefetch" href="/next-page.css" as="style">
Cette directive suit globalement le même format que l'instruction preload, mais seulement
L'attribut rel de l'élément <link> utilise plutôt la valeur "prefetch".
Toutefois, contrairement à la directive preload, prefetch est en grande partie spéculatif dans
que vous lancez la récupération d'une ressource pour une navigation future
ou non.
prefetch peut parfois être utile, par exemple si vous avez
identifié un flux utilisateur sur votre site Web que
la plupart des utilisateurs suivent jusqu'à la fin,
un prefetch pour une ressource essentielle à l'affichage pour ces futures pages peut aider à
de réduire leur temps de chargement.
API Fetch Priority
Vous pouvez utiliser Fetch Priority API via son attribut fetchpriority pour
pour augmenter la priorité d'une ressource. Vous pouvez utiliser cet attribut avec <link>,
<img> et <script>.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Par défaut, les images sont récupérées avec une priorité inférieure. Après la mise en page, si le
se trouve dans la fenêtre d'affichage initiale, la priorité est augmentée pour
Priorité Élevée. Dans l'extrait de code HTML précédent, fetchpriority
indique au navigateur de télécharger l'image LCP
la plus grande avec une priorité Élevée,
tandis que les vignettes les moins importantes
sont téléchargées avec une priorité inférieure.
Les navigateurs modernes chargent les ressources en deux phases. La première phase est réservée aux
ressources critiques et se termine une fois que
tous les scripts bloquants ont été téléchargés et
exécuté. Au cours de cette phase, les ressources de priorité faible peuvent être retardées
en cours de téléchargement. En utilisant fetchpriority="high", vous pouvez augmenter la priorité d'un
ressource, ce qui permet au navigateur de la télécharger pendant la première phase.
Démonstrations des optimisations de ressources
Tester vos connaissances
À quoi sert la suggestion de ressource preconnect ?
Que vous permet de faire l'API Fetch Priority ?
<link>.
<img> et <script>.
Quand utiliser l'indice prefetch ?
À suivre: Performances des images
À présent, vous commencez probablement
à être assez confiant quant à vos connaissances
de performances générales en ce qui concerne le code HTML des pages, le <head>
et les optimisations de ressources. Il existe toutefois d'autres optimisations
sont propres aux différents types de ressources fréquemment chargés par les pages. Ensuite,
les performances des images, est abordée dans le module suivant,
les images de votre site Web se chargent aussi vite que possible, quel que soit le
l'appareil de l'utilisateur.