Das KOSTENLOSE Pagespeed-Optimierungs-Skript als letzter Ausweg

Das KOSTENLOSE Pagespeed-Optimierungs-Skript als letzter Ausweg

Manchmal stoße ich als Core Web Vitals-Berater auf eine unreparierbare Seite. Nicht, dass sie unreparierbar wäre, weil ich nicht weiß, wie man sie repariert! Nein, sie ist unreparierbar, weil eine Reparatur bedeuten würde, große Teile einer Website neu zu schreiben, die bereits ersetzt werden soll. Oder manchmal, wenn es einfach nicht genug Zugriff und Kontrolle gibt, um den Code der Website zu verbessern, wie man es bei geschlosseneren CMS-Systemen wie WIX, HubSpot, WebFlow usw. sieht. Oder schließlich, wenn einfach nicht das nötige Budget vorhanden ist. Das kommt nicht oft vor, aber manchmal können Kunden den Arbeitsaufwand, der erledigt und bezahlt werden muss, nicht genau einschätzen.

Zuletzt überprüft von Arjen Karel im März 2026

Einführung in das "Pagespeed-Optimierungs-Skript als letzter Ausweg"

Wenn Sie sich in dieser schwierigen Lage befinden, ist dieses Skript Ihr verzweifelter letzter Versuch, die Seitenladezeit zumindest ein wenig zu verbessern, bis Sie etwas Besseres bauen können. Es funktioniert clever, indem es den Mutation Observer verwendet. Das Skript beobachtet, wie das Document Object Model Ihrer Website vom Browser erstellt wird, und fängt langsamen Code sofort ab, um ihn durch schnelleren Code zu ersetzen.

Was es macht:

• Fängt alle renderblockierenden Skripte ab und stellt sie zurück, indem der Typ des Skripts auf type="module". geändert wird. Dieser Trick nutzt die Tatsache, dass alle modularen Skripte standardmäßig zurückgestellt werden. Sogar Inline-Skripte. Dies macht dies zur sichersten Methode, um alle Seitenskripte zurückzustellen.
• Lazy Loading für Bilder: loading="lazy" und decoding="async" werden zu allen Bildern hinzugefügt. Dadurch wird das Laden dieser Bilder verzögert, bis sie fast im sichtbaren Viewport sind, zusammen mit einer asynchronen Aktualisierung des Bildlayouts. Seien Sie vorsichtig: Sie möchten Ihr LCP-Bild nicht verzögert laden. Verwenden Sie die Konfiguration prioImgs, um es auszuschließen. Lesen Sie, warum das Lazy Loading des LCP-Bildes der Performance schadet.
• Lazy Loading für Iframes. Genau wie bei Bildern kann das Lazy Loading von Iframes Ihre eigenen, wichtigeren Inhalte priorisieren!

Konfiguration

Das Skript nimmt ein einzelnes "Konfigurationsobjekt" entgegen und verwendet diese Konfiguration, um das Zurückstellen oder Lazy Loading wichtiger Bilder und Skripte zu überspringen. Bei Iframes funktioniert es umgekehrt: Es werden nur die Iframes verzögert geladen, die Ihrer Konfiguration entsprechen. Alle Konfigurationen werden als regulärer Ausdruck angegeben. Das mag beängstigend klingen, ist in der Praxis aber wirklich einfach.

• prioScripts: Überspringt das Zurückstellen von Skripten, bei denen die src mit der Konfiguration übereinstimmt.
  Beispiel: 'jquery|menu' entspricht Ihrem jQuery- und Ihrem Menü-Skript
• prioImgs: Überspringt das Lazy Loading für alle Bilder, bei denen der Bildname, die Bildklasse oder die Bild-ID übereinstimmen.
  Beispiel: 'hero' entspricht sowohl <img id="hero" ..> als auch <img src="hero.jpg">
• lazyFrames: Lädt nur Iframes verzögert, bei denen die Iframe-src mit der Konfiguration übereinstimmt.
  Beispiel: 'youtube|maps' lädt alle YouTube- und Google Maps-Iframes verzögert.

Verwendung

Einschränkungen

Wie ich bereits erwähnt habe, sollten Sie dieses Skript wirklich nicht als Ihre Hauptlösung verwenden, um Ihren Pagespeed zu reparieren. Nur wenn alles andere fehlschlägt, während Sie aktiv an einer neuen Website arbeiten, ist eine Lösung wie diese akzeptabel!
In technischeren Begriffen: Dieses Skript tritt in einem Wettlauf gegen den Browser (und den Preload-Scanner) an, es ist also nicht abzusehen, welche langsamen Elemente bereits zum Herunterladen ausgelöst wurden, bevor das Skript aktiviert wird.

Das Pagespeed-Optimierungs-Skript als letzter Ausweg

Hier ist eine minifizierte Version, die in der Produktion verwendet werden sollte

!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 ist eine besser lesbare Version des Skripts. Verwenden Sie diese nicht in der Produktion! Verwenden Sie die minifizierte Version!

!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