HTTP İsteklerini Azaltın

Nedir : Sayfamızda bulunan CSS dosyalarını tek bir dosya altında toplamamızı isteyen uyarıdır.

Cozum : Css dosyalarını birleştirmek.

Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yapılmalıdır.

Genel Acıklama

Bir ziyaretci web sayfalarından birini tarayıcılarına her yuklediğinde orneğin CSS dosyaları, Javascript, tasarım goruntuleri vb. gibi ek destekleyici web dosyaları da yuklenir. Bu tur bir dosya istendiğinde, tarayıcının işlemesi icin ek bir istek oluşturur. Bu isteklere HTTP istekleri diyoruz. Populer tarayıcıların coğunun etki alanı başına yaklaşık 6 paralel bağlantıya izin verdiğini biliyoruz, internet sitenizi yuklemek icin 6 veya daha fazla destekleyici dosya bulunduğunda, internet sitenizi biraz yavaşlattığını anlarsınız. Bunun nedeni, tarayıcının işlenmemiş dosyaların onceki dosyaları yuklemekle bitinceye kadar yuklenmesini beklemesi, bir yukleme gecikmesi yaratmasıdır.

Web sayfalarınız cok fazla HTTP isteğinde bulunduğunda, web sayfanızın yuklediği destek dosyalarının miktarını olabildiğince değiştirerek ve kaldırarak en aza indirmelisiniz. Bunu nasıl yapacağınızı aşağıda oğrenin:

CSS komut dosyalarınızı birleştirin ve satır ici ekleyin

Coğu web sitesi şablonu, şablonu desteklemek icin birden fazla CSS dosyası (genellikle ust bilgi ve alt bilgi) gerektirir. HTTP isteklerinin miktarını en aza indirmek icin bu dosyaları tek bir buyuk dosyayla birleştirmelisiniz. Tum dosyaları acmak ve iceriklerini tek bir dosyaya kopyalayıp yapıştırmak kadar basittir. CSS komut dosyalarının icindeki dosya yollarının doğru olduğundan emin olun.

Tum Javascriptleri birleştirin

Javascriptlerinizi satır ici yapamadığınızda ve web sitenizin yuklenmesi icin birden fazla Javascript dosyası gerektiğinde, tum Javascriptleri tek bir buyuk .js dosyasına kopyalayıp yapıştırmanız ve bu buyuk Javascript dosyasını HTML başlığından cağırmanız gerekir. HTTP isteklerini azaltmak icin, web sayfalarınızdan yuklenen Javascriptlerin miktarını en aza indirmek genellikle akıllıca bir fikirdir. Bir web sayfası ne kadar cok Javascripti yuklerse, yukarıda acıklanan nedenlerden dolayı genellikle o kadar yavaş olur. Yalnızca web sayfalarınızın gercekten ihtiyac duyduğu komut dosyalarını yukleyin.

Tasarım ve fonksiyonel goruntulerin kullanımını en aza indirin

Tasarım veya işlevsel nedenlerle kullanılan goruntu miktarını en aza indirmeyive yalnızca gercekten ozleyemediğiniz şeyleri yuklemeyi hedeflemelisiniz . Daha eski veya kotu kodlanmış tasarımlar, arka planlar, duğmeler, kenarlıklar, gezdirici efektler veya CSS yerine diğer tasarım amacları icin goruntuleri kullanır. Aynı gorsel efektler genellikle HTTP isteklerinin sayısını azaltacak kucuk CSS betikleri kullanılarak elde edilebilir. Ceşitli gorsel CSS efektleri oluşturmak icin iyi bir ucretsiz cevrimici arac olarak CSS3.0 Maker kullanabilirsiniz.

CSS image sprite kullanın

Tasarımınız icin goruntuleri kullanmaktan gercekten kacamadığınız zaman, CSS sprite'ları kullanarak bu goruntuleri bir araya getirebilir ve daha buyuk bir dosyaya kaydedebilirsiniz. Daha sonra X ve Y koordinatlarını kullanarak tek tek goruntuleri bir CSS betiğinden cağırabilirsiniz. Bu şekilde, tarayıcının birden fazla goruntu icin yalnızca bir HTTP isteği yapması gerekir. Bu CSS sprite'larını oluşturmak icin CSS Sprites Generator aracını kullanabilirsiniz. Web sitenizdeki spriteların nasıl kullanılacağına ilişkin belgeleri okuyun.

Goruntuleri Base64 koduna donuşturun

İşlevsel resimlerinizi (logonuz gibi) bir Base64 dizesine kodlayabilirsiniz; bu, temel olarak bir goruntu dosyasını komut dosyasına donuşturduğunuz anlamına gelir. Kodunuzda, resminizi goruntulemek icin orijinal resim etiketini bu kodla değiştirirsiniz. Bu şekilde web sayfalarınız daha az HTTP isteği yapar. Bunun icin Base64 Dosya Kodlayıcı aracını kullanabilirsiniz . Sadece sectiğiniz resmi secin, Base64 resim kodunuz otomatik olarak uretilecektir.

Eklenti miktarını en aza indirin

Eklentiler bir internet sitesi icin buyuk bir avantaj olabilir, ancak genellikle web sayfalarınıza calışması icin birkac internet dosyası gerektirir. Bu yuzden gercekten gerekli gorduğunuzde sadece eklentileri kullanmak onemlidir.