İpucu: Site Hızlandırma Teknikleri 3 - Resimleri Optimize Edin - R10.net
  • 28-07-2010, 19:58:49
    #1
    Site hızlandırma teknikleri 1 ve 2 r10 da yayınlanmamıştır. o yüzden linklerini veriyorum. 
    
    Site Hızlandırma Teknikleri 1 - Javascript
    Site Hızlandırma Teknikleri 2 - Stil Dosyası
    
    site hızlandırma teknikleri serisi devam edecektir.
    Bir web sitesinin hızlı olması kullanıcılar kadar arama motorları için de önemlidir. Bunu site hızının seoya etkisi başlıklı yazımızda deaylı olarak anlatmıştık.

    Resimlere Boyut Etiketleri


    Web sitelerinde yer alan resimler, xhtml veya css kaynaklı boyutlandırılırlar. Bunların dışında xhtml kaynaklı resimler için hiçbir ölçü tanımlaması yapılmamış da olabilir. İşte bu gibi resimlerin yüklenmesi, ölçüsü olan resimlere oranla daha yavaş gerçekleşir. Web tarayıcıları hiçbir ölçü bilgisi girilmeyen resimlerde, öncelikle resimi tam boyutta açar, sonra orjinal boyutuna getirir. Bu işlem saniye veya saniselerle ifade edilse de 100 lerce resim barındıran sitelerde büyük zamanlarda denk gelmektedir.

    Bu sebeple xhtml kaynaklı kullanılan resimlerde height="100" width="100" şeklinde resim boyutları belirtilmelidir ki tarayıcılar resimleri ve boyutlarını daha hızlı okuyarak kullanıcıya daha hızlı göstersin.

    Resimlerin Sıkıştırılması

    Resimlerin kalitesi genellikle Baskı ve web olarak belirlenir. Bu kaliteye göre resimlerin boyutları küçültürek çok daha hızlı yüklenmesi sağlanabilir. Öyle ki, sıkıştırılan 10 resim sıkıştırılmamış 1 resime denk düşebilmektedir. Resimleri Photoshop gibi programlarla kalite düzeyi veya çözünürlük düzeyi küçültülerek, boyutları azaltılır ve web ortamında daha hızlı yüklenmesi sağlanır.

    Resimlerin sıkıştırılması online olarak çeşitli siteler ile de mümkündür. Bunlardan bir tanesi Dynamic Drive sitesidir.
    Resim Boyut Optimizasyonu

    Sitelerde kullanılacak resimler genellikle orjinal boyutunda kullanılmazlar. 400x400 pixellik bir resim 100x100 pixellik bir alanda küçültülerek kullanılır. Ancak resimin gerçek kaynağı 400x400 pixellik bir resimdir. Dolayısıyla hangi boyutlarda kullanıldığı önemli olmadan orjinal çözünürlüğüne göre çağırılır. Dolayısıyla Kullanılması gereken yerde daha büyük bir boyutlu resim olmuş olur. Bu sebeple, Resimleri, kullanacağımız gerçek alanın ölçülerine göre boyutlayarak kullanmakta fayda var.
    Resim Formatı

    Jpg, png ve gif gibi resim formatları amaçlarına göre farklı yerlerde kullanılabilirler. Formatlar farklı sıkıştırma tekniklerine göre boyutları farklılıklar gösterir. Bu konuda kendi deneyimlerime göre tavsiyelerim, Eğer web üzerinde kullanılacak bir resim ise, Kalite düzeyi 60 da olan bir jpeg, şeffaf bir resim olacaksa 8 bitlik png, animasyon olacaksa gif tercih ederim.

    Bu konuda faydalı olabilecek GIF, JPG ve PNG arasındaki farklar makalesini okumanızı tavsiye ederim.

    Resimlerin Url Yapısı


    Resimlerin kaynak kod içerisinde sahip olduğu url yapısı da sitenin hızlanmasında az çok etkilir. Bu konuda aslında direk resimlerle alakalı olmasa da, resimlerde de dikkat edilmesi gereken bir hususa değineceğiz. Web sitelerinde resimlerin xhtml kaynaklı kullanımı genel olarak aşağıdaki örnekteki gibidir.

    <img src="http://www.seohocasi.com/wp-content/uploads/2010/07/seo-danismanligi2.jpg" alt="Seo Danışmanlığı" width="125" height="125"/>
    yerine, ana dizine yakın resim klasörü oluşturup resimleri içerisine atıyoruz ve url yapısında site adresini yazmayarak oldukça fazla sayıda karakter tasarrufu yapıyoruz.

    <img src="/tema/images/seo-danismanligi2.jpg" alt="Seo Danışmanlığı" width="125" height="125"/>

    url yapısını kullanıyorum, aynı şekilde resimi çağırıyoruz. 100 lerce resimde bu yöntem uygulandığında fazlaca karakter tasarrufu ile kaynak kodunuz sadeleşmiş ve siteniz hızlanmış olacaktır.

    Css Sprite Tekniği

    Css sprite tekniği, xhtml kaynaklı resimlerin birleştirlerek tek bir resim olmasını ve css kaynağına taşınarak hızlı bir şekilde gösterilmesini esas alır. Bu şekilde hem kaynak kod büyük ölçüde azalmış olur hem de onlarca resim 1 resim şeklinde çağırıldığı için sorgu sayısı azalmış olur. Bu sebeple hem hız hem de seo da katkı sağlar.

    Aşağıda yer alan 2 site ile, kod bilgisine gerek kalmadan css sprite işlemini web sitelerinize uygulayabilirsiniz.

    http://csssprites.com/
    http://spritegen.website-performance.org/

    Kaan Gülten
    http://www.seohocasi.com/site-hizlan...mize-edin.html
    seo Sorularla Seo Kitabı Çıktı
  • 28-07-2010, 20:05:04
    #2
    ama bunların etkisi saliselerdir. mesela img src kodunda 100tane resim çağrılsa,

    tane başı max 25karakter olsa toplamda 2500karakter tasarrufun etkisi 2.4 kb dır.(denendi)

    hadi olsun 3kb 3kb lık hız farkını gözle göremezsiniz.
    ✅✅
    DEVELOPER & ENGINEER #php #postgresql #wordpress #linux #python
  • 28-07-2010, 20:10:12
    #3
    Cyrax adlı üyeden alıntı
    ama bunların etkisi saliselerdir. mesela img src kodunda 100tane resim çağrılsa,

    tane başı max 25karakter olsa toplamda 2500karakter tasarrufun etkisi 2.4 kb dır.(denendi)

    hadi olsun 3kb 3kb lık hız farkını gözle göremezsiniz.
    Seohocasi.com un html boyutu 15kb dır. 3kb gibi bir boyut 5'de 1 i yapıyor. Siteyi ilk açtığımda 40 kbı geçiyordu. Önceki anlattığı ve sonraki anlatacğım tüm konuları uygulayarak bu boyuta düşürdüm. En ince ayrıntıyı bile hesapladım. Tabi sizin için gereksiz gelebilir.

    Karakter saysının az olması sebebiyle hızlı olmasının yanı sıra, resimleri ana dizine yakın tutarak browserların resime ulaşmalarını sağlama kolaylığı da ekstra bir hızlandırma yapmaktadır. Ama bu kriterin max. faydas 1 - 1.5 sn. dir.
    seo Sorularla Seo Kitabı Çıktı
  • 28-07-2010, 21:38:32
    #4
    Google botu bizim gibi resimleri açmıyor ki
  • 28-07-2010, 21:54:35
    #5
    Weave adlı üyeden alıntı
    Google botu bizim gibi resimleri açmıyor ki
    evet öyle birşey demedim ben
    seo Sorularla Seo Kitabı Çıktı
  • 28-07-2010, 22:02:10
    #6
    Elinize sağlık hocam özenle hazırlanmış ve ince hesaplamalar yapılarak oluşturulmuş bir makale.

    Teşekkürler..
  • 28-07-2010, 22:22:41
    #7
    Resimler farklı serverda bulunmadığı sürece hıza etki etmez. Farklı serverda ise çağrılma süresi 0.025 salise civarındadır.İyi forumlar..
    Trustmus
  • 28-07-2010, 22:30:12
    #8
    cor adlı üyeden alıntı
    Resimler farklı serverda bulunmadığı sürece hıza etki etmez. Farklı serverda ise çağrılma süresi 0.025 salise civarındadır.İyi forumlar..
    Söylediğin bilgi yanlıştır. Çünkü farklı sunuculardan açğırılan resimler ayrı dns sorgusu oluşturur. Sitelerin yavaşlamasındaki en büyük sorunlardan biri dns dir. Google webmaster araçlarında da bunu görebilirsiniz. Google ın aslında en sevmediği şeydir ekstra ds sorguları.

    bu dns sorgusu sebebiyle birkaç saniye farketmektedir. site açılışları.

    Site hızlandırma konusunda 2 yıldır uğraş veriyorum. Çok farklı deneyimlerim oldu bunların hepsni paylaşacağım zamanla.
    seo Sorularla Seo Kitabı Çıktı
  • 29-10-2014, 21:34:05
    #9
    Eklenti ile Wordpress sitelerindeki resimleri boyutlandırmak ve optimize etmek isteyenler aşağıdaki konuya göz atabilirler.

    http://www.yeknot.com/worpdress-resi...etmek-eklenti/
    Her şey yolunda.