The Economic Times web sitesinde Önemli Web Verileri'nin optimize edilmesi, kullanıcı deneyimini önemli ölçüde iyileştirdi ve web sitesinin tamamındaki hemen çıkma oranını önemli ölçüde azalttı.
İnternet hızlarının günden güne iyileşmesiyle birlikte kullanıcılar web sitelerinin hiç olmadığı kadar hızlı yanıt vermesini ve davranmasını bekliyor. The Economic Times'ta aylık 45 milyondan fazla etkin kullanıcıya yanıt veriliyor. Alan genelinde, AMP ve AMP olmayan sayfalarda Önemli Web Verileri için optimizasyon yaparak hemen çıkma oranlarını önemli ölçüde azaltmayı ve okuma deneyimini iyileştirmeyi başardık.
Etkiyi Ölçme
Kullanıcılarımıza mükemmel bir okuma deneyimi sunma konusunda en çok önem taşıyan Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) özelliklerine odaklandık. The Economic Times, aşağıda açıklanan çeşitli performans düzeltmelerini uyguladıktan sonra Chrome Kullanıcı Denemeleri (CrUX) rapor metriklerini birkaç ay içinde önemli ölçüde iyileştirmeyi başardı.
Genel olarak CLS değeri 0,25'ten 0,09'a% 250 iyileşti. 4,5 saniyeden 2,5 saniyeye genel olarak LCP iyileştirildi.
Ayrıca, "Yetersiz" aralığındaki LCP değerleri Ekim 2020-Temmuz 2021 arasında% 33 oranında azaldı:
Ayrıca, aynı zaman aralığında "Zayıf" aralığındaki CLS değerleri %65, "İyi" aralığındaki CLS değerleri ise% 20 yükseldi:
Bunun sonucunda, daha önce Core Web Vitals eşiklerini karşılamayan Economic Times, kaynağı genelinde Önemli Web Verileri eşiklerini geçti ve hemen çıkma oranlarını toplamda% 43 düşürdü.
LCP nedir ve nasıl iyileştirildi?
En büyük öğe, kullanıcı deneyimini iyileştirmek ve yükleme hızını belirlemek açısından en alakalı öğedir. İlk Zengin İçerikli Boyama (FCP) gibi performans metrikleri yalnızca sayfa yüklemedeki ilk deneyimi yakalar. Öte yandan LCP, kullanıcının görebileceği en büyük resim, metin veya video bölümünün oluşturma süresini bildirir.
Daha hızlı bir DNS sağlayıcıya geçmenin ve resimleri optimize etmenin yanı sıra LCP'yi iyileştirmek için uyguladığımız bazı teknikleri aşağıda bulabilirsiniz.
Kritik isteklere öncelik verme
Tüm modern tarayıcılar eşzamanlı istek sayısını sınırlandırdığından geliştiricilerin öncelikle kritik içeriği yüklemeye öncelik vermesi gerekir. Karmaşık bir web sayfasını yüklemek için başlık öğeleri, CSS, JavaScript kaynakları, hero resim, makale gövdesi, yorumlar, ilgili diğer haberler, altbilgi ve reklamlar gibi öğeleri indirmemiz gerekir. LCP için hangi öğelerin gerekli olduğunu değerlendirdik ve LCP'yi iyileştirmek için önce bu öğelerin yüklenmesini tercih ettik. Ayrıca, ilk sayfa oluşturma işleminin bir parçası olmayan çağrıları da erteledik.
Metin görünümü
Hem LCP hem de CLS'yi etkilediği için font-display mülküyle denemeler yaptık. font-display: auto; uygulamasını denedik ve ardından font-display: swap; sürümüne geçtik. Bu şekilde, metin başlangıçta en iyi eşleşen ve mevcut yazı tipiyle oluşturulur, ardından indirildiğinde yazı tipine geçer. Bu da metnimizi ağ hızından bağımsız olarak hızlı bir şekilde oluşturmamızı sağladı.
Daha İyi Sıkıştırma
Brotli, Gzip ve Deflate'e ek olarak Google tarafından geliştirilen alternatif bir sıkıştırma algoritmasıdır. Yazı tiplerimizi ve öğelerimizi değiştirdik ve sunucu sıkıştırmasını Gzip'ten Brotli'ye dönüştürerek daha küçük bir ayak izi elde ettik:
- JavaScript dosyaları Gzip ile karşılaştırıldığında% 15 daha küçüktür.
- HTML dosyaları Gzip'le karşılaştırıldığında% 18 daha küçüktür.
- CSS ve yazı tipi dosyaları, Gzip'tekinden% 17 daha küçüktür.
Üçüncü taraf alanlarına önceden bağlanma
Yine de değerli CPU zamanı kullanabildiği ve özellikle güvenli bağlantılarda diğer önemli kaynakları geciktirebileceği için preconnect dikkatli kullanılmalıdır.
Ancak üçüncü taraf alanında bir kaynak için getirmenin gerçekleşeceği biliniyorsa preconnect kullanmak uygundur. Bu durum yalnızca yüksek trafik alan bir web sitesinde ara sıra yaşanıyorsa preconnect gereksiz TCP ve TLS çalışmasını tetikleyebilir. Bu nedenle dns-prefetch, DNS aramalarını önceden yapmak isteyen üçüncü taraf kaynakları (ör. sosyal medya, analizler vb.) için daha uygun olmuştur.
Kodu parçalara ayırın
Sitenin başlığında yalnızca iş mantığının önemli bir parçasını içeren veya ekranın üst kısmının oluşturulması için kritik olan kaynakları yükledik. Ayrıca kod bölme yöntemiyle kodumuzu parçalara ayırdık. Bu da sayfa LCP'sini daha da iyileştirmemize yardımcı oldu.
Daha iyi önbelleğe alma
Tüm kullanıcı arabirimi rotaları için önbellekten şablon sunan bir Redis katmanı ekledik. Bu, sunucudaki hesaplama süresini kısaltır ve her istekte tüm kullanıcı arayüzünü oluşturur, böylece sonraki isteklerde LCP'yi azaltır.
LCP Hedeflerini ve başarılarını özetleme
Ekip, optimizasyon projesine başlamadan önce LCP puanını 4, 5 saniyede (CrUX rapor alan verilerine göre kullanıcılarının 75.yüzdelik dilimi için) karşılaştırdı. Optimizasyon projesinden sonra bu süre 2, 5 saniyeye düşürüldü.
CLS nedir ve nasıl iyileştirdik?
Bir web sitesine göz atarken sayfa içeriğinin beklenmedik şekilde hareket ettiğini hiç fark ettiniz mi? Bunun bir nedeni, sayfada bilinmeyen boyutlarla medyanın (resimler, videolar, reklamlar vb.) eşzamansız olarak yüklenmesidir. Medya kaynakları yüklenir yüklenmez sayfanın düzenini değiştirir.
CLS'yi iyileştirmek için aldığımız önlemleri The Economic Times web sitesinde anlatacağız.
Yer tutucuları kullanma
Reklam kitaplığı yüklendiğinde ve sayfa reklamları oluştururken düzen kaymalarını önlemek amacıyla, bilinen boyutlardaki reklam birimleri ve medya öğeleri için stil özellikli bir yer tutucu kullandık. Bu, reklam için alan ayrılarak düzen kaymalarının önlenmesini sağlar.
Tanımlanan kapsayıcı boyutları
DOM öğelerinin kullanılabilir olduklarında tarayıcı motorunun genişliğini ve yüksekliğini hesaplamasına gerek kalmaması amacıyla, tüm görüntüler ve kapsayıcılar için açık boyutlar belirttik. Bu, düzende gereksiz kaymaların ve ekstra boyama işlemlerinin önüne geçmiştir.
CLS hedeflerini ve başarılarını özetleme
Ekip, optimizasyon projesine başlamadan önce CLS puanını 0,25 olarak karşılaştırdı. Reklam maliyetlerini %90 oranında önemli ölçüde azaltarak 0,09'a indirebildik.
First Input Delay (FID) nedir ve nasıl iyileştirdik?
İlk Giriş Gecikmesi, bir web sitesinin kullanıcı girişine yanıt verme durumunu izleyen metriktir. Düşük bir FID puanının birincil nedeni, tarayıcının ana iş parçacığını meşgul edecek ağır JavaScript çalışmasıdır. Bu da kullanıcı etkileşimlerini geciktirebilir. FID'yi birkaç yönden iyileştirdik.
Uzun JavaScript görevlerini ayırın
Uzun görevler 50 milisaniye veya daha uzun süren görevlerdir. Uzun görevler, tarayıcının ana ileti dizisini kaplar ve kullanıcı girişine yanıt vermesini engeller. Uzun süren görevleri kullanıcı talebi üzerine mümkün olduğunca küçük görevlere böldükten sonra JavaScript şişmesi azalttık.
Kullanılmayan JavaScript'i erteleyin
Sayfanın daha duyarlı olmasını sağlamak için sayfa içeriğine, analizler gibi üçüncü taraf komut dosyalarına göre öncelik verdik. Ancak bazı kitaplıklarda, kullanıcı yolculuğunu doğru bir şekilde izleyebilmek için <head> dokümanına yüklenmeleri gerektiğinden belirli sınırlamalar vardır.
Çoklu dolguları azalt
Tarayıcılar modern API'leri desteklediğinden ve daha az kullanıcı Internet Explorer gibi eski tarayıcıları kullandığından, belirli çoklu dolgulara ve kitaplıklara olan bağımlılığımızı azalttık.
Reklamları geç yükle
Ekranın alt kısmındaki reklamları geç yüklemek, ana ileti dizisi engelleme süresinin kısalmasına ve böylece İGG'nin iyileştirilmesine yardımcı oldu.
FID hedeflerini ve başarılarını özetleme
Rutin denemelerde FID değerimizi bugün 200 ms'den 50 ms'nin altına indirebildik.
Regresyonları önleme
The Economics Times, sayfa performansı gerilemelerini önlemek için üretimde otomatik performans kontrolleri kullanıma sunmayı planlıyor. Üretim dallarında regresyonları önlemek amacıyla laboratuvar testlerini otomatikleştirmek için Lighthouse-CI'yı değerlendirmeyi planlıyorlar.