Critical Rendering Path

crp-hackathon.md

Optimisation du chemin critique

Optimisation des JavaScript

Essayez de charger vos JS de manière non bloquantes.

Quel mode de chargement en fonction de quel context ?

• Si votre script est modulaire et ne dépend d'aucun autre script utilisez async
• Si votre script depend d'un autre script ou d'autre script dépendent de lui utilisez defer
• Si votre script est légé et que des scripts chargés en async dépendent de lui chargez le dans le document (inline)

Solutions alternative de chargement

  $.getScript("somescript.js", function(){
   alert("Script loaded and executed.");
 });
 

Plus d'infos jQuery getScript

D'autres solutions existent découvrez ces JavaScripts loader require.js / head.js

Optimisation du CSS

Peut importe où vous placez votre CSS (header / footer) il bloquera l'affichage ( rien ne sera affiché à l'écran tant que le CSS n'est pas complètement chargé). Il existe des pistes d'optimisation.

Chargez le CSS non-critique de manière asynchrone

Il est important de distinguer le css critique et le css non-critique. Le CSS critique est celui responsable de l'affichage au dessus de la ligne de flotaison, le css-non critique est le CSS responsable du style des autres éléments.

Séparer le CSS critique du non-critique

Vous pouvez utiliser critical pour faire l'extraction.

Installez le module:

npm install --save critical

Copiez coller cela dans le fichier de votre choix (ici app.js)

// app.js
var critical = require('critical');

critical.generate({
  src: 'https://www.example.com', // url
  dest: 'critical.css', // fichier de destination
  width: 412, // largeur de la fenêtre 
  height: 732 // hauteur 
});

Puis tapez node app.js (si votre fichier se nomme app.js)

Vous allez normalement récupérer le css critique dans critical.css

Inlinez le css critique

exemple en php <style><?php include("css/critical.css");?></style>

Chargez les CSS non-critique en asynchrone

Pour charger le CSS critique en async vous pouvez utiliser la librairie loadCss

Chargez la librairie loadCss.js

Puis chargez vos CSS non critique de cette manière :

loadCSS( "path/to/mystylesheet.css" );