Comment précharger les demandes de clé pour de meilleurs éléments vitaux Web de base

Toutes les ressources de votre site n'ont pas la même importance.

Oui, ils sont tous nécessaires pour que votre site Web ait l'air et fonctionne parfaitement, mais en ce qui concerne ses performances, certains doivent avoir une priorité plus élevée.

Sinon, vous risquez d'avoir des pages à chargement lent et une longue liste d'avertissements dans votre rapport PageSpeed ​​Insights (PSI).

L'un d'entre eux est -Demandes de clé de préchargement.

Dans les lignes suivantes, vous apprendrez ce que sont les demandes de clé, pourquoi il est important de corriger l'avertissement "Preload key requests" et, enfin et surtout, comment le faire.

• Que signifient les demandes de clé de préchargement ?
• Comment le préchargement des actifs critiques améliorera la vitesse de votre site
• Comment identifier les requêtes clés que vous devez précharger
• Comment corriger l'avertissement des demandes de clé de préchargement
• Préchargement automatique des demandes de clé

Continuer à lire.

Que signifient les demandes de clé de préchargement ?

En préchargeant les demandes de clé, vous indiquez au navigateur quels sont les actifs les plus critiques à télécharger à l'avance. Cela permet aux fichiers les plus importants de se charger plus rapidement, en particulier lorsqu'ils seraient autrement découverts et téléchargés plus tard dans le processus.

Mais cela pose la question :

Qu'est-ce qui rend une demande critique ?

La demande critique est une ressource affichée dans la fenêtre d'affichage initiale d'une page (ou au-dessus de la ligne de flottaison, comme nous aimons l'appeler).

Par exemple, voici ce que je vois lorsque je charge la page d'accueil de NitroPack sur mon ordinateur portable :

Toutes les ressources chargées au-dessus du pli sont considérées comme critiques. Par conséquent, ils doivent être téléchargés et rendus avec une priorité plus élevée par le navigateur pour offrir à l'utilisateur une expérience de chargement instantanée.

En général, les algorithmes des navigateurs sont assez bons pour hiérarchiser les ressources les plus critiques pour une page. En effet, lorsqu'un navigateur télécharge une ressource, il lui attribue une priorité :

• Le plus élevé
• Haut
• Moyen
• Faible
• Le plus bas

Cependant, en tant que propriétaire/développeur du site Web, vous avez des informations précieuses sur les ressources qui sont plus critiques que d'autres. Par conséquent, en les préchargeant, vous passerez non seulement l'avertissement PSI, mais vous améliorerez également vos performances globales et votre expérience utilisateur.

Voici comment…

Comment l'application d'un correctif de demandes de clé de préchargement améliorera vos performances

La vérité est:

Corriger l'avertissement "Preload key requests" juste pour déplacer un autre avertissement dans la catégorie "réussi" n'en vaut pas la peine.

Cependant, le préchargement des ressources les plus critiques de votre page Web aura un impact significatif sur :

• Vitals Web de base
• Note de performances
• Performances perçues

Voyons comment c'est possible.

Préchargement et plus grand contenu de peinture (LCP)

La plus grande peinture de contenu mesure le temps qu'il faut pour que le plus grand élément au-dessus de la ligne de flottaison se charge sur une page.

Les types de ressources qui sont le plus souvent considérées comme un élément LCP comprennent :

• Images;
• Balises d'images ;
• Vignettes vidéo;
• Images d'arrière-plan avec CSS ;
• Éléments de texte.

Tous sont d'excellents candidats pour le préchargement.

Et les livrer plus rapidement vous aidera à améliorer les sites Web métriques Core Web Vitals qui ont le plus de mal.

De plus, LCP représente 25 % de votre note de performance globale. Donc, le booster conduira inévitablement à faire passer votre score du rouge au vert.

Obtenez votre score LCP du rouge au vert en un clic. Installez NitroPack aujourd'hui →

Préchargement et First Contentful Paint (FCP)

First Contentful Paint (FCP) mesure le temps nécessaire au navigateur pour visualiser le premier élément de contenu DOM (par exemple, image, SVG, élément de toile non vierge) sur une page.

Bien que le préchargement de l'animation de chargement ou du logo de votre page (cela peut également déclencher le FCP) puisse sembler insignifiant, il est crucial pour l'expérience utilisateur.

Lorsque le navigateur charge immédiatement l'élément FCP, il envoie une réponse directe à l'utilisateur, son entrée est en cours de traitement et le site est en cours de chargement.

Si une page reste vierge pendant quelques secondes avant de se charger, les utilisateurs ne savent pas si quelque chose se passe. Et vous pouvez deviner quelle serait leur prochaine étape :

Rebond!

En d'autres termes, le préchargement de l'élément FCP est essentiel pour garder vos visiteurs heureux et, surtout, sur votre site Web.

De plus, FCP représente 10% de votre score de performance, vous obtiendrez donc également un coup de pouce dans cet aspect.

Préchargement et performances perçues

Nous avons évoqué à plusieurs reprises la performance perçue. Si vous vous demandez ce que cela signifie, voici la définition :

« La performance perçue est une mesure subjective de la performance, de la réactivité et de la fiabilité du site Web. En d'autres termes, la vitesse à laquelle un site Web apparaît à l'utilisateur. Il est plus difficile à quantifier et à mesurer que la vitesse réelle de fonctionnement, mais peut-être encore plus important. »

Dans certains cas, la perception de la rapidité et de la fluidité avec laquelle les pages se chargent et répondent à l'interaction de l'utilisateur est encore plus importante que le temps réel nécessaire pour récupérer les ressources.

En préchargeant des ressources clés, vous donnez à vos utilisateurs cette perception d'une page qui se charge plus rapidement. Le contenu semble se charger rapidement et en douceur, créant une expérience de navigation plus transparente. Les utilisateurs peuvent interagir avec la page plus tôt sans attendre que les ressources critiques soient récupérées et chargées.

Cette amélioration des performances perçues peut conduire à

• plus grand engagement des utilisateurs
• taux de rebond réduits
• Satisfaction globale avec le site Web

Comment identifier les requêtes les plus critiques à précharger

PageSpeed ​​Insights de Google est le moyen le plus simple et le plus efficace d'identifier les requêtes clés à précharger.

Lorsque vous testez les performances de votre URL, assurez-vous de consulter la section Opportunités pour obtenir des recommandations. Recherchez spécifiquement une suggestion intitulée "Demande de clé de préchargement", similaire à l'exemple ci-dessous :

Vous pouvez également exécuter des tests à l'aide de Chrome DevTools. Pour démarrer le processus, chargez la page que vous souhaitez tester et cliquez sur Inspect > Lighthouse.

Choisissez ensuite si vous souhaitez tester la version mobile ou desktop de votre page et cliquez sur « Analyser » le chargement de la page :

Une fois le test terminé, faites défiler vers le bas et recherchez l'avertissement "Demandes de clé de préchargement".

Remarque : Étant donné que Google PageSpeed ​​Insights utilise Lighthouse, tester votre page via PSI ou Chrome DevTools donnera les mêmes résultats. C'est à vous de décider quelle manière vous préférez.

Pour comprendre comment Lighthouse détermine exactement quelles ressources sont adaptées au préchargement, examinons l'exemple suivant.

La chaîne de requêtes critiques de votre page ressemble à ceci :

> index.html

>> app.js

>>> styles_custom.css

>>>> ui_custom.js

Dans votre fichier index.html , vous incluez une balise de script src="app.js" . Lorsque le fichier app.js est exécuté, il déclenche un appel fetch() pour télécharger styles_custom.css et ui_custom.js . La page ne s'affichera pas complètement tant que ces deux ressources ne seront pas téléchargées, analysées et exécutées. Ces fichiers sont considérés comme des ressources bloquant le rendu.

Par conséquent, styles_custom.css et ui_custom.js seraient identifiés par Lighthouse comme les ressources pertinentes.

Le problème est que le navigateur prend connaissance des deux derniers fichiers uniquement après le téléchargement, l'analyse et l'exécution de app.js . Cependant, vous savez que ces ressources sont incluses dans la partie supérieure de votre page et vous devez les télécharger dès que possible.

Pour leur donner une priorité plus élevée, vous pouvez utiliser link rel="preload" .

Comment corriger l'avertissement "Demande de clé de préchargement"

Pour corriger l'avertissement, appliquez l'attribut link rel=preload aux ressources critiques signalées par PSI.

En termes simples, la commande link rel=preload indique aux navigateurs de récupérer une ressource importante plus tôt qu'ils ne le découvriraient généralement.

Le préchargement est déclaratif, contrairement à d'autres conseils de ressources, tels quele préchargementetla préconnexionqui fournissent des suggestions. Cela signifie que les navigateurs doivent récupérer la ressource spécifique que vous considérez comme vitale pour l'expérience de la page.

Vous pouvez précharger des ressources en ajoutant une balise link rel=preload à l'en-tête de votre document HTML.

Par exemple, voici à quoi ressemble l'extrait de code pour un logo préchargé :

Vous avez peut-être remarqué qu'en dehors du préchargement et de la ressource, il existe un troisième attribut - as .

L'attribut as indique le type de contenu de la ressource. En n'ajoutant pas de « as » valide lorsque vous spécifiez ce qu'il faut précharger, vous risquez de récupérer l'actif deux fois.

De plus, l'inclusion de l'attribut as aide le navigateur à définir la priorité de la ressource prélue en fonction de son type et à déterminer si elle existe déjà dans le cache.

Voici une liste complète des valeurs que vous pouvez spécifier :

Important : Les navigateurs Web modernes sont efficaces pour hiérarchiser les ressources. Par conséquent, l'utilisation excessive du lien rel=preload peut entraîner des résultats négatifs. Assurez-vous de l'utiliser avec parcimonie et uniquement lorsque vous en avez vraiment besoin.

Précharger automatiquement les demandes de clé avec NitroPack

Si vous recherchez un moyen plus simple et automatique de précharger vos ressources critiques et d'améliorer les Core Web Vitals, le score de performance et les performances perçues de votre site, vous devriez essayer NitroPack.

L'une des principales raisons pour lesquelles NitroPack est le leader des résultats Core Web Vitals pour plus de 180 000 sites Web est notre mécanisme propriétaire de chargement des ressources.

NitroPack ne repose pas sur des techniques de navigateur intégrées. Au lieu de cela, il utilise notre chargeur de ressources, qui réorganise la manière dont les ressources sont acheminées vers le thread principal et précharge de nombreux actifs. Cela tire parti de la nature multicœur du processeur moderne en déchargeant les tâches du thread principal.

De plus, notre service optimise automatiquement la livraison CSS de votre site en créant un CSS critique pour chaque page par mise en page. Il en résulte une meilleure performance perçue et réelle.

Mais la meilleure partie est que l'utilisation de NitroPack est sans risque.

Comment?

Tout d'abord, vous pouvez tester NitroPack sans dépenser un seul centime pour obtenir notre forfait gratuit.

Deuxièmement, NitroPack fonctionne sur des copies des fichiers de votre site, en gardant les originaux 100% sûrs.

Tout simplement:

Vous pouvez dépasser tous vos concurrents en ayant le site de chargement le plus rapide de l'industrie sans lever le petit doigt et risquer quoi que ce soit.

Cela me semble être une très bonne affaire !