İyi bir kullanıcı deneyimi sağlamak söz konusu olduğunda performans çok önemlidir. Akıllı telefonlar ve hızlı internet bağlantıları çağında, kullanıcıların kötü bir UX'e toleransı çok azdır veya hiç yoktur.

İlk izlenimler her şey demektir, bu nedenle sitenizin yüklenmesi gerekenden daha uzun sürerse bu, işletmeniz için bir satış veya müşteri eksikliği anlamına gelebilir.

Peki, imrenilen, yeşil, % 100 Lighthouse performans puanını nasıl elde ederiz ?

Son zamanlarda kişisel web sitem üzerinde çalışıyorum (hala beta aşamasında!). Geçen yıl projeye başladığımdan beri performansa hiç dikkat etmedim, bu yüzden doğal olarak Lighthouse geliştirici aracına rastladığımda merak ettim.

Hızlı bir test yapmaya karar verdim. Aşağıda sonuçlar vardı.

Söylemeye gerek yok, bu puanlardan memnun değildim! Özellikle performans için kaputun altında neler olup bittiğini görmek için etrafı araştırmaya başladım.

Lighthouse performans ağırlıklandırmalarına göre , Kümülatif Düzen Kayması (CLS) ve En Büyük İçerikli Boyama (LCP), performans puanımı aşağı çekiyordu. Ne oluyor?

Bu iki metriği ele alarak sitemi iyileştirmeye çalışalım.

Kümülatif Düzen Kayması (CLS)

CLS , bir sayfanın ömrü boyunca meydana gelen her beklenmedik düzen kayması için en büyük düzen kayması puanlarının bir ölçüsüdür . Bu kaymalar genellikle yazı tipi değişikliklerinden, boyutları olmayan resimlerden veya reklamlardan, yerleştirmelerden ve boyutları olmayan iframe'lerden kaynaklanır.

Hangi öğelerin CLS puanını etkilediğini bulmak için Performans sekmesine geçtim . Görünüşe göre, vardiyaya neden olan benim başlık başlığımdı.

CLS'nin gerçek zamanlı olarak gerçekleştiğini görmek için ağ sekmesindeki internet bağlantımı "Hızlı 3G" olarak yavaşlattım ve sayfamı yeniden yükledim. Görünüşe göre, başlık başlangıçta varsayılan sistem yazı tipini kullanıyordu, Times New Roman , ancak yalnızca kısa bir süre için. Sonra özel yazı tipim League Spartan devreye girdi ve yazı tipi ailesinde ani, anlık bir değişiklikle sonuçlandı.

Daha yavaş simüle edilmiş internet hızı sayesinde öncesi ve sonrası çekimlerini yakalamayı başardım. Aşağıdaki karşılaştırma:

Yazı tipindeki değişiklik, öğe boyutunda ve çevreleyen kaplarda ani bir kaymaya neden oluyordu. Boyuttaki değişiklik nispeten küçük görünse de, kullanıcı için sarsıcı bir etkiye neden olur.

Yazı tipi kaynaklı bu düzen değişikliğiyle mücadele etmenin bir yolu, bir yedek yazı tipi kullanmaktır . Sayfa, özel yazı tipinizi düzgün bir şekilde yüklemek için zaman bulamadan bu yedek yazı tipini kullanacaktır. Buradaki strateji, yedek yazı tipinin boyutunu özel yazı tipinin boyutuyla eşleşecek şekilde ayarlayarak kaymayı en aza indirmektir.

Yedek yazı tipi, Arial veya Times New Roman gibi varsayılan bir sistem yazı tipini kullanmalıdır. Yedek yazı tipini uygun şekilde boyutlandırmak için size-adjustveya gibi CSS özelliklerini kullanın .ascent-override

/* main.css */

@font-face {
  font-family: 'League Spartan';
  font-weight: 100 900;
  src: url(/assets/fonts/LeagueSpartan-VariableFont_wght.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'League Spartan-fallback';
  size-adjust: 78.5%;
  src: local('Arial');
}


/* Home.css */

h1 {
  font-family: 'League Spartan', 'League Spartan-fallback';
}

En Büyük İçerikli Boya (LCP)

LCP, görüntü alanındaki en büyük içerik öğesinin ekrana ne zaman işlendiğini ölçer. Bu, sayfanın ana içeriğinin kullanıcılar tarafından görülebildiği zamana yakındır. 4 saniyenin üzerindeki bir LCP süresi, zayıf bir derecelendirme olarak kabul edilir.

Görünüşe göre, düşük LCP puanım, özel yazı tipimle başlık başlığımla da ilgiliydi!

Uzun lafın kısası, ilk sayfa yüklememi etkileyen çok fazla özel yazı tipim ve büyük resim dosyalarım vardı. Ana sayfada, her biri 6'dan fazla büyük resim dosyası içeren iki paralaks efekt ekranım vardı. Üstelik, yüklenmesi gereken 6 farklı özel yazı tipim vardı. Yazı tipi dosyaları büyük ve pahalıdır.

Puanımı artırmak için büyük görüntü dosyalarıyla birlikte bir paralaks efekti ekranını kaldırdım. Ayrıca görüntülerimin geri kalanını görüntü sıkıştırma kullanarak ve JPEG veya PNG kullanmak yerine WEBP görüntü formatına geçerek optimize ettim.

Bu, ağ yükünden önemli ölçüde tasarruf sağladı.

Sitenizde yüksek bir ağ yükü varsa, kaynak yükleme sürelerinizi yavaş yükleme ile bölmek veya bazı güzel ama gerekli olmayan pahalı varlıkları kaldırmak mantıklı olabilir. Bir CDN'ye geçmek veya varlıkları önbelleğe almak da ilk ve sonraki işlemeleri iyileştirmenin etkili bir yoludur.

Daha Fazla Optimizasyon

Bazen harici kitaplıklar siteniz için ideal çözüm olmayabilir. Örneğin, DateTime kitaplığımı kaldırdım ve onu hafif, kendi yazdığım çözümlerle değiştirdim.

CSS efektleri ve özel bileşenler içeren kitaplıklar genellikle şişirilir. Birkaç çözümü çevrimiçi olarak araştırmayı deneyin veya uygun bir geçici çözüm bulmak için ChatGPT'den yardım isteyin. JavaScript paket boyutunu en aza indirmek, performansı artırmanın en kolay yollarından biri olduğundan, bağımlılıkları eklerken ödünleşimleri göz önünde bulundurun.

Sitem tamamlanmaktan çok uzak ve varlıklarım için bir CDN sağlayıcısına geçerek siteyi daha da optimize etmeyi umuyorum. getStaticPropsNext.js gibi bir Statik Site Oluşturma çerçevesine geçiş yapmak , istemci tarafında veri getirmeye güvenmek yerine oluşturma zamanında içeriğimi getirerek de faydalı olacaktır .

Herhangi bir temel performans ipucunuz ve püf noktanız varsa, lütfen aşağıya yorum yapın! Senden haber almak isterim.