PageSpeed Insights'ta GTM JavaScript dosyalar谋 nas谋l azalt谋l谋r

Google Tag Manager (GTM) JavaScript (JS) dosyalar谋, web sitesi ziyaret莽ilerinin davran谋艧lar谋n谋 izlemek ve analiz etmek i莽in faydal谋d谋r. Ancak 莽ok fazla JS dosyas谋, web sitenizin performans谋n谋 ve i艧levselli臒ini 枚nemli 枚l莽眉de etkileyebilir.

Bu JS kodlar谋 web sitenizin daha yava艧 y眉klenmesine neden olarak m眉艧teri deneyimini k枚t眉le艧tirir. 脺stelik Amazon'un yapt谋臒谋 bir ara艧t谋rman谋n, sayfa y眉kleme s眉resindeki her 100 ms'lik gecikmenin %1 gelir kayb谋na yol a莽t谋臒谋n谋 g枚sterdi臒ini biliyor muydunuz? Bu nedenle JS dosyalar谋n谋 azaltmak web siteniz i莽in kritik 枚neme sahiptir.

Bu makalede, kapsay谋c谋lar谋 denetlemekten sunucu taraf谋 izlemeye ge莽meye kadar GTM JS dosyalar谋n谋n say谋s谋n谋 azaltmaya y枚nelik 莽枚z眉mleri g枚sterece臒iz.

GTM'deki JS dosyalar谋n谋 optimize etmenin birincil avantaj谋, web sitesinin y眉kleme h谋z谋ndaki belirgin iyile艧medir.

Y眉klenmesi gereken her JS dosyas谋 ayr谋 bir HTTP iste臒i gerektirir ve bu t眉r dosyalar谋n artmas谋 daha fazla istek anlam谋na gelir. Kullan谋c谋lar a莽谋s谋ndan bu durum, web sitesi i莽eri臒inin y眉klenmesinde gecikmelere yol a莽arak hemen 莽谋kma oran谋n谋n y眉kselmesine neden olabilir. Do臒rudan web siteniz a莽谋s谋ndan ise daha k枚t眉 bir SEO s谋ralamas谋na ve daha d眉艧眉k web sitesi trafi臒ine yol a莽abilir.

JS dosyalar谋n谋 azaltmak, HTTP isteklerinin say谋s谋n谋 d眉艧眉rerek web sitenizin daha h谋zl谋 y眉klenmesini sa臒lar.

GTM dosyalar谋 genellikle PageSpeed Insights raporlar谋n谋n 艧u b枚l眉mlerinde yer al谋r:

• 脺莽眉nc眉 taraf kodun etkisini azalt谋n
• Google Tag Manager'谋n kullan谋lmayan JavaScript'ini azalt谋n

Sorun ya艧ad谋臒谋n谋z b枚l眉me t谋klayarak do臒rudan ilgili k谋sma gidin.

脺莽眉nc眉 taraf JS kodu, farkl谋 kullan谋c谋 eylemleri (t谋klama, kayd谋rma, i莽erik payla艧ma vb.) i莽in izleme kurulumu yapmay谋 sa臒lar. Ancak web sitesi h谋z谋n谋 etkiler ve 莽o臒unlukla web sayfas谋ndaki en b眉y眉k y眉klerden biri haline gelir.

GTM dosyalar谋n谋 d眉zeltmek i莽in a艧a臒谋daki 莽枚z眉mleri 枚neriyoruz:

Web sitesi performans analizi i莽in art谋k baz谋lar谋na ihtiya莽 duyulmayabilece臒inden, GTM kapsay谋c谋n谋zdaki t眉m etiketleri g枚zden ge莽irin. Bu basit ad谋m, 眉莽眉nc眉 taraf kodlar谋n say谋s谋n谋 ve web sitenizdeki y眉k眉 azaltmaya yard谋mc谋 olacakt谋r.

Bu g枚revi tamamlamak i莽in GTM.Tools kullanman谋z谋 枚neririz. Burada kapsay谋c谋n谋z谋 inceleyebilir, d眉zenleyebilir ve Workspace i莽eriklerini toplu olarak g眉ncelleyebilirsiniz.

脰zel HTML etiketleri baz谋 ki艧iselle艧tirilmi艧 izleme kurulumlar谋 i莽in faydal谋d谋r; ancak genellikle 莽ok hantald谋rlar ve tetiklendiklerinde web sitesinin y眉klenme s眉resini etkilerler. Sahip oldu臒unuz 枚zel etiketleri g枚zden ge莽irin ve daha optimize olduklar谋 i莽in GTM 艧ablonlar谋na ge莽meye 莽al谋艧谋n.

CDN, web sitenizin verilerini önbelleğe alır ve belirli sayfaları ziyaretçilerinize daha yakın bir sunucudan iletir. Bu da JS dosyalarının daha hızlı sunulmasını sağlar.

Bazı etiketlerin sayfa yüklenirken hemen tetiklenmesi gerekmez. Geciktirilebilecek etiketler için etiket sıralaması ayarlayın. Etiket sıralaması, belirli bir "birincil" etiket tetiklenmeden hemen önce veya sonra tetiklenecek etiketleri belirlemenize olanak tanır. Bu seçeneği bulmak için geciktirmek istediğiniz etiketlerin “Advanced Settings” bölümüne gidin.

Özel HTML Etiketlerini azaltmak ve/veya bazı etiketleri silmek işinize yaramadıysa, sunucu tarafı izlemeyi denemenizi öneririz. 

Nasıl çalışır? Sunucu tarafına geçtiğinizde, tüm GTM etiketlerini web kapsayıcısından sunucu kapsayıcısına taşırsınız. Bu etiketler, kullanıcı tarayıcıları yerine sunucu kapsayıcısına yüklenecektir. Bu da web sitesinin daha hızlı yüklenmesini sağlar.

Kullanılmayan JS kodu, sayfanın oluşturulması (sayfa içeriğinin yüklenmesi ve görüntülenmesi) için gerekli olmayan koddur. Bu kod, JavaScript paketinizin boyutunu artırarak web sitesinin daha yavaş yüklenmesine neden olur.

Bu sorunu çözmenin en etkili yolu, GTM kapsayıcınızı denetlemek ve gereksiz etiketleri silmektir.

Ancak büyük olasılıkla PageSpeed Insights'taki bu bölümden bu tür JS dosyalarını tamamen çıkaramayacağınızı unutmayın. 

Bazı değişken türleri GTM'nin doğrudan bir parçası olabilir ve genel olarak GTM'nin çalışması için gereklidir. Bu değişkenler arasında Auto Event Variable, DOM Element, Element Visibility vb. yer alır. Bu değişkenleri kapsayıcınıza eklememiş bile olabilirsiniz, ancak PageSpeed Insights'ta bunları “kullanılmayan JS kodu” olarak görürsünüz.

Bunlar GTM kitaplığının bir parçasıdır ve bunların silinmesi kodu bozarak GTM'nin hatalı çalışmasına veya hiç çalışmamasına neden olabilir.

GTM kitaplığının bir parçasıysa ve GTM'nin çalışması için gerekliyse neden “kullanılmayan JS kodu” altında görünüyor? Kapsayıcınızda bu tür bir değişken bulunmadığı için PageSpeed Insights bunu kullanılmayan kod olarak işaretler. Yalnızca GTM kitaplığında yer alır.

Gördüğünüz gibi GTM JS dosyalarıyla karşılaşabileceğiniz temel sorun, düzensiz ve aşırı yüklü kapsayıcılarla bağlantılıdır. Kritik çözüm, kapsayıcı boyutunu izlemek ve gereksiz etiketleri zamanında silmektir.

GTM kapsayıcı boyutunu izlemenin iki yolu vardır:

Get Google Tag Manager Size uzantısını tarayıcınıza ekleyin ve kontrol etmek istediğinizde web sitenizde kullanın.

Uzantı size kapsayıcının boyutunu gösterecek ve değişken, etiket ile tetikleyici sayısı hakkında ayrıntılar sunacaktır.

GTM kapsayıcınızın boyutunu kontrol etmek için aşağıdaki bağlantıyı kullanın. URL'deki “YOUR_ID” kısmı yerine kapsayıcınızın kimliğini ekleyin (GTM'de “Workspace”e tıkladığınızda kimliği görebilirsiniz).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

Sonuç sayfasını aldığınızda bunu TextEdit'e (Mac OS için) veya Notepad'e (Windows OS için) kopyalayıp yapıştırın. Ardından bu dosyanın boyutunu görebilirsiniz; bu, GTM kapsayıcınızın boyutudur.

GTM kapsay谋c谋 boyutu ne zaman kontrol edilmeli?

Maksimum kapsay谋c谋 boyutu s谋n谋r谋 200 KB't谋r, ancak 140 KB'a ula艧t谋臒谋n谋zda GTM sizi uyar谋r. Elbette, web sitesi performans谋n谋 etkilememek ad谋na kapsay谋c谋lar谋 bundan 莽ok daha k眉莽眉k tutman谋z 枚nemle tavsiye edilir.

GTM kodunun web sitenizin performans谋 眉zerindeki etkisini kontrol alt谋nda tutabilmeniz i莽in, 枚zellikle b眉y眉k de臒i艧ikliklerden ve izleme kurulumlar谋ndan sonra kapsay谋c谋 boyutunu zaman zaman takip etmenizi 枚neririz.

GTM JS dosyalar谋n谋n fazlal谋臒谋, web sitenizin PageSpeed Insights'taki performans puan谋n谋 枚nemli 枚l莽眉de d眉艧眉rebilir. Bu kodlar sitenin daha yava艧 y眉klenmesine neden olarak hemen 莽谋kma oran谋n谋n artmas谋na ve SEO s谋ralamas谋n谋n k枚t眉le艧mesine yol a莽ar.

GTM JS dosyalar谋n谋n say谋s谋n谋 azaltman谋n en etkili yollar谋; boyutlar谋n谋 kontrol etmek, GTM kapsay谋c谋lar谋n谋 denetlemek ve gereksiz etiketleri silmektir. Ancak etiket say谋s谋n谋 azaltmak i艧e yaramazsa, istemci tarafl谋 yerine sunucu tarafl谋 izlemeyi de臒erlendirmenizi 枚neririz. Sunucu taraf谋nda t眉m GTM etiketleri taray谋c谋 yerine sunucu kapsay谋c谋s谋na y眉klenir ve bu da web sitesinin daha h谋zl谋 y眉klenmesini sa臒lar.