Yayınlanma tarihi: 29 Temmuz 2021
Etiketler, genellikle bir etiket yöneticisiyle siteye eklenen üçüncü taraf kod snippet'leridir. Etiketler en çok tercih edilen olarak 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 zarfa benzetilebilir: Etiket yöneticisi bir kap sağlar ancak bu kabı neyle dolduracağınız ve nasıl kullanacağınız büyük ölçüde size bağlıdır.
Bu bölümde, etiketleri ve etiket yöneticilerini performans ve Core Web Vitals için optimize etme tekniklerini ele alacağız. Bu dokümanda Google Etiket Yöneticisi'nden bahsedilse de 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ın hızlı yüklenmesi ve duyarlı kalması için gereken kaynakları kullanarak Core Web Vitals'ı genellikle dolaylı olarak etkileyebilir. Bant genişliği, siteleriniz için Etiket Yöneticisi JavaScript'ini veya bunun yaptığı sonraki çağrıları indirmek için harcanabilir. Ana iş parçacığındaki CPU süresi, etiket yöneticisinde ve etiketlerde bulunan JavaScript'i değerlendirmek ve yürütmek için harcanabilir.
Largest Contentful Paint (LCP), kritik sayfa yükleme süresi boyunca bant genişliği çekişmesine karşı savunmasızdır. Ayrıca, ana iş parçacığının engellenmesi LCP oluşturma süresini geciktirebilir.
Cumulative Layout Shift (CLS), ilk oluşturma işleminden önce kritik kaynakların yüklenmesini geciktirerek veya etiket yöneticilerinin sayfaya içerik eklemesiyle etkilenebilir.
Interaction to Next Paint (INP), ana iş parçacığındaki CPU çekişmesine karşı hassastır. Etiket yöneticilerinin boyutu ile daha düşük INP puanları arasında bir korelasyon olduğunu gördük.
Doğru etiket türünü seçme
Etiketlerin performans üzerindeki etkisi, etiket türüne göre değişir. Genel olarak, resim etiketleri ("pikseller") en yüksek performansı gösterir. Bunları özel şablonlar ve son olarak özel HTML etiketleri takip eder. Tedarikçi firma etiketleri, izin verdikleri işlevlere göre değişiklik gösterir.
Etiketi nasıl kullandığınızın, performans üzerindeki etkisini büyük ölçüde belirlediğini unutmayın. "Pikseller" büyük ölçüde bu etiket türünün doğası gereği nasıl kullanılabilecekleri konusunda katı kısıtlamalar getirmesi nedeniyle yüksek performanslıdır. Özel HTML etiketleri performans açısından her zaman kötü değildir ancak kullanıcılara sundukları özgürlük düzeyi nedeniyle performans açısından kötü bir şekilde kötüye kullanılmaları kolay olabilir.
Etiketleri düşünürken ölçeği göz önünde bulundurun: Tek bir etiketin performans üzerindeki etkisi önemsiz olabilir ancak aynı sayfada onlarca veya yüzlerce etiket kullanıldığında önemli hale gelebilir.
Tüm komut dosyaları bir etiket yöneticisiyle yüklenmemelidir
Etiket yöneticileri genellikle çerez bildirimleri, hero resimler veya site özellikleri gibi kullanıcı deneyiminin anında görsel ya da işlevsel yönlerini uygulayan kaynakları yüklemek için en iyi yöntem değildir. Bu kaynakları yüklemek için etiket yöneticisi kullanmak genellikle yayınlanmalarını geciktirir. Bu durum, kullanıcı deneyimi açısından kötüdür ve LCP ile 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 etiketleri kullanırken dikkatli olun
Özel HTML etiketleri uzun yıllardır kullanılmaktadır ve çoğu sitede yoğun bir şekilde tercih edilmektedir. Özel HTML etiketleri, adından da anlaşılacağı üzere, bu etiketin asıl kullanım amacı bir sayfaya özel <script> öğeleri eklemek olduğundan, 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 etkisini etiketin kendisine değil, etiketi ekleyen etiket yöneticisine atfettiğini unutmayın.
Özel HTML etiketleri, çevreleyen sayfaya bir öğe ekleyebilir. Sayfaya öğe ekleme işlemi, performans sorunlarına ve bazı durumlarda düzen kaymalarına neden olabilir.
- Çoğu durumda, sayfaya bir öğe eklenirse tarayıcının sayfadaki her öğenin boyutunu ve konumunu yeniden hesaplaması gerekir. Bu işleme düzen adı verilir. Tek bir düzenin performans üzerindeki etkisi minimum düzeydedir ancak aşırı düzeyde gerçekleştiğinde performans sorunlarına yol açabilir. Bu durumun etkisi, düşük özellikli cihazlarda ve çok sayıda DOM öğesi içeren sayfalarda daha fazladır.
- Görünür bir sayfa öğesi, çevresindeki alan oluşturulduktan sonra DOM'a eklenirse 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, çevreleyen sayfa oluşturulduktan sonra DOM'a eklenmeleri yaygındır.
Özel şablonları kullanma
Özel şablonlar, Özel HTML etiketleriyle aynı işlemlerden bazılarını destekler ancak komut dosyası yerleştirme ve piksel yerleştirme gibi yaygın kullanım alanları için API'ler sağlayan JavaScript'in korumalı alan sürümü üzerine kurulmuştur. Adından da anlaşılacağı üzere, bu şablonlar, performansı göz önünde bulundurarak şablon oluşturabilen deneyimli kullanıcılar tarafından oluşturulur. Daha az teknik bilgiye sahip kullanıcılar şablonu kullanabilir. Bu, genellikle tam Özel HTML erişimi sağlamaktan 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'sini kullanmaktır.
Mevcut bir Özel HTML etiketini dönüştürmek için injectScript API'yi kullanma hakkında bilgi edinmek istiyorsanız Mevcut bir etiketi dönüştürme başlıklı makaleyi inceleyin.
Ö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 bir dosya indiren bir komut dosyası etiketiyle (örneğin,
<script src="external-scripts.js">) yüklenmelidir.<script>etiketinin kullanılmaması, komut dosyasının içeriğini indirmek için ayrı bir gidiş dö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ı engeller. - Birçok tedarikçi firma,
<script>etiketlerinin<head>öğesinin üst kısmına yerleştirilmesini önerir. Ancak Etiket Yöneticisi ile yüklenen komut dosyaları için bu genellikle gereksizdir. Çoğu durumda, Etiket Yöneticisi yürütüldüğünde tarayıcı<head>öğesini ayrıştırmayı tamamlamış olur.
Piksel kullanma
Bazen üçüncü taraf komut dosyaları, resim veya iFrame pikselleriyle değiştirilebilir. Pikseller, komut dosyası tabanlı muadillerine kıyasla daha az işlevi destekleyebilir. Bu nedenle, genellikle daha az tercih edilen bir uygulama olarak görülürler. Ancak etiket yöneticilerinde kullanılan pikseller, tetikleyicilerle etkinleşebildikleri ve farklı değişkenler iletebildikleri için daha dinamik olabilir.
Pikseller, tetiklendikten sonra JavaScript yürütmesi olmadığı için en yüksek performanslı ve güvenli etiket türüdür. Piksellerin kaynak boyutu çok küçüktür (1 KB'tan az) ve düzende kaymaya neden olmaz.
Piksel desteği hakkında daha fazla bilgi için üçüncü taraf sağlayıcınızla iletişime geçin. Ayrıca, kodlarında <noscript> etiketi olup olmadığını kontrol etmeyi deneyebilirsiniz.
Pikselleri destekleyen tedarikçi firmalar, pikseli genellikle <noscript> etiketine ekler.
Piksellere alternatifler
Pikseller, 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 olduğu için popüler hale geldi. navigator.sendBeacon()
ve fetch() keepalive
API'leri aynı kullanım alanına yönelik olarak tasarlanmıştır ancak piksellerden daha güvenilir oldukları söylenebilir.
Pikselleri kullanmaya devam etmenizde bir sakınca yoktur. Pikseller iyi desteklenir ve performans üzerindeki etkileri minimum düzeydedir. Ancak kendi işaretçilerinizi oluşturuyorsanız bu API'lerden birini kullanmayı düşünebilirsiniz.
sendBeacon()
navigator.sendBeacon() API'si, 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 istekleri yapmayı destekler ve özel başlıklar ayarlamayı desteklemez. Tüm modern tarayıcılar tarafından desteklenir.
keepalive API'sini getir
keepalive, Fetch API'nin etkinlik raporlama ve analiz gibi engellenmeyen istekler göndermek için kullanılmasına olanak tanıyan bir işarettir. fetch() parametrelerine keepalive: true eklenerek 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 benziyorsa bunun nedeni, gerçekten de benzer olmalarıdır. Aslında Chromium tarayıcılarda sendBeacon() artık fetch()
keepalive üzerine kuruludur.
fetch() keepalive ve sendBeacon() arasında seçim yaparken ihtiyacınız olan özellikleri ve tarayıcı desteğini göz önünde bulundurmanız önemlidir. fetch() API'si çok daha esnektir ancak keepalive, sendBeacon() kadar tarayıcı desteğine sahip değildir.
Etiketlerin ne işe yaradığını anlama
Etiketler genellikle üçüncü taraf satıcıların sağladığı talimatlar izlenerek oluşturulur. Bir tedarikçinin kodunun ne yaptığı net değilse bilen birine sormayı düşünebilirsiniz. İkinci bir görüş almak, bir etiketin performans veya güvenlik sorunları oluşturma potansiyeli olup olmadığını belirlemeye yardımcı olabilir.
Etiket yöneticisinde etiketleri bir sahiple etiketlemenizi öneririz. Bir etiketin kime ait olduğunu unutmak kolaydır. Bu da bir şeyleri bozabileceği korkusuyla etiketi kaldırmaktan çekinmenize neden olur.
Tetikleyiciler
Genel olarak, etiket tetikleyicilerini optimize etmek, etiketlerin gereğinden fazla tetiklenmemesini sağlamaktan ve işletme ihtiyaçları ile performans maliyetlerini dengeleyen bir tetikleyici seçmekten ibarettir.
Tetikleyiciler, etiket yöneticisinin boyutunu ve yürütme maliyetini artıran JavaScript kodlarıdır. Tetikleyicilerin çoğu küçük olsa da kümülatif etki artabilir. Örneğin, birden fazla tıklama etkinliği veya zamanlayıcı tetikleyicisi 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 üzerindeki etkisi o kadar büyük olur. 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 şeyin kaynaklarını tüketir.
Tüm etiketler için uygun tetikleyiciler seçmek önemli olsa da bu, özellikle büyük kaynaklar yükleyen veya uzun komut dosyaları çalıştıran etiketler için önemlidir.
Etiketler, sayfa görüntülemelerde (genellikle Page load, DOM Ready, Window Loaded) veya özel bir etkinliğe göre tetiklenebilir. Sayfa yükleme süresini etkilememek için gerekli olmayan etiketleri Window Loaded sonrasında tetikleyin.
Özel etkinlikleri kullanma
Google Etiket Yöneticisi'nin yerleşik tetikleyicileri tarafından kapsanmayan sayfa etkinliklerine yanıt olarak tetikleyicileri etkinleştirmek için özel etkinlikleri kullanın. Örneğin, birçok etiket sayfa görüntüleme tetikleyicileri kullanır. Ancak DOM Ready ile Window Loaded arasındaki süre uzun olabilir. Bu nedenle, bir etiketin ne zaman etkinleşeceğini hassas bir şekilde ayarlamak zorlaşır. Özel etkinlikler bu soruna çözüm olabilir.
Öncelikle özel bir etkinlik tetikleyicisi oluşturun ve etiketlerinizi bu tetikleyiciyi kullanacak şekilde güncelleyin.
Tetikleyiciyi etkinleştirmek için ilgili 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ını kullanma
Etiketlerin gereksiz yere etkinleşmesini önlemek için belirli tetikleyici koşulları tanımlayın. Bunu yapmanın en basit ve etkili yollarından biri, bir etiketin yalnızca gerçekten kullanıldığı sayfalarda tetiklenmesini sağlamaktır.
Etiketlerin etkinleşmesini sınırlamak için tetikleyici koşullarına yerleşik değişkenler dahil edilebilir.
Etiket yöneticinizi uygun bir zamanda yükleme
Etiket yöneticisinin yüklenme zamanını ayarlayarak performansı artırabilirsiniz. Tetikleyiciler, nasıl yapılandırıldıklarından bağımsız olarak bir etiket yöneticisi yüklenene kadar tetiklenemez. Etiket yöneticisini ne zaman yükleyeceğinizi deneyin. Bu, eşit veya daha büyük bir etkiye sahip olabilir. Bu karar, sayfadaki tüm etiketleri etkiler.
Etiket yöneticisini daha sonra yükleyerek, bir etiketin yanlışlıkla çok erken yüklenmesini önleyebilir ve gelecekteki performans sorunlarından kaçınabilirsiniz.
Değişkenler
Sayfadaki verileri okumak için değişkenleri kullanın. Tetikleyicilerde ve etiketlerde kullanışlıdırlar.
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 bölümlerini, çerezleri, veri katmanını veya DOM'u okumak için kullanılan kod gibi nispeten küçük olabilir. Ayrıca sınırsız kapasiteye (ve boyuta) sahip özel JavaScript de içerebilirler.
Değişkenler, Etiket Yöneticisi tarafından sürekli olarak değerlendirildiğinden 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ı, sayfa hakkında bilgi içeren nesnelerin JavaScript 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ılabilir ancak veri katmanının kullanılması önemle tavsiye edilir. Veri katmanı, üçüncü taraf komut dosyalarının erişebileceği verileri tek bir yerde birleştirerek kullanımının daha iyi görünürlüğünü sağlar. Bu, diğer avantajlarının yanı sıra gereksiz değişken hesaplamalarını ve komut dosyası yürütme işlemlerini azaltmaya yardımcı olabilir.
Veri katmanı kullanarak, etiketlerin hangi verilere erişebileceğini kontrol edebilirsiniz. Bu sayede, tam JavaScript değişkeni veya DOM erişimi vermeniz gerekmez.
Veri katmanının performans avantajları sezgisel olmayabilir. Bunun nedeni, veri katmanının güncellenmesinin Google Etiket Yöneticisi'nin tüm kapsayıcı değişkenlerini yeniden değerlendirmesine ve potansiyel olarak etiketleri tetiklemesine neden olmasıdır. Bu da JavaScript yürütmeyi gerektirir. Veri katmanını hatalı kullanmak mümkün olsa da genel olarak, performans sorunlarının kaynağı veri katmanı gibi görünüyorsa kapsayıcının kendisinde performans sorunları olabilir. Veri katmanı bu sorunları daha belirgin hale getirir.
Yinelenen ve kullanılmayan etiketleri kaldırma
Bir etiket, bir etiket yöneticisi aracılığıyla eklenmenin yanı sıra bir sayfanın HTML işaretlemesine de dahil edildiğinde yinelenen etiketler oluşabilir.
Kullanılmayan etiketler, tetikleyici istisnası kullanılarak 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 kaldırmaz.
Kullanılmayan etiketler kaldırıldığında, tetikleyicileri ve değişkenleri inceleyerek bunların da kaldırılıp kaldırılamayacağını belirleyin.
Duraklatılan etiketler kapsayıcı boyutunu etkiler ancak toplam yük, etiketler etkin olduğunda olduğundan daha küçüktür.
İzin verilenler ve engellenenler listelerini kullanma
Bir sayfada izin verilen etiketler, tetikleyiciler ve değişkenler için ayrıntılı kısıtlamalar yapılandırmak üzere izin verme ve reddetme listelerini kullanın. Bu, performansla ilgili en iyi uygulamaların ve diğer politikaların uygulanmasına 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ılmasını engelleyebilirsiniz. Bu durumda, yalnızca pikseller ve önceden tanımlanmış etiketler, veri katmanındaki verilerle birlikte kullanılabilir. Bu kısıtlayıcı olsa da daha performanslı ve güvenli bir Etiket Yöneticisi uygulamasıyla sonuçlanabilir.
Sunucu tarafı etiketlemeyi kullanma
Özellikle verileri üzerinde daha fazla kontrol sahibi olmak isteyen büyük siteler için sunucu tarafı etiketlemeye geçiş yapmayı düşünebilirsiniz. Sunucu tarafı etiketleme, tedarikçi firma kodunu istemciden kaldırır ve bununla birlikte, işlemeyi istemciden sunucuya aktarır.
Örneğin, istemci taraflı etiketleme kullanırken birden fazla Analytics hesabına veri göndermek için istemcinin her uç nokta için ayrı istekler başlatması gerekir. Sunucu tarafı etiketleme sayesinde istemci, sunucu tarafı kapsayıcıya tek bir istek gönderir ve bu veriler buradan farklı Analytics hesaplarına iletilir.
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ş başlıklı makaleyi inceleyin.
Kapsayıcılar
Etiket yöneticileri genellikle kurulumlarında kapsayıcılar olarak adlandırılan birden fazla örneğe 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 sayfada birden fazla kapsayıcı bulunması, ek yük ve komut dosyası yürütme işlemi gerektirdiğinden önemli performans sorunlarına yol açabilir. En azından, kapsayıcının JavaScript'inin bir parçası olarak sunulduğu için kapsayıcılar arasında yeniden kullanılamayan temel etiket kodunun kendisini kopyalar.
Birden fazla kapsayıcının etkili bir şekilde kullanılması nadir görülen bir durumdur. Ancak iyi kontrol edildiğinde bu yaklaşımın işe yaradığı durumlar da vardır. Örneğin:
- Büyük bir kapsayıcı yerine daha hafif bir "erken yükleme" kapsayıcısı ve daha ağır bir "sonraki yükleme" kapsayıcısı ekleme.
- Teknik bilgisi daha az olan kullanıcılar için kısıtlanmış bir kapsayıcı, daha karmaşık etiketler için ise 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şturmak için Google Etiket Yöneticisi kılavuzunu uygulayın.
Gerekirse ayrı kaplar 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ışı üretkenliğinizi artırabilir veya azaltabilir. Ayrıca performansı da etkileyebilir.
Kullanım ve yapı açısından benzer olan birden fazla sitede tek bir kapsayıcı etkili bir şekilde kullanılabilir. Örneğin, bir markanın mobil ve web uygulamaları benzer işlevlere sahip olsa da uygulamalar farklı şekilde yapılandırılmış olabilir ve bu nedenle ayrı kapsayıcılar aracılığıyla daha etkili bir şekilde yönetilebilir.
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 etme
Kapsayıcının boyutu; etiketleri, tetikleyicileri ve değişkenleri tarafından belirlenir. Küçük bir kapsayıcı sayfa performansını olumsuz etkileyebilir ancak büyük bir kapsayıcının olumsuz etkileyeceği neredeyse kesindir.
Etiket kullanımınızı optimize ederken kapsayıcı boyutu en önemli metrik olmamalıdır. Ancak büyük bir kapsayıcı boyutu, genellikle kapsayıcının iyi yönetilmediğinin ve muhtemelen kötüye kullanıldığının bir uyarı işaretidir.
Google Etiket Yöneticisi, kapsayıcı boyutunu 300 KB ile sınırlandırır 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ırdan daha küçük 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 yaklaşık 33 KB sıkıştırılmış boyuttadır.
Kapsayıcı sürümlerinizi adlandırma
Kapsayıcı sürümü, bir kapsayıcının içeriğinin belirli bir zamandaki anlık görüntüsüdür. Anlamlı bir ad kullanmak ve anlamlı değişikliklerin kısa bir açıklamasını eklemek, gelecekteki performans sorunlarını gidermeyi kolaylaştırabilir.
Etiket iş akışları
Etiketlerinizde yapılan değişiklikleri yönetmek, sayfa performansının olumsuz etkilenmemesi açısından önemlidir.
Dağıtımdan önce test etme
Etiketlerinizi dağıtımdan önce test ederek performans sorunlarını ve diğer sorunları yayınlanmadan önce tespit edin.
Bir etiketi test ederken dikkat edilmesi gerekenler:
- Etiket düzgün çalışıyor mu?
- Etiket, düzende kaymalara neden oluyor mu?
- Etiket herhangi bir kaynak yüklüyor mu? Bu kaynakların boyutu ne kadar?
- Etiket, uzun süre çalışan bir komut dosyasını tetikliyor mu?
Önizleme modu
Önizleme modu, etiket değişikliklerini herkese açık olarak yayınlamadan önce gerçek sitenizde test etmenize olanak tanır. Önizleme modu, etiketler hakkında bilgi sağlayan bir hata ayıklama konsolu içerir.
Google Etiket Yöneticisi'nin yürütme süresi, hata ayıklama konsolunda bilgi göstermek için gereken ek yük nedeniyle önizleme modunda çalıştırıldığında farklıdır (biraz daha yavaştır). Bu nedenle, önizleme modunda toplanan Web Vitals ölçümlerinin üretimde toplananlarla karşılaştırılması önerilmez. Ancak bu tutarsızlık, etiketlerin yürütme davranışını etkilemez.
Bağımsız test
Etiketleri test etmenin alternatif bir yolu, test ettiğiniz etiketi içeren tek bir etiketli kapsayıcıya sahip boş bir sayfa oluşturmaktır. Bu test kurulumu daha az gerçekçidir ve bazı sorunları (örneğin, bir etiketin düzen kaymalarına neden olup olmadığı) yakalayamaz. Ancak etiketin komut dosyası yürütme gibi işlemler üzerindeki etkisini izole etmeyi ve ölçmeyi kolaylaştırabilir. Telegraph'ın üçüncü taraf kodun performansını artırmak için bu izolasyon yaklaşımını nasıl kullandığına göz atın.
Etiket performansını izleme
Google Etiket Yöneticisi Monitoring API, belirli bir etiketin yürütme süresi 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 İzleyicisi oluşturma başlıklı makaleyi inceleyin.
Kapsayıcı değişiklikleri için onay zorunlu olsun
Birinci taraf kodları genellikle dağıtımdan önce inceleme ve test aşamalarından geçer. Etiketlerinizi de aynı şekilde ele alın.
Bunu yapmanın bir yolu, kapsayıcı değişiklikleri için yönetici onayı gerektiren iki adımlı doğrulama eklemektir. Alternatif olarak, iki adımlı doğrulamayı zorunlu kılmak istemiyor ancak 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, etiketlerin 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 yapmak için ideal sıklık, sitenizin etiketlerinin ne sıklıkta güncellendiğine bağlıdır.
Her etiketi, sahibinin kim olduğu anlaşılacak şekilde etiketlemek, o etiketten kimin sorumlu olduğunu ve etikete hâlâ ihtiyaç duyulup duyulmadığını belirlemeyi kolaylaştırır.
Etiketleri denetlerken tetikleyicileri ve değişkenleri temizlemeyi unutmayın. Ayrıca performans sorunlarına da neden olabilirler.
Daha fazla bilgi için Üçüncü taraf komut dosyalarını kontrol altında tutma başlıklı makaleyi inceleyin.