SEO Fiyat Hesaplama

Site Hızlandırma Teknikleri 1 – JavaScript

Javascriptler gelişen web teknolojisi ve geniş kullanım alanlarının oluşması sebebiyle web sitelerinin vazgeçilmezleri arasında yer almaktadır. Bir hareketlilik ile görselliği aynı anda yaşatan javascriptler, sitelerde pek çok farklı amaç ve uygulamalar için kullanılabilmektedir.

Bir web sitesi oluşturulurken görselliğin dışında performansa da önem verilmelidir. Sıkça kullanılmaya başlanılan javascriptler, kullanım şekilleri önemsenmediği zaman sitede aşırı yük oluşturarak siteyi fazlasıyla yavaşlatabilmektedir. Bu yazımızda, javascriptlerin daha etkin kullanılarak sitelerin nasıl daha hızlı hale getirilebileceğini anlatacağız.

SEO Hocası Blog her hafta e-postanızda. Ücretsiz abone olmak için tıklayın.

Html içi Javascript

İnline js olarak da anılan html içi javascript, harici bir kaynaktan çağırılmayarak html kod yapısı içerisine <script type=”text/javascript”></script> şeklinde yerleştirilerek sitede html kodu gibi görünen ve gereksiz yere yük olan bu tür kodlamalar için kullanılmaktadır.

Örnek olarak aşağıda html için kullanılmış bir javascript kodu bulunmaktadır.

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1887021-5");
} catch(err) {}
</script>

Bu kod, sitenin html dosyasının boyutunu gereksiz yere arttırır. <script type=”text/javascript”> ve </script> komutları arasındaki javascript kodlarını kopyalayarak sayac.js gibi bir javascript dosyası içerisine yapıştırarak sunucuya yüklüyoruz ve inline javascript kodunu aşağıdaki gibi düzenliyoruz.

<script type="text/javascript" src=”/sayac.js”></script>

Yukarıda yer alan kod ile sunucuya yüklediğimiz kodu dışarıdan bir kaynak olarak çağırıyoruz. Sonuç olarak hem html boyutunu küçültmüş oluyoruz hem de javascript kodunun harici bir kaynaktan çağırılarak site açılırken sitedeki tüm kaynakların bölüm bölüm yüklenerek daha hızlı açılmasını sağlıyoruz.

Örnek olarak belirttiğimiz javascript kodu boyut olarak küçük olduğu için sitenin yavaşlığını az etkileyecektir. Daha büyük boyutlardaki javascript kodlarına bu işlemi uyguladığımızda site hızına etkisi gözle görülür şekilde fazla olacaktır.

Html dosyanızda sadece JavaScript değil, CSS kodlarını da azaltabilirsiniz. İlerleyen zamanlarda Inline CSS makalesini sitemizde bulabilirsiniz.

Javascript Konumlandırma

Javascriptler web sitelerinde genellikle, görselliği arttırmaktan ziyade, kullanışlılık ve uygulamalarda kullanılmaktadır. Dolayısıyla bir web sitesi yüklenirken bu kullanılabilir olan uygulamalar ilk etapta gerekli olmazlar. Bu amaçla javascript kodlarını sitenin alt kısımlarına yerleştirmek, html yüklendikten sonra javascriptlerin yüklenmesini sağlayacak ve sitenin daha hızlı açılması izlenimi elde edilecektir.

Javascript Sıkıştırma – Optimize Etme

Javascriptler yazılırken okuma ve düzenleme kolaylığı ön planda tutulur. Buna göre kodlar arasında boşluklar, boş satırlar fazlasıyla yer alır. Bu boşluk ve javascript kod yapısına fayda sağlamayan açıklamaların oratadan kaldırılması javascript dosya boyutunu azaltacak ve daha hızlı yüklenmesini sağlayarak siteyi hızlandıracaktır.

Javascript kodlarını sıkıştırmak için aşağıda yer alan siteyi kullanabilirsiniz.

xtreeme.com/javascript-optimizer

SEO Hocası
SEO Hocası
8 Mart 2010

Site Hızlandırma Teknikleri 1 – JavaScript için Yorumlar

  • murat yılmaz
    Murat Yılmaz 15 Mayıs 2015, 14:07

    Selamlar,

    Ben W3 total cache kullanıyorum. js ve css minify de sorun yok ama html minify yaptığımz aman site kayıyor. Sorun ne olabilir sizce ?

  • Ulaş Can Delı Chasan
    Ulaş Can Delı Chasan 1 Aralık 2014, 23:34

    Biraz işe yarıyor gibi… ama daha da yeni teknikler bulmak lazım bence
    teşekkürler emeğiniz için…

  • Mert
    Mert 24 Ekim 2014, 16:47

    Çok yararlı bilgi hocam teşekkürler yazılarınızın devamını bekliyoruz site cok güzel. emege saygı 🙂

  • Levent Uzunlar
    Levent Uzunlar 10 Şubat 2013, 19:04

    Java için harici dosyadan çağırma siteyi hızlandırdı. Fakat birden fazla (dört) java dosyasını nasıl birleştirebilirim. Her scrippt için id no vererek tek dosya çağırmak mümkün mü ya da ne yapmak gerek. Html/css site için.

  • Raif Anıl Özbey
    Raif Anıl özbey 17 Eylül 2012, 21:09

    blogger için ne yapmalıyız bana yardım edebilirmisniz e mailime bilgi verirseniz sevinirim

  • Ali Aydın Esgin
    Ali Aydın Esgin 18 Ağustos 2012, 22:32

    SEOhocası temasıda dahil wordpressde

    sayfanın yavaşlamasına neden oluyor, bu konuda önerebileceğiniz bir çözüm var mı

  • Erdem
    Erdem 16 Temmuz 2012, 14:23

    Merhaba, Sitenin daha hızlı yüklenmesi için sayfanın alt kısmına yerleştirin demişsiniz. Tam olarak nereye yerleştirmeli? zhead> etiketleri arasından çıkarıp sayfanın sonunda etiketinin hemen öncesine ve sonrasına koyayı denedim. Ancak bu şekilde yaptığımda sayfada herşey yüklendi ama js nin işlevi çalışmadı. Kitabınızda da net bir konum belirtilmemiş. Yardımcı olursanız sevinirim. Tşk.

  • yusuf
    Yusuf 29 Mayıs 2012, 03:10

    eline sağlık hocam iyi olmuş bide css boyutu ufaltmak için çalışma yaparsanız iyi olur kaliteli bi makale bulamadım o konuda

  • Sezer Pamukçu
    Sezer Pamukçu 9 Mayıs 2012, 19:10

    teşekkürler bende sitemdeki javascript dosyalarını optimize ettim verdiğiniz site ile gerçekten de açılışı hızlandı.

  • Gülben Yayla
    Gülben Yayla 8 Aralık 2010, 16:58

    merhaba;

    bende sizin yaptığınız gibi anasayfayı minify html yapmak istiyorum. Siz nasıl yaptınız acaba?

    Saygılar

    • Kaan Gülten
      Kaan Gülten 8 Aralık 2010, 17:22

      merhaba tercan, site kodlarındaki boşlukları azaltıp, mümkün olduğunca satırları birleştirebilirseniz ve urlleri kısaltabilirseniz minimuma düşecektir.

  • Zeki
    Zeki 7 Ekim 2010, 19:26

    Faydalı bir makale olmuş. Kaynak kodların azalması, sitenin hızlı açılması gibi etkenler için yararlı bir uygulama. SEO puanını olumlu yönde etkiler.

Site Hızlandırma Teknikleri 1 – JavaScript için Cevap Yaz