8 Haziran 2014

Performanslı Site Oluşturma

Neden Performanslı Site

Site performansı müşteri memnuniyeti ve en az kaynak tüketimi açısından oldukça önemlidir. Üstelik eticaret sitesi ise olmazsa olmazlardandır. Microsoft’ta bilgisayar mühendisi ve hız analizcisi olarak çalışan Harry Shum şöyle demektedir, “Web de avantaj için 250 milisaniye sihirli bir değerdir”[1]. Google mühendislerine göre de 400 milisaniye – literatürde göz açıp kapama kadar – insanları daha az aramaya sevk edebiliyor demekteler[1]. Bu değerlerin üzeri geri dönüşlerde istenilen seviyeye ulaşmayı etkileyecektir.
Bunlarla birlikte performanslı bir sitede ziyaretçi sayfada rahat gezebilir ve daha fazla sitede vakit geçirir. Aynı zamanda Google site değerlendirmelerinde performans seo açısından etkilidir.
Bu nedenlerle sayfanın yavaşlamasına engel olabilmek ve azaltmak için yapılması gerekenlere dikkat edilmelidir.



Performanslı Site İçin Neler Yapılmalı

1. Sunucu seçimi ve DNS Hata Kontrolü

Site için diğer performans işlemleri ne kadar iyi olursa olsun doğru bir sunucu seçimi yapılmadığı takdirde istenilen sonuç elde edilmeyecektir. İhtiyaçlarınıza göre bir sunucu seçebilirsiniz ama yüksek performans için güncel teknolojik donanımları barındıran sunucular daha sağlıklı olacaktır. Aynı zamanda hizmet etmenin düşünüldüğü bölgeye yakın lokasyonda barındırılan sunucuları seçmek kullanıcıların daha hızlı sonuç almasını sağlayacaktır[2].
DNS hataları domainin çözümlenmesini geciktirecektir. Buda gereksiz zaman kayıplarını doğuracaktır. DNS hataları için gerekli olabilecek araçlar aşağıda bahsedilmiştir.

2. HTTP İsteklerini Azaltma

İstekte bulunan kullanıcı taraflı işlemin sonuçlanması için geçen sürenin %80’ i arayüz noktasındadır. Bu sürenin büyük bir çoğunluğu da yardımcı dosyaların (resim, stil dosyaları, script, flash, vb. ) indirilmesinde geçer. Site için yardımcı dosyalar azalttıldığında HTTP istekleri de azaltılmış olunur. Bu hızlı siteler için anahtar bir işlemdir.[3]
Ek yardımcı dosyaların sayısını azaltmanın yolu daha sade, basit tasarımlardır. Ama zengin içerikli tasarımlar için de yapılabilecek işlemler mevcuttur. Bunlar:
a)      Combined Files (Dosyaları Birleştirme): Çoklu benzer dosyaları tek bir dosyaya veya mümkün olan en az sayıda dosyaya indirgeme. Örneğin birden fazla olan CSS dosyalarını tek bir CSS dosyasında birleştirme. Her sayfada farklı bir CSS dosyası veya Script kullanılıyorsa bunu birleştirmek zorlayıcı olabilir fakat bu yöntem site yanıt süresini iyi noktalara getirecektir.
b)      CSS Sprites: Görsel isteklerin azaltılması için kullanılabilen bir yöntemdir. Tasarımda arkaplan olarak kullanılacak görseller tek bir dosyada birleştirilir ve CSS’de background-position kullanımı ile istenilen alan gösterilebilir.
c)      Image Maps: Görsellerin tek bir dosyada birleştirilerek üzerinde birden fazla bağlantının verilebilmesini sağlar. Bu işlemde resmin genişlik ve boyu aynı olacaktır fakat HTTP isteği azalmış olur. Görselde ilgili alanın koordinatlarını belirlemek yorucu olabilir ve hata olasılığı yüksektir. Bu yüzden dikkatli olunmalıdır.
d)      Inline Images: Herhangi bir HTTP isteği göndermeden “data: URL scheme” kullanılarak görseller html dosyasına direk olarak eklenebilir. Fakat bu yöntem tüm tarayıcılar tarafından desteklenmemektedir.

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

Türkçe karşılığı “içerik dağıtım ağı” olan CDN, boyut itibariyle yüksek olan internet sitelerine ait dosyaların, farklı sunucularda tutularak ve farklı coğrafik lokasyonlardan siteyi ziyaret eden kullanıcılara en yakın sunucular aracılığı ile bu dosyaları onlara gönderilmesini sağlayan bir network ağıdır[4]. Bu şekilde, kullanıcılara yakın olan sunucu daha hızlı cevap verecektir ve sonuç olarak kullanıcıları fazla bekletmeden onlara en kısa sürede sayfaya erişimleri sağlanır.
Yukarıda da bahsedildiği gibi istemci için geçen sürenin %80’i arayüz dosyalarının indirilmesinde harcanmaktadır. Dolayısı ile CDN bu noktada önem kazanmaktadır. Eğer site tamamı için CDN kullanılamıyorsa en azında mümkün olan eklentiler için CDN servisleri kullanılabilir. Örneğin jquery için Google CDN servisi kullanılabilir.
Eklentiler için CDN Paylaşımları:
a)      https://developers.google.com/speed/libraries/devguide
b)      http://cdnjs.com/

4. Expires Header Ekleme

Tarayıcı önbelleği (Leverage Browser Caching) çalışma mantığına göre bir site ziyaret edildiğinde kullanıcının tarayıcısı bu siteye ait verileri tarayıcı önbelleğine kayıt eder. Aynı kullanıcı siteyi tekrar ziyaret ettiğinde, tarayıcı sitenin sunucusuna bu verilerde bir değişiklik olup olmadığını sorgular. Bir değişiklik var ise kullanıcının tarayıcısı sitenin verilerini tekrar indirmek için istekte bulunur. Eğer bir değişiklik yoksa bu verileri tarayıcının önbelleğinden alır. Bu işlem tabiki daha hızlı gelişir çünkü veriler zaten kullanıcının bilgisayarında ve tekrar indirilmesine gerek kalmıyor.
Tarayıcının bu davranış şekli hız faktörü için yeterli gibi gözüküyor ama verilerin yeni olup olmadığını sorgularken de belli bir süre geçer. Bir adet veri için bu çok fazla olmayabilir fakat bir sayfa çoğu zaman 10 – 20 veriden oluşur, mesela logo, favicon, resimler, css ve js dosyaları gibi birçok veri gelir. Her bir veride tarayıcı sunucu ile sorgu kuruyor  “bu veride bir değişiklik var mı?”. Sadece bu sorguların zaman dilimini toplanmış olsa sayfa açılım süresinin daha geç açılacağı hesaplanabilir.
Sorgulama işlemini yapmana gerek yok komutunu sunucuya eklenerek tarayıcının sorgulama işlemini önlenebilir. Bu Expires-Header kullanımı ile yapılır. Expires-Header ile tarayıcıya hangi süre zarfında bu sorgulamayı yapıp yapmamasını söylenir. Expires-Header’da süreyi dosya türüne göre farklı zaman dilimine ayarlayarak vermek mümkündür. Eğer önemli bir dosya varsa ve bu dosyada daha sıklıkla değişiklik yapılıyorsa bunun süresini daha düşük tutmakta fayda vardır çünkü değişiklik yapılan dosya ancak süresi dolduğunda tekrar indirilecektir.
Expires-Header .htaccess dosyası ile eklenebilir, .htaccess dosyasına aşağıdaki komutları girilmelidir ve sunucudaki ana dizinde bulunan .htaccess ile güncellenmelidir.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

[5]

5. Gzip ile İçerik Sıkıştırma

Gzip ile dosyalar sıkıştırılarak dosya boyutunda %70 oranında kazanç sağlanabilir. Bu da indirilen dosyanın daha kısa sürede tamamlanmasını gerçekleştirir.


Yukarıdaki tablodan da Gzip ile dosyaların boyutundaki azalmalar ve cevap süresi ile kazanılan zaman görülmektedir.
Gzip kullanabilmek için yöntemler:
a)      .htacces ile Gzip
Aşağıdaki kod satırları .htaccess dosyasına eklenir ve sunucuda ana klasöre gönderilir.


<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

</IfModule>



b)      Php ile Gzip
Bir tane myscript.php dosyası oluşturulur ve sıkıştırılması istenilen dosya aşağıdaki kod gibi içeri çekilir.
<?php
header('Content-type: text/css');
ob_start("ob_gzhandler");
include('style.css');

?>

 Yukarıdaki kodu ekledikten sonra ana dosyada aşağıdaki gibi sıkıştırılmış dosya çağrılır.
<link rel="stylesheet" type="text/css" href="myscript.php"/>

c)      Dosyalara Ön Sıkıştırma Uygulama
İlk iki yöntemde sunucu yükü biraz artabilir. Veri miktarından kazanç bu dezavantajın önüne geçer fakat bazı durumlar için ön sıkıştırma yapmak daha faydalıdır, özellikle büyük ve az değişiklik yapılan dosyalar için geçerlidir.
Örneğin jquery.js dosyası yaklaşık 80kb geliyor. Sıkıştırma işleminden sonra yaklaşık 25kb oluyor. Sıkıştırma işlemini 7Zip programı ile Gzip yaptıktan sonra, sıkıştırılmış olan bu dosyayı ftp ile orijinal dosyanın bulunduğu klasöre atılarak işlem sağlanabilir.
Yukarıdaki yöntemlerden uygun olanlar denendikten sonra kontrol için bu website kullanılabilir: http://www.gidnetwork.com/tools/gzip-test.php
[6][7][8]

6. Stil Dosyasını En Üste Ekleme

Yahoo’daki performans araştırmaları sırasında stil dosyalarının HEAD etiket alanına eklenildiğinde site açılışlarının daha hızlı olduğu bulunmuş. Sebep olarak da sayfa düzeni işleminin en baştan ilerleyerek gerçekleştirilmesi gösterilmiş. Aynı zamanda kullanıcılar için görsel düzenin baştan gelmesi geri dönüş olarak faydalı bulunmuş[3]

7. Script’leri En Aşağı Yerleştirme ve Paralel İndirme

Paralel indirme tarayıcıların farklı alan adlarındaki dosyaları aynı anda indirmeye başlamasıdır. Aynı anda kaç tane dosyanın indirilebileceği tarayıcıya göre değişmektedir. Bu işlemden yararlanmak için genelde resimler farklı alan adlarındaki hostlara atılır, bu alt alan adı da olabilir böylece aynı anda örneğin 4 tane dosyanın birden indirilmesi sağlanabilir.


Fakat scriptler paralel indirmeyi engellediği için en aşağı, BODY etiketinin kapatılmasından hemen önce eklenmelidir. Aksi takdirde paralel indirme işlemi hiçbir işe yaramayacaktır ve site yavaş açılacaktır.
Ayrıca stil dosyalarını eklerken etiketi kullanma @import işleminin de paralel indirmeyi engellediğinden daha hızlıdır[9].

8. Javascript ve CSS için Harici Dosya Oluşturma

CSS ve Javascript kodunu normal HTML dosyası üzerinde yazmak yerine ayrıca CSS ve Javascript için dosya oluşturup o dosyaları HTML dosyasında çağırmak daha performanslı bir işlem sağlar. Çünkü Javascript ve CSS dosyası tarayıcı tarafından ön belleğe alınır. Eğer direk HTML dosyasına yazılırsa her istek olduğunda tekrar yüklenirler. Bu işlem HTTP isteğini düşürebilir fakat HTML dosyasının boyutunu artıracaktır. Gerekli olmadığı takdirde veya kısa bir veri değilse HTML dosyasına yazmak uygun olmayacaktır. Aynı zamanda çok sayfada bu veriler kullanılıyorsa dışarıdan dosya olarak çağırmak daha faydalı olacaktır.[3]

9. Javascript ve CSS Küçültme

Küçültme işlemi Javascript ve CSS dosyalarında gereksiz alanları kaldırmaktır. Bu şekilde dosya boyutu azalır ve yüklenme süresi kısalmış olur. Küçültme işlemi için yorumlar, boşluklar, tab alanları, yeni satır oluşturmaları kaldırılabilir. Küçültme işlemi ile %20 üzerinde dosya boyutundan kazanç sağlanabilir.[3]
Javascript küçültmek için bu araçlar kullanılabilir:
1)      http://crockford.com/javascript/jsmin
2)      https://developer.yahoo.com/yui/compressor/
CSS küçültme için bu araçlar kullanılabilir:
1)      http://cssminifier.com/
2)      http://www.csscompressor.com/

10. Görselleri Optimize Etmek

Sitelerde fazlası ile görsel kullanılmaktadır. Fakat bu görselleri mümkün olan düşük boyuta çekmek gereklidir. Aksi takdirde görselleri indirme süresi oldukça uzayacaktır. Görselleri optimize edebilmek için internette ücretsiz servisler bulunabilir fakat bu işlem Google Page Speed aracı ile kolay bir şekilde yapılabilir. Google Page Speed aracı test ettiğimiz sayfada bulunan resimlerin optimize edilmişini bize sunmaktadır. Bunu kaydederek ilgili dosya ile değiştirmek yeterli olacaktır.
Görsel optimize etmek için kullanılabilecek araçlar:
1)      http://www.advsys.net/ken/util/pngout.htm
2)      http://optipng.sourceforge.net/
3)      http://freecode.com/projects/jpegoptim
4)      http://jpegclub.org/
5)      http://pmt.sourceforge.net/pngcrush/
6)      http://www.imagemagick.org/
7)      http://advancemame.sourceforge.net/comp-readme.html

11. Diğer Uygulanabilecek İşlemler

a. Sayfa yönlendirmelerinden kaçınılmalı.
b. DOM elemanları mümkün olduğu kadar az olmalı.
c. Iframe sayfada fazla olmamalı.
d. Mümkün olduğu kadar görseller HTML dosyasında width ve height kullanılarak yeniden boyutlandırılmamalı.
e. Görsellerin gerçek boyutu width ve height ile belirtilmeli.
f. Geçersiz 404 hata kodlu işlemlerden bulunmamalı.
g. Asenkron çalışan Scriptler tercih edilmeli. (Analytics vb.)
h. HTML dosyasının karakter kümesi belirtilmeli.
Veri Tabanı istekleri azaltılmalı.






barisla.com

zaman: 19:51
Etiketler: , , , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)