Microsoft Clarity'yi, Switas gibi şirketlerin karşılaştığı zorlukları anlayan gerçek ürün geliştiriciler tarafından, pratik ve gerçek dünya kullanım senaryoları göz önünde bulundurularak geliştirilmiş bir ürün olarak öne çıkardık. Öfkeli tıklamaları ve JavaScript hata izleme gibi özellikler, kullanıcı hayal kırıklıklarını ve teknik sorunları belirlemede, kullanıcı deneyimini ve dönüşüm oranlarını doğrudan etkileyen hedefli iyileştirmeler sağlamada paha biçilmez olduğunu kanıtladı.
Kritik İşleme Yolu
Kritik işleme yolu, bir tarayıcının bir sayfayı aldıktan sonra ekranda herhangi bir şey görüntüleyene kadar tamamlaması gereken adımlar dizisidir. Bu yol, işaretlemeyi bir belge yapısına ayrıştırmayı, stil sayfalarını bir stil yapısına ayrıştırmayı, ikisini bir işleme ağacında birleştirmeyi, düzeni hesaplamayı ve sonucu boyamayı içerir. Bunu anlamak, bazı kaynakların içeriğin ilk görünümünü neden geciktirdiğini ve diğerlerinin neden geciktirmediğini açıklar.
Stil sayfaları, tasarım gereği görüntülemeyi engelleyici özelliktedir ve bu bir kusurdan ziyade kasıtlı bir tercihtir. Stiller kullanılabilir hale gelmeden önce sayfayı çizen bir tarayıcı, stil uygulanmamış içeriği görüntüler ve ardından yeniden düzenler; bu da kısa bir gecikmeden daha kötüdür. Bunun pratik sonucu, belge başlığında referans verilen her stil sayfasının, herhangi bir şey görünmeden önce indirilip işlenmesi gerektiğidir; bu nedenle stil sayfalarının sayısı, boyutu ve teslim hızı, sayfanın ne zaman görünür hale geleceğini doğrudan belirler.
Komut dosyaları, aksi belirtilmedikçe ayrıştırma işlemini engeller; bu da gecikmenin diğer önemli kaynağıdır. Ayrıştırma sırasında karşılaşılan senkron bir komut dosyası, belgeyi değiştirebileceği için indirilip çalıştırılana kadar belge oluşturma işlemini durdurur. Komut dosyalarını ertelenmiş olarak işaretlemek, ayrıştırmanın devam etmesini ve belge tamamlandıktan sonra çalıştırılmasını sağlar; asenkron olarak işaretlemek ise komut dosyaları gelir gelmez çalıştırılmasını sağlar. Her komut dosyası için doğru özelliği seçmek, mevcut en ucuz iyileştirmelerden biridir.
Yolu kısaltmak, hem gidiş-dönüş sayısını hem de her aşamada gereken iş yükünü azaltmayı içerir. İlk görüntüleme alanı için gerekli stilleri satır içi olarak eklemek, engelleyici bir isteği tamamen ortadan kaldırır ve geri kalan kısım engelleme olmadan yüklenir. İlk render için gerekli olmayan komut dosyalarını ertelemek, kaynakları en aza indirgemek ve sıkıştırmak ve herhangi bir şey başlamadan önce tam gidiş-dönüşler ekleyen yönlendirmeleri ortadan kaldırmak, ilk boyamadan önce geçen süreyi azaltır.
Kaynak ipuçları, tarayıcının keşif aşamasından daha erken çalışmaya başlamasına olanak tanır. Ön yükleme, belgede sonradan keşfedilen bir kaynağın (örneğin, bir stil sayfasından referans verilen bir yazı tipi veya CSS aracılığıyla uygulanan bir kahraman resmi) gerekli olacağını bildirir, böylece indirme işlemi hemen başlar. Ön bağlantı, üçüncü taraf kaynaklarla önceden bağlantı kurarak, kritik anda bağlantı ve müzakere yükünü ortadan kaldırır. Seçici olarak kullanıldıklarında yardımcı olurlar; ayrım gözetmeksizin kullanıldıklarında ise bant genişliği için rekabet ederler ve durumu daha da kötüleştirirler.
Yazı tipleri, sayfa üzerinde yer aldıkları ve geç keşfedildikleri için özel bir dikkat gerektirir. Bir stil sayfasından referans alınan bir web yazı tipi, o stil sayfası işlenene kadar indirilmeye başlayamaz ve görüntüleme stratejisine bağlı olarak metin, yazı tipi gelene kadar görünmez olabilir. Sayfanın üst kısmında kullanılan yazı tiplerinin önceden yüklenmesi, yedek metni hemen gösteren bir görüntüleme stratejisinin seçilmesi ve yeniden düzenlemeyi azaltmak için yedek ölçütlerinin eşleştirilmesi bu sorunu çözer.
İstemci tarafı oluşturma, yolu önemli ölçüde uzatır; bu nedenle bilinçli bir şekilde hafifletilmesi gerekir. İlk belgede hiçbir içerik yoksa ve her şey JavaScript tarafından oluşturulmak zorundaysa, yol, herhangi bir şey görünmeden önce paketin indirilmesini, ayrıştırılmasını ve yürütülmesini ve ardından veri alınmasını içerir. Sunucu tarafı oluşturma veya statik üretim, anlamlı içeriği ilk yola döndürür; bu, bir optimizasyondan ziyade yapısal bir düzeltmedir.
Sayfa yapısı ve sunulma biçimi yolu belirlediğinden, iyileştirme genellikle yapılandırma değişikliklerinden ziyade şablon ve derleme değişiklikleri gerektirir. Pratikte bu analiz şu kapsamda yer alır: web performansı Çalışmanın uygulanması şu yollarla gerçekleştirilir: ürün geliştirmeVe bir sitenin oluşturma yaklaşımı temel kısıtlama olduğunda, tartışma bir ayarlama egzersizi olmaktan ziyade sayfaların nasıl üretildiğine dair mimari bir tartışmaya dönüşür.
Switas'ın Görüldüğü Gibi
