MuratCorlu.com

2 ay kadar zamandır Sahibinden.com‘da önyüz yazılımcısı olarak çalışmaktayım. Önyüz kodlaması konusunda ülkemizdeki eksiklikler sahibinden.com gibi Türkiye’nin en çok ziyaret edilen sitelerinden birinde de kendisini gösteriyordu. Bu ölçüde büyük web projelerinin önyüz kodlamasını tümden değiştirmek de oldukça büyük bir işgücü ve süre gerektirebiliyor.

Bu yüzden önyüz kodlamasını aşama aşama yeniden yazmaya niyetlendik ve sunucu tarafında nisbeten daha az işlemin yapıldığı ana sayfayı ilk çalışma alanımız olarak seçtik. Hedeflerimiz şunlardı:

• Görsel diğer sayfalarla farklılık yaratacak bir değişiklik yapmamak
• Geçerli (valid) HTML üretmek
• Bilinen bütün modern tarayıcılarda sayfanın problemsiz çalışmasını sağlamak
• HTML kodlarında tasarım için kullanılan table etiketlerinden kurtulmak
• HTML içindeki(inline) CSS ve Javascript tanımlamalarından kurtulmak
• Arama motoru optimizasyonu(SEO) kriterlerine uygun HTML yazmak
• Harici CSS ve Javascript dosyalarını birleştirip küçülterek HTTP talep sayılarını ve boyutlarını düşürmek
• HTML’deki gereksiz yorum, tab, enter ve boşlukları temizleyerek HTML boyutunu düşürmek
• Tasarım grafiklerinde CSS Sprite yöntemini kullanarak HTTP talep sayısını düşürmek
• Javascript kodlarını “Event Driven” yazmak

Bu amaçlarımızı uygulayabilmek için doğal olarak önyüz kodlarını tamamen sistemden ayırmak gerekti. Bu amaçla ana sayfaya özgü Javascript ve CSS kodlarını sıfırdan yazdık, HTML üretme sistemimizi yeniledik, bazı yerlerde şablon motorumuza gönderilen verilerin yapısında değişiklikler yaptık. Dinamik olarak Javascript, CSS ve HTML kodlarımızı küçülten, birleştiren uygulamalar yazdık. HTML’i sıfırdan yazdık, tablolardan arındırdık, SEO’ya uygun şekilde etiketlendirdik. Javascript kodlarını “Olay Tetikli” çalışır hale getirdik.Tasarım grafiklerimizin sayılarını olabildiğince azalttık, kalıtsallığı maksimum derecede kullanacak şekilde stil tanımlamaları yaptık.

Tüm bu çalışmalardan sonra geçen cuma (18 Eylül 2009) yeni ana sayfamızı yayına aldık. İçerikte herhangi bir değişiklik yapmadan sadece teknikleri değiştirerek kazandıklarımız ise şunlar oldu:

• Valid HTML’imiz oldu: http://validator.w3.org/check?uri=http://www.sahibinden.com
• HTML boyutumuz yaklaşık 80KB’dan yaklaşık 40KB’a indi.
• CSS ve Javascript dosyalarını birleştirme ve CSS Sprite yönetmiyle tasarım grafiklerinin birleştirilmesiyle sayfadaki HTTP talep sayısı 30′lardan, 8-10′a indi.
• Sayfanın render süresi oldukça azaldı.
• IE6 için transparan PNG ve :hover desteği sağlandı.

Web standartlarının uygulanması yaygınlaştıkça yapılan bu tür müdahalelerin değeri daha da günyüzüne çıkıyor.  Sahibinden’deki bu geliştirme büyüyerek devam edecek. Darısı diğer büyük Türk sitelerinin başına…