Améliorez vos performances web grâce au Pattern PRPL [4/6]

Axel Veber
Axel Veber
24 avril 2020

Le pattern PRPL est une méthodologie utilisée pour que les pages Web se chargent et deviennent interactives, plus rapidement :

"P" pour  Push ou Preload
"R" pour Render
"P" pour Pre-cache 
"L" pour Lazy load

Dans cet article nous aborderons ces 4 techniques que vous pouvez utiliser ensemble ou de manière indépendante ainsi que les solutions open sources qui vous permettront d'atteindre vos objectifs de performance.

 

Comment booster vos performances grâce au Pattern PRPL ?

Source : https://web.dev/apply-instant-loading-with-prpl/Preload/push

 

Push ou Preload

Objectif :

Optimiser le chemin critique de rendu en réduisant le plus possible le temps entre la réception de l’HTML et la demande des ressources critiques (CSS et JS)

 

La solution avec HTTP/1.1 : Préchargement des assets

Afin d'accélérer le chargement de la page ainsi que de ses ressources, une technique consiste à demander ces dernières dès le début du chargement de la page.

Pour indiquer au navigateur qu'il doit télécharger en amont une ressource, on utilise les balises '<link rel="preload" href="/app.js" as="script">'.

Cette balise contient 3 informations :

  • Le "preload" indique au navigateur qu'il doit télécharger le fichier situé à l'adresse suivante
  • Le "href" indique au navigateur le fichier à télécharger
  • Le "as" indique au navigateur le rôle du fichier (un fichier JS, CSS, une font...)

Ainsi, lorsque l'asset est demandé, le navigateur a déjà anticipé son téléchargement, et l'interprétation du fichier se lance directement.
À noter qu'il existe d'autres directives que preload (parmi elles : "preconnect", "dns-prefetch").
Pour plus d'informations sur les directives de préchargements : https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect

<head>
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Contenu -->

  <script src="main.js" defer></script>
</body>
 
La solution avec HTTP/2 : Server Push, sera abordée dans notre prochain article.

 

Render

Objectif : faire en sorte que le First Paint arrive le plus tôt possible.

La solution : extraire les ressources non-bloquantes du chemin de rendu critique, et alléger les ressources bloquantes.

Afin d'extraire les ressources non bloquantes, une solution consiste à indiquer au navigateur qu'il en n'aura pas besoin pour effectuer le premier rendu de la page.
Pour cela, on utilise le mot clé "async" comme attribut dans les balises qui demandent un fichier.
Il est courant de voir ce mot clé accompagné de "defer", qui permet de retarder l'exécution de l'asset à la fin du chargement de la page.
On obtient ainsi une balise telle que "<script src="/app.js" defer async></script>".

Alléger les ressources bloquantes constituent le gros du travail :

  • Pour les images, il est possible de retailler les originales et de supprimer les métadonnées pour que le serveur envoie aux navigateurs des fichiers plus légers.
  • Pour les fonts, nous pouvons supprimer les caractères non utilisés. Cette technique est pertinente surtout si vous utilisez des bibliothèques de pictogrammes (comme Font Awesome), où il est donc conseillé de ne demander que les caractères dont vous avez besoin.
  • Pour les fichiers JS et CSS, après les avoir "packés" et minifiés, il est possible de séparer le code du front-end par pages/sections, afin de minimiser le code inutilisé lors d'une navigation type (exemple : un JS pour la page d'accueil, un JS pour la gestion du panier, un JS pour l'espace utilisateur...).

Les outils :

  • Webpagetest, afin de situer les ressources bloquantes, le First Paint, le Time to Interactive, etc. ...
  • ImageMagick, qui permet de retailler et optimiser les images sur le serveur (dans le cas d'une application Symfony, nous préconisons l'utilisation de LiipImagineBundle).
  • L’inspecteur web de Chrome, qui possède l'outil "Coverage" qui permet de détecter le code JS et CSS inutilisé.
  • Webpack, qui permet d'alléger les assets (packing et minification), et gère aussi le découpage de l'application front-end 

Ressource : https://webpack.js.org/concepts/entry-points

 

Precaching

Objectif : ne pas faire de requête si on n’en a pas besoin !

Une bonne configuration des caches HTTP permet aux navigateurs de minimiser le nombre de requêtes, et donc les temps de chargement.
De plus, il est possible dans le code front-end, d'implémenter une logique qui permet de stocker des données externes selon la logique métier.
Ceci peut être fait, par exemple, en utilisant la nouvelle API JS des Services Workers.

Les outils :

  • Apache/NGINX et Varnish, pour configurer les entêtes de cache HTTP des différentes ressources
  • Workbox, qui est une solution de mise en mémoire qui utilise l'API des Services Workers.

 

Apache-NGINX-Workbox

 

Lazyloading

Objectif: réduire le poids et le nombre de ressources critiques en les traitant de manière asynchrone, après le premier rendu et chargement.

Pour répondre à cet objectif, une méthode courante pour réduire les nombre de ressources critiques est de charger les médias qui sont en dessous de la ligne de flottaison lorsque la page est rendue.
Par exemple, pour les images, on affiche un placeholder (un carré monochrome, une version floutée de l'image...) pendant le temps du chargement, pour ensuite afficher l'image originale lorsqu'elle est prête.

Lazyloading

Cette technique peut même être utilisée sur les scripts JS. Par exemple, avec Webpack :

import(`./locale/${language}.json`).then(module => {
  // do something with the translations
});

 

Les outils :

Il existe plein de bibliothèques (open-sources) de lazyloading. En voici une liste non-exhaustive : 

J'espère que cet article vous aidera à améliorer vos performances web, vous pouvez également utiliser les techniques de mise en cache, packing et minification et/ou attendre notre prochain article qui clôturera la thématique, dans lequel nous parlerons d'HTTP/2...

Besoin de conseils afin d'optimiser la performance de votre site web ? Contactez-nous !
À la recherche d’une nouvelle opportunité ? Rejoignez-nous

A lire aussi

Notre partenaire l’éditeur eZ Systems devient Ibexa et marque le passage du ...
Le rôle de la DSI dans la stratégie d'entreprise
Voir tous les articles