HTTP İsteklerini Azaltın
Nedir : Sayfamızda bulunan CSS dosyalarını tek bir dosya altında toplamamızı isteyen uyarıdır.
Çözüm : Css dosyalarını birleştirmek.
Uzman Yorumu : Yapılması geliştirme süresinde biraz zorluk oluştursa da yapılmalıdır.
Genel Açıklama
Bir ziyaretçi web sayfalarından birini tarayıcılarına her yüklediğinde örneğin CSS dosyaları, Javascript, tasarım görüntüleri vb. gibi ek destekleyici web dosyaları da yüklenir. Bu tür bir dosya istendiğinde, tarayıcının işlemesi için ek bir istek oluşturur. Bu isteklere HTTP istekleri diyoruz. Popüler tarayıcıların çoğunun etki alanı başına yaklaşık 6 paralel bağlantıya izin verdiğini biliyoruz, internet sitenizi yüklemek için 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 önceki dosyaları yüklemekle bitinceye kadar yüklenmesini beklemesi, bir yükleme gecikmesi yaratmasıdır.
Web sayfalarınız çok fazla HTTP isteğinde bulunduğunda, web sayfanızın yüklediğ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 öğrenin:
CSS komut dosyalarınızı birleştirin ve satır içi ekleyin
Çoğu web sitesi şablonu, şablonu desteklemek için birden fazla CSS dosyası (genellikle üst bilgi ve alt bilgi) gerektirir. HTTP isteklerinin miktarını en aza indirmek için bu dosyaları tek bir büyük dosyayla birleştirmelisiniz. Tüm dosyaları açmak ve içeriklerini tek bir dosyaya kopyalayıp yapıştırmak kadar basittir. CSS komut dosyalarının içindeki dosya yollarının doğru olduğundan emin olun.
Tüm Javascriptleri birleştirin
Javascriptlerinizi satır içi yapamadığınızda ve web sitenizin yüklenmesi için birden fazla Javascript dosyası gerektiğinde, tüm Javascriptleri tek bir büyük .js dosyasına kopyalayıp yapıştırmanız ve bu büyük Javascript dosyasını HTML başlığından çağırmanız gerekir. HTTP isteklerini azaltmak için, web sayfalarınızdan yüklenen Javascriptlerin miktarını en aza indirmek genellikle akıllıca bir fikirdir. Bir web sayfası ne kadar çok Javascripti yüklerse, yukarıda açıklanan nedenlerden dolayı genellikle o kadar yavaş olur. Yalnızca web sayfalarınızın gerçekten ihtiyaç duyduğu komut dosyalarını yükleyin.
Tasarım ve fonksiyonel görüntülerin kullanımını en aza indirin
Tasarım veya işlevsel nedenlerle kullanılan görüntü miktarını en aza indirmeyive yalnızca gerçekten özleyemediğiniz şeyleri yüklemeyi hedeflemelisiniz . Daha eski veya kötü kodlanmış tasarımlar, arka planlar, düğmeler, kenarlıklar, gezdirici efektler veya CSS yerine diğer tasarım amaçları için görüntüleri kullanır. Aynı görsel efektler genellikle HTTP isteklerinin sayısını azaltacak küçük CSS betikleri kullanılarak elde edilebilir. Çeşitli görsel CSS efektleri oluşturmak için iyi bir ücretsiz çevrimiçi araç olarak CSS3.0 Maker kullanabilirsiniz.
CSS image sprite kullanın
Tasarımınız için görüntüleri kullanmaktan gerçekten kaçamadığınız zaman, CSS sprite'ları kullanarak bu görüntüleri bir araya getirebilir ve daha büyük bir dosyaya kaydedebilirsiniz. Daha sonra X ve Y koordinatlarını kullanarak tek tek görüntüleri bir CSS betiğinden çağırabilirsiniz. Bu şekilde, tarayıcının birden fazla görüntü için yalnızca bir HTTP isteği yapması gerekir. Bu CSS sprite'larını oluşturmak için CSS Sprites Generator aracını kullanabilirsiniz. Web sitenizdeki spriteların nasıl kullanılacağına ilişkin belgeleri okuyun.
Görüntüleri Base64 koduna dönüştürün
İşlevsel resimlerinizi (logonuz gibi) bir Base64 dizesine kodlayabilirsiniz; bu, temel olarak bir görüntü dosyasını komut dosyasına dönüştürdüğünüz anlamına gelir. Kodunuzda, resminizi görüntülemek için orijinal resim etiketini bu kodla değiştirirsiniz. Bu şekilde web sayfalarınız daha az HTTP isteği yapar. Bunun için Base64 Dosya Kodlayıcı aracını kullanabilirsiniz . Sadece seçtiğiniz resmi seçin, Base64 resim kodunuz otomatik olarak üretilecektir.
Eklenti miktarını en aza indirin
Eklentiler bir internet sitesi için büyük bir avantaj olabilir, ancak genellikle web sayfalarınıza çalışması için birkaç internet dosyası gerektirir. Bu yüzden gerçekten gerekli gördüğünüzde sadece eklentileri kullanmak önemlidir.
Nedir : Sayfamızda bulunan CSS dosyalarını tek bir dosya altında toplamamızı isteyen uyarıdır.
Çözüm : Css dosyalarını birleştirmek.
Uzman Yorumu : Yapılması geliştirme süresinde biraz zorluk oluştursa da yapılmalıdır.
Genel Açıklama
Bir ziyaretçi web sayfalarından birini tarayıcılarına her yüklediğinde örneğin CSS dosyaları, Javascript, tasarım görüntüleri vb. gibi ek destekleyici web dosyaları da yüklenir. Bu tür bir dosya istendiğinde, tarayıcının işlemesi için ek bir istek oluşturur. Bu isteklere HTTP istekleri diyoruz. Popüler tarayıcıların çoğunun etki alanı başına yaklaşık 6 paralel bağlantıya izin verdiğini biliyoruz, internet sitenizi yüklemek için 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 önceki dosyaları yüklemekle bitinceye kadar yüklenmesini beklemesi, bir yükleme gecikmesi yaratmasıdır.
Web sayfalarınız çok fazla HTTP isteğinde bulunduğunda, web sayfanızın yüklediğ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 öğrenin:
CSS komut dosyalarınızı birleştirin ve satır içi ekleyin
Çoğu web sitesi şablonu, şablonu desteklemek için birden fazla CSS dosyası (genellikle üst bilgi ve alt bilgi) gerektirir. HTTP isteklerinin miktarını en aza indirmek için bu dosyaları tek bir büyük dosyayla birleştirmelisiniz. Tüm dosyaları açmak ve içeriklerini tek bir dosyaya kopyalayıp yapıştırmak kadar basittir. CSS komut dosyalarının içindeki dosya yollarının doğru olduğundan emin olun.
Tüm Javascriptleri birleştirin
Javascriptlerinizi satır içi yapamadığınızda ve web sitenizin yüklenmesi için birden fazla Javascript dosyası gerektiğinde, tüm Javascriptleri tek bir büyük .js dosyasına kopyalayıp yapıştırmanız ve bu büyük Javascript dosyasını HTML başlığından çağırmanız gerekir. HTTP isteklerini azaltmak için, web sayfalarınızdan yüklenen Javascriptlerin miktarını en aza indirmek genellikle akıllıca bir fikirdir. Bir web sayfası ne kadar çok Javascripti yüklerse, yukarıda açıklanan nedenlerden dolayı genellikle o kadar yavaş olur. Yalnızca web sayfalarınızın gerçekten ihtiyaç duyduğu komut dosyalarını yükleyin.
Tasarım ve fonksiyonel görüntülerin kullanımını en aza indirin
Tasarım veya işlevsel nedenlerle kullanılan görüntü miktarını en aza indirmeyive yalnızca gerçekten özleyemediğiniz şeyleri yüklemeyi hedeflemelisiniz . Daha eski veya kötü kodlanmış tasarımlar, arka planlar, düğmeler, kenarlıklar, gezdirici efektler veya CSS yerine diğer tasarım amaçları için görüntüleri kullanır. Aynı görsel efektler genellikle HTTP isteklerinin sayısını azaltacak küçük CSS betikleri kullanılarak elde edilebilir. Çeşitli görsel CSS efektleri oluşturmak için iyi bir ücretsiz çevrimiçi araç olarak CSS3.0 Maker kullanabilirsiniz.
CSS image sprite kullanın
Tasarımınız için görüntüleri kullanmaktan gerçekten kaçamadığınız zaman, CSS sprite'ları kullanarak bu görüntüleri bir araya getirebilir ve daha büyük bir dosyaya kaydedebilirsiniz. Daha sonra X ve Y koordinatlarını kullanarak tek tek görüntüleri bir CSS betiğinden çağırabilirsiniz. Bu şekilde, tarayıcının birden fazla görüntü için yalnızca bir HTTP isteği yapması gerekir. Bu CSS sprite'larını oluşturmak için CSS Sprites Generator aracını kullanabilirsiniz. Web sitenizdeki spriteların nasıl kullanılacağına ilişkin belgeleri okuyun.
Görüntüleri Base64 koduna dönüştürün
İşlevsel resimlerinizi (logonuz gibi) bir Base64 dizesine kodlayabilirsiniz; bu, temel olarak bir görüntü dosyasını komut dosyasına dönüştürdüğünüz anlamına gelir. Kodunuzda, resminizi görüntülemek için orijinal resim etiketini bu kodla değiştirirsiniz. Bu şekilde web sayfalarınız daha az HTTP isteği yapar. Bunun için Base64 Dosya Kodlayıcı aracını kullanabilirsiniz . Sadece seçtiğiniz resmi seçin, Base64 resim kodunuz otomatik olarak üretilecektir.
Eklenti miktarını en aza indirin
Eklentiler bir internet sitesi için büyük bir avantaj olabilir, ancak genellikle web sayfalarınıza çalışması için birkaç internet dosyası gerektirir. Bu yüzden gerçekten gerekli gördüğünüzde sadece eklentileri kullanmak önemlidir.
