3rd party javascriptlerin daha performansli çalistirilmasi

Tüm kodunuzu optimize ettiniz, cssleri minify ettiniz, fazlalık jsleri çikardınız ancak siteniz hala çok yavaş yükleniyor olabilir. Sayfaları yavaşlatan performans sorunları genellikle üçüncü parti script dosyalarindan kaynaklanır: reklamlar, analizler, sosyal medya butonlari vb. için siteye eklediğimiz scriptler performansı olumsuz etkileyebilir.

3rd part scriptler web'i daha dinamik, etkileşimli ve birbirine bağlı hale getiren çok kullanışlı işlevler sagğar. Bu komut dosyalari, web sitenizin işlevselligi için çok önemli olabilir. Ancak bu scriptler, bir yandan değer katarken diğer yandan birçok riskle birlikte gelir.

Üçüncü parti scriptler konusunda neden dikkatli olmaniz gerekiyor?
1-Performans sorunu olabilir
2-Gizlilik sorunu olabilir
3-Güvenlik sorunu olabilir
4-Sizin haberiniz olmadan değişebilir
 

Üçüncü taraf komut dosyalariyla ne demek istiyoruz?


Sosyal paylaşım butonları (ör. Twitter, Facebook, G +)

Video oynatıcılar (ör. YouTube, Vimeo)

Reklam iç çerçeveleri

Analiz ve metrik komut dosyalari (site istatistikleri)

Yardimcı kütüphaneler(ör. Tarih biçimlendirme, animasyon, grafik vb.)
 

 Siteniz tarafından hangi üçüncü taraf komut dosyalarinın yüklendiğini ve performans üzerindeki etkilerinin ne oldugunu bilmiyorsaniz ücretsiz web hiz testi araçları, Chrome DevTools, PageSpeed, insights ve WebPageTest gibi araçları kullanabilirsiniz. Bu araçlar, siteniz tarafindan kaç tane üçüncü parti script yüklendigini ve hangilerinin yüklenmesinin çok zaman aldığını size söyleyebilecek bilgiler görüntüler.

https://www.webpagetest.org/ adresinden site url'ini girerek test edelim;

Request ve byte karşılıkları


Sitedeki 3.parti jsler.

Şimdi sayfanıza video yerlestirmenize olanak taniyan YouTube video oynatici yerlestirme scripti üzerinden örnek yapalım

Bu şekildeki kodu chrome tarayıcısında açalım, f12 tuşuna basarak developer tool'u açalım,

Performans sekmesine gelip yenileme butonuna tıklayalım,

Şimdi koda şu etiketlerden 

rel="dns-prefetch"

rel="preconnect"

birini ekleyip sonuca bakalım.

Görüldüğü gibi süreler hayli düşmüş