Het GRATIS pagespeed optimalisatie script voor een allerlaatste poging

Het GRATIS pagespeed optimalisatie script voor een allerlaatste poging

Soms kom ik als Core Web Vitals consultant de onrepareerbare pagina tegen. Het is niet zo dat deze onrepareerbaar is omdat ik niet weet hoe ik het moet oplossen! Nee, hij is onrepareerbaar omdat het oplossen ervan zou betekenen dat grote delen van een site moeten worden herschreven die al gepland staat om vervangen te worden. Of soms is er gewoon niet genoeg toegang en controle om de code van de site te verbeteren, zoals je ziet bij meer gesloten CMS-systemen zoals WIX, HubSpot, WebFlow etc. Of, ten slotte, wanneer het budget er simpelweg 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 voor een allerlaatste poging"

Wanneer je je in deze lastige situatie bevindt, is dit script je wanhopige laatste poging om de pagespeed in ieder geval een beetje te verbeteren totdat je iets beters kunt bouwen. Het werkt op slimme wijze door gebruik te maken van de Mutation Observer. Het script kijkt mee terwijl het Document Object Model van je site door de browser wordt opgebouwd en onderschept direct trage code en vervangt deze 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 meest veilige methode om alle paginascripts uit te stellen.
• Lazy loading van afbeeldingen: 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 asynchrone updates van de afbeeldingslayout. Let op: je wilt je LCP afbeelding niet lazy loaden. Gebruik de prioImgs configuratie om deze uit te sluiten. Zie waarom het lazy loaden van de LCP afbeelding de prestaties schaadt.
• Lazy load iframes. Net als bij afbeeldingen kan het lazy loaden van iframes prioriteit geven aan je eigen, belangrijkere, content!

Configuratie

Het script neemt een enkel "configuratie object" en gebruikt die configuratie om het uitstellen of lazy loaden van belangrijke afbeeldingen en scripts over te slaan. Voor iframes werkt het precies andersom, het lazy load alleen de iframes die overeenkomen met je configuratie. Alle configuraties worden geleverd als een reguliere expressie. Dat klinkt misschien eng, maar in de praktijk is het echt 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, afbeeldingsclass of het afbeeldingsid 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 moeten gebruiken als je belangrijkste oplossing om je pagespeed te repareren. Alleen als 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 zullen zijn voor download voordat het script activeert.

Het pagespeed optimalisatie script voor een allerlaatste poging

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 deze 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