Det GRATIS sista utvägen pagespeed-optimeringsskript

Det GRATIS sista utvägen pagespeed-optimeringsskript

Ibland, som Core Web Vitals-konsult, stöter jag på den olösliga sidan. Det är inte för att den är olöslig för att jag inte vet hur man fixar det! 
Nej, den är olöslig för att fixa den skulle innebära att skriva om stora delar av en webbplats som redan är planerad att ersättas. Eller ibland när det helt enkelt inte finns tillräcklig åtkomst och kontroll för att förbättra webbplatsens kod, som man ser med mer stängda CMS-system som  (WIX,HubSpot,WebFlow etc). Eller, slutligen, när budgeten helt enkelt inte räcker till. Det händer inte ofta men ibland kan kunder inte exakt förutse mängden arbete som behöver göras och betalas för.

Vi presenterar "Sista utvägen pagespeed-optimeringsskript"

När du befinner dig i denna knipa är detta skript ditt desperata sista försök att åtminstone förbättra pagespeed lite tills du kan bygga något bättre. Det fungerar smart genom att utnyttja [url=https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver]Mutation Observer[/url]. Skriptet övervakar när Document Object Model för din webbplats skapas av webbläsaren och fångar omedelbart upp och ersätter långsam kod med snabbare kod.

Vad det gör:

• Fångar upp alla renderingsblockerande skript och skjuter upp dem genom att ändra typen av skriptet till type="module". Detta trick utnyttjar det faktum att alla modulära skript skjuts upp som standard. Även inline-skript. Detta gör det till den säkraste metoden att skjuta upp alla sidskript.
• Lat bildladdning: loading="lazy" och decoding="async" läggs till på alla bilder. Detta skjuter upp laddningen av dessa bilder tills de nästan är i det synliga vyområdet tillsammans med en asynkron uppdatering av bildlayouten
• Lat-ladda iframes. Precis som med bilder kan lat-laddning av iframes prioritera ditt eget, viktigare, innehåll!

Konfiguration

Skriptet tar ett enda 'config-objekt' och använder den konfigurationen för att hoppa över uppskjutning eller lat-laddning av viktiga bilder och skript. För iframes fungerar det tvärtom, det lat-laddar bara de iframes som matchar din konfiguration. Alla konfigurationer kommer som ett reguljärt uttryck. Det kan låta skrämmande men i praktiken är det riktigt enkelt. Här 

• prioScripts: Hoppar över att skjuta upp skript där src matchar konfigurationen.
  
• Exempel: 'jquery|menu' matchar ditt jquery och ditt menyskript
• prioImgs: Hoppar över lat-laddning för alla bilder där bildnamnet, bildklassen eller bild-id:t matchar
  Exempel: 'hero' matchar både <img id="hero" ..> och <img src="hero.jpg">
• lazyFrames: Lat-laddar bara iframes där iframe-src matchar konfigurationen.
  Exempel: 'youtube|maps' lat-laddar alla youtube- och google maps-iframes.

Användning

Begränsningar

Som jag tidigare nämnde bör du verkligen inte använda detta skript som din huvudsakliga lösning för att fixa din pagespeed. Bara när allt annat misslyckas, medan du aktivt arbetar på en ny webbplats, är en lösning som denna acceptabel!
I mer tekniska termer tävlar detta skript mot webbläsaren (och preload-skannern) så det går inte att säga vilka långsamma element som redan har utlösts för nedladdning innan skriptet aktiveras

Sista utvägen pagespeed-optimeringsskript

Här är en minifierad version som bör användas i produktion

!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"});

Här är en mer läsbar version av skriptet. Använd inte denna i produktion! Använd den minifierade versionen!

!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',
});