Das KOSTENLOSE "letzter Ausweg" Pagespeed-Optimierungsskript

Das KOSTENLOSE "letzter Ausweg" Pagespeed-Optimierungsskript

Manchmal, als Core Web Vitals Berater, stoße ich auf die unfixbare Seite. Es ist nicht so, dass sie unfixbar ist, weil ich nicht weiß, wie man sie repariert! 
Nein, sie ist unfixbar, weil ihre 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 das Budget einfach nicht da ist. Es passiert nicht oft, aber manchmal können Kunden die Menge an Arbeit, die getan und bezahlt werden muss, nicht genau vorhersagen.

Vorstellung: "Das Pagespeed-Optimierungsskript als letzter Ausweg"

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

Was es tut:

• Fängt alle Render-Blocking-Skripte ab und defert sie, indem es den Typ des Skripts in type="module" ändert. Dieser Trick nutzt die Tatsache, dass alle modularen Skripte standardmäßig deferred sind. Sogar Inline-Skripte. Dies macht dies zur sichersten Methode, um alle Seitenskripte zu deferren.
• Lazy Image Loading: loading="lazy" und decoding="async" wird allen Bildern hinzugefügt. Dies defert das Laden dieser Bilder, bis sie fast im sichtbaren Viewport sind, zusammen mit einer asynchronen Bildlayout-Aktualisierung
• Lazy Loading für iFrames. Dasselbe wie bei Bildern, Lazy Loading für iFrames kann Ihre eigenen, wichtigeren Inhalte priorisieren!

Konfiguration

Das Skript nimmt ein einzelnes 'Config-Objekt' und verwendet diese Konfiguration, um das Deferren oder Lazy Loading wichtiger Bilder und Skripte zu überspringen. Für iFrames funktioniert es andersherum, es lädt nur die iFrames lazy, die Ihrer Konfiguration entsprechen. Alle Konfigurationen kommen als regulärer Ausdruck. Das mag beängstigend klingen, ist aber in der Praxis wirklich einfach. Hier 

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

Verwendung

Einschränkungen

Wie ich bereits sagte, sollten Sie dieses Skript wirklich nicht als Ihre Hauptlösung verwenden, um Ihren Pagespeed zu beheben. 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 rennt gegen den Browser (und den Preload-Scanner), also kann man nicht sagen, welche langsamen Elemente bereits für den Download ausgelöst wurden, bevor das Skript aktiviert wird

Das Pagespeed-Optimierungsskript 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 lesbarere Version des Skripts. Verwenden Sie diese nicht in der Produktion! Verwenden Sie die minifizierte!

!function (cfg) {

    // Regexify config or nullify
    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {
        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;
    });

    t0 = performance.now();

    /* Watch mutated nodes */
    const mutator = new MutationObserver((e) => {
        e.forEach(({ addedNodes: e }) => {
            e.forEach((e) => {
                switch (e.nodeType) {
                    case 1:
                        switch (e.tagName) {
                            // defer scripts by adding type="module", excusive test on src
                            case "SCRIPT":
                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {
                                    let type = e.getAttribute("type");
                                    if (!type || type === "text/javascript") {
                                        e.setAttribute("type", "module");
                                    }
                                }
                                break;

                            // lazy load images, excusive test on outerHTML for classname, id etc etc
                            case "IMG":
                                console.log(e.outerHTML);
                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {
                                    e.setAttribute("loading", "lazy");
                                    e.setAttribute("decoding", "async");
                                }
                                break;

                            // lazy load iframes, inclusive test on src
                            case "IFRAME":
                                if (cfg.lazyFrames.test(e.src)) {
                                    e.setAttribute("loading", "lazy");
                                }
                                break;
                        }
                        break;
                }
            });
        });
    });


    // Check for IE
    if (!/MSIE|Trident/.test(navigator.userAgent)) {
        mutator.observe(document.documentElement, { childList: true, subtree: true });
        document.addEventListener("DOMContentLoaded", () => {
            mutator.disconnect();
            console.log("I quit after watching for " + (performance.now() - t0) + " ms");
        });
    }
}({
    prioScripts: 'jquery',
    prioImgs: 'hero',
    lazyFrames: 'youtube|maps',
});