Contactez-nous

change de nom...

Je découvre !Je suis contre, je change d'agence !

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

Axel Veber

24 avril 2020

Performances web Tech SEO

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

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.

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.

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 :

https://web.dev/lazy-loading-images/#libraries
Toujours pour les images, il est possible d'utiliser SQIP (https://github.com/axe312ger/sqip) pour générer différents types de placeholders.
Enfin, la documentation de Webpack sur les imports dynamiques se trouve ici: https://webpack.js.org/guides/code-splitting/#dynamic -imports

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 !