Sonuçları görmek ve/veya aramayı sonlandırmak için "esc" tuşuna basın.

Sitenizin Performansını Artırmak İstiyor Musunuz?

Pagespeed Insights’ın güncellenmesi ile birlikte site sahipleri yeni gelen maddelere göre sitelerini optimize etmeye başladı. Optimizasyon konusunda yeterli bilgiye sahip olmayan kullanıcılar ise ne yapacağından habersiz beklerken, Google’ın hazırladığı rehber sayfası hızır gibi yetişti. Sizde bu konuda kendinizi yetersiz görüyorsanız, sitenizin performansını artırmak için neler yapabileceğimize bakalım 💪

Sitenizin Performansını Ölçün

Sitenizin performansını ölçmek için Pagespeed Insights ve/veya Google Lighthouse kullanabilirsiniz. Pagespeed Insights, hiç bir şey indirmenize gerek kalmadan, sitenizin performansını ölçen bir Google aracıdır. Lighthouse ise Chrome’a özel yapılmış bir eklentidir. Sitenizi daha detaylı inceler ve buna doğru orantılı olarak, daha detaylı bir rapor sunar.

Resimlerinizi Optimize Edin

  1. Görüntüleri sıkıştırmak için Imagemin‘i kullanın
  2. Sayfalarınızın daha hızlı yüklenebilmesi için GIF’lerden kaçının
  3. Lazy Load kullanın
  4. Resimleri doğru boyutlarda sunun
  5. WebP resimler kullanmaya başlayın

JavaScript’inizi Optimize Edin

  1. PRPL ile anlık yükleme uygulayın
  2. Yükleme hızınızı iyileştirmek için kritik verilerinizi önceden yükleyin
  3. Kullanılmayan kodları kaldırın
  4. Daha hızlı sayfa yüklemeleri modern kodlar kullanın

Yazı Tiplerinizi Optimize Edin

  1. Görünmez metinlerden kaçının

Alanlardaki Performansınıza Bakın

  1. Alandaki performansına bakmak için Chrome UX kullanabilirsiniz
  2. Veri Stüdyosundaki CrUX Gösterge Tablosunu kullanabilirsiniz
  3. PageSpeed ​​Insights’ta ki Chrome UX Raporunu kullanabilirsiniz
  4. BigQuery’deki Chrome UX Raporunu kullanabilirsiniz

Performans Bütçelerini Zorunlu Kılın

Performans bütçesi nedir?

Performans bütçesi, site performansını etkileyen metriklere uygulanan bir dizi sınırdır.

  1. Performans bütçelerini oluşturma sürecinize dahil edin
  2. Bir performans bütçenizi belirlemek için Lighthouse CI‘sini kullanabilirsiniz

Kaynak: web.dev

Yorumlar

Yorum yap

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.