Büyük JavaScript kaynaklarının yüklenmesi, sayfa hızını önemli ölçüde etkiler. JavaScript'inizi daha küçük parçalara bölmek ve yalnızca bir sayfanın başlatma sırasında çalışması için gerekenleri indirmek, sayfanızın yükleme yanıt hızını büyük ölçüde iyileştirebilir. Bu da sayfanızın Sonraki Boyamaya Kadar Etkileşim (INP) değerini iyileştirebilir.
Bir sayfa büyük JavaScript dosyalarını indirirken, ayrıştırırken ve derlerken bir süre yanıt vermeyebilir. Sayfa öğeleri, sayfanın ilk HTML'sinin bir parçası oldukları ve CSS ile stilize edildikleri için görünür. Ancak, bu etkileşimli öğeleri desteklemek için gereken JavaScript'in yanı sıra sayfa tarafından yüklenen diğer komut dosyaları, bu öğelerin çalışması için JavaScript'i ayrıştırıp yürütebilir. Sonuç olarak kullanıcı, etkileşimin önemli ölçüde geciktiğini veya tamamen bozulduğunu düşünebilir.
Bu durum genellikle ana iş parçacığı engellendiği için meydana gelir. Bunun nedeni, JavaScript'in ana iş parçacığında ayrıştırılıp derlenmesidir. Bu işlem çok uzun sürerse etkileşimli sayfa öğeleri, kullanıcı girişine yeterince hızlı yanıt vermeyebilir. Bunun bir çözümü, sayfanın çalışması için gereken JavaScript'i yüklemek ve diğer JavaScript'leri daha sonra yüklenmek üzere ertelemektir. Bu işlem, kod bölme olarak bilinen bir teknikle yapılır. Bu modülde, bu iki teknikten ikincisine odaklanılmaktadır.
Kod bölme yoluyla başlangıç sırasında JavaScript ayrıştırma ve yürütme süresini azaltma
Lighthouse, JavaScript yürütme süresi 2 saniyeyi aştığında uyarı verir ve 3,5 saniyeyi aştığında başarısız olur. Aşırı JavaScript ayrıştırma ve yürütme, sayfa yaşam döngüsünün herhangi bir noktasında olası bir sorundur. Çünkü kullanıcının sayfayla etkileşim kurduğu an, JavaScript'i işlemek ve yürütmekten sorumlu ana iş parçacığı görevlerinin çalıştığı ana denk gelirse etkileşimin giriş gecikmesini artırabilir.
Ayrıca, aşırı JavaScript yürütme ve ayrıştırma, özellikle ilk sayfa yükleme sırasında sorun yaratır. Çünkü bu, sayfa yaşam döngüsünde kullanıcıların sayfayla etkileşime girme olasılığının en yüksek olduğu noktadır. Hatta yükleme duyarlılığı metriği olan Toplam Engelleme Süresi (TBT), INP ile yüksek oranda ilişkilidir. Bu da kullanıcıların ilk sayfa yüklemesi sırasında etkileşimde bulunma eğiliminin yüksek olduğunu gösterir.
Sayfanızın istediği her JavaScript dosyasının yürütülmesinde harcanan süreyi bildiren Lighthouse denetimi, hangi komut dosyalarının kod bölme için uygun olabileceğini tam olarak belirlemenize yardımcı olabileceğinden faydalıdır. Ardından, Chrome Geliştirici Araçları'ndaki kapsam aracını kullanarak bir sayfanın JavaScript'inin hangi bölümlerinin sayfa yüklenirken kullanılmadığını tam olarak belirleyebilirsiniz.
Kod bölme, bir sayfanın başlangıçtaki JavaScript yüklerini azaltabilen faydalı bir tekniktir. Bu özellik, bir JavaScript paketini iki parçaya bölmenize olanak tanır:
- Sayfa yüklenirken gereken JavaScript'tir ve bu nedenle başka bir zamanda yüklenemez.
- Daha sonra yüklenebilen JavaScript'ler. Bu JavaScript'ler genellikle kullanıcı sayfadaki belirli bir etkileşimli öğeyle etkileşime geçtiğinde yüklenir.
Kod bölme işlemi, dynamic import() söz dizimi kullanılarak yapılabilir. Bu söz dizimi, başlangıç sırasında belirli bir JavaScript kaynağı isteyen <script> öğelerinin aksine, sayfa yaşam döngüsünün daha sonraki bir noktasında JavaScript kaynağı isteğinde bulunur.
document.querySelectorAll('#myForm input').addEventListener('blur', async () => {
// Get the form validation named export from the module through destructuring:
const { validateForm } = await import('/validate-form.mjs');
// Validate the form:
validateForm();
}, { once: true });
Yukarıdaki JavaScript snippet'inde validate-form.mjs modülü yalnızca kullanıcı bir formun <input> alanlarından herhangi birini odak dışına aldığında indirilir, ayrıştırılır ve yürütülür. Bu durumda, formun doğrulama mantığını yönlendirmekten sorumlu JavaScript kaynağı, yalnızca gerçekten kullanılma olasılığı en yüksek olduğunda sayfayla etkileşime girer.
webpack, Parcel, Rollup ve esbuild gibi JavaScript paketleyiciler, kaynak kodunuzda dinamik bir import() çağrısıyla karşılaştıklarında JavaScript paketlerini daha küçük parçalara ayıracak şekilde yapılandırılabilir. Bu araçların çoğu bunu otomatik olarak yapar ancak özellikle esbuild'de bu optimizasyonu etkinleştirmeniz gerekir.
Kod bölme ile ilgili faydalı notlar
Kod bölme, ilk sayfa yükleme sırasında ana iş parçacığı çekişmesini azaltmak için etkili bir yöntem olsa da JavaScript kaynak kodunuzu kod bölme fırsatları için denetlemeye karar verirseniz birkaç şeyi aklınızda bulundurmanız gerekir.
Mümkünse paketleyici kullanın
Geliştiricilerin geliştirme sürecinde JavaScript modüllerini kullanması yaygın bir uygulamadır. Bu, kodun okunabilirliğini ve sürdürülebilirliğini iyileştiren mükemmel bir geliştirici deneyimi geliştirmesidir. Ancak JavaScript modüllerini üretime gönderirken ortaya çıkabilecek bazı ideal olmayan performans özellikleri vardır.
En önemlisi, kod bölme işlemi uygulamayı planladığınız modüller de dahil olmak üzere kaynak kodunuzu işlemek ve optimize etmek için bir paketleyici kullanmanız gerekir. Paketleyiciler, yalnızca JavaScript kaynak koduna optimizasyon uygulamakla kalmaz, aynı zamanda paket boyutu gibi performansla ilgili hususları sıkıştırma oranıyla dengelemede de oldukça etkilidir. Sıkıştırma etkinliği paket boyutuyla birlikte artar ancak paketleyiciler, komut dosyası değerlendirmesi nedeniyle uzun görevlere yol açacak kadar büyük olmamalarını da sağlamaya çalışır.
Paketleyiciler, ağ üzerinden çok sayıda paketsiz modül gönderme sorununu da önler. JavaScript modüllerini kullanan mimariler genellikle büyük ve karmaşık modül ağaçlarına sahiptir. Modül ağaçları paketten çıkarıldığında her modül ayrı bir HTTP isteğini temsil eder ve modülleri paketlemezseniz web uygulamanızdaki etkileşim gecikebilir. Büyük modül ağaçlarını mümkün olduğunca erken yüklemek için <link rel="modulepreload"> kaynak ipucunu kullanmak mümkün olsa da yükleme performansı açısından JavaScript paketleri hâlâ tercih edilir.
Derleme akışını yanlışlıkla devre dışı bırakmayın
Chromium'un V8 JavaScript motoru, üretim JavaScript kodunuzun mümkün olduğunca verimli bir şekilde yüklenmesini sağlamak için kullanıma hazır bir dizi optimizasyon sunar. Bu optimizasyonlardan biri akış derlemesi olarak bilinir. Bu optimizasyon, tarayıcıya aktarılan HTML'nin artımlı ayrıştırılması gibi, ağdan geldikçe aktarılan JavaScript parçalarını derler.
Chromium'da web uygulamanız için derleme akışının gerçekleşmesini sağlamanın birkaç yolu vardır: