Sitenizi Hızlandırın!

Sevil Yılmaz — Fri, 06 Aug 2010 13:15:45 +0000

Sitemizin tasarımını yaparken ve kodlarını yazarken yaptığımız ya da yapmadığımız bazı şeyler sitemizin açılış hızını büyük ya da küçük oranda etkiler. Sitemizin daha hızlı açılabilmesi için aşağıya birkaç ipucu ekledim. Bazıları sadece birkaç dakikanızı alabilecek bu işlemler sitenizin açılış hızını oldukça fazla etkileyecek. Bana güvenin.

İşte hala yapmadıysanız, yapmanız gerekenler:

Dosyaları Bir Araya Toplayın ve Sıkıştırın

Birden fazla olan CSS ve Javascript dosyalarınızı bir CSS ve bir Javascript olmak üzere iki dosyaya toplayın ve bunları sıkıştırın.

CSS Düzenlemek İçin Güzel Siteler

Javascript Dosyasını Sıkıştırmak İçin Kullanabileceğiniz Siteler

CSS ve Javascript Dosyalarınızı “Harici” Yapın

CSS ve Javascript kodlarınızı dosyalara toplayıp sitenize harici (external) olarak bağlayın. Çünkü harici dosyalar tarayıcının belleğinde tutulur. HTML dosyasının içindeki inline kodlar ise her defasında tekrardan yüklenir.

Stil kodlarınızı sayfalara göre ayırın. Bütün sayfalarda kullandığınız kodları bir dosyaya koyun. Sayfalara özel olanları da ayrı ayrı dosyalara. Böylece kullanmadığınız kodları yüklememiş olursunuz.

CSS Sprite

İnternet teknolojisini uzaktan yakından takip eden herkes CSS Sprite‘ı duymuştur. Kim düşünmüşse bunu iyi etmiş.

CSS Sprite bize birçok fayda sağlar. Bunlardan birkaçını şöyle sıralayayım.

Öncelikle görsel boyutunu azaltır. Yukarıdaki örnekte olduğu gibi; en sağdaki görselin boyutu 3.66 kB. Eğer tüm görselleri teker teker alsaydık toplam dosya boyutumuz 14.64 kB. olacaktı. Ancak hepsini birleştirip kullandığımızda boyut yaklaşık 9.5 kB.a kadar düşüyor.
Dört yerine sadece bir tane görsel kullandığımız için HTTP isteği de dörtten bire düşüyor. Daha az istek olduğu için sitemiz daha hızlı açılıyor. Ne güzel değil mi!
Diyelim sadece görsellerin normal hallerini koydunuz, “hover“larını koymadınız. Böyle bir durumda sayfanın ilk açılışında sadece normal halleri yüklenir haliyle. Fareyi görselin üzerine getirdiğinizde bu sefer “hover” hali çağırılır. Ama bu hali siteye önceden yüklenmediği için bu sefer de bunu yükler. Bu da belli bir zaman kaybına neden olur.

Diyeceksiniz, “sadece 5 kB. nedir ki!” Demeyin! Şöyle düşünün: Sitenize bir kişi girdiğinde server’a 5 kB. daha fazla yüklenecek. Sitenizin günlük ziyaretçi sayısına ortalama 100 desek; günde 500 kB. eder. Bunu aya çarparsanız 4.5 mB. eder ve bu sadece 5kB.lık bir fazlalıktan oluşan aylık değer. Bunun birden fazla olduğunu düşünürseniz, bunun size fazladan server masrafı olarak döneceğini tahmin edebilirsiniz.

Nasıl Kullanılır?

Görsel Formatını Doğru Seçin

.png, .gif‘e karşı; hatta .jpg‘e bile karşı.

.gif yerine .png-8 kullanın. Bu iki format aynı renk paletini(256) kullanır. Ama png-8‘in boyutu .gif‘e göre çok daha küçüktür. .gif‘i sadece animasyonlu görsellerde kullanın.

.png-24, png-8‘in alpha transparan özelliği eklenmiş halidir. Transparan özelliğine sahip görsellerde bunu kullanabilirsiniz.

.jpg ise fotoğraf gibi görsellerde ön plana çıkar. Ancak .jpg‘i kaydederken kalite diye bir olay vardır. 100 üzerinden değerlendirilir. Bu değer düştükçe görselin boyutuyla beraber kalitesi de düşer.

Fotoğraf dışındaki görseller için .png formatını kullanın. Böylece görselin kalitesini düşürmemiş olursunuz.

Stil Dosyalarını Sayfanın Üstüne Koyun

Bir kullanıcı ilk defa sitemize girdiğinde sitenin hızlı açılması onun için önemlidir. CSS çıktığından beri bunu çok güzel bir şekilde sağlayabiliyoruz. Stil dosyamızı

etiketinin içine koyduğumuzda ilk önce o yükleneceğinden site daha yüklenmeden tarayıcımız onun nasıl görüneceğini bilir. Böylece site dağınık değil de toplu bir şekilde yükleniz. Kullanıcı da internet tecrübesinden sonuna kadar faydalanmış olur.

Script’leri Sayfanın Sonuna Koyun

Çoğu tarayıcı siteyi yüklerken aynı anda iki paralel indirme yapabilir. Ancak “script” dosyaları indirilirken başka indirilme yapmazlar. Sitenin yüklenmesine devam etmek için script‘in inmesini beklerler.

Eğer script dosyalarımızı sayfanın sonuna hemen etiketinin önüne koyarsak tüm sayfa yüklendikten sonra script‘leri indirmeye başlar.

Content Delivery Network (CDN)

CDN kullanın. CDN nedir, ne işe yarar? Genel kullanımı javascript kütüphanelerini (jQuery, MooTools, Prototype gibi.) başka servis sağlayıcılarından çağırmaktır. Bunun bize birkaç faydası var.

Örneğin şu anda jquery.1.4.2.min.js kütüphanesi yaklaşık 71kB. Biz bunu kendi servis sağlayıcımızdan değil de Google, Microsoft gibi büyük sağlayıcılardan çağırırsak fazladan 71kB.’lık bir yükten kurtulmuş oluruz.
Bir ziyaretçi bizim kullandığımız kütüphanelerden kullanan bir siteden bize geldiği zaman o kütüphane zaten tarayıcının belleğinde tutulduğundan tekrardan yükleme gereği duymaz. Böylece sitemiz daha hızlı açılır.

Daha birçok dosyayı da ortak ağda tutup site açılışını daha da hızlandırabiliriz. Buna burada girmeyeceğim. Belki başka bir zaman.

Örneğin jQuery’yi CDN’den çağırmak için şöyle kullanabiliriz:

Daha fazla kütüphane kullanımı için Google Libraries API‘ye bakabilirsiniz.

İçiçe Tablo Kullanımından Kaçının

Hatta bence tamamen tablo kullanımından kaçının. Yapabiliyorsanız tabloları da

elementiyle oluşturun.

Tarayıcılar tabloları tamamen yüklendikleri zaman gösterirler. Birkaç tane içiçe tablonuz varsa tablolar yüklenirken epey bir zaman geçer ve ziyaretçi bu süre zarfında sitenin yüklenmediğini düşünüp sayfayı yenileyebilir.

Uzun Sayfaları Bölün

Uzun sayfalar hem sayfanın yavaş açılmasına sebep olur hem de ziyaretçinin görünü korkutur. Ben ne zaman uzun bir yazı görsem okumak için önce bir düşünürüm. Sonunda da hep sonraya bırakırım.

Uzun sayfaları bölün; devamına bağlantı verin; olsun bitsin.

Gereksiz Boşlukları Ortadan Kaldırın

Boşluk (whitespace) da bellekte ufak da olsa yer kaplar. Fazla boşlukları kaldırın.

Coders' Grave » css sprite