Base64 ve Img hız testi

Merhaba Arkadaşlar,

Sabah sabah nerden aklıma geldiyse (ÖFÖ) web sitelerimize eklediğimiz resimleri hangi metod(img  tagı olarak veya base64) ile yüklersek hız kazanırız.

Şunu belirtmek isterim ki bu test sonuçları istatiksel bir veri değildir, zaman kısıtlı olduğu için bir kaç kere denenmiş ve sonuçlar alınmıştır.

İnline style olarak yazdığım html aşağıdadır.

Test 1

Test 1’in Chrome tarayıcısı cevapları aşağıdadır.
text1 chrome

 

Chorme test sonuçlarına göre a.jpg 34 Ms, a.jpg’nin base64’ü 1 MS de yüklendi.

Test 1’in Webpage test sonuçları (Ekran görüntüsü) :

 

webpagetest

 

Test 2

Test 2’de div ile img satırlarının yerleri değiştirilmiştir.

test 2 chrome

Chorme test sonuçlarına göre a.jpg 48 Ms, a.jpg’nin base64’ü 1 MS de yüklendi.

Test 2’in Webpage test sonuçları (Ekran görüntüsü) :

webpagetest2

 

Test 3

Sadece div ve base64 kullanılmıştır, document complete süreleri karşılaşılmaktadır.

http://www.webpagetest.org/result/130109_BJ_A8E/

Test sonucu 1.066Ms

webpagetest3

 

Test 4

Sadece  img kullanılmıştır

http://www.webpagetest.org/result/130109_7H_AN6/

Test sonucu 1.139Ms

webpagetest4

 

Şunu belirtmek isterim ki chrome her zaman tutarlı sonuçlar vermemektedir. Bu test inline-style olarak jpg resim ile yapılmıştır.

Yararlı linkler

 

Resmi base64’e çevirmek

“Base64 ve Img hız testi” üzerine 11 yorum

  1. 3MB bir imagenin kalitesini düşürmeden ve performansı çok etkilemeden kullanmam gerekti. Bir çok işlemleri uyguladığımda istenilen sonuça malesef varamamıştım. Taki bu konuya twitter’da denk gelince denemekte fayda var diyip işlemleri uyguladım. İşlemlerden sonra test aşamasında istenilen sonucu almıştık, görüntü kalitesini bozmadan ve performansı etkilemeden işlemimiz başarılı olmuştu.

    Bu nedenden dolayı bu bilgiyi paylaştığınız için teşekkürü bir borç bilirim. Emeğinize sağlık…

  2. base64’ün img den hızlı olmasını sağlayan nedir.
    Benim bildiğim base64 şifreleme tekniğidir. resmi şifreleyince performansa nasıl etki yapabilir ki…

  3. @Sinan, mantıken veri işlenmesinin üstüne resim olarak çağrıldığında, resim için sunucuya ayrı bir istek yapılıyor, sunucu resmin olup olmadığını kontrol ediyor varsa resmi iletiyor vs tarzı işlemler bu süreyi uzatıyor diye tahmin ediyorum. Diğer türlü resim direkt şifrelenmiş olarak geldiğinde geriye sadece işlenmesi kalıyor.

  4. Test tam olarak düzgün ve bilinçli şekilde yapılmamış. Bunun performans ölçümü bu şekilde yapılmaz çünkü base64’de data load ve render işlemi ayrı ayrı vardır, bu testte sadece render işlemi göz önüne alınmış. Img yönteminde ise sadece data load + render işlemi aynı anda yapılmakta. 115ms olarak html dosyası yükleniyor ve bunu da render süresinin üzerine koyarsanız normal img çağırmak 105ms ile daha mantıklı olacaktır.

    1. Document completed sürelerinin dikkate alındığı yazıda ifade edilmiş. Yaklaşımınız doğru olmamış.

ÖFÖ için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir