Widget czatu 100% pagespeed

Jak działa widget czatu?

Widget czatu zwykle występuje w postaci kodu JavaScript. Dodaj ten kod do HTML swojej strony internetowej. Bez konieczności samodzielnego kodowania automatycznie zobaczysz widget czatu na swojej stronie.

JavaScript, który utworzył widget czatu, robi to, umieszczając 1, 2 lub nawet 3 ramki iframe na Twojej stronie. Iframe to mini strona internetowa osadzona na Twojej stronie. Czat nie działa w Twojej witrynie, ale za pośrednictwem witryny samej wtyczki czatu. Nawiązywane jest połączenie między ramką iframe a serwerem czatu, który obsługuje cały czat.

Wpływ widgetu czatu na wynik lighthouse

Ładowanie ramki iframe czatu jest często stosunkowo kosztowną sprawą. Nowa strona czatu musi zostać załadowana wewnątrz Twojej strony. Ta strona czatu często wymaga dużej ilości javascript, a to zajmuje czas na załadowanie i wykonanie. W sumie ma to znaczący wpływ na Twój wynik lighthouse. Na przykład: nasz wynik lighthouse spadł o nie mniej niż 35 punktów:

1. Speed index +3.6sec
2. Time to interactive +10.9sec.
3. Total blocking time +1 sec.

Jak poprawić wynik lighthouse za pomocą widgetu czatu

Wielu webmasterów uważa, że widget czatu po prostu spowalnia stronę i że nic nie można na to poradzić, ponieważ mają niewielką kontrolę nad widgetem czatu. Mają częściowo rację. Fragment javascript, który musisz wkleić na swojej stronie, nie powoduje bezpośrednio opóźnienia. JavaScript inicjuje serię działań na Twojej stronie. Te działania spowalniają stronę internetową i rzeczywiście: masz na to niewielki wpływ.

Dlatego musimy być sprytni i obejść problem. Nie ma alternatywy. Będziemy musieli upewnić się, że widget czatu nie utrudnia renderowania strony. Widget czatu powinien zostać wykonany po tym, jak 'main thread' przeglądarki zakończy ładowanie i renderowanie strony. 

Osiągamy to za pomocą funkcji JavaScript setTimeout() i zdarzenia ładowania strony. Zdarzenie ładowania jest uruchamiane po załadowaniu i przeanalizowaniu HTML, CSS i JavaSript. Funkcja setTimeout() wykonuje podane polecenie po określonej liczbie milisekund. Ten przykład: setTimeout(function(){alert('test')},4000)wyświetli alert w przeglądarce po 4 sekundach (lub 4000ms).

Możemy użyć zdarzenia ładowania i funkcji setTimeout, aby opóźnić renderowanie widgetu czatu do 1500ms po przeanalizowaniu HTML, CSS i JacvaScript. W tym momencie jesteśmy całkiem pewni, że main thread przeglądarki jest bezczynny.

. Najpierw musimy owinąć widget czatu wokół funkcji. A następnie wywołać tę funkcję 1500 po zdarzeniu ładowania, gdy main thread jest prawdopodobnie bezczynny. Kiedy zaimplementujemy to dla wtyczki czatu Facebooka na tej stronie, ostatecznie otrzymasz ten kod

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);

Możesz wykonać tę sztuczkę dla każdej wtyczki czatu. Wymaga to trochę pracy ręcznej i nie możesz używać na przykład wtyczek WordPress. Nie możesz tego rozgryźć? Chętnie Ci pomogę!

Czy rozwiązaliśmy teraz wszystkie problemy z page speed?

Gdy widget czatu ładuje się w powyższy sposób, otrzymujemy wynik Lighthouse 100% dla naszego widgetu czatu. Czy to oznacza, że rozwiązaliśmy wszystkie problemy z page speed?

Tak, częściowo, ale nie całkowicie. Użyliśmy renderowania progresywnego, aby załadować najważniejsze części strony na początku ładowania strony, podczas gdy przesunęliśmy mniej ważne części (widget czatu) na koniec cyklu ładowania. Ważne metryki, takie jak LCP (Largest Contentful Paint) e FCP (First Contentful Paint), znacznie się poprawiły, ponieważ usunęliśmy widget czatu z 'krytycznej ścieżki renderowania'. Pozwala to przeglądarce wcześniej opuścić 'tryb blokowania', co znacznie skraca początkowy czas blokowania.

Potem staje się to inną historią. Przesuwając widget czatu na koniec cyklu ładowania strony, wypada on poza pomiar lighthouse. Gdy widget czatu zacznie się ładować, main thread przeglądarki zostanie zablokowany. Strona przez chwilę nie jest interaktywna. Wpływ tego zachowania zależy od widgetu czatu. Większość popularnych widgetów czatu nie zablokuje zauważalnie strony po wykonaniu później.

Widgety czatu są zbudowane w taki sposób, że z założenia powodują opóźnienie pagespeed. Aby przyspieszyć stronę, musimy dokonać wyborów. Te wybory nigdy nie są idealne. Przesunięcie widgetu czatu na koniec cyklu ładowania spowoduje znacznie wcześniejszy LCP i FCP, z drugiej strony niektóre zyski prędkości są otwarte na interpretację.