Hız beklentisi
Önceki Web Sitesi Düzenlemesi ve Tasarımı Sonraki
Hız beklentisi
Birçok kullanıcı istediği sayfaların hızlı yüklenmesini önşart olarak koşmaktadır. Hız sorunlarının başlıca sebepleri şunlardır:
  • Resimlerin yanlış kullanılması [Ayrıntılar]
  • Tabloların çok seviyeli, iç içe gömülmesi [Ayrıntılar]
  • Standart dışı yazı tiplerinin resimlerle kullanılmaya çalışılması [Ayrıntılar]
  • Sayfa içi elemanların sayısının çok olması [Ayrıntılar]
  • Resim, film, ses vb. elemanların kullanıcının isteği dışında yüklenmeye başlaması [Ayrıntılar]
  • Özellikle görsel düzenleyicilerin, kötü ve gereksiz HTML kodu üretmeleri [Ayrıntılar]
Resimlerin doğru kullanımı
Ortalama bir Web sayfasının toplam boyunun %90'ından fazlası resim bilgisinden oluşmaktadır. Bu nedenle, resimlerin mutlaka dikkatlice kullanılması gerekmektedir.
  • Dosya tipini doğru seçmek önemlidir, çizim, keskin köşeli vb. resimler için GIF veya PNG, fotografik görüntüler için JPG tavsiye edilir. Hatta, Web için özelleşmiş resim düzenleyicilerini (deBabelizer, ImageReady vb.) kullanarak resimlerinizi eniyileştirin.
  • Bütün sayfalarınızda tekrarlayan dolaşma çubuklarınızı resim olarak oluşturun, çünkü resimler kullanıcı tarafında önbelleklenebilir.
  • Resimlerin WIDTH ve HEIGHT özelliklerini mutlaka belirtin. Bu tarayıcının sayfayı daha hızlı yerleştirmesini sağlar.
  • Sevdiğiniz yazı tiplerini resim olarak gömmeye çalışmayın, standart fontlara alışın.
  • "Tekrarlayan" büyük resimlerin sadece küçük alanları değişiyorsa, resmi parçalayın ve sadece değişen kısımların yüklemesini sağlayın.
  • Özellikle dolaşma çubuklarınızı mümkünse tek parça halinde hazırlayıp, bir IMAGEMAP oluşturun, çünkü tek bir dosya, hem ayrı ayrı resimlerin toplamından daha küçük bir boyda olacaktır, hem de her resim için bir bağlantı kurulmayacaktır. Ancak bu durumda IMAGEMAP'inizde (HTML 4.0'da izin verilen) ALT parametresini kullanın.
  • Bir kural olmamasına karşın, de-facto olarak iyi tasarımcılar sayfalarında 10'dan fazla resim kullanmamaya çalışırlar.
Tabloların doğru kullanımı
Tablolar her ne kadar yerleşimi kolaylaştırsa da, iç içe gömüldüklerinde tarayıcılar zorlanmaktadır.
  • Tabloları çok seviyeli bir biçimde içiçe gömmeyin, aksi takdirde, tarayıcı sayfayı ancak bütün sayfa indikten sonra görüntüleyebilir. Temel olarak 3'den fazla tabloyu içiçe gömmeyin.
  • Mümkün olduğu kadar az rowspan ve colspan kullanın.
  • Basit yerleştirme işleri için PRE ya da CODE kullanın.
  • Bütün sayfayı bir tek tabloya gömmek yerine tablonuzu sayfa yüklendikçe görüntülenebilecek şekilde küçük yatay parçalara ayırın. Bu, kullanıcıda sayfa hızlı yükleniyor hissini arttıracaktır.
Yazıtipleri
İçeriğin erişilebilirliği, içerik kadar önemlidir.
  • Standart yazı tiplerine bağlı kalmaya çalışın. Mümkünse, graceful degradation kullanarak alternatifleri de verin. Örneğin "Arial, Helvetica, sans-serif" örneği, önce Arial'ı (Windows standardı), sonra Helvetica'yı (Mac standardı), en sonda serif'siz soysal (generic; sistemce bir karşılığı bulunan) bir font'u kullanabilmenizi sağlar.
  • Yazı tipleriyle yaptığınız, "ilginç" olduğunu düşündüğünüz" efektleri mümkünse Yığıtlamalı Biçem Kağıtları (Cascading Style Sheets - CSS) kullanarak gerçekleştirin. CSS, aslında çok ilginç efektlere izin vermektedir.
Sayfa içi elemanlar
Bir sayfa için ne kadar çok farklı dosya yükleniyorsa, sayfa o kadar yavaş yüklenecektir, hepsinin toplamının yüklenmesinden bile yavaş!
  • Bir tarayıcı sayfa içinde karşılaştığı her dosya için Web sunucusuyla tekrar tekrar iletişime geçecektir. Dolayısıyla, sayfaya bağladığınız dosyalar, ne kadar küçük olursa olsun, yüklenme hızı düşecektir.
  • Tarayıcının önbelleğini mümkün olduğu kadar çok kullanmak için, sayfa içi elemanlarınızı (logo, grafik dolaşma çubukları, resimler vb) tekrar tekrar kullanmaya özen gösterin.
Çokluortam terörizmi
Kullanıcıları uyarmadan, büyük resimler, fon müzikleri, filmler vb. elemanlar yükletmeye çalışmayın.
  • Maalesef, birçok Web sitesi, kullanıcıyı hiç uyarmadan, fon müzikleri gibi kullanıcının siteyi dolaşmasını kolaylaştırmaktan çok zorlaştıran, sayfanın yüklenmesini yavaşlatan, hatta bazen en kötüsü, tarayıcısını çökerten eklentiler kullanmaktadır. Böyle bir kullanıcının sitenize, ihtiyacı olsa bile, tekrar gelme olasılığı çok düşüktür.
  • Kullanıcıyı, büyük boyutlu resimler (örneğin, bir resim galerisi), filmler (örneğin, bir konferansın çekimleri) ya da ses dosyalarının (örneğin, bir röportaj) bulunduğu sayfalara girmeden önce mutlaka uyarın.
  • Kullanıcıların daha da memnun kalacakları bir özellik, onlara farklı hızlar için farklı çözünürlük ya da kalitede sürümlerin sunulmasıdır. Dolayısıyla, kullanıcı bant genişliğine uygun olan sayfayı seçebilecek ve daha az vakit kaybedecektir.
Standart dışı ve gereksiz HTML
Yüzeyde tasarımcının işini kolaylaştıran görsel Web sayfası düzenleyicileri, altta standart dışı ve kötü HTML kodu üretmektedir.
  • Sayfalarınızda aynı CSS ve JavaScript tanımlamalarını kullanıyorsanız, bunları harici dosyalarda tutup, sayfalardan bağ vererek[62] yükletin. Ortalama tanımlamalarınızın 500 karakter olduğunu varsayarsak, yükleme işlemi 33600 modemi olan bir kullanıcının 1 saniyeden fazlasını alır.
  • Genel olarak, bir efekt ne kadar süslü görünüyorsa, onun için üretilen kod da o kadar şişkin olacaktır.
  • Bu tip sıradışı efektleri kolayca oluşturabilen düzenleyiciler, sayfaları kendilerine has HTML, JavaScript, Java vb. kodlarıyla doldurmakta ve uyumluluğu düşürmektedirler.
  • En sık karşılaşılan durumlardan biri, görsel düzenleyicilerin gereksiz HTML etiketleri üretmeleridir. Örneğin BR için bile FONT etiketi açıp hemen arkasından kapatmaları gibi:
    Gereksiz kod:
    <FONT SIZE="-1"> ... cümle bitmiştir. </FONT>
    <FONT SIZE="-1"> <BR> </FONT>
    <FONT SIZE="-1"> Yeni cümle ... </FONT>
    
    Yeterli kod:
    <FONT SIZE="-1"> ... cümle bitmiştir. <BR> Yeni cümle ... </FONT>
    


[62]
JavaScript için HEAD bloğunda
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript1.2" SRC="/js/siteToolbar.js"></SCRIPT>
CSS için de yine HEAD bloğunda
<LINK REL="stylesheet" TYPE="text/css" HREF="/css/site.css">
gibi bir tanımlama kullanabilirsiniz.
Önceki Üst Ana Başlık Sonraki
Tasarımda öncelikli ilkeler Başlangıç Sadelik
Bir Linux Kitaplığı Sayfası