Le script d'optimisation PageSpeed de dernier recours GRATUIT

Le script d'optimisation PageSpeed de dernier recours GRATUIT

Parfois, en tant que consultant Core Web Vitals, je tombe sur la page irréparable. Ce n'est pas qu'elle est irréparable parce que je ne sais pas comment la réparer ! 
Non, elle est irréparable car la réparer signifierait réécrire de grandes parties d'un site qui est déjà prévu pour être remplacé. Ou parfois quand il n'y a tout simplement pas assez d'accès et de contrôle pour améliorer le code du site comme on le voit avec des systèmes CMS plus fermés comme (WIX, HubSpot, WebFlow, etc.). Ou, enfin, quand le budget n'est tout simplement pas là. Cela n'arrive pas souvent, mais parfois les clients ne peuvent pas prédire avec précision la quantité de travail qui doit être fait et payé.

Présentation du "script d'optimisation PageSpeed de dernier recours"

Lorsque vous vous trouvez dans cette situation délicate, ce script est votre tentative finale désespérée d'améliorer au moins un peu la vitesse de la page jusqu'à ce que vous puissiez construire quelque chose de mieux. Il fonctionne intelligemment en tirant parti du Mutation Observer. Le script surveille la création du Document Object Model de votre site par le navigateur et intercepte et remplace immédiatement le code lent par du code plus rapide.

Ce qu'il fait :

• Intercepte tous les scripts bloquant le rendu et les diffère en changeant le type du script en type="module". Cette astuce utilise le fait que tous les scripts modulaires sont différés par défaut. Même les scripts inline. Cela en fait la méthode la plus sûre pour différer tous les scripts de la page.
• Chargement différé des images : loading="lazy" et decoding="async" sont ajoutés à toutes les images. Cela différera le chargement de ces images jusqu'à ce qu'elles soient presque dans la zone d'affichage visible, ainsi qu'une mise à jour asynchrone de la mise en page des images
• Chargement différé des iframes. Comme pour les images, le chargement différé des iframes peut prioriser votre propre contenu plus important !

Configuration

Le script prend un seul 'objet de configuration' et utilise cette configuration pour éviter de différer ou de charger en différé les images et scripts importants. Pour les iframes, cela fonctionne dans l'autre sens, il ne charge en différé que les iframes qui correspondent à votre configuration. Toutes les configurations se présentent sous forme d'expression régulière. Cela peut sembler effrayant mais en pratique c'est vraiment simple. Voici

• prioScripts : Évite de différer le script dont la source (src) correspond à la configuration.
  
• Exemple : 'jquery|menu' correspond à votre jquery et à votre script de menu
• prioImgs : Évite le chargement différé pour toutes les images dont le nom, la classe ou l'id correspond
  Exemple : 'hero' correspond à la fois à <img id="hero" ..> et <img src="hero.jpg">
• lazyFrames : Charge en différé uniquement les iframes dont la source (src) correspond à la configuration.
  Exemple : 'youtube|maps' charge en différé toutes les iframes youtube et google maps.

Utilisation

Limitations

Comme je l'ai déjà dit, vous ne devriez vraiment pas utiliser ce script comme solution principale pour corriger votre vitesse de page. Seulement quand tout le reste échoue, pendant que vous travaillez activement sur un nouveau site, une solution comme celle-ci est acceptable !
En termes plus techniques, ce script fait la course contre le navigateur (et le scanner de préchargement), il est donc impossible de dire quels éléments lents auront déjà été déclenchés pour le téléchargement avant que le script ne s'active

Le script d'optimisation PageSpeed de dernier recours

Voici une version minifiée qui devrait être utilisée en production

!function(t){['prioScripts', 'prioImgs', 'lazyFrames'].forEach(e=>{t[e]=t[e]?RegExp(t[e],"i"):null});let e=new MutationObserver(e=>{e.forEach(({addedNodes:e})=>{e.forEach(e=>{if(1===e.nodeType)switch(e.tagName){case"SCRIPT":if(!t.prioScripts||!t.prioScripts.test(e.src)){let t=e.getAttribute("type");t&&"text/javascript"!==t||e.setAttribute("type","module")}break;case"IMG":console.log(e.outerHTML),t.prioImgs&&(t.prioImgs.test(e.outerHTML)||e.getAttribute("loading"))||(e.setAttribute("loading","lazy"),e.setAttribute("decoding","async"));break;case"IFRAME":t.lazyFrames.test(e.src)&&e.setAttribute("loading","lazy")}})})});/MSIE|Trident/.test(navigator.userAgent)||(e.observe(document.documentElement,{childList:!0,subtree:!0}),document.addEventListener("DOMContentLoaded",()=>{e.disconnect()}))}({prioScripts:"jquery",prioImgs:"hero",lazyFrames:"youtube|maps"});

Voici une version plus lisible du script. N'utilisez pas celle-ci en production ! Utilisez la version minifiée !

!function (cfg) {

    // Regexify config or nullify
    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {
        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;
    });

    t0 = performance.now();

    /* Watch mutated nodes */
    const mutator = new MutationObserver((e) => {
        e.forEach(({ addedNodes: e }) => {
            e.forEach((e) => {
                switch (e.nodeType) {
                    case 1:
                        switch (e.tagName) {
                            // defer scripts by adding type="module", excusive test on src
                            case "SCRIPT":
                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {
                                    let type = e.getAttribute("type");
                                    if (!type || type === "text/javascript") {
                                        e.setAttribute("type", "module");
                                    }
                                }
                                break;

                            // lazy load images, excusive test on outerHTML for classname, id etc etc
                            case "IMG":
                                console.log(e.outerHTML);
                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {
                                    e.setAttribute("loading", "lazy");
                                    e.setAttribute("decoding", "async");
                                }
                                break;

                            // lazy load iframes, inclusive test on src
                            case "IFRAME":
                                if (cfg.lazyFrames.test(e.src)) {
                                    e.setAttribute("loading", "lazy");
                                }
                                break;
                        }
                        break;
                }
            });
        });
    });


    // Check for IE
    if (!/MSIE|Trident/.test(navigator.userAgent)) {
        mutator.observe(document.documentElement, { childList: true, subtree: true });
        document.addEventListener("DOMContentLoaded", () => {
            mutator.disconnect();
            console.log("I quit after watching for " + (performance.now() - t0) + " ms");
        });
    }
}({
    prioScripts: 'jquery',
    prioImgs: 'hero',
    lazyFrames: 'youtube|maps',
});