Yayınlanma tarihi: 29 Temmuz 2021
Etiketler, genellikle bir etiket yöneticisiyle siteye eklenen üçüncü taraf kod snippet'leridir. Etiketler, en yaygın şekilde pazarlama ve analiz için kullanılır.
Etiketlerin ve etiket yöneticilerinin performans üzerindeki etkisi siteler arasında büyük farklılıklar gösterir. Etiket yöneticileri bir zarfla karşılaştırılabilir: Etiket yöneticisi bir kap sağlar ancak bu kapta neleri dolduracağınız ve bu kapları nasıl kullanacağınız çoğunlukla size bağlıdır.
Burada, etiketleri ve etiket yöneticilerini performans ve Core Web Vitals için optimize etme tekniklerini ele alıyoruz. Bu belgede Google Etiket Yöneticisi'nden bahsediliyor olsa da ele alınan fikirlerin çoğu diğer etiket yöneticileri için de geçerlidir.
Core Web Vitals üzerindeki etkisi
Etiket Yöneticileri, sayfanızı hızlı bir şekilde yüklemek ve uyumlu tutmak için gereken kaynakları kullanarak Core Web Vitals'ı genellikle dolaylı olarak etkileyebilir. Bant genişliği, siteleriniz için etiket yöneticisi JavaScript'inin indirilmesine veya bunun yaptığı sonraki çağrılara harcanabilir. Ana iş parçacığındaki CPU zamanı, etiket yöneticisinde ve etiketlerde bulunan JavaScript'in değerlendirilmesi ve yürütülmesi için harcanabilir.
Largest Contentful Paint (LCP), kritik sayfa yükleme süresi sırasında bant genişliği anlaşmazlığına karşı savunmasızdır. Ayrıca, ana ileti dizisini engellemek LCP oluşturma süresini geciktirebilir.
Kümülatif Düzen Kayması (CLS), kritik kaynakların ilk oluşturma işleminden önce yüklenmesi geciktirilerek veya etiket yöneticilerinin sayfaya içerik ekleyerek etkilenebilir.
Interaction to Next Paint (INP), ana mesaj dizisinde CPU anlaşmazlığına karşı hassastır ve etiket yöneticilerinin boyutu ile daha düşük INP puanları arasında bir ilişki olduğunu tespit ettik.
Doğru etiket türünü seçme
Etiketlerin performans üzerindeki etkisi, etiket türüne göre değişir. Genel anlamda, en iyi performans gösteren resim etiketleri ("pikseller")dır. Ardından özel şablonlar ve son olarak özel HTML etiketleri gelir. Tedarikçi firma etiketleri, izin verdikleri işlevlere göre değişiklik gösterir.
Bir etiketi nasıl kullandığınızın, performans etkisini büyük ölçüde etkilediğini unutmayın. "Pikseller", büyük ölçüde bu etiket türünün doğası gereği nasıl kullanılabilecekleri konusunda sıkı kısıtlamalar getirdiği için yüksek performanslıdır. Özel HTML etiketleri her zaman performans için kötü değildir ancak kullanıcılara sundukları özgürlük düzeyi nedeniyle performansı olumsuz yönde etkileyecek şekilde kolayca kötüye kullanılabilir.
Etiketler üzerinde düşünürken ölçeği göz önünde bulundurun: Herhangi bir tek etiketin performans etkisi göz ardı edilebilir olsa da aynı sayfada onlarca veya yüzlerce etiket kullanıldığında önemli hale gelebilir.
Tüm komut dosyaları bir etiket yöneticisiyle yüklenmelidir.
Etiket yöneticileri, genellikle kullanıcı deneyiminin anında görsel veya işlevsel yönlerini (ör. çerez bildirimleri, hero resimleri veya site özellikleri) uygulayan kaynakları yüklemenin en iyi yolu değildir. Bu kaynakları yüklemek için etiket yöneticisi kullanmak genellikle bunların yayınlanmasını geciktirir. Bu durum kullanıcı deneyimi için kötüdür ve LCP ve CLS gibi metrikleri de artırabilir.
Ayrıca, bazı kullanıcılar etiket yöneticilerini engeller. Kullanıcı deneyimi özelliklerini uygulamak için etiket yöneticisi kullanmak, bazı kullanıcılarınız için web sitesinin bozulmasına neden olabilir.
Özel HTML etiketleriyle ilgili dikkat edilmesi gereken noktalar
Özel HTML etiketleri uzun yıllardır kullanılıyor ve çoğu sitede yoğun olarak tercih ediliyor. Özel HTML etiketleri, adınıza rağmen bu etiketin asıl kullanımı bir sayfaya özel <script> öğeleri eklemek olduğu için kendi kodunuzu birkaç kısıtlamayla girmenize olanak tanır.
Özel HTML etiketleri çok çeşitli şekillerde kullanılabilir ve performans üzerindeki etkileri önemli ölçüde değişiklik gösterir. Sitenizin performansını ölçerken çoğu aracın, özel HTML etiketinin performans üzerindeki etkisini etiketin kendisi yerine etiketi ekleyen etiket yöneticisine bağladığını unutmayın.
Özel HTML etiketleri, çevreleyen sayfaya bir öğe ekleyebilir. Sayfaya öğe ekleme işlemi performans sorunlarına neden olabilir ve bazı durumlarda da sayfa düzeninde kaymalara yol açabilir.
- Çoğu durumda, sayfaya bir öğe eklenirse tarayıcının sayfadaki her bir öğenin boyutunu ve konumunu yeniden hesaplaması gerekir. Bu sürece düzen denir. Tek bir düzenin performans üzerindeki etkisi minimumdur ancak çok fazla kullanıldığında performans sorunlarına neden olabilir. Bu fenomenin etkisi, düşük kaliteli cihazlarda ve çok sayıda DOM öğesi içeren sayfalarda daha büyüktür.
- Çevresindeki alan oluşturulduktan sonra DOM'ye eklenen görünür bir sayfa öğesi düzen kaymasına neden olabilir. Bu durum etiket yöneticilerine özgü değildir. Ancak etiketler genellikle sayfanın diğer bölümlerinden daha sonra yüklendiğinden, etiketlerin DOM'a yerleştirilmesi, çevreleyen sayfanın oluşturulmasından sonra gerçekleşir.
Özel Şablonları Kullanma
Özel şablonlar, özel HTML etiketleriyle aynı işlemlerin bazılarını destekler ancak komut dosyası ekleme ve piksel ekleme gibi yaygın kullanım alanları için API'ler sağlayan JavaScript'in korumalı bir sürümüne dayanır. Adından da anlaşılacağı gibi, bu şablonlar, performansı göz önünde bulundurarak şablon oluşturabilen ileri düzey kullanıcılar tarafından oluşturulabilir. Daha az teknik bilgisi olan kullanıcılar şablonu kullanabilir. Bu, genellikle tam özel HTML erişimi sağlamaya kıyasla daha güvenlidir.
Özel şablonlara uygulanan daha fazla kısıtlama nedeniyle bu etiketlerin performans veya güvenlik sorunları gösterme olasılığı çok daha düşüktür. Aynı nedenlerle, özel şablonlar tüm kullanım alanları için uygun değildir.
Komut dosyalarını doğru şekilde yerleştirme
Komut dosyası eklemek için etiket yöneticisi kullanmak çok yaygın bir kullanım alanıdır. Bunu yapmanın önerilen yolu, özel şablon ve injectScript API'yi kullanmaktır.
Mevcut bir Özel HTML etiketini dönüştürmek üzere injectScript API'yi kullanma hakkında bilgi edinmek için Mevcut bir etiketi dönüştürme konusuna bakın.
Özel HTML etiketi kullanmanız gerekiyorsa şunları unutmayın:
- Kitaplıklar ve büyük üçüncü taraf komut dosyaları, komut dosyasının içeriğini doğrudan etikete kopyalayıp yapıştırmak yerine, harici dosya indiren bir komut dosyası etiketiyle (örneğin,
<script src="external-scripts.js">) yüklenmelidir.<script>etiketinin kullanımdan kaldırılması, komut dosyası içeriğinin indirilmesi için ayrı bir gidiş dönüşünü ortadan kaldırsa da bu uygulama, kapsayıcı boyutunu artırır ve komut dosyasının tarayıcı tarafından ayrı olarak önbelleğe alınmasını önler. - Birçok tedarikçi firma,
<script>etiketini<head>'in en üstüne yerleştirmenizi önerir. Ancak Etiket Yöneticisi ile yüklenen komut dosyaları için bu genellikle gerekli değildir. Çoğu durumda, tarayıcı, etiket yöneticisi yürütülmeden önce<head>'yi ayrıştırmayı tamamlamıştır.
Pikselleri kullanma
Bazen üçüncü taraf komut dosyaları, resim veya iFrame pikselleriyle değiştirilebilir. Komut dosyası tabanlı benzerleriyle karşılaştırıldığında pikseller daha az işlevselliği destekleyebilir. Bu nedenle, genellikle daha az tercih edilen bir uygulama olarak görülür. Bununla birlikte, pikseller etiket yöneticilerinin içinde kullanıldığında, tetikleyicilerle etkinleşebildiği ve farklı değişkenleri iletebildiği için daha dinamik olabilir.
Tetiklendikten sonra JavaScript çalıştırılmaz. Bu nedenle pikseller en yüksek performanslı ve güvenli etiket türüdür. Pikseller çok küçük bir kaynak boyutuna (1 KB'tan az) sahiptir ve sayfa düzeninde kaymalara neden olmaz.
Piksel desteği hakkında daha fazla bilgi edinmek için üçüncü taraf sağlayıcınızla iletişime geçin. Ayrıca, kodunu inceleyerek <noscript> etiketi olup olmadığını da kontrol edebilirsiniz.
Bir tedarikçi firma pikselleri destekliyorsa genellikle pikseli <noscript> etiketine dahil eder.
Piksellere alternatifler
Pikseller, bir zamanlar sunucu yanıtının alakalı olmadığı durumlarda (ör. analiz sağlayıcılara veri gönderirken) HTTP isteği göndermenin en ucuz ve en güvenilir yollarından biri oldukları için büyük ölçüde popüler hale geldi. navigator.sendBeacon() ve fetch() keepalive API'leri de aynı kullanım alanını ele almak için tasarlanmıştır ancak piksellerden daha güvenilir oldukları söylenebilir.
Pikselleri kullanmaya devam etmekte bir sorun yoktur. Pikseller iyi desteklenir ve performans üzerindeki etkisi minimum düzeydedir. Ancak kendi işaretçilerinizi oluşturuyorsanız bu API'lerden birini kullanmayı düşünmeniz faydalı olacaktır.
sendBeacon()
navigator.sendBeacon() API, sunucu yanıtının önemli olmadığı durumlarda web sunucularına az miktarda veri göndermek için tasarlanmıştır.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
sendBeacon() sınırlı bir API'ye sahiptir: Yalnızca POST isteği göndermeyi destekler ve özel başlık ayarlama işlemini desteklemez. Tüm modern tarayıcılar tarafından desteklenir.
Getirme API'si keepalive
keepalive, Fetch API'nin etkinlik raporlaması ve analizler gibi engellemeyen isteklerde bulunmak için kullanılmasına olanak tanıyan bir işarettir. fetch() parametresine iletilen parametrelere keepalive: true ekleyerek kullanılır.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
fetch() keepalive ve sendBeacon() birbirine çok benziyor çünkü aynılar. Chromium tarayıcılarında sendBeacon() artık fetch()
keepalive üzerine inşa ediliyor.
fetch() keepalive ve sendBeacon() arasından seçim yaparken ihtiyacınız olan özellikleri ve tarayıcı desteğini göz önünde bulundurmanız önemlidir. fetch() API'si önemli ölçüde daha esnektir ancak keepalive, sendBeacon()'e kıyasla daha az tarayıcı desteği sunar.
Etiketlerin işlevini anlama
Etiketler genellikle üçüncü taraf tedarikçi firma tarafından sağlanan yönergeler doğrultusunda oluşturulur. Tedarikçi firmanın kodunun ne işe yaradığından emin değilseniz bilen birine sorabilirsiniz. İkinci bir görüş almak, bir etiketin performans veya güvenlik sorunları oluşturma potansiyeli olup olmadığını belirlemenize yardımcı olabilir.
Etiket Yöneticisi'nde etiketleri bir sahiple etiketlemenizi öneririz. Etiketin sahibini unutmak kolaydır. Bu da, bir şey bozulduğunda etiketin kaldırılmasından korkmanıza neden olur.
Tetikleyiciler
Genel olarak, etiket tetikleyicilerini optimize etmek, etiketleri gereğinden fazla tetiklemediğinizden emin olmak ve işletme ihtiyaçlarını performans maliyetleriyle dengeleyen bir tetikleyici seçmekten ibarettir.
Tetikleyiciler, etiket yöneticisinin boyutunu ve yürütme maliyetini artıran JavaScript kodudur. Çoğu tetikleyici küçük olsa da kümülatif etki önemli olabilir. Örneğin, birkaç tıklama etkinliğinin veya zamanlayıcı tetikleyicisinin olması etiket yöneticisinin iş yükünü önemli ölçüde artırabilir.
Uygun bir tetikleyici etkinlik seçin
Bir etiketin performans üzerindeki etkisi değişiklik gösterebilir. Genel olarak, bir etiket ne kadar erken tetiklenirse performansı o kadar fazla etkiler. Kaynaklar genellikle ilk sayfa yüklemesi sırasında kısıtlanır. Bu nedenle, belirli bir kaynağın (veya etiketin) yüklenmesi ya da yürütülmesi, başka bir kaynaktan kaynak alır.
Tüm etiketler için uygun tetikleyicilerin seçilmesi önemli olsa da özellikle büyük kaynaklar yükleyen veya uzun komut dosyaları yürüten etiketler için büyük önem taşır.
Etiketler sayfa görüntülemelerde (genellikle Page load, DOM Ready, Window Loaded üzerinde) veya özel bir etkinliğe göre tetiklenebilir. Sayfa yüklemesini etkilememek için gerekli olmayan etiketleri Window Loaded'den sonra tetikleyin.
Özel etkinlikleri kullanma
Google Etiket Yöneticisi'nin yerleşik tetikleyicileri tarafından kapsanmayan sayfa etkinliklerine yanıt olarak tetikleyicileri tetiklemek için özel etkinlikleri kullanın. Örneğin, birçok etiket sayfa görüntüleme tetikleyicilerini kullanır. Ancak DOM Ready ile Window Loaded arasındaki süre uzun olabilir. Bu nedenle, bir etiketin ne zaman etkinleşeceği konusunda hassas ayar yapmak zor olabilir. Özel etkinlikler bu sorunun çözümü olabilir.
Öncelikle bir özel etkinlik tetikleyicisi oluşturun ve etiketlerinizi bu tetikleyiciyi kullanacak şekilde güncelleyin.
Tetikleyiciyi etkinleştirmek için karşılık gelen etkinliği veri katmanına aktarın.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
Belirli tetikleyici koşulları kullanın
Gereksiz yere etiketlerin tetiklenmesini önlemek için belirli tetikleyici koşulları tanımlayın. Bunu yapmanın en basit ve etkili yollarından biri, etiketin yalnızca gerçekten kullanıldığı sayfalarda tetiklenmesini sağlamaktır.
Yerleşik değişkenler, etiket tetiklemeyi sınırlamak için tetikleyici koşullarına dahil edilebilir.
Etiket yöneticinizi uygun bir zamanda yükleme
Etiket yöneticisinin kendisinin ne zaman yükleneceğini ayarlayarak performansı artırabilirsiniz. Tetikleyiciler, nasıl yapılandırıldıklarına bakılmaksızın bir etiket yöneticisi yüklenene kadar etkinleştirilemez. Bu, eşit veya daha büyük bir etkiye sahip olabileceğinden etiket yöneticisini ne zaman yüklediğinizi deneyebilirsiniz. Bu karar, sayfadaki tüm etiketleri etkiler.
Etiket yöneticisini daha sonra yükleyerek bir etiketin yanlışlıkla çok erken yüklenmesini önleyebilirsiniz. Böylece, gelecekte performans sorunlarını önleyebilirsiniz.
Değişkenler
Sayfadaki verileri okumak için değişkenler kullanın. Tetikleyicilerde ve etiketlerde faydalıdır.
Tetikleyiciler gibi değişkenler de etiket yöneticisine JavaScript kodu ekler ve bu nedenle performans sorunlarına neden olabilir. Değişkenler, URL'nin, çerezlerin, veri katmanının veya DOM'un bölümlerini okumak için kullanılan kod gibi nispeten küçük olabilir. Sınırsız kapasiteye (ve boyuta) sahip özel JavaScript'ler de içerebilirler.
Değişkenler Etiket Yöneticisi tarafından sürekli olarak değerlendirildiği için değişken kullanımını minimumda tutun. Hem Etiket Yöneticisi komut dosyasının boyutunu hem de kullandığı işleme süresini azaltmak için artık kullanılmayan eski değişkenleri kaldırın.
Etiket yönetimi
Etiketlerin verimli bir şekilde kullanılması, performans sorunları riskini azaltır.
Veri katmanını kullanma
Veri katmanı, sayfayla ilgili bilgileri içeren bir JavaScript nesne dizisidir. Bu nesneler, Google Etiket Yöneticisi'ne iletmek istediğiniz tüm bilgileri içerir.
Veri katmanı, etiketleri tetiklemek için de kullanılabilir.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
Google Etiket Yöneticisi veri katmanı olmadan da kullanılabilse de, kesinlikle önerilir. Veri katmanı, üçüncü taraf komut dosyalarının erişebileceği verileri tek bir yerde birleştirerek bu verilerin kullanımına dair daha iyi bir görünürlük sağlar. Diğer özelliklerin yanı sıra bu, gereksiz değişken hesaplamalarını ve komut dosyası yürütülmesini azaltmaya yardımcı olabilir.
Veri katmanı kullanarak, JavaScript değişkenine veya DOM'a tam erişim vermek yerine etiketlerin hangi verilere erişeceğini kontrol edebilirsiniz.
Veri katmanının güncellenmesi, Google Etiket Yöneticisi'nin tüm kapsayıcı değişkenlerini yeniden değerlendirmesine ve etiketleri tetiklemesine yol açarak JavaScript yürütülmesini gerektirdiğinden, veri katmanının performans avantajları sezgisel olmayabilir. Genel olarak veri katmanının hatalı kullanımı mümkündür. Ancak performans sorunlarının kaynağı veri katmanı olarak görünüyorsa muhtemelen kapsayıcıda performans sorunları vardır. Veri katmanı bu sorunları daha belirgin hale getirir.
Yinelenen ve kullanılmayan etiketleri kaldırma
Kopya etiketler, bir etiketin bir sayfanın HTML işaretçisine eklenmesi ve bir etiket yöneticisi aracılığıyla enjekte edilmesi durumunda ortaya çıkabilir.
Kullanılmayan etiketler, bir tetikleyici istisnası aracılığıyla engellenmek yerine duraklatılmalı veya kaldırılmalıdır. Bir etiketi duraklatmak veya kaldırmak, kodu kapsayıcıdan kaldırır. Engelleme ise kodu kaldırmaz.
Kullanılmayan etiketler kaldırıldığında, kaldırılıp kaldırılamayacaklarını belirlemek için tetikleyicileri ve değişkenleri inceleyin.
Duraklatılan etiketler kapsayıcı boyutunu etkiler ancak toplam yük, etiketlerin etkin olduğu zamandan daha azdır.
İzin verilenler ve engellenenler listelerini kullanma
Bir sayfada izin verilen etiketler, tetikleyiciler ve değişkenler üzerinde son derece ayrıntılı kısıtlamalar yapılandırmak için izin verilenler ve yasaklananlar listelerini kullanın. Bu, performansla ilgili en iyi uygulamaları ve diğer politikaları uygulamaya yardımcı olmak için kullanılabilir.
İzin verilenler ve reddedilenler listeleri, veri katmanı üzerinden yapılandırılır.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
Örneğin, özel HTML etiketlerinin, JavaScript değişkenlerinin veya doğrudan DOM erişiminin kullanımını engelleyebilirsiniz. Bu durumda, veri katmanındaki verilerle yalnızca piksel ve önceden tanımlanmış etiketler kullanılabilir. Bu kısıtlama, daha yüksek performanslı ve güvenli bir Etiket Yöneticisi uygulamasıyla sonuçlanabilir.
Sunucu tarafı etiketlemeyi kullanmayı düşünün
Özellikle verileri üzerinde daha fazla kontrol sahibi olmak isteyen büyük siteler için sunucu tarafı etiketlemeye geçiş yapmayı düşünmeniz önerilir. Sunucu tarafı etiketleme, istemciden satıcı kodunu kaldırır ve işlem yükünü istemciden sunucuya aktarır.
Örneğin, istemci tarafı etiketleme kullanılırken birden fazla analiz hesabına veri göndermek, istemcinin her uç nokta için ayrı istekler başlatmasını gerektirir. Sunucu tarafı etiketlemede, istemci tarafından sunucu tarafı kapsayıcıya tek bir istek gönderilir ve bu veriler buradan farklı Analytics hesaplarına yönlendirilir.
Sunucu tarafı etiketlemenin yalnızca bazı etiketlerle çalıştığını unutmayın. Etiket uyumluluğu tedarikçiye göre değişir.
Daha fazla bilgi için Sunucu tarafı etiketlemeye giriş konusuna bakın.
Container'lar
Etiket yöneticileri genellikle kurulumlarında genellikle kapsayıcı olarak adlandırılan birden fazla örneğin kullanılmasına izin verir. Tek bir Etiket Yöneticisi hesabında birden fazla kapsayıcı kontrol edilebilir.
Sayfa başına yalnızca bir kapsayıcı kullanın
Tek bir sayfadaki birden fazla kapsayıcı, ek yükü ve komut dosyası yürütmeyi beraberinde getirdiği için önemli performans sorunları oluşturabilir. En azından temel etiket kodunu kopyalar. Bu kod, kapsayıcının JavaScript'inin bir parçası olarak yayınlandığından kapsayıcılar arasında tekrar kullanılamaz.
Birden fazla kapsayıcının etkili bir şekilde kullanılması nadirdir. Ancak iyi kontrol edildiğinde bu yöntemin işe yarayabileceği durumlar da vardır. Örneğin:
- Tek bir büyük kapsayıcı yerine daha hafif bir "erken yükleme" kapsayıcısı ve daha ağır bir "sonra yükleme" kapsayıcısı ekleyin.
- Daha az teknik bilgi sahibi kullanıcılar için kısıtlanmış bir kapsayıcı, daha karmaşık etiketler için daha az kısıtlanmış ancak daha sıkı kontrol edilen bir kapsayıcı kullanma
Sayfa başına birden fazla kapsayıcı kullanmanız gerekiyorsa birden fazla kapsayıcı oluşturma ile ilgili Google Etiket Yöneticisi talimatlarını uygulayın.
Gerekirse ayrı kapsayıcılar kullanın
Web uygulaması ve mobil uygulama gibi birden fazla mülk için etiket yöneticisi kullanıyorsanız kullandığınız kapsayıcı sayısı iş akışınızın üretkenliğine yardımcı olabilir veya zarar verebilir. Bu durum performansı da etkileyebilir.
Kullanım ve yapı açısından benzer siteler varsa tek bir kapsayıcı birden fazla sitede etkili bir şekilde kullanılabilir. Örneğin, bir markanın mobil ve web uygulamaları benzer işlevler sunsa da uygulamaların farklı şekilde yapılandırılmış olması ve bu nedenle ayrı kapsayıcılar aracılığıyla daha etkili bir şekilde yönetilmesi olasıdır.
Tek bir kapsayıcıyı çok geniş bir şekilde yeniden kullanmak, etiketleri ve tetikleyicileri yönetmek için karmaşık mantığı zorlayarak kapsayıcının karmaşıklığını ve boyutunu artırabilir.
Kapsayıcı boyutunu takip edin
Bir kapsayıcının boyutu, etiketlerine, tetikleyicilerine ve değişkenlerine göre belirlenir. Küçük bir kapsayıcı, sayfa performansını yine de olumsuz yönde etkileyebilir ancak büyük bir kapsayıcının etkisi neredeyse kesindir.
Etiket kullanımınızı optimize ederken kapsayıcı boyutu en önemli metrik olmamalıdır. Ancak büyük kapsayıcı boyutu, genellikle kapsayıcının iyi yönetilmediğine ve muhtemelen kötüye kullanıldığına dair bir uyarı işaretidir.
Google Etiket Yöneticisi, kapsayıcının boyutunu 300 KB ile sınırlar ve boyut sınırının %70'ine ulaşıldığında kapsayıcı boyutu hakkında uyarı verir.
Çoğu site, kapsayıcılarını sınırın altında tutmayı hedeflemelidir. Karşılaştırma yapmak gerekirse, ortalama site kapsayıcısı yaklaşık 50 KB'tır. Google Etiket Yöneticisi kitaplığı tek başına sıkıştırılmış halde yaklaşık 33 KB'tır.
Kapsayıcı sürümlerinize ad verme
Kapsayıcı sürümü, kapsayıcının içeriğinin belirli bir zamandaki anlık görüntüsüdür. Anlamlı bir ad kullanmak ve bu ad altında yapılan anlamlı değişikliklerin kısa bir açıklamasını eklemek, gelecekteki performans sorunlarını gidermeyi kolaylaştırabilir.
İş akışlarını etiketleme
Etiketlerinizde yapılan değişikliklerin sayfa performansını olumsuz etkilememesi için bu değişiklikleri yönetmeniz önemlidir.
Dağıtım öncesi test
Sorunları, performansı ve diğer sorunları tespit etmek için etiketlerinizi dağıtmadan önce test edin.
Bir etiketi test ederken dikkate alınması gerekenler arasında şunlar bulunur:
- Etiket düzgün çalışıyor mu?
- Etiket düzen kaymalarına neden oluyor mu?
- Etiket herhangi bir kaynak yüklüyor mu? Bu kaynaklar ne kadar büyük?
- Etiket uzun süre çalışan bir komut dosyası tetikliyor mu?
Önizleme modu
Önizleme modu, etiket değişikliklerini önce herkese dağıtmak zorunda kalmadan gerçek sitenizde test etmenize olanak tanır. Önizleme modunda, etiketler hakkında bilgi sağlayan bir hata ayıklama konsolu bulunur.
Hata ayıklama konsolunda bilgileri göstermek için gereken ek yükü nedeniyle, Google Etiket Yöneticisi'nin önizleme modunda çalıştırıldığında yürütme süresi farklıdır (biraz daha yavaştır). Bu nedenle, önizleme modunda toplanan Web Verileri ölçümlerinin üretimde toplanan ölçümlerle karşılaştırılması önerilmez. Bununla birlikte, bu tutarsızlık etiketlerin kendisinin yürütme davranışını etkilememelidir.
Bağımsız test
Etiketleri test etmeye yönelik alternatif bir yaklaşım, test ettiğiniz etiketin tek bir etiket içeren bir kapsayıcısını içeren boş bir sayfa oluşturmaktır. Bu test kurulumu daha az gerçekçidir ve bazı sorunları (ör. bir etiketin sayfa düzeninde kaymalara neden olup olmadığı) tespit etmez. Ancak etiketin komut dosyası yürütme gibi öğeler üzerindeki etkisini tespit edip ölçmeyi kolaylaştırabilir. Telegraph'ın üçüncü taraf kodunun performansını artırmak için bu yalıtım yaklaşımını nasıl kullandığına göz atın.
Etiket performansını izleme
Google Etiket Yöneticisi İzleme API'si, belirli bir etiketin yürütme zamanı hakkında bilgi toplamak için kullanılabilir. Bu bilgiler, seçtiğiniz bir uç noktaya raporlanır.
Daha fazla bilgi için Google Etiket Yöneticisi İzleyici oluşturma başlıklı makaleyi inceleyin.
Kapsayıcı değişiklikleri için onay alınmasını gerektirme
Birinci taraf kodları genellikle dağıtımdan önce inceleme ve testten geçer. Etiketlerinize aynı şekilde davranın.
Bunu yapmanın bir yolu da, kapsayıcı değişiklikleri için yönetici onayı gerektiren iki adımlı doğrulama eklemektir. Alternatif olarak, iki adımlı doğrulama özelliğini zorunlu tutmak istemeseniz de değişiklikleri takip etmek istiyorsanız seçtiğiniz kapsayıcı etkinlikleri hakkında e-posta uyarıları almak için kapsayıcı bildirimleri ayarlayabilirsiniz.
Etiket kullanımını düzenli olarak denetleme
Etiketlerle çalışmanın zorluklarından biri, zaman içinde birikme eğiliminde olmasıdır: Etiketler eklenir ancak nadiren kaldırılır. Etiketleri düzenli olarak denetlemek bu eğilimi tersine çevirmenin bir yoludur. Bunu yapmanın ideal sıklığı, sitenizin etiketlerinin ne sıklıkta güncellendiğine bağlıdır.
Her etiketi sahibinin net bir şekilde görülebileceği şekilde etiketlemek, söz konusu etiketten sorumlu kişinin daha kolay tanımlanmasını sağlar ve etiketin hâlâ gerekli olup olmadığını belirlemenize yardımcı olur.
Etiketleri denetlerken tetikleyicileri ve değişkenleri temizlemeyi unutmayın. Performans sorunlarının nedeni de genellikle bunlar olabilir.
Daha fazla bilgi için Üçüncü taraf komut dosyalarını kontrol altında tutma bölümüne bakın.