ILMAINEN viimeisen keinon pagespeed-optimointiskripti

ILMAINEN viimeisen keinon pagespeed-optimointiskripti

Joskus Core Web Vitals -konsulttina kohtaan sivun, jota ei voi korjata. Kyse ei ole siitä, ettenkö tietäisi miten se korjataan! 
Ei, sitä ei voi korjata, koska korjaaminen tarkoittaisi suurten osien uudelleenkirjoittamista sivustosta, joka on jo aikataulutettu korvattavaksi. Tai joskus kun pääsyä ja hallintaa ei yksinkertaisesti ole tarpeeksi sivuston koodin parantamiseen, kuten suljetummissa CMS-järjestelmissä näkee (WIX, HubSpot, WebFlow jne.). Tai viimeiseksi, kun budjetti ei yksinkertaisesti riitä. Ei tapahdu usein, mutta joskus asiakkaat eivät pysty tarkasti ennustamaan työn määrää, joka täytyy tehdä ja maksaa.

Esittelyssä "Viimeisen keinon pagespeed-optimointiskripti"

Kun löydät itsesi tästä ahtaasta tilanteesta, tämä skripti on epätoivoinen viimeinen yrityksesi parantaa pagespeed-tulosta edes hieman, kunnes voit rakentaa jotain parempaa. Se toimii älykkäästi hyödyntämällä Mutation Observeria. Skripti tarkkailee, kun selain luo sivustosi Document Object Modelin ja sieppaa välittömästi hitaan koodin ja korvaa sen nopeammalla koodilla.

Mitä se tekee:

• Sieppaa kaikki renderöinnin estävät skriptit ja lykkää niitä muuttamalla skriptin tyypiksi type="module". Tämä temppu hyödyntää sitä tosiasiaa, että kaikki modulaariset skriptit lykätään oletuksena. Jopa inline-skriptit. Tämä tekee tästä turvallisimman tavan lykätä kaikkia sivun skriptejä.
• Kuvien laiska lataus: loading="lazy" ja decoding="async" lisätään kaikkiin kuviin. Tämä lykkää kuvien lataamista, kunnes ne ovat melkein näkyvässä näkymäalueessa, sekä asynkronisen kuva-asettelun päivityksen kanssa.
• Iframe-elementtien laiska lataus. Sama kuin kuvien kanssa, iframe-elementtien laiska lataaminen voi priorisoida omaa, tärkeämpää sisältöäsi!

Konfiguraatio

Skripti ottaa yhden 'config-objektin' ja käyttää sitä ohittaakseen tärkeiden kuvien ja skriptien lykkäämisen tai laiskan latauksen. Iframe-elementeille se toimii päinvastoin: se lataa laiskasti vain ne iframe-elementit, jotka vastaavat konfiguraatiotasi. Kaikki konfiguraatiot tulevat säännöllisenä lausekkeena. Se voi kuulostaa pelottavalta, mutta käytännössä se on todella yksinkertaista. Tässä 

• prioScripts: Ohittaa skriptien lykkäämisen, kun src vastaa konfiguraatiota.
  
• Esimerkki: 'jquery|menu' vastaa jquery- ja menu-skriptiäsi
• prioImgs: Ohittaa laiskan latauksen kaikille kuville, joiden kuvan nimi, kuvan luokka tai kuvan id vastaa
  Esimerkki: 'hero' vastaa sekä <img id="hero" ..> että <img src="hero.jpg">
• lazyFrames: Lataa laiskasti vain ne iframe-elementit, joiden iframe src vastaa konfiguraatiota.
  Esimerkki: 'youtube|maps' lataa laiskasti kaikki YouTube- ja Google Maps -iframe-elementit.

Käyttö

Rajoitukset

Kuten aiemmin totesin, sinun ei todellakaan pitäisi käyttää tätä skriptiä pääasiallisena ratkaisunasi pagespeed-ongelmien korjaamiseen. Vain kun kaikki muu epäonnistuu, samalla kun työskentelet aktiivisesti uuden sivuston parissa, tällainen ratkaisu on hyväksyttävä!
Teknisemmin sanottuna tämä skripti kilpailee selainta (ja preload-skanneria) vastaan, joten ei voi tietää, mitkä hitaat elementit on jo käynnistetty ladattavaksi ennen skriptin aktivoitumista.

Viimeisen keinon pagespeed-optimointiskripti

Tässä on minifioitu versio, jota tulisi käyttää tuotannossa

!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"});

Tässä on luettavampi versio skriptistä. Älä käytä tätä tuotannossa! Käytä minifioitua versiota!

!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',
});