Chat widget ile 100% pagespeed puanı

Bir chat widget nasıl çalışır?

Bir chat widget genellikle bir JavaScript kodu şeklinde gelir. Bu kodu web sayfanızın HTML'sine ekleyin. Kendiniz herhangi bir kodlama yapmak zorunda kalmadan, sayfanızda otomatik olarak bir chat widget belirecektir.

Chat widget'ı oluşturan JavaScript, sayfanıza 1, 2 hatta 3 iframe yerleştirerek bunu yapar. Bir iframe, sayfanıza gömülü bir mini web sayfasıdır. Sohbet, sitenizde değil, chat eklentisinin kendi sitesi üzerinden çalışır. iframe ile tüm sohbeti yöneten chat sunucusu arasında bir bağlantı kurulur.

Chat widget'ın lighthouse puanına etkisi

Chat iframe'ini yüklemek genellikle nispeten maliyetli bir işlemdir. Sayfanızın içinde yeni bir chat sayfası yüklenmesi gerekir. Bu chat sayfası genellikle çok fazla JavaScript gerektirir ve bunların yüklenmesi ve çalıştırılması zaman alır. Sonuç olarak, bu lighthouse puanınız üzerinde önemli bir etkiye sahiptir. Örneğin: lighthouse puanımız tam 35 puan düştü:

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

Chat widget ile lighthouse puanı nasıl iyileştirilir

Birçok web yöneticisi, bir chat widget'ın sayfayı yavaşlattığını ve chat widget üzerinde çok az kontrolleri olduğu için bu konuda yapılabilecek bir şey olmadığını düşünür. Kısmen haklıdırlar. Sitenize yapıştırmanız gereken JavaScript parçası gecikmeye doğrudan neden olmaz. JavaScript, sayfanızda bir dizi eylemi başlatır. Bu eylemler web sayfasını yavaşlatır ve gerçekten: bunun üzerinde çok az etkiniz vardır.

Bu yüzden akıllı olmamız ve sorunu aşmamız gerekiyor. Başka bir alternatif yok. Chat widget'ın sayfanın işlenmesini engellemediğinden emin olmamız gerekiyor. Chat widget, tarayıcınızın 'ana iş parçacığı' sayfayı yüklemeyi ve işlemeyi bitirdikten sonra çalışmalıdır. 

Bunu JavaScript fonksiyonu setTimeout() ve sayfa yükleme olayını kullanarak başarıyoruz. Yükleme olayı, HTML, CSS ve JavaScript yüklenip ayrıştırıldığında tetiklenir. setTimeout() fonksiyonu, belirli bir komutu belirli bir milisaniye sonra çalıştırır. Bu örnek: setTimeout(function(){alert('test')},4000) 4 saniye (veya 4000ms) sonra tarayıcınızda bir uyarı penceresi açacaktır.

Yükleme olayı ve setTimeout fonksiyonunu kullanarak chat widget'ın işlenmesini HTML, CSS ve JavaScript'ler ayrıştırıldıktan 1500ms sonrasına erteleyebiliriz. Bu noktada tarayıcının ana iş parçacığının boşta olduğundan oldukça eminiz.

Öncelikle chat widget'ı bir fonksiyonun içine sarmamız gerekiyor. Ardından bu fonksiyonu, ana iş parçacığının büyük olasılıkla boşta olduğu yükleme olayından 1500ms sonra çağırmalıyız. Bunu bu sayfadaki Facebook chat eklentisi için uyguladığımızda sonuçta şu kodu elde edersiniz:

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

Bu işlemi herhangi bir chat eklentisi için uygulayabilirsiniz. Biraz manuel çalışma gerektirir ve örneğin WordPress eklentilerini kullanamazsınız. Çözemediyseniz, size yardımcı olmaktan memnuniyet duyarım!

Tüm pagespeed sorunlarını çözmüş olduk mu?

Bir chat widget yukarıdaki şekilde yüklendiğinde, chat widget'ımız için 100% Lighthouse puanı elde ediyoruz. Bu, tüm pagespeed sorunlarını çözdüğümüz anlamına mı geliyor?

Evet, kısmen, ama tamamen değil. Sayfanın en önemli kısımlarını sayfa yükleme sırasında erken yüklemek için aşamalı işleme kullandık, daha az önemli kısımları (chat widget) ise yükleme döngüsünün sonuna ittik. LCP (Largest Contentful Paint) ve FCP (First Contentful Paint) gibi önemli metrikler, chat widget'ı 'kritik işleme yolundan' çıkardığımız için önemli ölçüde iyileşti. Bu, tarayıcının 'engelleme modundan' daha erken çıkmasını sağlar ve başlangıç engelleme süresini önemli ölçüde düşürür.

Bundan sonra durum farklılaşır. Chat widget'ı sayfa yükleme döngüsünün sonuna iterek, lighthouse ölçümünün dışına düşmesini sağladık. Chat widget yüklenmeye başladığında, tarayıcının ana iş parçacığı engellenecektir. Sayfa bir an için etkileşimli olmayacaktır. Bu davranışın etkisi chat widget'a bağlıdır. En popüler chat widget'lar, daha sonra çalıştırıldığında sayfayı fark edilir şekilde engellemez.

Chat widget'lar, tasarım gereği pagespeed gecikmesine neden olacak şekilde oluşturulmuştur. Bir sayfayı hızlandırmak için seçimler yapmamız gerekir. Bu seçimler hiçbir zaman mükemmel değildir. Chat widget'ı yükleme döngüsünün sonuna itmek çok daha erken bir LCP ve FCP sağlar, öte yandan bazı hız kazanımları yoruma açıktır.