MapXtreme Web Performasını Artırma
MapXtreme Web Uygulamalarında Performans İpuçları:
1) State management konusunda manual state kullanmak yazılımcı için diğer seçeneklere göre daha zor olsa da, daha fazla kontrol imkanı verdiği için performans konusunda bazı artılar sağlayabilir. Mesela nesnelere tıklayarak info alma işleminde hali hazır harita durumunu (state) boşu boşuna kaydedip tekrar yüklemeye gerek yoktur çünkü info alırken haritanın orta noktası ve zoom seviyesi değişmemektedir.
2) Microsoft’un sitesinden ve internetten “IIS performance tuning“ konusunda araştırma yapabilirsiniz.
3) Sayfanızdaki haritanın boyutu sunucunun response süresini önemli derecede etkileyecektir. Mecbur kalmadıkça harita imajını çok büyük ayarlamayın. Normal kullanım için (sorgulama, navigasyon vb.) makul yani orta boylu bir harita resim boyutu kullanmak performansı arttıracaktır. Eğer bazı işlemlerde (tematik gibi) daha büyük ve kaliteli bir harita imajına ihtiyacınız varsa bunu daha büyük ayrı bir sayfada kullanıcıya göstermeyi düşünebilirsiniz.
4) MapXtreme Developer Guide pdf inde “Web Application Performance” adlı bölüme bakmakta fayda var.
5) Haritalarınızı Workspace Manager ile hazırlarken katmanların görünüm seviyelerini iyi ayarlayarak haritanın mümkün olduğunca sade olmasını sağlayabilirsiniz. Bu şekilde her request döngüsünde sunucu tarafında oluşturulan harita imajının boyutunun büyük olmamasını sağlayarak harita imajının download süresini azaltabilirsiniz.
6) Uygulamanızda gerekli yerlerde AJAX tekniğiyle kısmi sayfa refresh leri kullanmak da performansı arttıracaktır.
MapXtreme web uygulamalarında performans artırımını sadece MapXtreme tarafında düşünmek yeterli olmaz. Tüm web uygulamalarına çoğu zaman uygulayabileceğimiz aşağıdaki önerileri de denemenizi tavsiye ederim:
Web Uygulamalarında Performans İpuçları:
Geçenlerde Yahoo’nun developer sayfalarının birinde web sitelerini hızlandırmanın yollarını anlatan bir sayfa gördüm. Son derece faydalı pratiklerden bahsediyordu. Bunlardan uygulanması gayet kolay olanlarından bazılarını şöyle özetleyebiliriz:
1) HTTP Request sayısını minimum tutun: Bir web uygulamasında kullanıcının zamanının önemli bir kısmı sayfadaki resim, script, CSS, flash gibi bileşenlerin indirilmesi esnasında geçer. Bu yüzden sayfadaki bileşenlerin sayısının mümkün olduğunca az olması gerekir. Burada HTTP request ifadesi ile kullanıcının bir submit butonuna tıklayarak sayfayı sunucuya göndermesini kastetmiyoruz. Sayfadaki her bir resmin veya her bir JavaScript dosyasının indirilmesi tarayıcı için ayrı bir request diğer deyişle bir iş yüküdür. Sayfadaki bu gibi bileşenlerin çok olması tarayıcının sunucuya yaptığı istekleri artıracak ve bu da haliyle sayfanın açılış hızını düşürecektir.
Peki bu HTTP request lerini minimuma indirmek için neler yapılabilir? Faydalı bir yol script ve CSS dosyalarını tek bir dosyada birleştirmek. Mesela bir sayfamızın kullandığı 5 tane JavaScript dosyası varsa, bunları birleştirip tek bir JavaScript dosyası yapmak ve onu import etmek, sadece script yüklemedeki HTTP request sayısını 5 ten 1 e indirecektir. Burada şöyle bir soru akla gelebilir: Farklı işler (AJAX, validation vb.) için kullanılan bu JavaScript dosyalarının tek dosyada toplanması projeyi yazarken ve bakımını yaparken işimizi zorlaştırmaz mı? Normal şartlarda farklı amaçlar için farklı ve daha küçük parçalara ayrılmış proje bileşenlerini yönetmek tabii ki daha kolaydır. Ama projenin geliştirme ortamında scriptleri normal şekilde kullanıp proje sonunda production (müşteriye kurulan) sürümünde bu scriptleri birleştirmek iyi bir yöntem olabilir. İlave iş yükü getirmesine rağmen bence performans artışı için kesinlikle uygulamaya değer.
Aynı birleştirme yöntemi CSS dosyaları için de kullanılmalıdır. Üstelik birleştirme işlemini elle yapmak zorunda da değilsiniz: Web de bu işi otomatik olarak yapan ücretsiz araçlar mevcut. Bir tanesi Google minify.
2) CSS leri sayfanın üstüne koyun: CSS dosyalarını sayfanın head kısmında import edin.
3) Script leri sayfanın altına koyun: JavaScript dosyalarını sayfanın alt kısmında, yani <form> tag ini kapamadan hemen önce import edin. Bu şekilde, tarayıcı tarafından önce HTML kodlarının parse edilmesini ve kullanıcının sayfayı daha çabuk görmesini sağlayabiliriz. Eğer JavaScript dosyalarını sayfanın head kısmında import edersek bazı durumlarda tarayıcı bu scriptleri indirme işlemini bitirmeden sayfayı render etmeyecek, dolayısıyla sayfanın kullanıcıya gösterilmesi daha uzun sürecektir.
4) Sayfa tasarımını mümkün olduğunca sade yapın: Özellikle FrontPage gibi bazı sayfa tasarım programları siz designer ile sayfayı tasarlarken arka tarafta son derece kirli ve şişkin bir HTML kodu üretebiliyor. Bu yüzden, gerektiğinde sayfanın HTML koduna girerek fazlalık kodları temizlemek sayfanızın boyutunu dolayısıyla kullanıcıya render edilme süresini azaltacaktır.
5) JavaScript ve CSS dosyalarını HTML içine gömmeyin: Tam tersine harici dosyalar olarak tanımlayıp sayfada import edin. Harici dosyalar olarak kullandığımızda bu scriptler ve CSS ler tarayıcı tarafından cache lenerek daha hızlı erişim sağlanacaktır. Sayfa içine gömersek tarayıcı cache leme yapamayacak ve sayfa içindeki bu script ve CSS ler hem sayfanın boyutunu gereksiz yere arttıracak hem de sayfanın her açılışında tekrar tekrar yüklenecektir.
6) JavaScript ve CSS dosyalarını minify edin: Küçültme (veya sıkıştırma da diyebiliriz) araçlarını kullanarak JavaScript ve CSS dosyalarının boyutlarının önemli ölçüde küçültüp yüklenme sürelerini azaltabilirsiniz. Bu araçlar script içindeki yorumlar (comment) ile boşluk, newline ve tab karakterlerini koddan çıkararak dosyanın boyutunu önemli ölçüde küçültebilirler. Bu şekilde bu dosyaların indirilme süresi kısalacaktır.
Bu araçlardan 2 tanesi:
JSMin: http://crockford.com/javascript/jsmin
YUI Compressor: http://developer.yahoo.com/yui/compressor
7) AJAX çağrılarında Get metodunun kullanın: XMLHttpRequest nesnesiyle post metodu kullanıldığında iki aşamalı (header bilgileri ve asıl veri) bir iletişim olurken, get metodunda tek TCP paketi gönderildiğinden performans açısından kullanımı daha iyidir.
8 ) Sayfanızdaki resimlerin boyutunu optimize edin: Photoshop veya benzeri bir yazılım kullanarak resimlerinizin boyutlarını farklı formatlarda görün. Geçerli bir nedeniniz yoksa kesinlikle bitmap kullanmayın. Nedeni gayet açık: Bitmap resimlerin boyutlarının korkunçluğu. Mesela 2MB boyutundaki bir bitmap dosyası kalite kaybetmeksizin 100KB lık bir JPG resme kolaylıkla çevirebilir. Evet 1/20 gibi muazzam bir orandan bahsediyoruz. Diğer bir konu hangi durumlarda hangi formatı kullanmamız gerektiğini bilmek. Mesela JPG formatı daha çok fotoğraf tarzı resimler için uygundur ve bu tip resimlerde diğer formatlara göre daha az yer tutar. Ama düz renklerin ağırlıkta olduğu ve renk sayısının nispeten az olduğu resimlerde GIF veya PNG kullanmak daha uygundur. Bu arada PNG8 formatının çoğu zaman GIF ten daha küçük boyutlu olduğunu hatırlatmakta fayda var. Eğer animasyonlu resimler (animated GIF) kullanmayacaksanız PNG web için son derece iyi bir seçim.
9) Tarayıcının cache mekanizmasını kullanmasını sağlayın: Expires veya Cache-Control header ları kullanarak tarayıcının cache özelliğini kontrol edin.
10) Resimlerin boyutlarını belirtin: HTML kodunda <img> tag i kullanarak sayfaya bir resim koyarken mutlaka resmin width ve height değerlerini belirtin.
11) Sayfanızın performansını değerlendiren ve performans artırımı için gerekli tavsiyelerde bulunan başarılı bir Firefox eklentisi var: Page Speed. Aşağıdaki adresten temin edilebilir:
http://code.google.com/speed/page-speed
Not: Bu eklenti Firtefox’un Firebug adlı eklentisi içinde çalıştığı için önce Firebug’ı indirip kurmalısınız. Aşağıdaki adresten de Firebug eklentisini indirebilirsiniz.
Yeri gelmişken Firebug hakkında bir yorum: Belki abartılı gelebilir ama bana göre Firebug gelmiş geçmiş en faydalı yazılımlardan biri. Web projesi yaparken bir kere alışınca resmen eliniz-ayağınız gibi oluyor ve kesinlikle vazgeçemiyorsunuz. Web projelerinde kullanmanızı kesinlikle tavsiye ederim.
Mustafa ÖZÇETİN 