1

31.03.2014

Başlık : Performanslı Site Tasarımı

Açıklama :

Performanslı web sayfası tasarımı için kullanılması gereken araçlar ve dikkat edilmesi

gereken konular(iyileştirilmesi için yapılması gerekenler) ile alakalı bir rapor hazırlanması (

örneğin Chrome hız testi, webpagetest.org, ..vb araçlar incelenmelidir.)

Hazırlayan: Barış AYDINER

2

PERFORMANSLI SİTE TASARIMI

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

3

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

4

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.

5

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.

6

Ö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.

7

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 <link> 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:

8

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.

i. Veri Tabanı istekleri azaltılmalı.

PERFORMANS ÖLÇÜM ARAÇLARI

1. DNSstuff.com

http://www.dnsstuff.com/tools adresinden DNSreport alanına ilgili alan adı yazılarak DNS

doğruluk kontrolü yapılabilir. Aşağıdaki örnekte 3 tane hata, 2 tane uyarı ve 5 tane bilgi

olduğu görülmekte. Hataların giderimi için ilgili kısımlar tıklandığında yapılması gereken

bilgilendirme verilmektedir. Aynı şekilde işlemler http://www.intoDNS.com adresinden

sağlanabilir.

9

2. Google PageSpeed Insights

Sayfa performansını ölçümleyerek yapılması gereken işlemleri raporlamaktadır.

İlgili işlemler bu adresten yapılabilir:

http://developers.google.com/speed/pagespeed/insights/

10

Test edilecek sayfa adresi girildikten sonra “Analiz Et” butonu tıklanmalıdır. Sonuç olarak

hem mobil analizi hem normal web analizi puan vererek döndürmektedir. Daha performanslı

işlemler için yapılabilecekler Türkçe açıklaması ile verilmiştir. Öncelikli işlemler kırmızı ile

belirtilmiş, yapılmasında daha ziyade faydalı olabilecekler turuncu ile belirtilmiştir.

Dilenirse Chrome için eklenti olarak yüklenebilir. Avantaj olarak optimize edilmesi gereken

görselleri direk olarak indirilebilir kılması.

3. Pingdom

Sayfa performansını etkileyen birçok etkeni tek seferde kontrol edebilmek için en uygun

araçlardan birisi. DNS sorunları, HTTP istekleri, dosya indirme süreleri, uyarılar, hatalar,

sunucu hata kodları, yönlendirmeler, dosya boyutları elde edilebilir. Dilenirse lokasyon

değiştirilerek yeni bir test oluşturulabilir.

Test işlemi bu adresten yapılabilir: http://tools.pingdom.com/fpt/

11

4. WebPageTest

En detaylı performans test sonuçlarının sunulduğu bir araç. Resim sıkıştırma, dosya

sıkıştırma, ön bellek kullanımı gibi işlemleri harf ile ve 100 üzerinden sayısal olarak

derecelendirmektedir. A harfi en iyi değer olarak sunulmaktadır. Sayfayı iki defa teste

sokmaktadır “first view” ve “repeat view” olarak. İlk ve ikinci test sonuçlarını

karşılaştırılmaktadır. Şelale şeklinde yüklenmeleri göstermektedir. Dom eleman sayılarını

vermektedir. HTTP istekleri detaylı bir biçimde sunulmaktadır. İstek başlıkları

gösterilmektedir. Test farklı lokasyonlar, farklı tarayıcılar seçerek tekrar yapılabilir.

Test işlemi bu adresten yapılabilir: http://www.webpagetest.org/

12

13

Kaynaklar: 1. http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-

loading-sites.html

2. http://designmodo.com/optimizing-website-speed/

3. http://developer.yahoo.com/performance/rules.html

4. https://www.ceviz.net/genel/cdn-content-delivery-networks-nedir-nasil-kullanilir/

5. http://wpkurs.com/site-hizi-2-bolum-expires-header/

6. http://wpkurs.com/site-hizi-4-bolum-gzip-compression/

7. High Performance Web Sites, Steve Souders, O’reilly, 2007, ISBN-10: 0-596-52930-9

8. Professional Website Performance, Peter Smith, Wiley, 2013, ISBN: 978-1-118-48752-

5

9. https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport