Das KOSTENLOSE Pagespeed-Optimierungsskript für den letzten Ausweg

Das KOSTENLOSE Pagespeed-Optimierungsskript für den letzten Ausweg

Manchmal stoße ich als Core Web Vitals-Berater auf eine nicht reparierbare Seite. Es ist nicht so, dass sie nicht repariert werden kann, weil ich nicht weiß, wie! Nein, sie ist nicht reparierbar, weil die Behebung 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 letztendlich, wenn das Budget einfach nicht vorhanden ist. Es passiert nicht oft, aber manchmal können Kunden die Menge der Arbeit, die erledigt und bezahlt werden muss, nicht genau vorhersagen.

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

Wir stellen vor: "Das Pagespeed-Optimierungsskript für den letzten Ausweg"

Wenn Sie sich in dieser schwierigen Lage befinden, ist dieses Skript Ihr verzweifelter letzter Versuch, den Pagespeed zumindest ein wenig zu verbessern, bis Sie etwas Besseres entwickeln können. Es funktioniert clever, indem es den Mutation Observer verwendet. Das Skript überwacht die Erstellung des Document Object Models Ihrer Website durch den Browser und fängt langsamen Code sofort ab und ersetzt ihn durch schnelleren Code.

Was es tut:

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

Konfiguration

Das Skript nimmt ein einzelnes "Konfigurationsobjekt" entgegen und verwendet diese Konfiguration, um das Aufschieben oder Lazy Loading wichtiger Bilder und Skripte zu überspringen. Bei iFrames funktioniert es umgekehrt, es lädt nur die iFrames "lazy", die mit Ihrer Konfiguration übereinstimmen. Alle Konfigurationen werden als regulärer Ausdruck bereitgestellt. Das mag beängstigend klingen, aber in der Praxis ist es wirklich einfach.

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

Nutzung

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 Site arbeiten, ist eine solche Lösung akzeptabel!
Technisch ausgedrückt liefert sich dieses Skript ein Wettrennen mit dem Browser (und dem Preload-Scanner), sodass nicht vorhersehbar ist, welche langsamen Elemente bereits zum Download ausgelöst wurden, bevor das Skript aktiviert wird.

Das Pagespeed-Optimierungsskript für den letzten 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