20 Ekim 2014 Pazartesi

Web uygulama performansı: İstemci tarafı izleme, hata tespiti, uyarı ve iyileştirme araç ve yöntemleri

Kullandığımız her uygulamada olduğu gibi ziyaret ettiğimiz web sitelerinde de mecbur değilsek hızlı olmasını tercih ediyoruz. Yavaş sitelerin neden olduğu ziyaretçi ve kullanım kaybı üzerinde yapılmış bir çok deney ve araştırma var. Bunlardan en çok bilineni Amazon.com'um açıkladığı:

"Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007)"
Özetle; Amazon, her 100 milisaniyelik sayfa yüklenmesindeki gecikme için satışlarda %1'lik azalma olduğu ölçülmüş:
The Psychology of Web Performance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Performansın (hızın) yapılan yatırıma olan etkileriyle ilgili araştırmalar:

How Website Speed Affects Conversion Rates
http://www.globaldots.com/how-website-speed-affects-conversion-rates/
Web sayfa performansının ROI* ye etkisi:
Poor performance ruins holidays

Hız için yapılacak optimizasyonlar ile;

-Ziyaretin artması (arama motorları gözünde daha yüksek puan ve trafik artışı, yavaşlık nedeniyle terkeden / edecek kullanıcıları geri kazanma)
-Bounce rate'in düşmesi (ilk ulaştıkları sayfalardan direk ayrılma, hız algısı ile daha çok sayfa gezinme)
-Bandwidth maliyetinin azalması (Browser'a sadece mümkün olduğunca o sayfa için gerekli içerik uygun tekniklerle sunulduğunda yaklaşık 1/4 oranında daha az trafik tüketimi (minify, gzip, combine)
sağlanır.

Yayına çıkmadan önce yapılabilecek kontroller ve ayarlar

İlk defa yayına çıkacak bir site ya da hata düzeltme / iyileştirmeler sonrasında güncelleme olarak yayına çıkacaklar için bazı kontroller önceden yapılabilir.

Örnek olarak, bunun için Microsoft'un Web Platform Installer üzerinden sağladığı "Search Engine Optimization Toolkit" kullanılabilir.


Bu araç üzerinden SEO temelli problemler (title, description, h1 tag kullanımı ...) kontrol edilebileceği gibi, daha teknik problemler de ortaya çıkartılabilir:

-Kırık linkler
-Hata veren sayfalar
-Boyutu anlamsız büyük sayfalar
-Geç yanıt veren sayfalar
-Büyük boyutta CSS ve Script içeren sayfalar
-Geçersiz / yanlış html yapılandırması

{Microsoft Search Engine Optimization Toolkit örnek rapor görüntüsü}


Yalnız Ms SEO Toolkit ile rapor üretirken site derinliği (sayfa adeti fazlalığı) yüksek ise uzun süre çalıştırmak büyük miktarda log üretiyor ve uygulama bunu yönetemediği için kilitlenebiliyor. O yüzden örneğin ilk 10.000 sayfa için tarama yapıp hatalar düzeltildikten sonra tekrar rapor üretimi yapılması daha kolay olur.


Yayındaki bir site için izleme araç ve yöntemleri (Monitoring)

Geriye dönük trafik ve hataları takip etmek için ücretsiz olarak kullanılabilecek servisler:

-Google Web Masters Tools ve Google Analytics
-Yandex Metrica
-Bing Web Masters Tools (Teknik öneriler için: http://www.bing.com/webmaster/help/help-center-661b2d18)

-Yandex metrica gün içerisinde siteye erişim problemlerini e-posta olarak gönderiyor.

-Google Analytics sayfa bazlı istemci performans değerlerini veriyor. Ortalama olarak verdiği değerler: Sunucuya bağlantı süresi, Sunucu yanıt süresi (Time to first byte), İçerik indirilme süresi ve içeriğin görünür / kullanılabilir duruma gelme süresi (document complete).
Aynı zamanda Google Analytics üzerinden ISP veya şehir bazında perfomans raporları alınabilir.
Yine aynı ekranlar üzerinden Google Page Speed raporuna ulaşılarak iyileştirme yapılabilecek konular görüntülenir.



Bu servisler yardımıyla geriye dönük hata üreten sayfalar, nerelerden link verildiği gibi raporlar görüntülenebilir.

Hata üreten ya da bulunamayan adres istekleri için filtre uygulayarak kısa yol raporlar üretilebilir. Bunun için en iyi yol hata oluştuğunda ya da istenen bir URL bulunamadığında URL i değiştirmeden ilgili hata koduyla title elementinde tanım yapılması. Örn: title: 404 - Sayfa Bulunamadı


Anlık olarak hata / performans takibi için çeşitli araçlar var.


Kendi sisteminize kurularak kullanılabilecek araçlar:

-PRTG (10 sensor'e [tanım] kadar ücretsiz.
-Sitescope 

Bu yöntemle ile dışardan herhangi bir kullanıcının eriştiği gibi ADSL yada 3G bağlantı ile istenen yerden test yapılabilir. Ya da sunucuların olduğu iç network üzerinden dışarı ile olan bağlantı dikkate alınmadan izleme yapılabilir.

SaaS yöntemiyle kiralama usulu kullanılabilecek servisler:

-https://www.site24x7.com/ Türkiye dahil dünyanın çok farklı noktalarından (yakşalık 30 ülke) monitoring yapılabiliniyor. Primary seçilen üzerinden raporlar gösteriliyor.

-http://www.nimsoft.com/solutions/nimsoft-cloud-user-experience.html/.html Türkiye dahil çok yerde sunucu var ama deneme hesabı Türkiye üzerinden çalışmadığı için ölçüm değerleri çok anlamlı değil. En düşük 5 dakikalık periyotlarda ölçüm yapıyor. Arada olabilecek aksaklıklar ölçüm dışında olacak.

Diğerleri:
http://www.yottaa.com/ (aynı zamanda optimizasyon / hızlandırma serviside sağlıyor)
http://www.monitor.us/free-IT-systems-monitoring
http://monitive.com/en/
http://www.website-monitoring.com/
http://monitive.com/en/
http://host-tracker.com/
http://www.pingdom.com/
http://www.uptrends.com **
http://alertfox.com/

Bu araçlar yardımı ile istenen farklı zaman aralıklarında (10 sn, 60 sn...) kontroller yapılıp, istenen performans değerlerinin dışına çıkıldığında bildirim (SMS / e-posta) gönderilmesi sağlanabilir.
Geriye dönük rapor alınıp hangi zaman dilimlerinde ne kadar süre sistemin çalışmadığı yada yavaş çalıştığı ile ilgili raporlar alınabilir.
Dolayısıyla yayın ortamına yapılan güncellemelerin performansa olumlu / olmsuz etkileri varsa bu raporlar üzerinden görülebilir.

Servis olarak kullanmanın avantajı birden fazla noktadan bağlantı izlemenin gerçekleştirilebilmesi.

Bu tür servisleri kullanırken dikkat edilmesi gerekenler;
-Türkiye üzerinden de izleme yapılması (mümkünse birden fazla noktadan)
-Sadece izlenen sayfa ile ilgili değerler değil  Dns gibi erişim ile ilgili hatalarında tespiti ve detaylı log / rapor sağlanabilmesi.
-Sayfa HTML'inin yanında sayfada bulunan image, css ve scirpt gibi içeriklerinde test'e dahil edilmesi.

{PRTG Http sensor ekran görüntüsü}




{PRTG IIS Performance counter sensor ekran görüntüsü}


İç network de domain erişimli bir sunucuda kurulan PRTG ile istenen performance counter'lar takip edilebilir. IIS özelinde Request Execution Time, Cache durumu, Bandwith kullanımı vs... Sunucu bazında RAM, CPU kullanımı gibi geri dönük kayıtlar tutulabilir ya da belirlenen durumlara göre eposta uyarı mekanizması kurulabilir.


Sayfaya script koyarak browser performans ölçümü ve raporlaması, cdn servisi ile performans iyiştirme hizmetleri veriyor.

Sunucu üzerinde uygulama performansını ölçen uygulama / servisler

Application monitoring

ELMAH gibi hata loglamanın ötesinde hataların gruplandırıp önceliklendirme gibi raporlama olanakları sağlıyor.

infrastructure monitoring
http://www.nagios.org/

İstemci tarafı site / sayfa iyileştirme yöntemleri


Bu konuda çok farklı teknikler ve kaynaklar olmakla birlikte en çok bilinenleri ve endüstri standartı olarak alınan yahoo ve google'un döküman ve test uygulama / servisleri var:

Yahoo
http://developer.yahoo.com/performance/
Yahoo için ayrıca Bugzilla üzerinde kurulabilecek bir eklenti ile Firefox üzerinde kullanılabilir.

Google
https://developers.google.com/speed/docs/insights/rules

Google Page Speed ve Yahoo Y Slow ile değerlendirme yapıp ilgili tanımlara göre puanlama yapan ve iyileştirme için önerilerin bulunabileceği bir servis:
http://gtmetrix.com/


Buradaki genel kurallar / tavsiyeler
-CDN kullanımı (image, css, script içeriklerin farklı bir domain üzerinden, mümkünse coğrafi olarak dağıtılmış, sadece bu işi yapan performans optimizasyonu yapılmış sunucular üzerinden yapılması)
Türkiye' de farklı şehirlerde konumlandırma yapılmış bir çok CDN sağlayıcısı var.
-İçeriklerin küçültülmesi (minify), sıkıştırılması (gzip), birleştirilmesi (css, javascript, image sprite)
Bu şekilde browser bağlantı masrafını azaltacak ve örneğin 4 dosya için yapacağı 4 ayrı bağlantı isteği yerine tek seferde içeriği almış olacak.
-Asenkron script tanımı kullanmak: Script tanımını sayfanın sonuna
öncesine koymak yada async attribute kullanımı.
-Sayfa içerikleri için cache kullanımı.

Google analytics üzerinden de yavaş sayfalar için rapor alınabilir.
Yine burdaki bilgileri yorumlamak ve tavsiyeler için:
"About Site Speed"
https://support.google.com/analytics/answer/1205784?hl=en

İlgili blog yazısı:

Google yeni hız ölçeri
https://developers.google.com/web-toolkit/speedtracer/get-started?csw=1
https://chrome.google.com/webstore/detail/ognampngfcbddbfemdapefohjiobgbdl

Farklı tarayıcılarda test yapmak için sanal makinalar ve html/css hata denetimleri için araçlar sunuyor.
http://www.modern.ie

Sunucu tanımlı istemci ayarları (static içerik, css, js, image)
-client cache için sunucu header tanımı
-client cache' e takılmamak için sunucu tarafı yapılabilecekler (kesin yöntem dizin adı üzerinden yönetim
örn: /assets/v1.01/main.css

Cdn Kullanımı ve sonrası

Cdn kullanımında karşılaşılabilecek en önemli problem cdn servisinin çalışmaması. Normalde coğrafi olarak dağıtık servis verdiklerinden dolayı bir noktada çalışmıyorsa başka bir noktadan servis verecek şekilde yapılandırıldıklarından problem çıkma ihtimali düşük olsada bu ihtimali ortadan kaldıracak çözüm geliştirilebilir.

Bunun için önerilen çözümler;

CDN Fallback:
http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

Alttaki yöntemle cdn den css yüklenme hataya düşerse java script ile local css yüklenir.

script ve link tag ları için onerror destekleyen browserlar
http://pieisgood.org/test/script-link-events/

client cache incelemesi

Ek

Uygulama performansının tatmin eder olduğunu ölçmek Apdex adın bir standart geliştirildi:
http://en.wikipedia.org/wiki/Apdex

Hesaplamayla ilgili örnekler


ROI : http://en.wikipedia.org/wiki/Return_on_investment

Yukarda bahsedilen öneriler listesinin çoğunu IIS üzerinde kurulabilen eklenti ile çalışma zamanında yapabilen uygulama:
Bu konuda danışmanlık veren yerlerden biri:
Gönderen zaman:
Etiketler:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)