Google’dan 6 JavaScript Optimizasyon İpuçları
Tuğçe 21 Mayıs 2022Google’dan yeni bir videoda, Geliştirici Alan Kent, web sitenizin performansını iyileştirmek için JavaScript’i optimize etmenin altı yolunu paylaşıyor. Kent, JavaScript’in neden olduğu yaygın performans sorunlarını tanımlar ve bunları düzeltmek için atabileceğiniz adımların üzerinden geçer.
1. JavaScript Dosya Proliferasyonundan Kaçının
Sitenizdeki JavaScript dosyalarının sayısının artmasını önleyin. Özellikle her UI bileşeni ayrı bir dosyadaysa, dikkatli olmazsanız JavaScript dosyalarının sayısı aşırı hale gelebilir. Bir tarayıcının indirmesi gereken JavaScript dosyalarının sayısını azaltmak, web sitesi performansını iyileştirebilir.
Nasıl Tespit Edilir
PageSpeed Insights raporunun Fırsat bölümü, sitenize özel önerileri listeler. İstek sayılarını düşük ve aktarım boyutlarını küçük tutma önerisine bakın . JavaScript dosyaları da dahil olmak üzere istenen kaynak türlerinin sayısı ve boyutlarının bir özeti için öneriye tıklayın.
Nasıl düzeltilir
Bu sorunu birkaç farklı yolla çözebilirsiniz. Google’ın önerdiği seçeneklerden biri, indirilecek tek, daha büyük bir dosyaya sahip olmak için daha küçük dosyaları bir araya getirmektir. Başka bir düzeltme, dosyaları birleştirmeden performansı artırabileceğinden sitenizde HTTP2’yi desteklemektir.
2. Aşırı DNS Aramalarından Kaçının
Bir kullanıcının sitenizi ilk ziyaretini yavaşlatabileceğinden, referans JavaScript dosyaları için aşırı sayıda DNS aramasından kaçının.
Nasıl Tespit Edilir
PageSpeed Insights, JavaScript yürütme süresini azaltma gibi bölümlerde URL’lerde kullanılan alan adlarının bir listesini size gösterebilir . Chrome Geliştirici Araçları’ndaki ağ sekmesi, başvurulan tüm alan adlarını görmenin başka bir yoludur.
Nasıl düzeltilir
Google, DNS aramalarının sayısını azaltmak için harici olarak referans verilen JavaScript dosyalarının bir kopyasını kendi sitenizde barındırmayı düşünmenizi önerir.
3. Verimsiz JavaScript’i Ortadan Kaldırın
Web sayfalarını yavaşlatabileceğinden ve kötü kullanıcı deneyimlerine yol açabileceğinden, verimsiz JavaScript’i azaltın veya ortadan kaldırın.
Nasıl Tespit Edilir
Google’ın PageSpeed Insights raporunda aşağıdaki fırsatları arayın:
- JavaScript yürütme süresini azalt : Bu, JavaScript kodunu ayrıştırmak veya yürütmek için büyük miktarda CPU zamanının harcandığı komut dosyalarını bildirir.
- Oluşturmayı engelleyen kaynakları ortadan kaldırın : Bu, sayfanın oluşturulabilmesi için çalıştırılabilen ve kullanıcının herhangi bir içeriği görmek için daha uzun süre beklemesine neden olan JavaScript’i içerir.
- Document.write : Yanlış kullanılırsa bu, diğer işlemlerin gerçekleşmesini engellediği için sayfada önemli performans sorunlarına neden olabilir.
- Pasif dinleyiciler kullanmaz : Pasif bir dinleyici, tarayıcıya JavaScript kodunun kaydırmayı önleyen bir işlevi çağırmayacağına dair bir ipucudur ve JavaScript hala yürütülürken bile tarayıcının sayfayı kaydırmasına izin verir.
Nasıl düzeltilir
Verimsiz JavaScript’i ortadan kaldırmak, Google’ın videosunun kapsamını aşan daha büyük bir konudur. Çözümler genellikle JavaScript kodunu farklı şekilde yazmayı içerir. Teknikler, mevcut kodun profilini çıkarmayı ve daha güçlü bileşenlerin kendi küçültülmüş sürümlerini yazmayı içerir.
4. Kullanılmayan JavaScript’i Ortadan Kaldırın
Kullanılmayan JavaScript de verimsizdir, ancak Google, bu sorunun kendi kendine söylenecek kadar yaygın olduğunu söylüyor. Kodun siteler arasında yeniden kullanılması, gerekli olmayan JavaScript’in dahil edilmesine yol açabilir. Hiçbir zaman çağrılmayan JavaScript’in yine de web tarayıcısı tarafından indirilmesi ve ayrıştırılması gerekir, bu da kaynak israfıdır.
Nasıl Tespit Edilir
Google’ın PageSpeed Insights raporunda aşağıdaki fırsatları arayın:
- Kullanılmayan JavaScript’i azalt : Bu, bir sayfanın yüklenmesinin bir parçası olarak yürütülmeyen JavaScript’i gösterir.
- Muazzam ağ yüklerinden kaçının : Bu, büyük kitaplık indirmelerini çağırarak iyileştirilecek alanları belirler.
- Ana iş parçacığı çalışmasını en aza indirin : JavaScript’i ayrıştırmak, derlemek ve yürütmek için harcanan zamanı içerir.
Nasıl düzeltilir
Google, hiçbir zaman çağrılmayan ve silinmesi güvenli olan JavaScript’i tanımlamak için kullanılabilecek, ağaç sallama adı verilen bir teknik önerir.
5. JavaScript Dosyalarını Sıkıştırın
İndirirken JavaScript dosyalarınızın sıkıştırıldığından emin olun. Web tarayıcısı dosya içeriğini açmak için daha fazla CPU zamanı harcamak zorundayken, Google, sıkıştırmanın genel bir kazanç olduğunu söylüyor.
Nasıl Tespit Edilir
PageSpeed Insights raporu, sıkıştırılmaktan fayda sağlayabilecek JavaScript dosyalarını vurgulayan bir bölüme sahiptir. Metin sıkıştırmayı etkinleştir seçeneğine tıklamak , hangi dosyaların sıkıştırılmasının önerildiğini size gösterecektir.
Nasıl düzeltilir
Çoğu web tarayıcısı veya içerik yönetim sistemi, uygun şekilde yapılandırılırsa indirmeleri sıkıştırmak için yerleşik desteğe sahiptir.
6. JavaScript Kodu İçin Uygun Önbellek Sürelerini Ayarlayın
JavaScript dosyalarınızın uygun önbellek sona erme süresi başlıklarıyla döndürülüp döndürülmediğini kontrol edin. Bu, tarayıcıların önbelleğindeki JavaScript dosyalarının güncel olup olmadığını kontrol etme ek yükünden kaçınmasına yardımcı olur ve bu da performansı artırır.
Nasıl Tespit Edilir
Chrome Geliştirici Araçları’nın Ağ Oluşturma sekmesinde , indirilen JavaScript dosyaları için HTTP yanıt başlıklarını kontrol edebilirsiniz. Önbellek Kontrolü gibi başlıkları arayın . PageSpeed Insights’ta Statik varlıkları verimli bir önbellek ilkesiyle sun başlıklı fırsatı arayın . Üzerine tıklamak, JavaScript dosyaları da dahil olmak üzere, uygun şekilde ayarlanmış önbellek başlıklarından yararlanabilecek kaynakların bir listesini gösterecektir.
Nasıl düzeltilir
Yaygın olarak kullanılan JavaScript dosyalarının önbelleğe alınmasını geliştirmenin bir yolu, paylaşılan bir genel konumdaki dosyalara referans vermektir. Bir kullanıcı aynı JavaScript dosyasını yeniden kullanan siteleri ziyaret ederse, tarayıcı dosyanın önceden indirilmiş kopyasını kullanabilir, bu da performansı artıracaktır.
Google’dan 6 JavaScript Optimizasyon İpuçları
