Chat widget 100 % pagespeed

Miten chat widget toimii?

Chat widget tulee yleensä JavaScript-koodin muodossa. Lisää tämä koodi verkkosivusi HTML:ään. Ilman omaa koodaamista näet chat-widgetin ilmestyvän automaattisesti sivullesi.

JavaScript, joka luo chat-widgetin, tekee tämän sijoittamalla 1, 2 tai jopa 3 iframe-kehystä sivullesi. Iframe on minisivusto, joka on upotettu sivuusi. Chat ei toimi sivustollasi vaan chat-lisäosan oman sivuston kautta. Iframen ja chat-palvelimen välille muodostetaan yhteys, joka hoitaa koko chatin.

Chat-widgetin vaikutus Lighthouse-pisteisiin

Chat-iframen lataaminen on usein suhteellisen raskas operaatio. Uusi chat-sivu täytyy ladata sivusi sisälle. Tämä chat-sivu vaatii usein paljon JavaScript-koodia, jonka lataaminen ja suorittaminen vie aikaa. Kaikkiaan tämä vaikuttaa merkittävästi Lighthouse-pisteisiisi. Esimerkiksi: meidän Lighthouse-pisteemme laskivat peräti 35 pistettä:

1. Speed index +3,6 sek
2. Time to interactive +10,9 sek.
3. Total blocking time +1 sek.

Miten parantaa Lighthouse-pisteitä chat-widgetin kanssa

Monet ylläpitäjät ajattelevat, että chat widget yksinkertaisesti hidastaa sivua eikä asialle voi tehdä mitään, koska heillä on vain vähän hallintaa chat-widgetistä. He ovat osittain oikeassa. JavaScript-koodinpätkä, joka sinun täytyy liittää sivuillesi, ei suoraan aiheuta viivettä. JavaScript käynnistää sarjan toimintoja sivullasi. Nämä toiminnot hidastavat verkkosivua, ja todellakin: sinulla on vain vähän vaikutusvaltaa siihen.

Siksi meidän täytyy olla taitavia ja kiertää ongelma. Vaihtoehtoja ei ole. Meidän on varmistettava, ettei chat widget estä sivun renderöintiä. Chat-widgetin tulisi suorittaa vasta sen jälkeen, kun selaimesi 'main thread' on ladannut ja renderöinyt sivun. 

Saavutamme tämän käyttämällä JavaScript-funktiota setTimeout() ja sivun load-tapahtumaa. Load-tapahtuma laukeaa, kun HTML, CSS ja JavaScript on ladattu ja jäsennetty. Funktio setTimeout() suorittaa annetun komennon tietyn millisekuntimäärän jälkeen. Tämä esimerkki: setTimeout(function(){alert('test')},4000)näyttää hälytyksen selaimessasi 4 sekunnin (tai 4000 ms) kuluttua.

Voimme käyttää load-tapahtumaa ja setTimeout-funktiota viivästyttääksemme chat-widgetin renderöintiä 1500 ms:iin HTML:n, CSS:n ja JavaScriptin jäsentämisen jälkeen. Tällöin olemme melko varmoja, että selaimen main thread on vapaa.

Ensin meidän täytyy kääriä chat widget funktion sisälle. Sitten kutsumme tätä funktiota 1500 ms load-tapahtuman jälkeen, kun main thread on todennäköisesti vapaa. Kun toteutamme tämän Facebook chat -lisäosalle tällä sivulla, saat lopulta tämän koodin

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

Voit tehdä tämän tempun mille tahansa chat-lisäosalle. Se vaatii hieman manuaalista työtä etkä voi käyttää esimerkiksi WordPress-lisäosia. Etkö saa sitä toimimaan? Autan mielelläni!

Olemmeko nyt ratkaisseet kaikki pagespeed-ongelmat?

Kun chat widget latautuu yllä kuvatulla tavalla, saamme 100 % Lighthouse-pisteet chat-widgetillemme. Tarkoittaako tämä, että olemme ratkaisseet kaikki pagespeed-ongelmat?

Kyllä, osittain, mutta ei täysin. Käytimme progressiivista renderöintiä ladataksemme sivun tärkeimmät osat aikaisin sivun latauksen aikana, samalla kun siirsimme vähemmän tärkeät osat (chat-widgetin) lataussyklin loppuun. Tärkeät mittarit kuten LCP (Largest Contentful Paint) ja FCP (First Contentful Paint) paranivat huomattavasti, koska poistimme chat-widgetin 'kriittiseltä renderöintipolulta'. Tämä mahdollistaa selaimen poistumisen 'estotilasta' aikaisemmin, mikä laskee alkuperäistä estoaikaa merkittävästi.

Sen jälkeen tilanne muuttuu. Siirtämällä chat-widgetin sivun lataussyklin loppuun se jää Lighthouse-mittauksen ulkopuolelle. Kun chat widget alkaa latautua, selaimen main thread estyy. Sivu ei ole hetkeen interaktiivinen. Tämän käyttäytymisen vaikutus riippuu chat-widgetistä. Useimmat suositut chat-widgetit eivät estä sivua havaittavasti, kun ne suoritetaan myöhemmin.

Chat-widgetit on rakennettu siten, että ne aiheuttavat pagespeed-viiveen suunnittelunsa vuoksi. Sivun nopeuttamiseksi meidän on tehtävä valintoja. Nämä valinnat eivät ole koskaan täydellisiä. Chat-widgetin siirtäminen lataussyklin loppuun johtaa huomattavasti aikaisempaan LCP:hen ja FCP:hen, toisaalta jotkin nopeusparannukset ovat tulkinnanvaraisia.