Web tasarımcıları için sunucu taraflı optimizasyon

0
mow
Bir web projesinde CSS/XHTML/Javascript ve benzeri işleri siz yapıyorsanız burada anlatılanlar tam size göre. Evet siz doğrudan ne betik dili ile yazılmış bölümlere ne de sunucu ayar dosyalarına ulaşmıyor ve onları kullanmıyor olsanızda sunucu taraflı optimizasyonda sizlerin doğrudan katkısı sandığınızın aksine çok büyük.
Amaç
Bu tür optimizasyondaki yegane amaç istemcinin (client, izleyen, ziyaretçi) sunucuya yaptığı istekleri (request) en düşük sayıya indirmektir. Çünkü istemcinin her isteği sunucuda ya bir fazladan sürecin (process, işlem) çalışması, ya da var olan sürecin kullandığı kaynağın bir kısmını tahsis etmesi demektir. Her iki şekilde de sunucu bu isteğe kaynak ayıracaktır.

Başlangıç Noktası
Her şeyden önce bilinmeli ki, kaynak kullanımı ile bant genişliği kullanımı tahterevallinin farklı uçlarındadır. Eğer yapılan proje sunucu kaynaklarını çok tüketiyorsa (çok fazla istemci varsa veya olacağı öngörülüyorsa) ve bant genişliği kaynağı sonuna kadar kullanılmıyorsa kaynak-duyarlı bir optimizasyon yapmamız gerekir. Peki nasıl karar verebilirsiniz?

1 - Web istatistiklerine bakarak: Eğer yeni gelen ziyaretçileriniz, eski ziyaretçilerinize oranla yüksekse,
2 - Sunucu yük durumuna bakarak: Eğer barındırma şirketiniz web sitenizin sürekli çok kaynak tükettiğinden -bilmemne- sınırını aştığından bahsedip duruyorsa,
3 - Sitenizin açılış hızından rahatsız iseniz,
4 - Aynı an içerisinde daha çok ziyaretçinizin olmasını ısrarla istiyor ve bant genişliğine çok fazla önem vermiyorsanız,
5 - CSS / HTML vb. kodlarınızı sürekli değiştirmiyorsanız ,

sıralanan seçeneklerden iki veya daha fazlası size uyuyorsa, bu optimizasyonu yapmalısınız.

Varsayılan web projesinin içeriği
Web sitenizin HTML kodlarında 5 CSS, 2 Javascript ve 10 resim dosyası olduğunu, bu 5 CSS’in içerisinde ise toplam olarak 20 adet arkaplan için kullanılan resim olduğunu varsayalım.

Kolları sıvamadan önce bilmeniz gerekenler
Hop: Bir istek, istemciden sunucuya ulaşırken bir çok bilgisayar üzerinden atlayarak gider. Bu atlamaların her birine hop denir ve milisaniyeler ile ölçülen bir zamanda gerçekleşir. Hopta kaybedilen zamanın sebebi, her isteğin üç aşama için zaman harcamasıdır, 1-bağlanma zamanı, 2-sunucunun isteği işlemesi için geçen zaman, 3-sunucu ile istemci arasındaki veri transferi için geçen zaman. Çok istek yapıldığında doğal olarak geçen zamanda çok olacaktır.

Sabit Kaynak: Sunucu, isteğin içeriği ne olursa olsun, sunucuda ister bir servis çalışsın ister çalışmasın kesin olarak her istek için belirli bir kaynak ve zaman ayırmak zorundadır. Çok detaylandırmadan zaman kaybını açıklamak gerekirse, istekler TCP ile iletilir ve bu protokolde durum belirteci bulunmaz, daha doğrusu durum belirteci belirli zaman aralıkları ile varmış gibi kabul edilir, (daha detaylı bilgi için TCP, SYN , ACK, FIN anahtar kelimelerini google’a sorabilirsiniz) işte bu zaman aralığında sunucu, o istek için belirli bir kaynak tahsis etmek zorundadır, bunada sabit kaynak denir. (en azından bu yazıda biz öyle diyoruz :) )

İlk adım: toparlama
Siteyi ilk defa ziyaret eden (veya önbellek-cache kullanmayan) istemci, siteye ulaştığı an sunucuya toplamda (varsayılan içeriğe göre) 37 adet istek gönderir. Yani her istek, sunucuya belli bir hoplama sayısında ulaşacak ve veriyi gene bir o kadar hop ile geri alacaktır (ilk zaman kaybı) üstelik her istek için sunucu sabit bir kısım kaynağını ayıracak, işlemin içeriğine göre de bu kaynak tahsisini yükseltecektir (kaynak israfı ve ikinci zaman kaybı). Halbuki biz CSS dosyalarımızı birleştirirsek, yani 5 CSS dosyasını 1 CSS dosyası olarak birbirilerine ekleyerek kaydedersek, otomatik olarak 4 adet isteği engellemiş, zamandan ve kaynaktan tasarruf etmiş oluruz. Aynı şekilde JS dosyalarımızı birleştirerek 37 adet olan istek sayısını 32’ye düşürürüz.

İkinci adım: CSS özelliklerini kullanarak resim sayısını azaltmak
Hepimizin bildiği gibi bazı CSS özelliklerini kullanarak bir arkaplan resminin sadece belirli bir bölümünün görünmesini sağlayabiliyoruz. Mesela CSS dosyamızın içinde yuvarlak kenarlar için kullandığımız 4 adet yuvarlak köşe olduğunu düşünürsek, CSS kodları ile bu 4 resmi birleştirip hangi köşe ise ona göre o kısmın gözükmesini sağlayabiliriz. Gene aynı şekilde CSS menümüz için kullandığımız 4 ayrı resmi + 4 ayrıda :hover için resmi , bir resimde birleştirip CSS kodları ile neyin-nerede gözükeceğini ayarlayabiliriz. Böylece varsayılan içeriğe göre, 10 istekten daha kurtulup istek sayısını 22’ye düşürmüş oluruz.

Seçimli son adım: benim bandım çok, kaynağım yok!
İlk iki adım size yeterli gelmedi mi? Öyleyse dosyalarınızı “ link veya import” ile kodlara yerleştirmek yerine, doğrudan içine gömün. Böylece en az kaynağı kullanıp en çok bant genişliği kullanımını sağlamış olursunuz.

Bu işlemleri yaparak sitenizin hızında ve sunucunuzun kaynak tüketiminde gözle görülür bir iyileşme sağlayabilirsiniz. Verilen örnekler, varsayılan özellikler ve tahminler elbette gerçeklerle birebir örtüşmeyebilir, uygulamalarınızda başarılar.

A. Çetin
[Not: Birisi httperf veya ab ile somut bir kanıt sunmaya vakit ayırırsa çok sevinirim.]

Görüşler

0
siyah83
Birilerinin http protokolunde biraktigi bir eksikligi gidermek icin digerlerinin ne kadar ugrastigini simgeleyen cok guzel bir ozet.

Bence http protokolunde acilacak sayfaya ait tum kaynaklari tek bir istekte toplu olarak gonderecek bir ozellik olsaydi bugun hicbirimiz bunlarla ugrasmayacaktik.

Bu ayni zamanda su anda her yerde standart olarak kullanilan http protokolunun gelistirilirken aslinda cok da ilerisinin dusunulmedigini , bence yapip gecmisler iste dedigim bir durum .

Hadi yapmislar kac senedir kullaniyorlar, neden hala degistirmiyorlar :).

İnsanlığın birbirine eziyetinden başka bir şey değil .
0
anonim
Sadece bir nokta var, yazida bahsi gecen istekler icin her seferinde mevcut baglanti sonlandirilip yeni baglanti olusturulmaz. Modern http sunucularinin ve browserlarin destekledigi uzere, keep-alive sayesinde sunucuya bir kez TCP portundan baglanti olusturulur ve tum istekler bu baglanti uzerinden gerceklestirirlir.
0
mow
Bundan bahsetmeyi düşünmüştüm, haklısınız ama tasarımcıları hedef aldığım için bahsetmedim. "Keepalive" da, yazıdakine benzer mantığın sunucu taraflı olarak uyarlanması (veya tersi işte). Ancak o linkini verdiğiniz wikideki yazan şeye ben biraz takıldım, sanki mükemmel süper ötesi birşeymiş gibi hiç olumsuz taraflarından bahsetmemişler. Yeri gelmişken ben bahsedeyim :) keepalive, hakkında öyle kesin ifadelerle konuşulabilecek bir özellik değil, çünkü her browsera ve her sunucuya (hatta ayara) göre farklılıklar gösteriyor, HTTP durum belirteci olmayan bir protokol ve keepalive bunu değiştirmiyor yani gene belirli zaman aralıkları var, yaptığı şey sadece ilgili soketi belli bir zaman içerisinde kapatmamak ve iki tarafın sürekli iletişim içinde olmasını sağlamak ancak bunun bir garantisi yok yani,"bir kez bağlantı oluşturulur ve tüm istekler artık ordan gider" diyemeyiz, sunucunun ne zaman bağlantıyı kapatacağı kesin değil, kesin olan şey bağlantı kapanınca haber vermesi o kadar. "Keepalive"ın elbette avantajları var ancak dezavantajlarıda var, gene aynı bu yazıdaki mantık birebir örtüştüğünden bant genişliği kullanımını önemli oranda yükseltiyor. Kaldıki kaynak azaltmak için yapılan bu özellik bazen daha fazla kaynak israfınada yol açabilir, özellikle tek istemcinin-tek istek yaptığı durumlarda. Yaniuzun lafın kısası keepalive a güvenmeyelim güvendirtmeyelim :)
Görüş belirtmek için giriş yapın...

İlgili Yazılar

Audiogalaxy sizlere ömür...

interhaber

Merhabalar, Geçtiğimiz 19 Haziran Çarşamba günü Audiogalaxy`nin o meşhur mavi renkli sitesine girenler, arattırdıkları parçaların hepsinin yanında "kısıtlıdır" işaretini görünce büyük bir şok yaşadılar. Gelen ilk haberler, müzik dünyasının BSA'sı olan RIAA tarafından Audiogalaxy`nin işinin bitirildiği yönünde. Geçen sene Napster`in ipini çekenler,bu sefer de Audiogalaxy`i harcadılar. Gerçekten de süper bir müzik ve MP3 servisi daha devre dışı kaldı ve böylece -mââlesef- dialerci arkadaşlara da meydan boş bırakılmış oldu! Ayrıca, kendi elindekileri paylaşıma açmak isteyenlerin önü de tıkandı. Merak ediyorum: "Acaba sıradaki Morpheus mu?" diye. Bütün müziksever internetçi arkadaşlara geçmiş olsun. Selâmlar...

Internet üzerinde beyaz tahta

sundance

Bazen telefondaki birine tam olarak ne demek istediğinizi bir türlü anlatamazsınız. Şöyle bir kağıt kalem olsaydı da onun üzerinde çizerek gösterseydim dediğiniz olur. Bu amaçla üretilmiş bir sürü yazılım da var piyasada.

Ama ilk bağlantının kurulması, firewallda ayar gerektirmesi vs. derken çoğu oldukça kullanılmaz hale geliyor.

Öte yandan flash ile yapılmış bu beyaz tahta bu alanda birçok sorunumuzu pratik olarak çözecek gibi. (Digg sağolsun)

Üniversitelerimiz kurtuluyor mu ?

sundance

Hatırlarım da 1992`de Internet yaygınlaşmaya başladığı günden beri `Üniversiteler Internet üzerinden kayıt yapacak` geyiği sürer gider.

Hatta bu konuda bir çok ensesi kalın şirkete ihaleler yaptırılıp binlerce dolar para sokağa atılmıştır. Sonunda önce ODTÜ sonra Boğaziçi ve İTU derken üniversitelerimiz kör topal da olsa bu sisteme geçmeye başlamıştır. Tabi ki uygulanmamış birsürü projeye dökülen paralar da cabası.

Sonunda bir Sourceforge projesi bu işe de el attı. Universite Öğrenci Bilgiişlem Sistemi böyle bir yapıyı, hem de Türk öğrenciler tarafından hazırlanmış %100 serbest yazılımlarıyla sunuyor.
`Türkiye de yazılmış program istemeyiz, bizim üniversitemiz yurt dışında yazılmış programları hakeder` diyerek söz konusu ihaleleri öğrencilerine bile açmayı düşünemeyen eğitim dünyamızın bütün SAĞLAM ER`lerine selam olsun ;)

E-Dergi : Bilgisayar ve İnternet Güncesi

anonim

E-Dergi.info 1 ay önce internet siteleri deryasına giriş yaptı. Karadeniz Teknik Üniversitesi, Bilgisayar Mühendislerinin açtığı bu siteyle amaçları Donanım, Yazılım, İnternet, Mobil ve Oyun dünyasını kısaca Bilgisayar'ı ilgilendiren bir dünyanın haberlerini sizlere sunmak ve yeniliklerden farklı ve genç bir bakış açısıyla haberdar olmanızı sağlamak.

Google Labs

larweda

Internet aleminde sevdiğimiz, saydığımız, hürmet ettiğimiz bir kuruluş olan Google, yeni projelerinin demolarını pre-production olarak insanların kullanımına sunmak gibi bir güzellik yapmış, (belki daha önceden de vardı da ben ilk yeni keşfediyorum) http://labs.google.com/`da şu anda geliştirmeye devam ettikleri işlerin demolarını koymuşlar, bunları da kullanıp eğer bir feedback'iniz varsa adamlara gönderebilyorsunuz. Benim şahsen arada bir göz atacağım sayfalardan biri haline geldi bile. Bir örnek olarak voice search diye birşeyler deniyor Google, Amerikada bir telefon numarasını arayıp aramak istediğiniz kelimeleri söylüyorsunuz, sonra bir sayfaya gidip baktığınızda sizin arama sonucunuz geliyor. Ne kadar işe yarar ne kadar mantıklıdır bilemiyorum ama, böyle bir şey olabilir, denedik, oldu, belki kullanırız şeklinde süper delikanlı yaklaşıyor olaylara muhteremler.