Milyonlarca sitenin web sitesi performansını iyileştirerek iyi PageSpeed Insights ve Önemli Web Verileri puanları elde etmesine yardımcı olmak için GoDaddy'nin uyguladığı değişikliklerin bir örnek olayı.
GoDaddy, dünyanın her yerinden girişimcilere yönelik dünyanın en büyük hizmet platformudur. 20 milyondan fazla müşteriden ve dünyanın her yerinden girişimcilerden oluşan dünya çapındaki topluluğumuzu, internette büyümek için ihtiyaç duydukları tüm yardım ve araçları sunarak güçlendirmeyi görev edindik.
GoDaddy, kullanımı kolay ve işletme sahiplerinin hedeflerine ulaşmasına yardımcı olan araçlar ve hizmetler sunma taahhüdüyle Web Siteleri + Pazarlama'yı kullanıma sundu. Web Sitesi + Pazarlama, web sitesi oluşturma özelliğini pazarlama ve e-ticaret araçlarıyla entegre ediyor ve bunları, müşterilerin yeni girişimlerinde başarıya ulaşmasına yardımcı olmak için sınıfının en iyisi rehberlikle eşleştiriyor.
Web Siteleri + Pazarlama kullanıma sunulduğundan beri performans, ürünün önemli bir parçası oldu ve sürekli olarak izlendi ve aktif bir şekilde çalıştı. Bu makalede, GoDaddy'nin laboratuvar performans testinden gerçek dünya verilerini Önemli Web Verileri ile kullanmaya uzanan yolculuğunu ve müşterilerimizin sitelerinde çok yüksek bir geçiş oranı elde etmek için üründe yapılan bir dizi iyileştirmeyi inceleyeceğiz.
Lighthouse ile performansı izleme
Performans izleme için Lighthouse verilerini kullandık. Platformda her web sitesi yayınlandığında performansını ölçeriz. Bunun için Google Lighthouse'u https://github.com/godaddy/lighthouse4u şeklinde hizmet olarak sunan "Lighthouse4u" dahili aracımızla ölçüyoruz. Bu sayede sitelerin laboratuvar ortamında genel olarak nasıl performans gösterdiğine dair iyi bir fikir edindik.
Platformumuzda barındırdığımız milyonlarca site çok çeşitli özelliklere ve içeriğe sahip olduğundan, performans verilerini test edilen her siteyle ilgili meta verilerle (kullanılan şablon, oluşturulan widget türü vb.) birleştirmek önemliydi. Bu, hangi web sitesi özelliklerinin düşük performans gösterdiğine ilişkin çıkarımlarda bulunmamıza olanak tanırken, aynı zamanda, neleri iyileştirebileceğimiz konusunda fikir edinmemizi de sağladı.
Örneğin, bu, "pop-up kalıcı iletişim kutusunun" sayfa hızı üzerinde olumsuz bir etkisi olduğunu belirlememize yardımcı oldu; bu özelliğe sahip siteler, diğerlerine göre 12 puan daha düşük performans gösterdi. JavaScript'in yüklenmesini ertelemek için kodda güncellemeler yaptıktan sonra Lighthouse puanımızı 2 puan iyileştirdik. Bu öğrendiklerimizi, sayfa yüklendikten hemen sonra oluşturulan "çerez banner'ı" gibi diğer özelliklere uygulamayı başardık.
Özelliklere dayalı sorunlu sitelere bakmanın yanı sıra, JavaScript paketimizin bir analizini yürüttük ve boyutunun büyük bir bölümünün dış bağımlılıklardan (immutable.js ve draft.js) geldiğini gördük. Tüketicileri isteğe bağlı geç yükleme bağımlılıklarına göre yeniden yapılandırarak paket boyutunu küçülttük. Bu da, yaygın JavaScript paketi boyutunda% 50'nin üzerinde bir düşüşle sonuçlandı ve 200 KB'tan yaklaşık 90 KB'a (küçültülmüş) yükseldi. Daha küçük paket boyutu, tarayıcının harici öğeleri yüklemesine ve kritik komut dosyalarını ilk site yükleme yaşam döngüsünde daha erken yürütmesine olanak tanıdı. Bu da Largest Contentful Paint (LCP) ve First Input Delay (FID) kazanımlarında kazanç sağladı.
Süregelen çabalarımız sayesinde ortalama bir müşteri sitesi Lighthouse puanı, Kasım 2020'de yaklaşık 40 puandan Mayıs 2021'de 70'in üzerine çıktı. Ancak tüm girişimlerimiz işe yaramadı. Yerel test ortamlarında test edilen sonuçlarla sahada aldığımız sonuçlar arasında her zaman tutarlı sonuçlar elde edemediğimizde kimi zaman şaşırdık. Laboratuvar sonuçları çok yararlı oldu ancak şimdi bu alanda gözlemlenen gerçek kullanıcı deneyimlerine odaklanma zamanı geldi.
Core Web Vitals ile gerçek kullanıcı verilerini izleme
web-vitals kitaplığını müşterilerimizin sitelerine ekledikten sonra gerçek ziyaretçilerden gelen gerçek cihazlarla ilgili verileri ölçmeyi başardık. Bu verilerde donanım, ağ hızı, kullanıcı etkileşiminin (kaydırma veya tıklama gibi) Lighthouse kullanarak laboratuvar ortamındaki gibi tutarlı bir temel çizgide olmadığını belirledik. Bu doğru yönde büyük bir adımdı, çünkü elimizde web sitesi ziyaretçilerinin yaşadıklarını temsil eden veriler elde ettik.
En zayıf halka: Cumulative Layout Shift (CLS)
Yeni verileri analiz etmek, web sitesi hızını artırmak için yapılması gerekenlere dair yeni bir perspektif sağladı. Lighthouse puanını iyileştirmek için yaptığımız çalışmalar nedeniyle 75. yüzdelik dilim LCP değerimiz 860 ms'dir ve aynı eşikteki İGG değerimiz 10 ms'nin altında kalmıştır. Bu nedenle, müşterimizin sitelerinde şu metrikler için yüksek bir geçiş oranı elde ettik: sırasıyla% 78 ve %98. Ancak, Cumulative Layout Shift (CLS) sayıları, Lighthouse'da alışkın olduğumuzdan çok farklı görünüyor. 75.yüzdelik dilimdeki CLS değerimiz 0,17, yani "geçmek" için 0,1 eşiğinin üzerindeydi.Böylece, geçme oranımız tüm sitelerimize kıyasla yalnızca% 47'ye ulaştı.
Bu metrik toplam geçiş oranımızı %40'a düşürdü. Biz de bu oranı Ağustos 2021'in sonuna kadar% 60'ın üzerine çıkarmaya yönelik iddialı bir hedef belirlemeye karar verdik. Bunun için CLS'ye odaklanmamız gerekiyor.
Gerçek hayatta, kullanıcılar sayfayla etkileşimde bulunur ve "ekranın üst kısmı" içeriğini geçecek şekilde kaydırır. Bu, Core Web Vitals'ın daha iyi yakaladığı bir şeydir. Site ilk yüklenirken kullanıcıların siteyle etkileşimde bulunma şekillerinin değişkenliği nedeniyle CLS, laboratuvar ve saha verilerinden farklıdır.
Tüm Önemli Web Verileri'nden geçmenin yolu
Performansı artırmak için deneme yanılma gerekir ve her deneme her zaman beklendiği gibi sonuç vermez. Yine de hedeflerimize ulaşmamıza yardımcı olan birkaç iyileştirmeyi aşağıda bulabilirsiniz.
Resim yüklemek için alan ayırmak, resimlerin altındaki içeriğin kaymasını önleyerek CLS puanımızı önemli ölçüde artırdı. Destekleyen tarayıcılarda bu sorunu gidermek için CSS aspect-ratio özelliğini kullandık. İstemeyenler için önbelleğe alınmış ve sadece birkaç bayt boyutunda, böylece neredeyse anında yüklenen şeffaf bir yer tutucu resim yükledik.
Bu genel resim davranışı, sunucu tarafı oluşturma sırasında görüntü alanı genişliği ve görüntü en boy oranına bağlı olarak nihai resim yüksekliğini önceden hesaplamamıza olanak tanıdı. Bu, nihai resim için uygun şekilde ayrılmış dikey alana sahip HTML işaretlemesiyle sonuçlandı. Resimler mobil görüntü alanlarının tamamını kapsayan bir şekilde oluşturulduğu için, iyileşme özellikle mobil cihazlarda gözlemlenebilirdi.
Müşterilerimizin sitelerindeki bazı bileşenler dinamik içeriğe sahiptir (örneğin, harici müşteri yorumları listesi) ve sunucu tarafı oluşturmanın performans avantajlarından yararlanmak için sadece CSS'ye dönüştürülemiyor. İçerik (dolayısıyla yükseklik) değişiklik göstereceğinden, bunlar düzen kaymalarını iyileştirmek için zor alanlardır. Böyle durumlarda bileşeni, belirli bileşenlerin her birinin ortalama yüksekliğine göre önceden belirlenmiş min-height uygulanmış bir kapsayıcı içine sarmaladık. İç dinamik bileşenin oluşturma işlemi tamamlandıktan sonra min-height kaldırılır. Bu çözüm mükemmel olmasa da, düzen kaymasını önemli ölçüde azaltmamıza olanak tanıdı.
CLS'deki iyileştirmelere odaklanırken LCP üzerinde çalışmaya devam ettik. Birçok web sitesinde LCP'ye katkıda bulunan en büyük etken resimler ve bizim için bariz bir iyileştirme alanıydı. IntersectionObserver kullanarak resimleri geç yüklemeyle ilgili iyileştirmeler yaptık ancak resim boyutlarının her ayrılma noktası (mobil, tablet, masaüstü, büyük masaüstü) için en uygun şekilde ayarlanmadığını fark ettik. Bu nedenle resim oluşturma kodumuzu, resimleri ayrılma noktasına göre sabitleyip ölçeklendirecek ve ardından çözünürlüğü piksel yoğunluğuna göre tekrar ölçeklendirecek şekilde güncelledik. Örneğin, bu işlem, belirli bir büyük resmin boyutunu 192 KB'tan 102 KB'ye düşürmüştür.
Ağ bağlantısı zayıf olan cihazlarda web sitelerini hızlıca oluşturmak için, resim kalitesini bağlantı hızına göre dinamik olarak düşüren bir kod ekledik. Bu işlem, navigator.connection tarafından döndürülen downlink özelliği kullanılarak yapılabilir. Resim kalitesini azaltmak için, bu ağ koşullarını temel alarak Asset API'mizi kullanarak URL tabanlı sorgu parametreleri uygularız.
Müşteri sitelerimizin bazı bölümleri dinamik olarak yüklenir. Belirli bir site yayınlandığında hangi bölümlerin oluşturulacağını bildiğimizden, önceden bağlantıyı ve gerekli el sıkışmalarını başlatmak için rel=preconnect kaynak ipucundan yararlandık. Yazı tiplerini ve diğer önemli kaynakları hızlı bir şekilde yüklemek için kaynak ipuçlarını da kullanırız.
Müşteriler, sitelerini oluştururken, farklı işlevlere olanak tanımak için satır içi komut dosyaları içerebilen çeşitli bölümler ekler. Bu komut dosyalarının HTML sayfası boyunca satır içinde bulunması, performans için her zaman optimum değildir. Tarayıcının komut dosyası içeriğini eşzamansız olarak yüklemesine ve ayrıştırmasına olanak tanımak için bu komut dosyalarını harici hale getirmeye karar verdik. Yeni harici komut dosyaları da sayfalar arasında paylaşılabilir. Bu durum, tarayıcı ve CDN önbelleğine alma şeklinde ek performans kazanımları sağlanmasına olanak tanıdı. Tarayıcının daha hızlı ayrıştırabilmesi ve çalıştırabilmesi için önemli komut dosyalarını satır içinde tutuyoruz.
Sonuçlar
Çalışmalarımızın karşılığını CLS'ye odaklamamızın ardından Core Web Vitals başarı oranımız% 40'tan neredeyse %70'e, yani %75'lik bir artışa yükseldi.
Kullanıcılar güncelleme yapmak ve sitelerini yeniden yayınlamak için platformumuza geri döndükçe, en son performans iyileştirmelerini görebilirler. Bunun sonucunda, "Core Web Vitals'ı geçen" sitelerin sayısı aşağıdaki grafikte gösterildiği gibi istikrarlı bir şekilde artıyor:
Sonuçlar
Performansın iyileştirilebileceği alanların bulunması ve ilerlemenin başarılı bir şekilde izlenmesi, büyük ölçüde ölçüm için hangi araçların kullanıldığına bağlıdır. Lighthouse, "laboratuvar ortamında" ekranın üst kısmındaki performansı ölçmek için yararlı olsa da yalnızca kullanıcı etkileşimlerinden (sayfada gezinmek gibi) kaynaklanan performans sorunlarını doğru şekilde tespit edememiştir.
Gerçek dünyadaki Core Web Vitals verilerini meta verilerle izlemek, yaptığımız iyileştirmelerin etkisini görselleştirmemize, hedeflememize ve ölçmemize olanak tanıdı. Core Web Vitals puanlarını yükseltme yolculuğu, ekibin kod tabanımızda bulunan yüksek performans göstermeyen kalıpları tespit edip değiştirmesini sağladı. Bazen umut verici değişiklikler beklediğimiz etkiyi yaratmazken, bazense tam tersi bir durum ortaya çıktı. Dünyada pırıl pırıl bir yer olmadığından denemeye devam etmelisin.