Bir site optimizasyonunda benim en cok zorlandigim gorsel bolumler olmustur. Bir sayfadaki en buyuk boyutlu dosyayi olusturabildikleri icin acilis ve gezinme hizini dogru orantili sekilde etkilemektedir. Bu kisma kadar bir problem belirledim kendime. Gorsel icerigi aslinda normal icerikten ayirmak gerektigini dusunmeye basladim.

Ornek olarak kucukte bir mantik atiyorum ortaya. Sayfadaki gorsel iceriklerin <head> taglari arasinda yer almasi ve sayfada gosterilecek bolume ID li bir HTML elementi ile haritalama yapmak. Sonrasinda da HTML bu ise uygun bir yol bulmazsa Jquery ile soz konusu ID’li alanlara meta bolumunde yer alan resimleri sayfa yuklendikten bellir bir saniye sonra yukletmek.

Neden ?

Oncelikle kullanicilarin sayfaya girdiklerindeki hiz inanilmaz artacaktir. Soyle ornek vermek gerekirse makaleci.com sitesinin ana sayfasindaki gorsellerin boyutu 3mb. (Ohaaa) Normal hizda bir interneti olan kullanicinin sayfayi acmasi en az 10 saniye. Normal bir dosya indirmekten farksiz, buna birde diger elemanlarin eklenmesi acilis hizini dogal olarak geciktirecek dahada yukari cikacaktir.

Kabaca bir hesapla sayfa boyu 500kb, gorsel dosyalarin boyunuda 3MB olarak ele alirsaniz burda agir ve sistemi olumsuz etkilen icerigi site acildiktan 1 saniye sonra yukletmek sizce daha mantikli olmazmiydi ?500kb verinin indirilmesi 1 saniye, 4MB verinin indirilmesi 8 saniye (kabaca).

Interneti guzellestirmek ve gelistirmek adina atilan adimlara daha cok yenilerinin eklenmesi gerekli. Ozellikle gunumuzde HTML5’in yavas yavas yayginlasmaya baslamasi buna guzel bir ornek. Ancak 12 saniyede acilan sitemi olur? Sizin siteniz googlede olsa dahi sitemize girenlerin internet hizina bagimliyiz bir nevi ve gelistirmemizi buna gore yapmamiz gerekir.

Verdigim ornege geri donmek istiyorum, meta bolumunde olmasi sart degil, sitenin en altinda da yer alabilir. Onemli olan gorsel icerigi css ve js de oldugu gibi ayri konumlandirmak.

Benim tavsiyem meta kisminda yer almasi. Hali hazirda og:image etiketi kullaniliyor. Bunun gibi gorselleri belli taglar arasinda listeletebiliriz. Bunlara ID parametresi belirterek icerik bolumunde gostermeyi kolaylastirabiliriz.

Meta Ornek:

 Icerik kisminda da bu sekilde gosterilebilir:

Bu sekilde icerik site tamamen acildiktan sonra yukletilirse hiz acisindan harika bir gelistirme yasayabiliriz. Bunun uygulanamayacagi alanlarda olacaktir elbet, ornegin jquery yada javascript kodlamada. Ancak onemli olan sitemizdeki agir yukun hafifletilebilinecek kadarini halletmek. Saniyelerin bile onemi oldugunu dusunursek haksizda sayilmam.

Arama motorları ne yapacak?

Metadaki verileri okuyarak sayfadaki html İD yerleri için ındexleme yapabilirler. Sonucda oluşturulacak bir harita sistemi arama motorlarınca tanınır hale getirilebilir.

Yukardaki teorimi destekleyecek kodlar yazmaya calisiyorum. Suanda uzerinde calistigim cache mantigina dahil ederek ilerlemekteyim. Ne kadar basarili olurum bilemem ancak yarisin sonunda mutlu olmak her kod yazarinin oldugu kadar benimde hakkim olacaktir :)

Hayati kolaylastiracak buluslara hitaben, devami gelebilir yada gelmeyebilir. birazda ruh halimize bagli degil mi ? :/

 

Bir Cevap Yazın