Het GRATIS paginasnelheid-optimalisatiescript als laatste redmiddel

Het GRATIS optimalisatiescript voor paginasnelheid als laatste redmiddel

Soms kom ik als Core Web Vitals consultant een onoplosbare pagina tegen. Hij is niet onoplosbaar omdat ik niet weet hoe ik hem moet fixen! Nee, hij is onoplosbaar omdat een fix betekent dat je grote delen herschrijft van een site die al op de planning staat voor vervanging. Of soms heb je simpelweg onvoldoende toegang en controle om de code van de site te verbeteren. Dit zie je bij meer gesloten CMS-systemen zoals WIX, HubSpot, WebFlow etc. Of tot slot, als het budget er gewoon niet is. Het komt niet vaak voor, maar soms kunnen klanten de hoeveelheid werk die gedaan en betaald moet worden niet goed inschatten.

Laatst beoordeeld door Arjen Karel in maart 2026

Introductie: "Het optimalisatiescript voor paginasnelheid als laatste redmiddel"

Zit je in deze lastige situatie, dan is dit script je wanhopige laatste poging om de paginasnelheid tenminste iets te verbeteren totdat je iets beters bouwt. Het werkt slim door het gebruik van de Mutation Observer. Het script kijkt mee terwijl de browser het Document Object Model van je site aanmaakt. Het onderschept trage code direct en vervangt deze door snellere code.

Wat het doet:

• Onderschept alle render blocking scripts en stelt ze uit door het type van het script te wijzigen naar type="module". Deze truc maakt gebruik van het feit dat alle modulaire scripts standaard worden uitgesteld. Zelfs inline scripts. Dit maakt het de veiligste methode om alle paginascripts uit te stellen.
• Lazy loading voor afbeeldingen: loading="lazy" en decoding="async" worden toegevoegd aan alle afbeeldingen. Dit zal het laden van deze afbeeldingen uitstellen totdat ze bijna in de zichtbare viewport komen, samen met asynchrone layout updates van afbeeldingen. Let op: je wilt geen lazy loading toepassen op je LCP afbeelding. Gebruik de prioImgs configuratie om deze uit te sluiten. Zie waarom lazy loading van de LCP afbeelding de prestaties schaadt.
• Lazy loading voor iframes. Net als bij afbeeldingen kan lazy loading van iframes prioriteit geven aan je eigen, belangrijkere content!

Configuratie

Het script neemt één enkel "config object" aan. Het gebruikt deze configuratie om het uitstellen of lazy loading van belangrijke afbeeldingen en scripts over te slaan. Voor iframes werkt het andersom: het past alleen lazy loading toe op iframes die overeenkomen met je configuratie. Alle configuraties zijn een reguliere expressie. Dat klinkt misschien eng, maar in de praktijk is het erg simpel.

• prioScripts: Slaat het uitstellen over van scripts waarvan de src overeenkomt met de configuratie.
  Voorbeeld: 'jquery|menu' matcht je jquery en je menu script
• prioImgs: Slaat lazy loading over voor alle afbeeldingen waarbij de afbeeldingsnaam, afbeeldingsclass of het afbeeldings-id overeenkomt.
  Voorbeeld: 'hero' matcht zowel <img id="hero" ..> als <img src="hero.jpg">
• lazyFrames: Past alleen lazy loading toe op iframes waarvan de iframe src overeenkomt met de configuratie.
  Voorbeeld: 'youtube|maps' past lazy loading toe op alle YouTube en Google Maps iframes.

Gebruik

Beperkingen

Zoals ik al eerder zei, moet je dit script echt niet gebruiken als je hoofdoplossing om je paginasnelheid te fixen. 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). Je kunt dus niet zeggen welke trage elementen al getriggerd zijn voor download voordat het script activeert.

Het optimalisatiescript voor paginasnelheid als laatste redmiddel

Hier is een minified versie die je in productie moet gebruiken

!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 minified 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