Web sitelerinin ziyaretçi sayısını artırılmasının birçok yolu vardır. Bunların en başında SEO yani arama motoru optimizasyonu geliyor. Ancak SEO tek başına yeterli değildir. Kısa vadede siteniz için ziyaretçi sağlasa bile, uzun vadede sürekli ve sadık kullanıcılarınızın olması için web sitenizin performansı çok önemlidir. Sayfaların hızlı yüklenmesi, kullanıcının sayfa geçişleri arasında çok beklememesi ziyaretçilerinizin sitenizi daha kullanışlı bulmasına ve sevmesine yol açacaktır. Diğer taraftan web sitenizin performansının da SEO üzerine doğrudan etkisi vardır.

Performansın ziyaretçi sayısı üzerindeki etkisine dair birkaç araştırma var. Yavaş açılan sayfaların kullanıcılar üzerindeki etkileri için internetten şu verilere ulaştım;

• %11 – Daha az sayfa görüntüleme
• %16 – Daha az müşteri memnuniyeti
• %7 – Her anlamda getiri kaybı

Amazon bu verileri doğrular nitelikte şunu söylüyor; her 100 ms hız artışı, gelirlerimizde %1 artış sağlıyor. Yani bir sayfanın 100 ms. daha hızlı sürede açılması gelirlerinizi %1 arttırabilir. Çok küçük ve kolay olabilecek bir performans arttırımı size hatrı sayılı bir kâr getirebiliyor.

Bir başka araştırmaya göre;

• %47 – Kullanıcı websitesinin 2 saniyenin altına yüklenmesini bekliyor
• %40 – Kullanıcı, eğer sayfa 3 saniyenin üzerinde yükleniyorsa, siteyi terk ediyor
• %52 – Online alışveriş yapan kullanıcı ise sadakat için sayfa hızını önemli görüyor

Türkiye’deki bir e-ticaret giyim sitesinin yazılım müdüründen bizzat duyduğum söz şöyleydi; “her 100 ms hız demek, yılda 1 milyon TL nin üzerinde ciro anlamına geliyor”.

Biz de web sitelerimizin hızını artırmak için temel anlamda birkaç önlem alabiliriz.

1. HTTP İsteklerini Optimize Etmek

Bir web sitesinin yüklenmesi sırasında içeriğin %80-%90 civarındaki kısmında, css, js, resimler, flash, vs. yükleniyor. Tüm bu parçalar için ayrı ayrı HTTP istek gönderiliyor. Artan bu istekler sayfanın yüklenmesini de geciktiriyor. HTTP istekleri azaltmak için;

• Sayfadaki istek sayısı optimize edilmeli
• Resim yerine CSS kullanılabiliyorsa, kullanılmalı
• Birden fazla CSS ve JavaScript dosyası varsa birleştirilmeli
• Scriptler mümkün olduğunca kısa tutulmalı
• Sorun olmayacak tüm JavaScript dosyaları, sayfanın en altında referans edilmeli
• CDN kullanılmalı (bu konuyu alt maddede detaylıca anlatacağım)

2. CDN(Content Delivery Network) Kullanımı

Web sitenizdeki resim, CSS ve JavaScript gibi statik içerikli dosyaları farklı bir web adresi üzerinden hizmete açmanız ve kullanmanızda sayfalarınızın yüklenme hızını ciddi şekilde etkilemektedir. Web tarayıcılarının bir domain’e eş zamanlı olarak gönderdiği talep sayısında bazı limitler vardır, bazı tarayıcılar için bu rakam 3 iken bazılarında 6 olmaktadır. Örneğin bir sayfa içerisinde 20 resim dosyası, 3 CSS dosyası ve 5 JavaScript dosyası varsa web tarayıcı anlık olarak 3 dosyaya talep yapar, bu dosyalardan biri bitince diğerine geçer. Aralardaki küçük bekleme süreleri toplanınca da kimi zaman sayfanızın yüklenmesini ciddi şekilde yavaşlatabilir.

İçeriklerinizi kendi açacağınız farklı domain’ler üzerinden kullanabileceğiniz gibi Google, Amazon, Microsoft gibi CDN sağlayıcılarda bulunan CSS ve JavaScript gibi dosyalara da sayfalarınızdan referans verebilirsiniz. Bilhassa çok fazla sayıda CSS ve JavaScript dosyası kullanılan durumlarda sayfanızın yüklenme hızında önemli bir kazanım elde edebilirsiniz.

3. Sunucu Cevap Süresinin Kısaltılması

Sunucu yanıt süresindeki hedef en fazla 200 ms olmalıdır. Sunucu cevap süresi, website trafiği, kaynak kullanımı, sunucuda çalışan kodların kalitesi ve sunucu yazılımına bağlıdır.

Sunucu cevap süresini azaltmak için, öncelikle donanımdan emin olmak gerekir. Sağlam donanıma sahip bir sunucu için zaten işletim sistemi yazılımı neredeyse standart. Sunucu kaynaklarının en optimize şekilde kullanıldığından da emin olmak gerekir. Bunun için sunucuda çalışan kodlarımızın da kaliteli yazılmış olması gerekiyor. Network çıkışının hızlı olması buradaki en kilit noktadır. Yine sunucuda işlemlerin hızlı olması adına yüksek hızda çalışan CPU veya hard-disk yerine SSD kullanımı da işlem sürelerini kısaltacak, dolayısıyla performansa doğrudan etki edecektir.

4. İçerik Sıkıştırma

Kaliteli bir içeriğe sahip sayfalar genelde 100 KB üzerinde bir boyuta sahiptir. Kaliteli içerikten kasıt UX, SEO, resim kalitesi vs. gibi birçok alanda iyi olan sayfa demek aslında.

Kalite için belli bir boyuta ihtiyaç olduğu için, bu kaliteli ve büyük sayfaların yüklenme zamanını azaltmak için sıkıştırma yöntemlerini kullanabiliriz. Sıkıştırma işleminden sonra sayfanın istemciye gidecek boyutu %80 oranlarına kadar azalacaktır. Sunucu-istemci arasında sıkıştırma ve sıkıştırılan içeriğin açılması için işlemler yapılacak olsa da, gelen-giden verideki kazanç genellikle bu işlemin çok ötesinde bir performans kazancı sağlayacaktır. Bu konuyla ilgili kullanılan sıkıştırma yöntemlerinden biri olan GZIP‘e göz atabilirsiniz.

5. Tarayıcı Önbellek Kullanımı

Bir websitesi için tarayıcı önbellek özelliği aktif olduğunda, web sitesine ilk girişten sonraki tüm girişlerde (önbellek süresi boyunca), önbelleklenen veriler için gereksiz HTTP istekler olmayacaktır. Yani istemci ilk istekte sizin sunucunuza gider ve içeriği alır, içerik istemci tarafında önbellekte saklanır ve zaman aşımı olmadığı sürece sonraki isteklerde yanıt kendi bilgisayarından alınır. Bu da ikinci ve sonraki taleplerin süresini oldukça hızlandırır.

Elbette, hem sunucu hem de istemci taraflarında farklı önbellek kullanım stratejileri var. Ayrıca önbelleğe alınacak verilere ve bu verilerin kullanım durumlarına göre de önbellek süreleri değişebilir. Her sayfanın önbelleğe alınması tabii ki pek mümkün değildir, ancak içeriği değişmeyen veya çok nadir değişen sayfalarda tarayıcı önbellek kullanımını aktif etmek kullanıcıların sayfalarınıza erişimini hızlandıracaktır.

6. Dosyaların Küçültülmesi (Minify)

Websitesi tasarımı yaparken kodlarımızı en okunabilir şekilde yazıyoruz. Çünkü geliştirme sırasında kodun okunabilirliği bizim için çok önemli. Okunabilirlik adına kod satırları arasında çok fazla boş satırlar, boş karakterler oluyor. Bundan dolayıda kodlarımız olduğundan fazla boyutlara sahip oluyor.

JavaScript, CSS ve HTML kodlarındaki gereksiz alanları temizleyerek, dosya boyutlarını da küçültebiliriz. Bu işlemleri manuel olarak yapmamız tabii ki zor, zaten gereksiz de bir işlem. Piyasada bu dosyaları minimize etmek için kullanılan birçok kütüphane ve online araç mevcut. Bunları kullanarak dosyalarınızın boyutlarını düşürebilirsiniz.

7. Resim Boyutlarının Optimize Edilmesi

Resimler için boyut ve format önemlidir. Tarayıcı üzerinde gösterilen resimlerin bazıları gereksiz seviyede kaliteli olabilir. Resimlerin kalitesi kullanıcıların anlamayacağı kadar düşürülmelidir. Bunun için kullanılabilecek birçok online araç var. Bu yazıda birkaçını bulabilirsiniz.

Resimler için diğer önemli bir konu, resmin formatı. Mümkün olduğu sürece

• JPEG kullanılmalı.
• PNG’nin zaten bir amacı var ve kullanılması gerektiği durumlarda kullanılmalı.
• GIF sadece küçük ve basit animasyonlar için kullanılabilir.
• BMP ve TIFF hiç kullanılmamalı.

Resimler konusunda bilinmesi gereken diğer bir konu da <img src=”” etiketindeki src kısmının boş bırakılmaması. Aynı şey linklerdeki href attribute için de geçerli. Eğer boş bırakılırsa gereksiz yere sitenin kök adresine HTTP istek yapılacaktır.

SONUÇ

Yukarıda yazılanlar aslında performans için yapılması gereken temel işler. Yukarıdaki temel işlerin içerisinde bazı detay konular vardır. Örneğin;

• JavaScript ve CSS dosyalarını ayrı yazıp, proje içinden referansla çağırmak
• JavaScript ve CSS kodlarında performansı etkileyecek kod satırlarından kaçınmak. Css için örneğin; expression tanımı yapmak.
• Dns bilgilerinin önbelleklenmesi
• Yönlendirmelerden kaçınmak
• ETag ların ayarlanması
• Ajax requestlerin GET tipinde yapılması (gözle görülür bir performans farkı oluyor)
• Mümkün olduğunca daha az HTML elemanı kullanmak.
• Favicon‘un küçük ve önbelleklenmiş olması
• Iconlar için kullanılan resimlerin tek parça olması (her icon için ayrıca HTTP istek yollanmaz böylece)
• JavaScript dosyalarının asenkron yüklenmesi

Alınabilecek bazı önlemler çok basit, ama bazıları ise uzmanlık gerektiren önlemler olabiliyor. Mümkün olduğu kadar gerekli olan araçların kullanılması, performans artırma çalışmalarında çok fazla yardımcı olacaktır.

Websitesi performansı artırmak için uygulayacağımız çözümler için “optimize” kelimesi çok önemli. Hızı artırmak isterken, sitenin UI, UX, SEO gibi önemli yapılarının bozulmamasına özen göstermeliyiz.

KAYNAKLAR

https://blog.crazyegg.com/2013/12/11/speed-up-your-website/

http://yslow.org/

http://www.monitis.com/blog/2015/05/08/8-ways-to-improve-your-website-performance

http://webdesign.tutsplus.com/articles/best-practices-for-increasing-website-performance–webdesign-9109