GoDaddy'nin milyonlarca sitenin web sitesi performansını iyileştirmek ve iyi PageSpeed Insights ve Core Web Vitals puanları elde etmelerine yardımcı olmak için uyguladığı değişikliklerle ilgili bir örnek olay.
GoDaddy, dünyanın dört bir yanındaki girişimciler için dünyanın en büyük hizmet platformudur. Dünya genelinde 20 milyondan fazla müşteriden oluşan topluluğumuzu ve dünyanın her yerindeki girişimcileri, dijital ortamda büyümeleri için ihtiyaç duydukları tüm yardım ve araçları sağlayarak güçlendirme misyonumuza bağlıyız.
GoDaddy, 2019'da, kullanımı kolay ve işletme sahiplerinin hedeflerine ulaşmalarına yardımcı olacak araç ve hizmetler sunma taahhüdüyle Websites + Marketing'i kullanıma sundu. Websites + Marketing, web sitesi oluşturma sürecini pazarlama ve e-ticaret araçlarıyla entegre eder ve bunları müşterilerin yeni girişimlerinde başarıya ulaşmalarına yardımcı olmak için sınıfının en iyisi rehberlikle bir araya getirir.
Web siteleri + Pazarlama'nın kullanıma sunulmasından bu yana performans, ürünün önemli bir parçası ve aktif olarak izlenmesi ve üzerinde çalışılması gereken bir konu olmuştur. Bu makalede, GoDaddy'nin laboratuvar performans testi kullanmadan Core Web Vitals ile gerçek dünyadan veriler kullanmaya geçiş yolculuğunu ve müşterilerimizin siteleri için çok yüksek bir geçiş oranı elde etmek amacıyla üründe yapılan bir dizi iyileştirmeyi inceleyeceğiz.
Lighthouse ile performansı izleme
Performans takibi için Lighthouse verilerinden yararlandık. Platformda her web sitesi yayınlandığında, Google Lighthouse'u hizmet olarak sunan https://github.com/godaddy/lighthouse4u adresindeki "Lighthouse4u" adlı şirket içi aracımızı kullanarak performansını ölçeriz. 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 sitenin çok çeşitli özellikleri ve içerikleri olduğundan, performans verilerini test edilen her siteyle ilgili meta verilerle (ör. kullanılan şablon, oluşturulan widget'ların türü vb.) birleştirmek önemliydi. Bu sayede, hangi web sitesi özelliklerinin daha düşük performansa sahip olduğu konusunda sonuçlara varabildik ve iyileştirmelerin nereden yapılacağı konusunda bilgi edindik.
Örneğin, bu sayede "pop-up modal"ın sayfa hızını olumsuz etkilediğini tespit ettik. Bu özelliğe sahip siteler, bu özelliğe sahip olmayan sitelere kıyasla 12 puan daha düşük performans gösteriyordu. JavaScript'in yüklenmesini ertelemek için kodda güncelleme yaptıktan sonra Lighthouse puanımızı 2 puan yükselttik. Bu bilgileri, sayfa yüklendikten kısa bir süre sonra oluşturulan "çerez banner'ı" gibi diğer özelliklere uygulayabildik.
Özelliklere göre sorunlu siteleri incelemenin yanı sıra JavaScript paketimizi analiz ettik ve boyutunun büyük bir kısmının harici bağımlılıklardan (immutable.js ve draft.js) geldiğini gördük. Tüketicileri, bağımlılıkları isteğe bağlı olarak yavaş yükleyecek şekilde yeniden yapılandırarak paket boyutunu küçülttük. Bu sayede, genel JavaScript paketi boyutunda% 50'den fazla düşüş elde edildi. 200 KB'tan fazla olan boyut, yaklaşık 90 KB'ya (küçültülmüş) düşürüldü. 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ünün daha erken aşamalarında çalıştırmasına olanak tanıdı. Bu da Largest Contentful Paint (LCP) ve First Input Delay (FID) metrikleri açısından kazanımlar elde edilmesine yol açtı.
Devam eden çalışmalarımız sayesinde, ortalama müşteri sitesi Lighthouse puanı Kasım 2020'deki yaklaşık 40 puandan Mayıs 2021'de 70'in üzerine çıktı. Ancak tüm denemelerimiz işe yaramadı ve yerel test ortamlarında test edilen sonuçlar ile sahada elde ettiğimiz sonuçlar her zaman tutarlı olmadığında bazen şaşırdık. Laboratuvar sonuçları çok faydalı olmuştu ancak artık sahada gözlemlenen gerçek kullanıcı deneyimlerine odaklanmanın zamanı gelmişti.
Core Web Vitals ile gerçek kullanıcı verilerini izleme
Müşterimizin sitelerine web-vitals kitaplığını ekledikten sonra, Lighthouse'ı kullanarak donanım, ağ hızı ve kullanıcı etkileşiminin (ör. kaydırma veya tıklama) laboratuvar ortamındaki gibi tutarlı bir taban çizgisinde olmadığı gerçek ziyaretçilerden gelen gerçek cihazlarla ilgili verileri ölçebildik. Artık web sitemizi ziyaret eden kullanıcıların deneyimlerini temsil eden verilere sahip olduğumuz için bu, doğru yönde atılmış büyük bir adımdı.
En zayıf halkamıza odaklanıyoruz: Cumulative Layout Shift (CLS)
Yeni verileri analiz etmek, web sitesi hızını artırmak için yapılması gerekenler konusunda bize yeni bir bakış açısı kazandırdı. Lighthouse puanını iyileştirmek için yapılan çalışmalar sayesinde 75. yüzdelik dilimdeki LCP'miz 860 ms, aynı eşikteki FID'miz ise 10 ms'nin altındaydı. Bu nedenle, müşterilerimizin sitelerinde bu metrikler için sırasıyla% 78 ve %98'lik yüksek bir geçiş oranı elde ettik. Ancak kümülatif düzen kayması (CLS) sayıları, Lighthouse'ta alıştığımızdan oldukça farklı görünüyor. 75.yüzdelik dilimdeki CLS'miz 0,17 idi (geçmek için gereken 0,1 eşiğinin üzerinde). Bu nedenle, tüm sitelerimizde geçme oranımız yalnızca% 47 idi.
Bu metrik, genel başarı oranımızı %40'a düşürdü. Bu nedenle, bu sayıyı Ağustos 2021'in sonuna kadar% 60'ın üzerine çıkarmak için iddialı bir hedef belirlemeye karar verdik. Bunun için CLS'ye odaklanmamız gerekir.
Gerçek hayatta kullanıcılar sayfayla etkileşim kurar ve "ekranın üst kısmındaki" içeriğin ötesine geçer. Core Web Vitals, bu durumu daha iyi yakalar. Kullanıcıların site ilk yüklenirken siteyle etkileşime geçme biçimindeki değişkenlik nedeniyle CLS, laboratuvar ve saha verilerinden farklıydı.
Tüm Core Web Vitals ölçütlerini geçmek için yapılması gerekenler
Performansı iyileştirmek için deneme ve yanılma gerekir. Her deneme her zaman beklendiği gibi sonuç vermez. Ancak, hedeflerimize ulaşmamıza yardımcı olan birkaç iyileştirmeyi aşağıda bulabilirsiniz.
Resimlerin yüklenmesi için yer ayırmak, resimlerin altındaki içeriğin kaymasını önlediğinden CLS puanımızı önemli ölçüde artırdı. Bu sorunu, destekleyen tarayıcılarda CSS aspect-ratio özelliğini kullanarak giderdik. Bu özelliği desteklemeyen cihazlar için ise önbelleğe alınmış ve boyutu yalnızca birkaç bayt olan şeffaf bir yer tutucu resim yükledik. Bu sayede resim neredeyse anında yüklenir.
Bu genel resim davranışı, sunucu tarafı oluşturma sırasında görüntü alanının genişliğine ve resim en boy oranına göre nihai resim yüksekliğini önceden hesaplamamıza olanak tanıdı. Bu işlem, nihai resim için uygun şekilde dikey alan ayrılmış HTML işaretlemesiyle sonuçlandı. Görseller mobil görüntü alanlarının tam genişliğinde oluşturulduğundan bu iyileştirme özellikle mobil cihazlarda gözlemlendi.
Müşterilerimizin sitelerindeki belirli bileşenler dinamik içeriğe (ör. harici müşteri yorumlarının listesi) sahiptir ve sunucu tarafı oluşturmanın performans avantajlarından yararlanmak için saf CSS'ye dönüştürülememiştir. İçerik (ve dolayısıyla yükseklik) değişeceğinden bu alanlarda düzen değişikliklerini iyileştirmek zordur. Bu durumlarda, bileşeni belirli bileşenlerin her birinin ortalama yüksekliğinin gözlemine göre önceden belirlenmiş bir min-height uygulanmış bir kapsayıcıya sardık. İç dinamik bileşenin oluşturulması tamamlandıktan sonra min-height kaldırılır. Bu çözüm mükemmel olmasa da sayfa düzeni değişikliğini önemli ölçüde azaltmamıza yardımcı oldu.
CLS iyileştirmelerine odaklanırken LCP üzerinde çalışmaya devam ettik. Birçok web sitesinde, LCP'ye en çok katkıda bulunan unsur resimlerdir. Bu nedenle, iyileştirmeye açık bir alan olduğunu düşünüyorduk. IntersectionObserver kullanarak resimleri gecikmeli yükleme konusunda iyileştirmeler yapmıştık ancak resim boyutlarının her kesme noktası (mobil, tablet, masaüstü, büyük masaüstü) için en uygun şekilde ayarlanmadığını fark ettik. Bu nedenle, resim oluşturma kodumuzda resimleri kesme noktası başına sabitleyip ölçeklendirecek ve ardından çözünürlüğü piksel yoğunluğuna göre ölçeklendirecek şekilde güncelleme yaptık. Örneğin, bu işlem belirli bir büyük resmin boyutunu 192 KB'tan 102 KB'ya düşürdü.
Ağ bağlantısı zayıf olan cihazlarda web sitelerini hızlı bir şekilde oluşturmak için bağlantı hızına göre resim kalitesini dinamik olarak ölçeklendiren kod ekledik. Bu işlem, navigator.connection tarafından döndürülen downlink mülkü kullanılarak yapılabilir. Bu ağ koşullarına göre öğe API'miz aracılığıyla görüntü kalitesini azaltmak için 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ğimiz için bağlantıyı ve gerekli el sıkışmalarını önceden başlatmak üzere rel=preconnect kaynak ipucunu kullandı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 izin vermek için satır içi komut dosyaları içerebilecek çeşitli bölümler ekler. Bu komut dosyalarının HTML sayfasında satır içi olarak bulunması her zaman performans açısından en iyi seçenek değildir. Tarayıcının komut dosyası içeriğini eşzamansız olarak yüklemesine ve ayrıştırmasına izin vermek için bu komut dosyalarını harici hale getirmeye karar verdik. Yeni haricileştirilen komut dosyaları sayfalar arasında da paylaşılabilir. Bu, tarayıcı ve CDN önbelleğe alma şeklinde ek performans kazanımları elde etmemizi sağladı. Tarayıcının bunları daha hızlı ayrıştırması ve yürütmesi için kritik komut dosyalarını satır içi tuttuk.
Sonuçlar
CLS'ye odaklanmamız meyvesini verdi. Core Web Vitals'ı geçme oranımız yaklaşık% 40'tan neredeyse %70'e çıktı. Bu, %75'lik bir iyileşmedir.
Kullanıcılar sitelerini güncellemek ve yeniden yayınlamak için platformumuza geri geldikçe en son performans iyileştirmelerinden yararlanıyor. Sonuç olarak, aşağıdaki grafikte gösterildiği gibi "Core Web Vitals'i geçen" sitelerin sayısı giderek artıyor:
Sonuçlar
Performans iyileştirmesi yapılabilecek alanları bulmak ve ilerlemeyi başarılı bir şekilde izlemek, ölçüm için kullanılan araçlara büyük ölçüde bağlıdır. Lighthouse, "laboratuvar ortamında" sayfanın üst kısmındaki performansı ölçmek için yararlı olsa da yalnızca kullanıcı etkileşimlerinden (ör. sayfayı kaydırma) kaynaklanan performans sorunlarını doğru şekilde tespit edemiyordu.
Gerçek dünyadaki Core Web Vitals'ı meta verileriyle izlemek, iyileştirmelerimizin etkisini görselleştirmemize, hedeflememize ve ölçmemize olanak tanıdı. Core Web Vitals puanlarını iyileştirme yolculuğu, ekibin kod tabanımızda bulunan performansı düşük kalıpları tespit edip değiştirmesine olanak tanıdı. Bazen umut verici değişiklikler beklediğimiz etkiyi neredeyse hiç yaratmadı, bazen de tam tersi oldu. Dışarıda her şey yolunda gitmiyor. Bu yüzden denemeye devam etmeniz gerekiyor.