Uzun bir dönem flash'ın webdeki baskınlığının sonucu olarak ekrana sığan sayfalar tercih edilmeye başlanmıştı ama hem mobil cihazların popülerleşmesi, hem blogların şu an internette çoğunluk içeriği sağlıyor olması hem de flash'ın hayatımızdan biraz daha çıkmasıyla, uzun sayfalar tekrar günlük web gezintimizde en sık karşılaştığımız sayfalar oldu. Uzun bir sayfanız var ise ve eğer metin ağırlıklı bir içeriğe sahip değilseniz muhtemelen içeriğiniz, resimler/fotograflar barındırıyor olacaktır. Bunun yanı sıra sayfanızda üst, alt veya yan alanlarda da görüntülediğiniz yardımcı içerikler olabilir.

Örnek ile basit bir wordpress blogunu gözünüzde canlandırırsanız sayfa başlığı, alt metni ve yan navigasyonda ilgili yazılar (ve bunlara ait küçük görseller) sayfanızın altında bulunan görseller, mesela sponsor logoları, statik reklamlar, birkaç ufak ikon (sosyal medya ikonlari) vs küçük büyük bir çok görseliniz olacaktır (footer, header, sidebar).

Uzun bir sayfanın en büyük tehlikesi içinde barındırdığı medya içeriği sayısı olacaktır. Eğer medya içeriği sayınız, dosya boyutları ufak medya içerikleri dahi olsa yüklenmesi uzun zaman alacaktır. Bu konuya birçok web opimizasyonu yazısında karşılaşabilirsiniz.

Şimdi çok daha anlaşılır bir örnekle bu konuyu hızlıca kod üstünde anlatacağım.

Kısa süre önce bir facebook uygulaması hazırlarken, hazırladığım bir sayfada o kullanıcının arkadaş listesini her satırda 4 avatar görünecek şekilde bir tablo şeklinde gösteren bir sayfa hazırladım. Kendi hesabımla sayfayı açtığımda 500+ arkadaş listeleniyordu ve bu da 500 avatar'ın bir sayfada olması anlamına geliyor. Sorun tabi ki internet hızı değil. Asıl problem tarayıcılar. Tarayıcılar, Her domain için, paralel iki yüklemeye izin verir ve her imajın 100 milisaniyede yükleniyor olduğunu varsayarsak, saniyede 20 fotoğraf yükleniyor diyebiliriz. 500 fotografın yüklenmesi de 25 saniye sürecektir.

Sayfa ilk açıldığında çok garip görünmüyor ama daha sayfa yüklenmeden sayfayı aşağı kaydırdığımda ekranda daha yüklenmemiş görseller görüyor oluyorum.

Bundan daha tehlikelisi bu görseller sayfanızdaki diğer kaynakların yüklenmesini geciktiriyor ve javascript akışınızı etkiliyor. Dolayısıyla iyi bir kullanıcı deneyimi değil. Zaten teorik olarak düşündüğünüzde de ekranda görüntülenmemiş belki de hiç aşşağı kaydırılarak görüntülenmeyecek medya içeriği yüklenmeye çalışıyor ve ideal olarak bunların ekranda görüntülenmeden yüklenmemesi gerekir.

Wordpress blogu örneğindeki problem şöyle olabilir. Her girdinizin bir görseli olduğunu düşünürsek ve arşiv sayfanızda her sayfada 10 girdi gösterdiğinizi düşünürsek sayfanızdaki diğer medyaların dışında uzun bir sayfada 10 görsel (yüksek çözünürlükte olabilir) görüntülenmeye çalışması performans kaybına neden olabilir.

Bu problemi bir javascript çözümü olan lazyload ile çözebilirsiniz. jQuery eklentisi olarak bulabileceğiniz eklentinin yaptığı şey her görseli jenerik bir yer tutucusu olarak yükledikten sonra o görselin ekranda görünür alanda olup olmadığını tespit ederek gerçek kaynaktan yüklemek.

Yani sayfanız yüklendiğinde bütün görseller aynı imajı yüklüyor. Genelde bu imaj 1 piksellik tek renk (gri örneğin) ufak bir görsel oluyor. Anında yüklenip tüm imajlarda yer tutucu olarak yerleşiyor. Sayfanız yüklendikten sonra lazyload, o sayfanın pozisyonunu ve görüntülenebilir alanını hesaplıyor ve görselin o alanın içinde veya yakınında olup olmadığını hesapladıktan sonra görünen imajlari yükleyip daha kaydırma pozisyonuna göre ekranda omayan veya uzak olan imajlari yüklemiyor.

Bir javascript eventi ile sayfa kaydırma hareketinizi izleyerek imajlari gösterdiğiniz anda yüklüyor.

Lazyload'i sayfanıza nasıl entegre edersiniz?

Önce bir yer tutucu görseli hazırlamalısınız, bunun için transparan veya sabır bir renk 1x1 boyutunda bir gif imaj hazırlayın.

Sayfanızdaki tüm görsel adreslerini bu imajı yükleyecek şekilde ayarlayın. İmajlarin gerçek adreslerini de "data-original" özelliğine alıyorsunuz.
<img data-original=“img/example.jpg” src=“img/grey.gif”>

Sonra jquery ve lazyload'ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload'ı çalıştırıyoruz.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

$("img.lazy").lazyload();
Yukarıdaki kod "lazy" sınıfındaki resimleri yükleyecektir. Daha genel bir kullanım istiyorsanız sadece img etiketlerini belirterek sayfanızdaki tüm görsellerin lazyload ile yüklenmesini sağlayabilirsiniz.

Bundan sonra sayfanızdaki görseller ekranda görüntülendikleri anda yüklenecekler. Lazyload dökümantasyonunu inceleyerek tolerans ataması yapmayı (yani görselin, sayfa kaydırılırken ekranda görüntülenmeden önce yüklenmesini saglayabilir) veya görüntülenirken bir geçiş animasyonu belirleyebilirsiniz.

Proje adresi:http://www.appelsiini.net/projects/lazyload

Screen nedir ki?

Screen, linux üzerinde bir konsol aracıdır. Screen sayesinde sanal konsollar açabilir ve bunları yönetebiliriz. Mantık olarak pencere gibi düşünün, her pencerenin bir id'si var ve bu pencereleri masaüstlerinde gezdirebiliyorsunuz. Screen ise bu işin konsol versiyonu. Screen ile konsol üzerinde yeni konsollar açıp kapayıp açık olanların listesini görüp, onlara spesifik id'ler atayıp veya o id'lerdeki konsollara geri dönüş yapabilirsiniz.

Ne işime yarar?

Screen paketi ilk bakışta çok fonksiyona yarayacak bişey gibi görünmüyor. İş uygulamasına geldiğinde güzelleşiyor. Birkaç örnek ile açıklayayım. Diyelim ki tty1'de bir uygulama açtınız, içerisinde bir url çıktı, o siteye girmek için o url'i kağıt kalem ile kaydedebilir, bir dosyaya paste edip onu X üzerinde açıp işinizi görebilir veya programın o konumunu ezberleyip X'de bir konsolda açıp görebilirsiniz. Eğer scren programı üzerindeki bir konsolda iseniz, CTRL + A + D'ye bastığınızda o konsoldan çıkmış olur, X'de bir konsolda screen ile o konsola dönebilir, konsolunuzun kaldığı yerinden devam edebilirsiniz.
Screen sayesinde konsollarınızı, çıktı, içerisindeki işlemler bozulmadan rahatlıkla taşıyabilirsiniz.
Başka ve daha güzel bir örnek vermek gerekirse, X'te bir konsol açıp wget ile 30 tane 100'er mb'lik dosya download açtınız. Yada bir iso çekmeye başladınız. Oldu ki X'i restart etmeniz gerekti, screen konsolu içerisinde iseniz ctrl+a+d ile çıkıp ttyX'lerden birinde bu konsolu geri çağırabilir hatta hiç çağırmayabilirsiniz bile. Başka bir uygulama konusu da, geliştirdiğiniz bash programlarında, diğer programları kullanırken bash'de screen ile açtırdığınız konsolları yönterek onların içindeki çıktıları kullanabilir, kullanıcıya bunu yansıtmadan işlem yaptırabilirsiniz.
En güzel uygulamalarından biri de, ssh ile tatildeyken bağlandığınız masaüstü bilgisayarınıza zibilyon görevi verdikten sonra detach edip acil çıkış bile yapabilmenizdir.


Screen programını kullanabilmek için screen paketi kurulu olması gerekmektedir. Bunun kurulması size kalmış artık :-)

Basit olarak bir konsolda screen komutunu verdiğimizde karşımızda temiz yeni bir bash gelecektir. Burada istediğimiz her türlü maymunluğu yapabiliriz.

İstediğiniz an CTRL + A + D tuş kombinasyonu ile rahatlıkla dışarıdaki konsola düşebilir, açmış olduğunuz screen konsolunu askıya almış olursunuz.
Eğer askıda tek konsol var ise screen -r parametresi ile doğrudan dönüş yapabilirsiniz. Eğer birden fazla askıda konsol mevcut ise aynı komut size bir liste verecektir. Bu listedeki id'leri screen -r şeklinde uygularsak o konsola düşeriz. Konsoldaki oturum sona erdiğinde askıdan alınıp screen konsolu öldürülecektir.

Ayrıca -x parametresi ile daha önce açık olan oturumu birden fazla konsolda açabilirsiniz. Böylece screen oturumunuz, açılan her konsolda yeni bir girdi mekanizmasına sahip olmuş olacaktır.

Basit bir uygulama ile;

Linux konusunda deneyimsiz birisi konsolda yapılması gereken bir işte tıkanmıştır, size ssh girişlerini verir, arkadaşın bilgisayarına girer ve bir screen oturumu açarsınız. Arkadaşınıza da bir konsol açıp screen -x komutu vermesini istersiniz. Evreka, sizin oturumunuz onun konsolunda da açılır. Her iki taraftanda bilgi girişi yapılabilir. Konuşamk (chat) için bile bu yöntemi kullanabilirsiniz :-)
Küçük bir uygulama ile kolaylıkla programı öğrenebilirsiniz. Screen komutunun man sayfasında veya help sayfasında ilgili ayrıntıları bulabilirsiniz.


Not : Bu döküman 2 Ocak 2008 tarihinde yeniden düzenlenmiştir.

Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

seo search optimization meta örnek kod svn subversion git version control deployment iOS javascript ipucu xhtml css php job wanda digital gimp proje kampanya session cookie apple iphone ipad mysql db code pharma hack wordpress google player license lisans ie internet explorer css3 html5 pear mdb2 database mssql pgsql wireless medya workspace api ajax jquery firefox logo mobile itunes sql optimizasyon analyse procedure developer mfyz injection twitter statistics istatistik insanlar nedir konsol terminal widget ide editor phpstorm jetbrains html less ios app store store in-app purchase purchase subscription verification storekit itunes connect js date tarih dokuman portfolio kontrol yapıları if while development form input textarea select compile social media sosyal facebook design connect box regex link auth macosx opengraph fql newsletter mail mootools service chart osx applications free xml http server icon ikon grafik download banner calendar tool windows url browser login blog www subdomain redirect crossdomain language style doritos tytz sitemap cache htaccess apache spam assets framework route router mod_rewrite prepare execute object app ui ux webkit share rss lifestream parse plugin imza signature web app open source ubuntu ntfs fstab diff integration network oyun cms kitap ruffles graph internet switch linux table music query coding startups tebrik kurulum nasıl generator compiler on-the-fly xmlhttprequest laptop notebook support browsers screen bootstrap export howto radio zaman button icons