Ne anlama gelir?
Kod Bölme (Code Splitting), büyük bir JavaScript paketini parçalara ayırıp, her sayfa için yalnızca gerçekten gereken kodu yükleme tekniğidir. Kullanıcıyı devasa tek bir dosyayı beklemekten kurtarır.
Neden gerekli?
Modern JavaScript uygulamaları kolayca şişer. Tüm kodu tek dosyada göndermek, kullanıcının o sayfada hiç kullanmayacağı kodu bile indirmesine yol açar; bu da yavaşlık demektir.
Faydaları
- Daha küçük ilk yükleme boyutu
- Daha hızlı etkileşime hazır olma
- İyileşen Core Web Vitals (özellikle INP)
Ne yapmalı?
JavaScript ağırlıklı sitelerde kod bölme uygulayın; her sayfaya sadece ihtiyacı olan kodu gönderin. Kullanılmayan JavaScript'i temizlemek, algılanan hızı belirgin biçimde artırır.
Ne anlama gelir?
Kod bölme (code splitting), bir web uygulamasının büyük JavaScript kodunu, tek bir devasa dosya yerine, daha küçük parçalara (chunks) bölerek, her sayfa veya özelliğin sadece ihtiyaç duyduğu kodu yüklemesini sağlama tekniğidir. Böylece, kullanıcı bir sayfayı açtığında, tüm uygulamanın JavaScript'i değil, sadece o sayfa için gereken kod yüklenir, ve diğer kod parçaları gerektiğinde (başka bir sayfaya veya özelliğe geçildiğinde) yüklenir. Kod bölme, JavaScript ağırlıklı uygulamalarda ilk yükleme performansını iyileştiren önemli bir tekniktir.
Kod bölmenin faydaları
- Daha küçük ilk JavaScript yükü
- Daha hızlı ilk yükleme ve etkileşim
- Sadece gerekli kodun yüklenmesi
- Daha iyi Core Web Vitals
Neden önemli?
Kod bölme, modern JavaScript ağırlıklı web uygulamalarının performansı için önemli bir tekniktir; çünkü JavaScript'in ilk yükleme performansı üzerindeki olumsuz etkisini büyük ölçüde azaltır. Modern web uygulamaları (özellikle React, Vue gibi çerçevelerle geliştirilenler) genellikle büyük miktarda JavaScript kodu içerir; bu kodun tamamı tek bir devasa dosyada (bundle) toplanıp her sayfa için baştan yüklenirse, ilk yükleme çok yavaşlar, çünkü kullanıcı, henüz görmediği veya kullanmadığı özellikler için bile tüm kodu indirip işlemek zorunda kalır. JavaScript'in indirilmesi, ayrıştırılması (parse) ve çalıştırılması kaynak yoğun olduğundan, büyük bir JavaScript yükü, sayfanın etkileşimli hale gelmesini geciktirir ve performans metriklerini (özellikle Time to Interactive ve Total Blocking Time gibi) olumsuz etkiler. Kod bölme, bu sorunu çözer; büyük JavaScript kodunu, mantıklı daha küçük parçalara böler (örneğin, her sayfa veya özellik için ayrı parçalar), ve sadece o an gerekli olan kodun yüklenmesini sağlar. Böylece, kullanıcı bir sayfayı açtığında, sadece o sayfa için gereken JavaScript yüklenir (çok daha küçük bir yük), ve diğer kod parçaları, kullanıcı onlara ihtiyaç duyduğunda (başka bir sayfaya geçtiğinde veya bir özelliği kullandığında) talep üzerine (on-demand) yüklenir. Kod bölmenin faydaları birkaç açıdan öne çıkar. Birincisi, daha hızlı ilk yükleme; ilk yükte sadece gerekli kod yüklendiğinden, JavaScript yükü çok daha küçük olur, ve sayfa daha hızlı yüklenip etkileşimli hale gelir. İkincisi, verimlilik; kullanıcı hiç kullanmadığı özelliklerin kodunu indirmek zorunda kalmaz, bu da bant genişliği ve kaynak tasarrufu sağlar. Üçüncüsü, daha iyi performans metrikleri; daha küçük ilk JavaScript yükü, Core Web Vitals metriklerini (özellikle etkileşim ve engelleme ile ilgili olanları) iyileştirir. Kod bölme, genellikle modern build araçları (webpack, Vite gibi) ve çerçevelerin sunduğu özelliklerle uygulanır; bunlar, kodu otomatik veya yapılandırmayla parçalara bölmeye ve talep üzerine yüklemeye olanak tanır. Yaygın bir yaklaşım, "rota bazlı kod bölme"dir (her sayfa/rota için ayrı kod parçası), ve "bileşen bazlı kod bölme" (belirli bileşenlerin talep üzerine yüklenmesi). Kod bölmenin SEO açısından önemi, sayfa hızı ve etkileşim performansıyla olan ilişkisidir; daha hızlı yüklenen ve daha hızlı etkileşimli hale gelen sayfalar, hem daha iyi kullanıcı deneyimi sunar hem Core Web Vitals metriklerinde daha iyi performans gösterir. Kod bölme, bir uygulamanın büyük JavaScript kodunu küçük parçalara bölerek her sayfanın sadece gerekli kodu yüklemesini sağlayan bir tekniktir; ilk JavaScript yükünü azaltarak daha hızlı yükleme ve etkileşim sağlar, ve sayfa hızı ile Core Web Vitals yoluyla SEO'ya katkıda bulunan, JavaScript ağırlıklı uygulamalar için önemli bir performans tekniğidir.
Gerçek örnek
Büyük bir JavaScript uygulaması, tüm kodunu tek bir devasa dosyada yüklüyordu, bu da ilk yüklemeyi ve etkileşime kadar geçen süreyi çok uzatıyordu; kullanıcılar sayfa görünür olduktan sonra bile uzun süre etkileşim kuramıyordu. Rota bazlı kod bölme uygulandığında, her sayfa sadece kendi kodunu yükledi, ilk JavaScript yükü küçüldü, sayfalar daha hızlı yüklenip etkileşimli hale geldi ve Core Web Vitals iyileşti.
Özet
Kod bölme, bir uygulamanın büyük JavaScript kodunu küçük parçalara (chunks) bölerek her sayfanın sadece gerekli kodu yüklemesini sağlamaktır; diğer parçalar gerektiğinde talep üzerine yüklenir. İlk JavaScript yükünü azaltarak daha hızlı yükleme ve etkileşim sağlar. Modern build araçlarıyla (rota/bileşen bazlı) uygulanır; sayfa hızı ve Core Web Vitals yoluyla SEO'ya katkıda bulunur.