HTTP İsteklerini En Aza İndirme
Son kullanıcıya yanıt süresinin %80’ni harcanır. Bu sürenin çoğu, sayfa içerisinde yüklenen öğelere bağlıdır: Resimler, stylesheets, scripts, Flash, vb. Bileşenlerin sayısını azaltmak hali ile sayfayı işlemek için gereken istek sayısını azaltacaktır. İşte bu püf nokta, sayfaların hızlanmasını sağlamaktadır.
Sayfadaki bileşenleri azaltmanın bir yolu da sayfa tasarımını sadeleştirmektir. Fakat, bir soru : bu şekilde de hızlı yanıtlar alırken, daha zengin içeriğe sahip sayfalar oluşturmanın başka bir yolu var mı? İşte burda sayfa tasarımını desteklerken aynı zamanda http isteklerini azaltmanın birkaç yolu bulunmaktadır.
Combined file (bileşik dosyalar): tüm scriptlerin tek bir scripte ve benzer şekilde tüm Css’lerin de tek bir styleshet (tasarım sayfası)’e aktarılması, HTTP isteklerindeki sayıyı azaltmanın diğer bir yoludur. Dosya birleştirme işlemi ; scriptler ve styleshetler sayfadan sayfaya değişiklik gösterdiğinde, daha çok zorluk çıkarmaktadır. Ancak yayınlama işleminizin bu kısmını oluşturmak yanıt süresini artırmaktadır.
Css sprites, resim isteklerini azaltmak için kullanılan gözde yöntemlerdendir. Karmaşık arka plan görüntülerinizi, İstediğiniz görüntü segmentini elde etmek için CSS background-image ve background-position özelliklerini kullanıp tek bir resme dönüştürebilirsiniz.
Images maps (resim haritaları) karmaşık çoklu resimleri tek bir resme aktarır. Yaklaşık olarak tüm boyutları aynıdır fakat yine de http istek sayısını azaltmak sayfayı hızlandırır. Resim haritalarını çalıştırabilmek için bitişik resimlerin sayfanın içinde bir gezinti çubuğu gibi olması gerekir. Görüntü haritalarının koordinatlarını belirlemek oldukça zahmetli ve hata olasılığı yüksek bir iştir. Gezinti (navigation) için resim haritalarını kullanmak erişilebilirlik açısından çok iyi olmadığından tavsiye edilmeyen bir metotdur.
Inline images (satır içi görüntü)data: URL Scheme sayfa içine verileri gömmek için kullanılır ve html dökümanın boyutunu artırır. Karmaşık satır içi görüntüler sayfa boyutunun artmasını önlemek ve sayfa isteklerini azaltmak
için kullanılabilir bir yoldur. Satır içi görüntüler henüz büyük tarayıcılar tarafından tam olarak desteklenmemektedir.
Sayfanızın http isteklerini azaltmak başlangıç için kullanılabilir bir özelliktir. Bu satır rehberi ziyaretçilerin ilk izlenimlerini geliştirmek için çok önemli bir yöntemdir.
Bir İçerik Dağıtım Ağı Kullanın
Kullanıcıların web sunucunuza olan yakınlığı, yanıt süreleri üzerinde etki oluşturmaktadır. Farklı yerlere yayılmış birden fazla sunucularınız arasında içeriğinizi dağıtmak, kullanıcılar açısından sayfanızını daha hızlı yüklenmesini sağlayacaktır. Ama nereden başlamalısınız?
İlk etapta, farklı yerlere yayılmış bu içeriğinizi uygulamaya koymak için bu dağınık mimaride uygulamalarınızı tekrar tasarlamaya yeltenmeyin. Uygulamaya bağlı olarak, bu yapının değişikliği esnasında, sunucu lokasyonları arasında eşzamanlı oturum durumları ve yinelenen veritabanı işlemleri gibi zor görevler dahil edilebilir. Kullanıcı ve içeriğiniz arasındaki mesafeyi azaltma girişimi geciktirilebilir ya da şifre kullanılmayabilir.
Kullanıcı yanıt sürelerinin %80-90’ının, sayfadaki tüm bileşenleri (images, stylesheets, scripts, Flash, etc) indirirken geçtiğini unutmayın. Bu performansın altın kuralıdır. Uygulama mimarinizi tekrar tasarlamak gibi zor bir görevle başlayacağınıza, statik içeriği dağıtmanız daha iyi olacaktır. Bu sayede yanıt sürelerinde daha büyük azalma elde etmekle kalmayacak aynı zamanda içerik dağıtım ağlarınız için daha da kolay olacaktır.
İçerik dağıtım ağı (CDN), kullanıcılara daha verimli şekilde içerik sunmak amacıyla birden fazla yere dağılmış sunucu topluluğudur. Belirli bir kullanıcıya içerik dağıtmak için seçilen sunucu, genellikle ağ yakınlık ölçütünü esas almaktadır.
Örneğin, en düşük ağ hareketi olan ya da en hızlı yanıt süresine sahip olan sunucular seçilir.
Bazı büyük internet şirketlerinin kendi İçerik dağıtım ağ (CDN)’ları vardır. Ancak Akamai Technologies, EdgeCast, level3 gibi (CDN) servis sağlayıcılarını kullanmak için maliyet önemlidir. Başlangıç şirketleri ve özel web siteler için CDN hizmetinin maliyeti caydırıcı nitelikte olabilir ama hedef kitleniz büyüdükçe ve daha küresel hale geldikçe hızlı yanıt süreleri için CDN gereklidir. Yahoo’da, kendi uygulama web sunucularındaki statik içeriği bir İçerik dağıtım ağı (CDN)’nın dışına taşıyan özellikler, kullanıcı yanıt sürelerini %20’nin üzerinde geliştirmiştir. Bir içerik dağıtım ağına geçiş, sitenizin hızını önemli ölçüde artıran bir kolay kod değişiklidir.
Expires ya da Cache-Control Başlığı Ekleme
Bunun için 2 yol vardır:
- Statik bileşenler için : Expire başlığını ayarlayarak "Never expire" ilkesini uygulama
- Dinamik bileşenler için : Şartlı isteklerle tarayıcılara yardımcı olmak için uygun bir Cache-Control başlığı kullanma
Sayfada stylesheets, images, flash ve pek çok scriptin olması, sayfa tasarımlarının giderek zenginleştiği anlamına gelmektedir. Sayfanıza ilk kez gelen bir ziyaretçi bir kaç HTTP isteği yapmak durumundadır ancak Expire başlığı kullanılarak bu bileşenleri önbelleklenebilir yapabilirsiniz. Bu da, ilerleyen sayfa görüntüleri üzerinde gereksiz HTTP isteğini önler. Expire başlıkları sıklıkla resimlerle birlikte kullanılır. Fakat scripts, stylesheets, ve Flash gibi tüm bileşenlerde kullanılması gerekir.
Tarayıcılar (ve proxyler) web sayfalarının daha hızlı yüklenmesini sağlamak için HTTP isteklerinin boyutunu ve sayısını azaltmak üzere önbellek kullanırlar. Bir web sunucusu bir bileşenin ne kadar süre önbelleklenebileceğini istemciye belirtmek için HTTP isteklerinde Expire başlığını kullanır. Bu isteğin 13 Temmuz 2012’ye kadar yürürlükte olduğunu tarayıcıya belirten Expire başlığıdır.
Expires: Fri, 13 Jul 2012 20:00:00 GMT
Sunucunuz Apache ise, geçerli tarihe göre bir bitiş tarihi ayarlamak istiyorsanız ExpiresDefault talimatını kullanın. Bu ExpiresDefault örneği istek zamanından başlayarak bitiş zamanını 10 yıla ayarlar.
ExpiresDefault "access plus 10 years"
Expire başlığını kullanırken, bileşenler ne zaman değişirse sizinde bileşen dosyalarını değiştirmek zorunda olduğunuzu unutmayın. Yahoo’da biz bunu genellikle oluşturma sürecinin bir kısmında yaparız : versiyon numarası bileşen dosyasında gömülüdür. Örnek; yahoo_2.0.6.js.
Bir kullanıcı sitenizi önceden ziyaret etmişse, Expire başlığı ancak sayfa görünümü etkiler. Tarayıcınızın önbelleği boş olduğunda ve bir kullanıcı ilk defa sitenizi ziyaret ettiğinde, HTTP isteklerinin bunun üzerinde hiç bir etkisi yoktur.
Gzip Bileşenleri
Ağlar arasında bir HTTP istek ve yanıtının iletilmesi için geçen zaman, önemli ölçüde uç mühendisler tarafından verilen kararlar ile azaltılabilir. Kullanıcının bant genişliği, internet hızı ve internet servis sağlayacısının, geliştirme ekibinin kontrolünün dışında olduğu bir gerçektir. Fakat yanıt sürelerini etkileyen diğer değişkenler de vardır. Sıkıştırma işlemi, HTTP yanıtlarının boyutunu düşürerek, yanıt sürelerini azaltır.
HTTP/1.1 ile başlarken, web istemcileri HTTP yanıtlarındaki Accept-Encoding başlığıyla sıkıştırma desteği göstermektedir.
Accept-Encoding: gzip, deflate
Web sunucusu, yanıtlarda bu başlığı görürse, istemci tarafından listelenen yöntemlerden birini kullanarak yanıtları sıkıştırabilir ve yanıtlardaki Content-Encoding başlığı ile bunun hakkında istemciyi bilgilendirir.
Content-Encoding: gzip
Gzip şu durumda en populer ve etkili sıkıştırma yöntemidir. RFC 1952 tarafından standartlaştırılmış ve GNU projesiyle geliştirilmiştir. Diğer bir sıkıştırma formatı ise deflate (söndürme)’dir. Fakat daha az populer ve daha az etkilidir.
Gzipping işlemi, genellikle yanıtların boyutunu %70 oranında düşürür. Bugünün internet trafiğinin yaklaşık %90’ı, gzipi desteklediklerini iddia eden tarayıcılar üzerinden geçmektedir. Eğer Apache kullanıyorsanız, gzip modül yapılandırması sürümünüze bağlı olarak değişiklik gösterir: Apache 2.x ,mod_deflate kullanırken Apache 1.3 , mod_gzip kullanmaktadır.
Sıkıştırılmış içerik yönünden tarayıcıların aldıkları ve bekledikleri bir uyumsuzluğa sebep olan proxy ve tarayıcılarda bilindik problemler bulunmaktadır. Neyse ki bu uç durumlar, eski tarayıcıların kullanımının azalması sebebiyle giderek azalmaktadır. Apache modüller, uygun yanıt başlıklarını otomatik olarak ekleyerek yardımcı olmaktadır.
Sunucular dosya tiplerine bağlı olarak sıkıştırmayı seçerler. Sıkıştırmak istedikleri dosyalar genellikle kısıtlıdır. Bir çok web sitesi HTML belgeleri sıkıştırır. Scriptleriniz ve stylesheetleriniz sıkıştırmaya değer dosyalardır ancak bir çok site bu şansı kaçırmaktadır. Aslına bakılırsa XML ve JSON’ı da kapsayan metin yanıtlarını sıkıştırmak bu zahmete girmeye değerdir. Resim ve PDF dosyalar zaten sıkıştırılmış dosyalar oldukları için sıkıştırılmamalıdırlar. Bu tür dosyaları sıkıştırmayı denemek potansiyel dosya boyutunun artmasının yanında işlemcinizi de boş yere meşgul etmektedir.
Mümkün olduğunda çok dosya sıkıştırmak, hem kullanıcı deneyimini hızlandırmakta, hem de sayfa ağırlığını azaltmaktadır.
En Üste Stylesheets Ekleme
Yahoo’nun performansını incelerken, Stylesheetsleri dökümanın başına taşımanın, sayfaları daha hızlı yükleniyormuş gibi gösterdiğini keşfettik. Çünkü stylesheets’leri başlığa eklemek sayfanın kademe kademe oluşmasını sağlamaktadır.
Performansi onemseyen on muhendisler, bir sayfanin kademe kademe yuklenmesini isterler, bu da o sayfanin her ne icerige sahip olursa olsun bir an once tarayicinin bunu goruntulemesini istedikleri anlamina gelir. Bu özellikle çok fazla içeriğe sahip olan sayfalar ve internet bağlantısı yavaş olan kişiler için çok önemlidir. İlerleme göstergesi gibi kullanıcıya görsel geribildirim sağlamanın önemi araştırılmış ve belgelendirilmiştir. Tarayıcı sayfayı aşama aşama başlık, gezinti çubuğu, üstteki logo vb.şeklinde yüklerken bütün hepsi sayfanın dolmasını bekleyen kullanıcıya görsel bir geribildirim vermek için hizmet eder. Bu da bir bütün olarak kullanıcı deneyimini geliştirir.
Belgenin alt tarafına stylesheets koyma sorunu, Internet Explorer dahil olmak üzere pek çok tarayıcıda sayfanın işlenmesini (dolmasını) yasaklamaktadır. Tarayıcıların kendi stilleri değişirse, bu tarayıcılar sayfa ogelerını tekrar cızmek zorunda kalmamak ıcın sayfanın rendering işlevini engeller. Kullanıcı boş bir sayfa görüntüler.
En Alta Script Ekleme
Scriptlerden kaynaklanan sorun, onların eş zamanlı indirmeleri engelliyor olmalarıdır. Internet Explorer 5 ile baslayan sürümlerde desteklenmekteydi ama IE8 ile baslayan surumlerden sonra artik kullanilmamaktadir. Ornek olarak, arkaplan rengi CSS ifadeleri kullanarak her bir saatte degistirilebilir. Resimleriniz birden fazla sunucuda yayınlanmaktaysa, eşzamanlı olarak ikiden fazla indirme yapabilirsiniz. Bir script indirilirken, farklı bir hostname’de olsa bile tarayıcı herhangi bir indirme başlatmayacaktır.
Bazı durumlarda, scriptleri alta taşımak kolay değildir. Örneğin; script, sayfa içerğine ekleme yapmak için document.write kullanır ve sayfanın daha aşağısına taşınamaz. Bazı durumlarda geçici çözüm yolları bulunmaktadır.
Sıklıkla çıkagelen diğer bir seçenek, gecikmiş (ertelenen) çevirilerin kullanılmasıdır. DEFER özelliği, scriptin document.write içermediğini gösteririr ve tarayıcılar için ip ucu niteliğindedir. Ne yazık ki, Firefox DEFER özelliğini desteklememektedir. Internet Explorer’de DEFER özelliği arzu edildiği kadar olmasa da ertelenmiş olabilir. Eğer script ertelenebilirse, sayfanın altına da taşınabilir. Bu da sizin web sayfanızın daha hızlı yüklenmesini sağlamaktadır.
CSS İfadelerden Kaçınınma
CSS ifadeler, CSS özelliklerini dinamik bir şekilde ayarlayabileceğiniz güçlü yöntemlerdir. Internet Explorer 5 ile başlayan sürümlerde desteklenmektedir ve IE8 için önerilmemektedir.
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Burda gösterildiği gibi, ifade yöntemleri JavaScript ibareleri kabul etmektedir. CSS özelliği, JavaScript ibarelerin değerlendirilmesi sonucu ayarlanır. İfade yöntemi tarayıcılar tarafından gözardı edilmektedir. Bu yüzden tarayıcılar arasında sürekli deneyim elde etmek için Internet Explorer’de özellikleri ayarlamak önemlidir.
İfadelerdeki sorun, insanların beklediklerinden daha çok sıklıkta değerlendiriliyor olduklarıdır. Sayfa sadece oluşturulduğunda değil aynı zamanda aşağı - yukarı kaydırıldığında ve kullanıcı fareyi sayfa üzerinde hareket ettirdiğinde bile değerlendirilecektir. CSS ibarelerini counter’e eklemek, bu ibarelerin ne sıklıkta ve ne zaman değerlendirildiğine dair izleme olanağı sağlar.
JavaScript ve CSS’i Harici Yapma
Bu performans kurallarından bir çoğu harici bileşenlerin nasıl yönetildiği ile ilgilidir. Ama yine de bu fikri ortaya atmadan önce kendinize basit bir soru sormalısınız: JavaScript ve CSS, harici dosyalar içinde mi yer almalı yoksa sayfanın kendisinde mi (içinde mi) yer almalı?
JavaScript ve CSS tarayıcı tarafından önbelleğe alınıyor olduğu için gerçek dünyada harici dosyaları kullanmak genellikle sayfaları daha hızlı oluşturmaktadır. HTML belgelerde bulunan (satır içine alınan) JavaScript ve CSS, HTML belgeleri her talep edildiğinde indirilir. Bu durum, ihtiyaç duyulan HTTP talebini azaltıp, HTML belge boyutunu artırmaktadır. Diğer taraftan; JavaScript ve CSS, tarayıcı tarafından önbelleğe alınan harici dosyaların içindeyse, HTML belgelerin boyutu HTTP talepleri artmadan düşürülür.
Burda anahtar faktör, harici JavaScript ve CSS bileşenlerin talep edilen HTML belgelerin sayısına göre önbelleğe alınma sıklığıdır. Bu faktör, rakamlara dökmek zor olmasına rağmen çeşitli ölçütler kullanılarak ayarlanabilir. Sitenizdeki kullanıcılar her oturumda birden fazla sayfayı görüntülüyor ve sayfalarınızın çoğu aynı script ve stylesheetleri tekrar tekrar kullanıyorsa, bu durum harici dosyalarınızın önbelleğe alınmasından daha çok, faydalı potansiyele sahiptir.
Birçok web sitesi bu ölçütlerin ortasında yer almaktadır. Bu siteler için en iyi çözüm genellikle harici dosyalar olarak JavaScript ve CSS bileşenleri dağıtmaktır. Satıriçi uygulamanın (inlining) tercih edilebilir olduğu tek istisna yer My Yahoo, Yahoo! front page gibi anasayfalardır. Her oturumda bir kaç sayfa görünümüne sahip olan anasayfalar, JavaScript veCSS satıriçi uygulamasının kullanıcı yanıt sürelerinde daha hızlı sonuç verdiğini göreceklerdir.
Ön sayfalar genellikle pek çok sayfa görünümünün başıdır. Satıriçi uygulamanın sağladığı HTTP isteklerinin azalması, harici dosyaların kullanılarak önbelleğe alma avantajının oluşması gibi birçok teknik vardır. Bu tekniklerden biri de önsayfadaki JavaScript ve CSS’yi satıriçine almaktır ancak sayfa yüklemesi bittikten sonra dinamik olarak harici dosyalar indirilir. Sonraki sayfalar zaten önceden tarayıcının önbelleğine alınması gereken harici dosyalara referans oluşturur.
DNS Sorgularını (Aramalarını) Azaltma
Dns (Domanin Name System), telefon rehberlerinin insanların isimlerinden numaralara yönlendirmesi gibi sunucuları IP adreslerine yönlendirir. Tarayıcınıza www.yahoo.com yazdığınızda, tarayıcınız bir DNS çözümleyici ile bağlantı kurarak IP adresinize cevap verir. Herşeyin olduğu gibi DNS’in de bir bedeli var. Bir DNS’in verilen sunucuya bir IP adresi bulması genelde 20-120 milisaniye sürer. Tarayıcı, DNS araması tamamlanana kadar sunucudan hiçbir şey indiremez.
DNS sorguları daha iyi performans için önbelleğe alınır. Bu önbelleğe alma işlemi, kullanıcının ISP veya yerel alan ağı tarafından tutulan özel bir bellekleme sunucusu üzerinde oluşur. Önbelleğe alma işlemi aynı zamanda kişisel bilgisayarlarda da aynı şekilde olur. DNS bilgileri işletim sisteminin DNS önbelleğinde kalır. Çoğu tarayıcının işletim sistemi önbelleğinden ayrı olarak kendi önbelleği bulunmaktadır. Tarayıcı kendi önbelleğinde DNS kaydı tuttuğu sürece, işletim sisteminde herhangi bir kayıt talebinde bulunmaz.
Internet Explorer, DnsCacheTimeout kayıt defterince belirlendiği için varsayılan olarak 30 dakikalık DNS sorgularını (aramalarını) önbelleğe alır. Firefox,network.dnsCacheExpiration konfigürasyon ayarlarınca denetlenir ve 1 dakikalığına DNS sorgularını önbelleğe alır.
İstemcinin DNS önbelleği boşaltıldığında (hem tarayıcı hem işletim sistemi), DNS sorgu sayısı farklı alan adlarının sayısına eşit olur. Resimler, script dosyalar, stylesheets, Flash objects, vb., sayfa url’sinde kullanılan alan adları buna dahildir. Farklı alan adlarının azalması DNS sorgu sayısını da azaltacaktır.
Farklı alan adlarının sayısının azalması, sayfada meydana gelen eş zamanlı indirme miktarının azaltır. DNS sorgularını önlemek yanıt süresini keser, ancak eş zamanlı indirmelerdeki azalma, yanıt sürelerini artırmaktadır. Klavuzumuz, 4 alan adından fazla olmamak kaydıyla en az ikisi arasında bu bileşenleri ayırmaktadır. Bu durum eş zamanlı indirmelerde yüksek artış sağlamak ile DNS sorgularını azaltmak arasında iyi bir uzlaşma ile sonuçlanır.
JavaScript ve CSS’i Küçültme (önemini azaltma)
Minification yararsız kodları silerek böylece yükleme zamanını azaltma uygulamasıdır. Kodlar küçültüldüğünde gereksiz bosluk karakterleri gibi (bosluk,yeni satir ve sekme) tüm yorumlar da silinir. JavaScript olması durumunda, indirilen dosyanın boyutu azaltılmış olduğundan yanıt verme süresinin performansını arttırır. JSMin ve YUI Compressor JavaScript kodlarını küçültmek için iki popüler araçtır. YUI Compressor aynı zamanda CSS kodlarını da küçültebilir.
Gizleme, kaynak kodlarda uygulanabilir alternatif iyileştirme yöntemidir. Minification’dan daha karmaşıktır ve böylece obfuscation adımının sonucunda daha çok bug yaratacaktır. On üst düzey ABD web sitelerinin araşıtrmasında minification %21 küçültme boyutu karşısında obfuscation’ın % dir.JavaScript’te küçültmenin daha az riskli olmasına rağmen Obfuscation daha fazla küçültür.
Ek olarak,dışarıdan gelen harici komut ve stilleri küçültmek için <script> ve <style> blokları da küçültülmeli. Kodları ve stilleri küçültseniz bile, %5 ve üzeri bir oranda azaltacaksınız. JavaScript ve CSS kullanımı ve boyutu arttıkça, kodlarınızı azaltarak bir çok imkan elde edeceksiniz.*
Yönlendirmelerden Kaçınma
Yönlendirmeler, 301 ve 302 durum kodlarını kullanarak gerçekleştirilir. 301 durum kodunun kullanılmasıyla yapılan HTTP başlıklıklı bir örnek:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
Tarayıcı otomatik olarak kullanıcıyı Location alanında belirtilen URL’ye yönlendirir. Yönlendirme için gereken tüm bilgiler başlıkta yer almaktadır. Expires ya da Cache-Control gibi olması gerekenler belirtilmedikçe, isimlere rağmen ne 301 ne de 302 yanıtları pratikte önbelleğe alınmaz. Meta yenileme etiketi ve Javascript, kullanıcıları farklı bir URL’ye yönlendiren diğer yöntemlerdendir ancak bir yönlendirme yapmanız gerekirse tercih edilen yöntem öncelikli olarak geri tuşunun doğru bir şekilde çalışmasını sağlamak kaydıyla standart 3xx HTTP durum kodlarını kullanmaktır.
Yönlendirmelerin kullanıcı deneyimlerini yavaşlatması, unutulmaması gereken en önemli şeydir. Kullanıcı ve HTML belgesi arasına bir yönlendirme eklemek, sayfadaki herşeyi geciktirecektir çünkü sayfada hiçbirşey gerçekleştirelemeyecek ve hiçbir bileşen HTML belgesi oluşturulana kadar indirilemeyecektir.
En çok ziyan edilen yönlendirmelerden biri illaki olur ve web geliştiriciler bunun farkında değildirler. Bu da slaş (/) sembolunun URL’de atlanmasıyla olur. Örneğin; http://astrology.yahoo.com/astrology/ ( “/ “sembolüne dikkat) adresine olan yönlendirme http://astrology.yahoo.com/astrology adresine giderken 301 yanıtıyla sonuçlanır. Bu durum Apache işleyicilerde Alias or mod_rewrite, ya da the DirectorySlash kullanılarak düzenlenir.
Eski bir web siteyi yenisine bağlamak (değiştirmek) yönlendirmeler için başka bir genel kullanımdır. Diğerler kullanımlar belirli şartlara göre kullanıcıları yönlendirmek ve web sitenin farklı kısımlarını bağlamak içindir (tarayıcı tipi, kullanıcı hesap tipi). İki web siteyi bağlamak için yapılan yönlendirmeler, küçük ek kodlamalar gerektirmektedir. Bu şekilde yapılan yönlendirmelerde bu durum geliştiriciler için karmaşıklığı azaltsa da, kullanıcı deneyimini kötüleştirmektedir. Bu yönlendirme seçeneğinin kullanılması, aynı sunucuda iki kod yolu bulunuyorsa Alias and mod_rewrite kullanımıyla gerçekleşir. Alan adı değişikliği yönlendirme kullanımına sebep oluyorsa, alternatif olarak Alias or mod_rewrite bileşeni ile CNAME ( bir alan adını başka bir alan adı olarak gösterip takma isim oluşturan DNS kaydı) oluşturulmalıdır.
Kopya Scriptleri Kaldırma
Bir sayfada aynı Javascript dosyasının iki defa eklenmesi performansı olumsuz yönde etkiler. Bu durum sizin düşündüğünüz kadar sıradışı bir durum değildir. Birleşik devletlerin favori 10 web sitesine bakıldığında, bunların ikisinde kopya scriptlerin olduğu görülmektedir. İki temel faktör sitede kopyalanan script oranını artırmaktadır : Script sayısı ve ekip boyutu. Bunların olması durumunda; kopya scriptler, gereksiz HTTP istekleri ve Javascript çalışması oluşturarak performansı olumsuz yönde etkiler.
Gereksiz HTTP istekleri Internet Explorer’de meydana gelir Firefox’da değil. Internet Explorer’de harici scriptler iki defa eklenip, önbelleğe alınmazlarsa, sayfanın yüklenmesi esnasında iki HTTP isteği oluşturulur.
Bu gereksiz HTTP isteklerinin oluşmasına ilave olarak, boş yere zaman kaybına sebep olur. Fazladan Javascript çalıştırılması, scriptin önbelleğe alınır olup olmadığına bakılmaksızın,hem Firefox’ta hem de Internet Explorer’de meydana gelir. Yanlışlıkla aynı scriptin iki defa eklenmesini önlemenin tek yolu, şablonunuzdaki script yönetim modülünün uygulamaya konulmasıyla olur. Genel script ekleme yöntemi, HTML sayfanızdaki script tag’ının kullanılmasıyla mümkündür.
<script type="text/javascript" src= "menu_1.0">
PHP’deki diğer bir seçenek ise,insertScript isimli fonksiyonun kullanılması,
<?php insertScript("menu.js") ?>
Aynı scriptin birçok kez girilmesini önlemek amacıyla; bu fonksiyon, gelecekteki Expires başlıklarını desteklemek için script dosya isimlerine versiyon numarası ekleyen bu tür scriptlerde kullanılabilir.
ETags Yapılandırması
Varlık etiketleri;
tarayıcıların ve web sunucuların, tarayıcıların önbellleğindeki bileşenlerin (images, scripts, stylesheets) kaynak suncudakilerle uyuşup uyuşmadığını belirlemek için kullandıkları mekanizmadır. Varlık etiketlerine, son değişiklik tarihinden daha değişken olan öğeleri doğrulamak üzere bir mekanizma eklenmiştir. Bir ETag, bileşenin belirli versiyonlarını tanımlayan bir dizedir. Tek format sınırlaması ise alıntı yapılan dizelerinin olmasıdır.Kaynak sunucu, ETag yanıt başlıklarını kullanarak bileşenlerin ETag larını belirtir.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
Daha sonra, tarayıcı bileşenleri doğrulamak zorunda kalırsa, kaynak sunucuya ETag’ları geri getirmek için If-None-Match başlığını kullanır. Eğer ETag’lar uyuşursa, 12195 bitlik yanıtı azaltarak döndürülür.
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
ETags’lardaki problem, bünyesinde bir site bulunduran belirli bir sunucuya özgü özellikler kullanarak oluşturulmalarıdır.
ETags’lar, bir tarayıcının sadece bir sunucudan özgün bileşenleri alması durumunda ve sonrasında bunları farklı bir sunucudaki bileşenlerle doğrulamaya çalışması esnasında uyuşma sağlamazlar. Bu, istekleri işlemek için bir sunucu kümesi kullanan sitelerde oldukça yaygın bir durumdur. Varsayılan olarak, ETags’larda Apache ve IIS gömülü veriler birden fazla sunucusu olan sitelerde önemli ölçüde başarı geçerlilik test oranını azaltır.
Apache 1.3 ve 2.x için ETag formatı node-size-timestamp’tır. Belirli bir dosya birden fazla sunucudaki aynı dizinde yer alabilir, aynı dosya boyutuna ve izinlerine, zaman damgasına vb. sahip olabilir. Dosya düğümü sunucular arasında farklılık gösterir.
IIS 5.0 ve 6.0, ETags’lar ile benzer soruna sahiptir. IIS’deki ETags formatı Filetimestamp:ChangeNumber’tir. A ChangeNumber, ISS’deki konfigürasyon değişiklikleri izlemek için kullanılan bir sayaçtır. Web sitenin ardındaki tüm ISS sunucularda ChangeNumber’ın aynı olma ihtimali düşüktür.
Sonuçta aynı bileşen için Apache ve IIS tarafından oluşturulan ETags’lar sunucular arasında uyum sağlamayacaktır. ETags’lar uyuşmazsa, kullanıcılar ETags için tasarlanan küçük hızlı 304 yanıtı almazlar ve bunun yerine bileşenler için tüm verilerde normal bir 200 yanıtı alcaklardır. Şayet web siteniz tek bir sunucu üzerindeyse, bu problem oluşturmaz. Ancak, web siteniz birden fazla sunucuda yer alıyorsa ve Apache ya da IIS’deki varsayılan ETag konfigürasyonlarını kullanıyorsanız, kullanıcılarınız sayfalara daha yavaş erişim sağlar, sunucunuzda aşırı yüklenme olur, bantgenişliği tüketiminiz artar, proxyler içeriklerinizi etkili bir şekilde önbelleğe almazlar. Bileşenleriniz Expires başlığına sahip olsa bile, kullanıcı ne zaman Reload ya da Refresh yaparsaGET isteği yapılır.
Eğer ETags’ın sağladığı değişken doğrulama modelinden yararlanmıyorsanız, ETag’ı tamamen kaldırmanız en iyisi olacaktır. Last-Modified başılığı, bileşenin zaman damgasını esas alarak doğrulanır. ETag’ı kaldırmek, hem yanıtlarda hemde sonraki isteklerde HTTP başlık boyutunu azaltır.
Burdan ETag’ın nasıl kaldırılacağına bakabilirsiniz. Apache’de bu işlem Apache konfigürasyon dosyasına aşağıdaki kod satırını ekleyerek basit bir şekilde yapılmaktadır.
FileETag none
Ajax’ı Önbelleklenebilir Yapma
Ajax’ın bahsedilen avantajlarından biri de, kullanıcılara anlık geri bildirim (feedback) sağlamasıdır. Çünkü arka plan web sunucularından uyumsuz bir şekilde bilgi talep etmektedir. Pek çok uygulamada kullanıcıların bekleme süresi, Ajax’ın nasıl kullanıldığıyla ilişkilidir. Örneğin; web tabanlı bir e-posta sunucusunda, kullanıcılar arama kriterlerine uyan tüm e-posta iletilerini bulmak için Ajax taleplerini bekliyor olacaklardır. Söz konusu uyumsuzluğun, anlık (dakik) anlamına gelmediğini unutmamak gerek.
Ajax isteklerini optimize etmek performansı artırmak açısından önemlidir. Ajax performansını artırmanın en önemli yolu, yukarıda bahsedilen “Expires ya da Cache-Control başlığı ekleme” konusunda belirtildiği üzere yanıtları önbelleklenebilir yapmaktır. Bunlardan bazıları Ajax için de uygulanmaktadır.
- Gzip Bileşenleri
- DNS aramalarını azaltma
- Javascripti küçültme (önemini azaltma)
- Yönlendirmelerden kaçınma
- Etags yapılandırması
Örneğe bakalım. Web 2.0 e-posta istemcisi otomatik tamamlama için kullanıcının adres defterini indirmek üzere Ajax’ı kullanır. Eğer kullanıcı en son kullandığı e-posta uygulamasındaki adres defterinde herhangi bir değişiklik yapmamışsa ve Ajax yanıtı Expires or Cache-Control header başlığıyla önbelleklenebilir yapılmışsa, önceki adres defteri yanıtı önbellekten okunabilir. Yeni bir istek karşısında daha önce önbelleğe alınmış adres defteri yanıtı kullanıldığında, tarayıcı haberdar edilmelidir. Bu, kullanıcının adres defterinde yaptığı en son değişiklikleri gösteren Ajax URL adres defterine zaman damgası ekleyerek gerçekleşebilir. Örneğin ; &t=1190241612 En son işlemlerden sonra adres defterinde bir değişiklik olmamışsa zaman damgası aynı kalacak ve tarayıcının önbelleğinden okunuyor olacaktır.
Kullanıcı adres defterinde değişiklik yapmışsa, zaman damgası ön belleğe alınan yanıtlarla uyuşmayan yeni url oluşturacaktır ve tarayıcı adres defterinde güncellenen kayıtları talep edecektir. Ajax yanıtları önemli ölçüde oluşturulup, sadece tek bir kullanıcı için uygulansa da, önbelleğe alınacaklardır. Bu şekilde olması Web 2.0 uygulamalarınızı daha hızlı hale getirecektir.
Arabelleği Önceden Temizleme
Kullanıcı bir sayfa isteği gönderdiğinde bu, HTML sayfa ile birlikte sunucu için 200 ile 500ms (mikro saniye) arasında gerçekleşir. Bilgilerin sunucudan gelmesini beklerken bu esnada tarayıcı, idle (boş) konumdadır. PHP’de flush() adlı
bir fonksiyonunuz var. Bu fonksiyon HTML yanıtları göndermenizi kısmen mümkün kılar. Böylelikle arkaplanınız HTML sayfasının geri kalanları ile meşgul olurken, tarayıcınız bileşenleri çekmeye başlar. Bunun başlıca faydası artalanda ve arkaplanda görülür. HTML başlıklarının oluşturulması daha kolay olduğu için HEAD’den sonra flushing komutunun yer alması doğrudur ve arkaplan işlem halindeyken bu doğrultuda bileşenleri çekilmeye başlanması tarayıcınızda CSS ve JavaScript dosyalarının eklenmesine imkan sağlar.
Örnek :
... <!-- css, js -->
</head>
<?php flush(); ?>
<bOdy>
... <!-- content -->
Yahoo Search, bu yöntemin faydalarını göstermek için kullanıcılara ve aramalara öncülük etmektedir.
Ajax İsteklerinde GET Kullanımı
Yahoo Mail, XMLHttpRequest kullanılırken, POST’un tarayıcılarda ilk önce başlıkları gönderme ve sonrasında verileri gönderme şeklinde iki aşamalı olarak gerçekleştiğini fark etmiştir. Bu yüzden gönderme aşamasında GET kullanımı tek bir TCP paketi alması sebebiyle en iyisidir. Interenet Explorer’de maksimum URL uzunluğu 2K’dır. Bu yüzden 2K’dan fazla veriler gönderirseniz, GET kullanamazsınız.
İlginç bir yan etkisi ise, POST’un veriyi göndermeden GET gibi rol alıyor olmasıdır. HTTP özelliklerini temel alan GET, bilgiye erişim anlamındadır. Bu yüzden, veri isteği yapılırken, sunucu tarafında saklanan verileri göndermeye karşı olduğu için GET kullanımı daha makuldür.
Post-load Bileşenleri
Sayfanıza daha yakından bakıp, kendinize “Öncelikle sayfayı oluşturmak için neler gerekli?” sorusunu sorabilirsiniz. İçeriğin geri kalanı ve bileşenler bekleyebilir.
Javascript, onload (yükleme) olayından öncesinde ve sonrasında ayırma işlemi için ideal bir adaydır. Örneğin; sürükle-bırak ve animasyonlar yapan kütüphane ve javascript kodlarınız varsa, bunlar bekleyebilir çünkü sayfaki sürükleme işlemleri, oluşturma işlemlerinden sonra gelir. Post-load olayı için aranan diğer yerler klasör altındaki resimler ve gizli içerikleri içermektedir.
Bu konuda size yardımcı olacak araçlar:
YUI images Loader, klasörler altındaki resimleri geciktirmenizi sağlar ve YUI Get utility ise anında CSS ve JS ekleyebileceğiniz en kolay yöntemdir.
Performans hedefleri diğer en iyi web geliştirme uygulamaları ile paralel olduğu sürece iyidir. Bu durumda, aşamalı geliştirme fikri bize Javascript’den bahsetmektedir. Desteklendiği sürece kullanıcı deneyimlerini geliştirebilir ancak sayfaların javascript olmadan bile çalışır olduğundan emin olmak zorundasınız. Bu sebeple sayfaların iyi şekilde çalıştığından emin olduktan sonra, sürükle-bırak ve animasyon gibi daha çarpıcı özellikler sunan post-loaded scriptlerle bunu geliştirebilirsiniz.
Önyükleme Bileşenleri
reload (önyükleme) post-load’un tam tersi gibi görünebilir. Fakat bunun farklı bir amacı vardır. Bileşenleri önyükleme yaparak, tarayıcınızın boş olduğu zamandan yararlanabilir ve ilerde ihtiyacınız olan bileşenleri (images, styles and scripts) isteyebilirsiniz. Bu yöntem sayesinde, kullanıcı sonraki sayfayı ziyaret ettiğinde, önbelleğinizde çoktan bir çok bileşene sahip olmuş olabilirsiniz ve kullanıcılar için sayfanız daha hızlı yüklenecektir.
Birkaç önyükleme çeşiti
- Unconditional preload yükleme olur olmaz, devam edip bir kaç fazladan bileşen alırsınız. Hareketli bir resimde nasıl yükleme talep edildiğini google.com dan kontrol edin. Bu hareketli resime google.com anasayfasında ihtiyaç duyulmaz ancak arka arkaya arama sonuç sayfalarında ihtiyaç duyulur.
- Conditional preload kullanıcı eylemlerini esas alır. Kullanıcının duruma göre yönlendirildiği yer hakkında akıllı bir yorum yaparsınız. Yahoo.com üzerinden giriş kutusuna yazdıktan sonra bazı fazladan bileşenlerin nasıl istenildiğini görebilirsiniz.
- Anticipated preload tasarımı başlatmadan önce önyükleme yapın. “Yeni site harika fakat öncekinden daha yavaş” lafı, duyduğunuz yeniden tasarlama sonrası meydana gelir. Problemin bir kısmı, ziyaretçilerin dolu bir önbellekle eski sitenizi ziyaret ediyor olması olabilir. Yeni olanı her zaman boş bir önbellek deneyimi demektir. Yeniden tasarımı başlatmadan önce bile bazı bileşenlerin ön yüklemesini yaparak bu yan etkiyi azaltabilirsiniz. Eski siteniz tarayıcınızın idle (boş) olduğu zamanı kullanabilir ve yeni site tarafından kullanılacak olan resim ve scriptleri talep edebilir.
DOM Öğelerinin Sayısını Azaltma
Karmaşık bir sayfa, yüklenecek daha çok bit demektir ve bu da Javascript’te daha yavaş DOM erişimi anlamına gelmektedir. Sayfanızda 500 ile 5000 arasında DOM öğesi oluşturuyorsanız olay işleyici eklemek istediğinizde bu bir fark yaratır.
DOM öğesi sayısının fazla olması, içeriği çıkarmadan mutlaka sayfanın biçimlendirme diliyle geliştirilen birşey olduğunun belirtisi olabilir.
Layout’ların en büyük yardımcısı YUI CSS Utilities lerdir. grids.css genel layout (düzen)lerde size yardımcı olur ve reset.css tarayıcının varsayılan formatını kaldırmada yardımcı olur. Bu, yeni bir başlangıç ve işaretlemelerinize dair düşünme fırsatı sağlar. Örneğin <div> ler anlamsal olarak makul görüldüğünde kullanılır, yeni bir satır oluşturduğu için değil.
DOM öğelerinin sayısını test etmek kolaydır. Tek yapmanız gereken Firebug konsolunda yazmak.
document.getElementsByTagName(’*’).length
Kaç tane DOM öğesi fazla anlamına gelmektedir. İşaretlediğiniz benzer sayfaları kontrol edin. Örneğin; Yahoo anasayfası oldukça yoğun bir sayfadır ve hala 700’ün altında öğesi (HTML tags) bulunmaktadır.
Alan Adlarında Bileşenleri Ayırma
Bileşenleri ayırmak, eş zamanlı indirmelerinizi en üst düzeyde artırmanızı sağlar. DNS arama sınırı yüzünden 2-4 den fazla alan adı kullanmadığınızdan emin olun. Örneğin; www.example.org da HTML ve dinamik içerik bulundurabilirsiniz ve static1.example.org ve static2.example.org arasındaki statik bileşenleri ayırabilirsiniz.
Daha fazla bilgi için buraya bakın.
Iframe Sayısını Azaltma
Iframe’ler HTML belgenizin üst belgelere eklenmesini mümkün kılar. Etkili bir şekilde kullanıbilmelerinden dolayı
Iframe’lerin nasıl çalıştığını bilmek önemlidir.
iframe> pros:
- rozet ve reklam gibi üçüncü parti ağır içeriklere yardım eder
- sanal güvenlik
- eş zamanlı script indirme
<iframe> cons:
- boş olsa bile maliyetli
- sayfa yüklemeyi engeller
- non-semantik
404’lere Hayır
HTTP isteklerinin, işe yaramaz yanıtlar almaları (i.e. 404 Not Found) tamamen boşuna olduğu için ve kullanıcı deneyimlerini yarar sağlamadan yavaşlattıkları için masraflıdır.
Bazı sitelerin kullanıcı deneyimleri için faydalı olan yardımcı 404’leri vardır “Bunu mu kastediyorsunuz?” gibi. fakat sunucu kaynaklarını (veritabanı) boşa harcarlar. Özellikle dış kaynaklı bir javascript bağlantısı hatalı olduğunda bu olumsuz bir durumdur ve sonuç 404’tür. Öncelikle bu indirme eş zamanlı indirmeleri engelleyecektir. Sonrasında tarayıcı, içinde kullanılabilir birşeyler bulmaya çalışıp javascript kodmuş gibi 404 yanıtını ayrıştırmaya çalışır.
Çerez Boyutunu Azaltma
HTTP çerezleri, kimlik doğrulama ve kişiselleştirme gibi birçok farklı nedenlerle kullanılmaktadır. Çerezlere dair bilgiler web sunucuları arasında HTTP başlıklarında değiştirilir. Kullanıcının yanıt süresi üzerindeki etkiyi azaltmak için çerez boyutlarını mümkün olduğunca düşük tutmak önemlidir.
Daha fazla bilgi için buraya bakınız.
- Gereksiz çerezleri kaldırın
- Kullanıcının yanıt süresi üzerindeki etkiyi azaltmak için çerez boyutlarını mümkün olduğunca düşük tutun
- Uygun domain lerde çerez ayarlarını gözden geçirin çünkü sub domainler bundan etkilenmez
- Uygun bir şekilde bitiş tarihini ayarlayın
Bileşenler için Çerezsiz Domainleri kullanma
Tarayıcı statik bir görüntü talebinde bulunup bununla birlikte çerezler gönderdiğinde, sunucunun bu gönderilen çerezler üzerinde herhangi bir işlevi bulunmaz. Bu statik bileşenlerin çerezsiz istekte bulunduklarından emin olmalısınız. Bir subdomain oluşturun ve statik bileşenleri orda muhafaza edin.
Domain adresiniz www.example.org ise, statik bileşenleri static.example.org’da bulundurabilirsiniz. Bununla birlikte, çerezlerinizi, www.example.org’un aksine example.org üst düzey domain üzerine kurmuşsanız, o zaman static.example.org’a olan tüm istekler bu çerezleri içerecektir. Bu durumda, daha yeni bir domain satın alabilir, statik bileşenleri burada bulundurabilirsiniz.
Yahoo! yimg.com’u, YouTube ytimg.com’u, Amazon images-amazon.com kullanmaktadır.
Tarayıcı statik bir görüntü talebinde bulunup bununla birlikte çerezler gönderdiğinde, sunucunun bu gönderilen çerezler üzerinde herhangi bir işlevi bulunmaz. Bu statik bileşenlerin çerezsiz istekte bulunduklarından emin olmalısınız. Bir subdomain oluşturun ve statik bileşenleri orda muhafaza edin.
Domain adresiniz www.example.org ise, statik bileşenleri static.example.org’da bulundurabilirsiniz. Bununla birlikte, çerezlerinizi, www.example.org’un aksine example.org üst düzey domain üzerine kurmuşsanız, o zaman static.example.org’a olan tüm istekler bu çerezleri içerecektir. Bu durumda, daha yeni bir domain satın alabilir, statik bileşenleri burada bulundurabilirsiniz.
Yahoo! yimg.com’u, YouTube ytimg.com’u, Amazon images-amazon.com kullanmaktadır.
DOM Erişimini Kısıtılama
avaScript ile DOM öğelerine erişim, uyumlu sayfalarda çok yavaş işlemektedir.
- erişilen öğeler için referansların önbelleğe alınması
- “çevrim dışı” düğümlerin güncellenmesi ve bunları dizine eklenmesi
- Javascript ile layout düzeltmelerden kaçınılması
gerekmektedir.
Daha detaylı bilgi için buraya bakınız.
<link> over @import Seçimi
Daha önceki uygulamalardan birinde, CSS’nin aşamalı olarak oluşturulması açısından üst kısımda yer alması gerektiğini belirtilmiştir.
Interner Explorer’de @import kullanımı, sayfanın alt tarafındaki <link> kullanımıyla aynı görevi görmektedir. Bu sebeple kullanılmaması en doğrusudur.
Filtrelerden Kurtulma
Interner Explorer’e has AlphaImageLoader filtresi, Internet Explorer 7’den onceki surumlerde gerçek renk PNG’lerdeki sorunu gidermeyi amaçlamaktadır. Bu filtredeki sorun, görüntülerin yüklenme aşamasında tarayıcı donduruyor olmasıdır ve aynı zamanda bellek kullanımını da artırmaktadır. Bu şekilde birden fazla probleme sebep olmaktadır.
Buna en iyi çözüm AlphaImageLoader’dan tamamen kurtulmaktır. Bunun yerine IE’de PNG8 kullanın.
Eğer gerçekten AlphaImageLoader filterine ihtiyacınız varsa, IE7+ kullanıcılarını cezalandırmamak adına hack _filter ı kulanın.
Görüntüleri Optimize Etme
Tasarımcı web siteniz için resimler oluşturduktan sonra, sunucunuza bu resimler yüklemeden önce deneyebileceğimiz daha pek çok şey vardır.
- Resimdeki renk sayısına karşılık gelen bir palet boyutu kullanırsanız, GIF’leri kontrol edebilirsiniz. imagemagick kullanırken, identify -verbose image.gifkullanımını kontrol etmek daha kolaydır. Palette 4 ve 256 renk aralığı kullanan bir resim varsa, geliştirilmesi gerekmektedir.
- Boyut açısında GIF’leri PNG formatına dönüştürmeyi deneyin. Geliştiriciler PNG’nin tarayıcılardaki sınırlı desteği sebebiyle bu formatları kullanmakta tereddüt etmekteydiler. Fakat bu artık geçmişte kaldı. Gerçek renk PNG’lerin asıl sorunu, alfa saydamlıklarıdır. Ancak, GIF’ler gerçek renk değildirler, ve değişken saydamlıkları da desteklemezler. GIF ile yapabileceğiniz birşeyi, PNG (PNG8) ile de yapabilirsiniz (animasyonlar hariç).
Basit imagemagick komutları;
convert image.gif image.png
“Tek söyleyeceğimiz, PiNG’e bir şans verin”
- Tüm PNG’lerde pngcrush aracını kullanın. Örnek;
pngcrush image.png -rem alla -reduce -brute result.png
- Tüm JPEG’lerde jpegtran kullanın. Bu aracı kullarak JPEG’lerdeki işlemlerinizde kayıpları ortadan kaldırıp, gereksiz (EXIF bilgileri) bilgileri, yorumları kaldırabilir ve optimizasyon sağlayabilirsiniz.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
CSS Spirtes leri (hareketleri) Optimize Etme
- Hareketli resimlerin yatayın aksine dikey olarak düzenlenmesi çok daha küçük dosya boyutlarıyla sonuçlanır.
- Benzer resimleri sprite (hareketli) olarak birleştirmek, renk sayısını düşük tutmanızı sağlar. İdeal olanı PNG8’e sığacak şekilde 256 renk altıdır.
- “Cep dostu olun” ve sprite görüntüler arasında büyük boşluklar bırakmayın. Bu durum dosya boyutunu o kadar fazla etkilemez ancak resimleri kullanıcı arayüzünde pixele sığdırmak için daha çok belleğe ihtiyaç vardır. 100x100 bir resim 10000 pixeldir, 1000x1000 bir resim de 1 milyon resim demektir.
HTML’de Görüntüleri Ölçeklendirmeyin
HTML’de genişlik ve yüksekliği ayarlarlayabileceğinizden dolayı, gerektiğinden fazla büyük resim kullanmayın.
<img width="100" height="100" src= "mycat.jpg"> gerekiyorsa, resminiz (mycat.jpeg) 100x100px olmalı.
favicon.ico yu Küçültme ve Önbelleklenebilir Yapma
The favicon.ico, sunucunuzun root bölümünde yer alan bir resimdir. Gerekli ama sinir bozucu birşeydir. Çünkü bunu dikkate almasanız bile, tarayıcınız bunu talep edecektir. Bu sebeple 404 Not Found yanıtını almamak en iyisidir. Aynı zamanda aynı sunucuda oldukları için çerezler talep edildiği sürece gönderilir. Bu resim ard arda indirmelere müdahale etmektedir. Örneğin; Internet Explorer’de yükleme sırasında extra bileşenler talep ettiğinizde, favicon bu extra bileşenlerden önce indirilecektir.
favicon.ico resminin dezavantajlarını azaltmak için;
- küçük tercihen 1K altında
- sizi iyi hissettirecek Expire başlıklar ayarlayın (değiştirirseniz, yeniden isimlendiremezsiniz) Expire başlıklarını ileriye yönelik birkaç aylığına ayarlayabilirsiniz. Bilgilendirme kararları almak için mevcut favicon.ico resminin değişiklik tarihini kontrol edin.
imagemagick küçük favicon’lar oluşturmanıza yardım eder.
Bileşenleri 25K Altında Tutma
Bu sınırlama iPhone’nun 25K’dan daha büyük bileşenleri önbelleğe alamayacağı gerçeği ile ilgilidir. Sıkıştırılmamış dosya olduğunu unutmayın.
Daha detaylı bilgi için buraya bakın.
Bileşenleri Çok Kısımlı bir Belgeye Taşıma
Çok kısımlı bir belgeye bileşenleri taşımak, ekli (attachments) e-postaya benzer. Bir HTTP isteğiyle birkaç bileşen almanızı sağlar.
Bu yöntemi kullanırken, kullanıcı arayüzünün bunu destekleyip destelmediğini (iPhone desteklemiyor) kontrol edin.
Hiç yorum yok:
Yorum Gönder