Het GRATIS pagespeed optimalisatie script als laatste redmiddel

Het GRATIS pagespeed optimalisatie script als laatste redmiddel

Soms kom ik als Core Web Vitals consultant een onherstelbare pagina tegen. Het is niet onherstelbaar omdat ik niet weet hoe ik het moet oplossen! Nee, het is onherstelbaar omdat het oplossen ervan zou betekenen dat grote delen van een site, die al op de planning staat om vervangen te worden, herschreven moeten worden. Of soms wanneer er simpelweg niet genoeg toegang en controle is om de code van de site te verbeteren, zoals je ziet bij meer gesloten CMS-systemen zoals WIX, HubSpot, WebFlow, enz. Of ten slotte, wanneer het budget er gewoon niet is. Het gebeurt niet vaak, maar soms kunnen klanten de hoeveelheid werk die gedaan en betaald moet worden niet nauwkeurig inschatten.

Laatst beoordeeld door Arjen Karel in maart 2026

Introductie van "Het pagespeed optimalisatie script als laatste redmiddel"

Wanneer je je in deze lastige positie bevindt, is dit script je wanhopige laatste poging om op zijn minst de pagespeed een beetje te verbeteren totdat je iets beters kunt bouwen. Het werkt slim door gebruik te maken van de Mutation Observer. Het script kijkt mee terwijl het Document Object Model van je site wordt aangemaakt door de browser en onderschept en vervangt direct trage code door snellere code.

Wat het doet:

• Onderschep alle render-blocking scripts en stel ze uit door het type van het script te veranderen naar type="module". Deze truc maakt gebruik van het feit dat alle modulaire scripts standaard worden uitgesteld. Zelfs inline scripts. Dit maakt dit de veiligste methode om alle pagina scripts uit te stellen.
• Lazy image loading: loading="lazy" en decoding="async" wordt toegevoegd aan alle afbeeldingen. Dit zal het laden van deze afbeeldingen uitstellen totdat ze bijna in de zichtbare viewport zijn, samen met het asynchroon updaten van de afbeeldingslay-out. Wees voorzichtig: je wilt je LCP afbeelding niet lazy loaden. Gebruik de prioImgs configuratie om deze uit te sluiten. Bekijk waarom het lazy loaden van de LCP afbeelding de prestaties schaadt.
• Lazy load iframes. Net als bij afbeeldingen, kan het lazy loaden van iframes voorrang geven aan je eigen, belangrijkere content!

Configuratie

Het script accepteert een enkel "config object" en gebruikt die configuratie om het uitstellen of lazy loaden van belangrijke afbeeldingen en scripts over te slaan. Voor iframes werkt het andersom, het lazy load alleen de iframes die overeenkomen met je configuratie. Alle configuraties worden opgegeven als een reguliere expressie. Dat klinkt misschien eng, maar in de praktijk is het heel eenvoudig.

• prioScripts: Slaat het uitstellen van scripts over waarvan de src overeenkomt met de configuratie.
  Voorbeeld: 'jquery|menu' komt overeen met je jquery en je menu script
• prioImgs: Slaat lazy loading over voor alle afbeeldingen waarvan de afbeeldingsnaam, image class of image id overeenkomt.
  Voorbeeld: 'hero' komt overeen met zowel <img id="hero" ..> als <img src="hero.jpg">
• lazyFrames: Lazy load alleen iframes waarvan de iframe src overeenkomt met de configuratie.
  Voorbeeld: 'youtube|maps' lazy load alle YouTube en Google Maps iframes.

Gebruik

Beperkingen

Zoals ik al eerder aangaf, zou je dit script echt niet als je belangrijkste oplossing moeten gebruiken om je pagespeed te verbeteren. Alleen wanneer al het andere faalt, terwijl je actief aan een nieuwe site werkt, is een oplossing als deze acceptabel!
In meer technische termen racet dit script tegen de browser (en de preload scanner), dus het is niet te zeggen welke trage elementen al geactiveerd zijn voor download voordat het script actief wordt.

Het pagespeed optimalisatie script als laatste redmiddel

Hier is een geminificeerde versie die in productie gebruikt zou moeten worden

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

Hier is een beter leesbare versie van het script. Gebruik dit niet in productie! Gebruik de geminificeerde versie!

!function (cfg) {\r\n\r\n    // Regexify config or nullify\r\n    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {\r\n        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;\r\n    });\r\n\r\n    t0 = performance.now();\r\n\r\n    /* Watch mutated nodes */\r\n    const mutator = new MutationObserver((e) => {\r\n        e.forEach(({ addedNodes: e }) => {\r\n            e.forEach((e) => {\r\n                switch (e.nodeType) {\r\n                    case 1:\r\n                        switch (e.tagName) {\r\n                            // defer scripts by adding type="module", excusive test on src\r\n                            case "SCRIPT":\r\n                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {\r\n                                    let type = e.getAttribute("type");\r\n                                    if (!type || type === "text/javascript") {\r\n                                        e.setAttribute("type", "module");\r\n                                    }\r\n                                }\r\n                                break;\r\n\r\n                            // lazy load images, excusive test on outerHTML for classname, id etc etc\r\n                            case "IMG":\r\n                                console.log(e.outerHTML);\r\n                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {\r\n                                    e.setAttribute("loading", "lazy");\r\n                                    e.setAttribute("decoding", "async");\r\n                                }\r\n                                break;\r\n\r\n                            // lazy load iframes, inclusive test on src\r\n                            case "IFRAME":\r\n                                if (cfg.lazyFrames.test(e.src)) {\r\n                                    e.setAttribute("loading", "lazy");\r\n                                }\r\n                                break;\r\n                        }\r\n                        break;\r\n                }\r\n            });\r\n        });\r\n    });\r\n\r\n\r\n    // Check for IE\r\n    if (!/MSIE|Trident/.test(navigator.userAgent)) {\r\n        mutator.observe(document.documentElement, { childList: true, subtree: true });\r\n        document.addEventListener("DOMContentLoaded", () => {\r\n            mutator.disconnect();\r\n            console.log("I quit after watching for " + (performance.now() - t0) + " ms");\r\n        });\r\n    }\r\n}({\r\n    prioScripts: 'jquery',\r\n    prioImgs: 'hero',\r\n    lazyFrames: 'youtube|maps',\r\n});\r\n\r\n\r\n