İçindekiler
Web teknolojilerinin gelişmesi ve yaygın kullanım alanları sayesinde, JavaScriptler web sitelerinin vazgeçilmez bir parçası haline gelmiştir. JavaScriptler, hareketlilik ve görsellik açısından web sitelerine katkı sağlayarak, çeşitli amaçlar ve uygulamalar için kullanılabilirler.
Ancak, bir web sitesinin performansı sadece görsel unsurlarla sınırlı değildir. JavaScriptlerin yanlış kullanımı, aşırı yüklenmeler ve sitedeki hızın azalmasına neden olabilir. Bu nedenle, daha hızlı web siteleri oluşturmak için JavaScriptlerin daha etkin bir şekilde kullanımı önemlidir.
Bu makalede, web sitelerinin daha hızlı hale getirilmesi için JavaScriptlerin nasıl daha verimli bir şekilde kullanılabileceği açıklanacaktır.
Html içi Javascript
HTML içi JavaScript olarak da bilinen Inline JS, harici bir kaynaktan çağrılmayarak HTML koduna doğrudan <script type=”text/javascript”></script> etiketleri arasında yazılan JavaScript kodlarıdır. Bu tür kodlamalar, sitede HTML kodları gibi göründükleri için gereksiz yere yük oluşturur.
Aşağıdaki örnekte, HTML için kullanılan bir JavaScript kodu bulunmaktadır. Bu kod, sitede gösterilen bir resmin üzerine gelindiğinde resmin boyutunu değiştirir:
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1887021-5");
} catch(err) {}
</script> Bu kod, HTML dosyasının boyutunu gereksiz yere arttırdığından, daha iyi bir performans elde etmek için Inline JS kullanmaktan kaçınmak önemlidir. Bunun yerine, JavaScript kodunu <script type=”text/javascript”> ve </script> etiketleri arasında yerine getirerek sayac.js gibi ayrı bir dosyaya yerleştirebilir ve sunucuya yükleyebilirsiniz. Inline JS kodunu şu şekilde düzenleyebilirsiniz:
<script type="text/javascript" src=”/sayac.js”></script> Yukarıdaki kodu sunucuya yükledikten sonra, kodu HTML dosyasından çağırarak dışarıdan bir kaynak olarak kullanabiliriz. Bu sayede, HTML dosyasının boyutunu azaltabilir ve JavaScript kodunun harici bir kaynaktan çağrılması sayesinde sitenin tüm kaynaklarının daha hızlı bir şekilde yüklenmesini sağlayabiliriz.
Yukarıdaki örnekte kullanılan JavaScript kodu küçük olduğu için sitenin performansına etkisi sınırlı olabilir. Ancak, daha büyük boyutlardaki JavaScript kodları için bu işlemi uygulamak, site performansını önemli ölçüde artırabilir.
HTML dosyasında sadece JavaScript değil, CSS kodlarını da azaltarak sitenin performansını artırabilirsiniz. Inline CSS hakkında daha fazla bilgi için sitemizdeki makaleleri takip edebilirsiniz.
Javascript Konumlandırma
Javascriptler genellikle web sitelerinde kullanışlılık ve uygulamalar için tercih edilirken, görselliği arttırmak için de kullanılabilirler. Ancak, web sitelerinin performansını etkileyen bir faktör olduğundan, javascript kodlarının yüklenmesi ve çalıştırılması sırasında dikkatli olunmalıdır.
Web sitesi yüklendiğinde, kullanıcının ihtiyacı olmayan uygulamaların yüklenmesi zaman kaybına neden olabilir. Bu nedenle, javascript kodlarını sitenin alt kısımlarına yerleştirmek, HTML kodunun yüklendikten sonra javascript kodlarının yüklenmesini sağlayarak site açılış hızını artırabilir ve kullanıcılara daha iyi bir deneyim sunabilir.
Ancak, javascript kodlarının alt kısımlara yerleştirilmesi, kodların belirli bir sırayla yüklenmesini gerektirebilir. Ayrıca, javascript kodlarının yükleme ve çalıştırma sırasında sitede oluşabilecek hataların kontrol edilmesi de önemlidir. Bu şekilde, web sitenizin performansını artırabilir ve kullanıcıların daha iyi bir deneyim yaşamasını sağlayabilirsiniz.
Javascript Sıkıştırma – Optimize Etme
JavaScript kodları okunabilirlik ve düzenleme kolaylığı için boşluklar ve açıklamalar içerebilirler. Ancak, bu fazla boşluk ve açıklamalar kod boyutunu artırabilir ve sitenin yavaşlamasına neden olabilir. Bu nedenle, gereksiz açıklamaları kaldırmak ve boşlukları azaltmak gibi optimizasyon teknikleri kullanarak JavaScript dosya boyutunu azaltmak, sitenin daha hızlı yüklenmesini sağlar.
JavaScript kodlarının sıkıştırılması için birçok araç mevcuttur. Örneğin, xtreeme.com/javascript-optimizer gibi siteler, kullanıcıların JavaScript kodlarını sıkıştırmalarına yardımcı olur. Ancak, sıkıştırma işlemi kodun okunabilirliğini azaltabilir, bu nedenle, kodu sıkıştırırken okunabilirliği de korumak önemlidir.
