<\/div>\n

Merhaba,<\/p>\n

Her f\u0131rsatta bahsetti\u011fim gibi web projelerimizde \u00f6ncelikli i\u015fimiz, kullan\u0131c\u0131lara hizmet sa\u011flayabilmek amma bu hizmeti olabildi\u011fince performansl\u0131 bir \u015fekilde sa\u011flayabilmektir. Bir web sitesinin i\u015fleyi\u015fi, hizmeti, s\u0131n\u0131rlar\u0131 ve \u00f6zellikleri her ne kadar geni\u015f ve zengin olsada, h\u0131z bak\u0131m\u0131ndan performansl\u0131 olmad\u0131\u011f\u0131 s\u00fcrece o proje yar\u0131 \u00f6l\u00fc projedir. \u0130\u015fte bu durumda biz yaz\u0131l\u0131mc\u0131lara iki g\u00f6rev d\u00fc\u015fmekte; birincisi, web projelerinde performans\u0131 olumsuz etkileyen fakt\u00f6rleri tespit edebilmek ve ikincisi, bunlara \u00e7\u00f6z\u00fcm \u00fcretebilmektir.<\/p>\n

Bu makalemizde performans aleyhine i\u015fleyen bir\u00e7ok fakt\u00f6rden sadece birisi olan web sitemizin i\u00e7eri\u011finde yahut herhangi bir yerinde kullan\u0131lan resimler \u00fczerinde konu\u015fuyor, odaklan\u0131yor ve \u00e7\u00f6z\u00fcm \u00fcretiyor olaca\u011f\u0131z.<\/p>\n

Biliyorsunuz ki, girdi\u011fimiz web sitelerinin yava\u015f y\u00fcklenmesinin en m\u00fchim kaynaklar\u0131ndan birisi ilgili sitede \u00f6zellikle b\u00fcy\u00fck boyutlu resimlerin yaratt\u0131\u011f\u0131 y\u00fckleme bo\u015flu\u011fudur. Bu problem y\u00fckleme s\u0131ras\u0131nda olu\u015fturdu\u011fu trafikten kaynakl\u0131 sitenin yava\u015f a\u00e7\u0131lmas\u0131na ve genellikle kullan\u0131c\u0131 kayb\u0131na sebep olmakta ve hatta SEO vs. gibi bir sitenin be\u015feriyetteki derecesinde bile olumsuz etki b\u0131rakmaktad\u0131r. Haliyle biz yaz\u0131l\u0131mc\u0131lar \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z web projelerinin asla ve kat’a bu \u015fekilde bir handikap\u0131n e\u015fi\u011finde olmas\u0131n\u0131 istemeyiz.<\/p>\n

Peki ne yapaca\u011f\u0131z?<\/strong> sorunuzu duyar gibiyim… Bir \u00e7ok y\u00f6ntem, d\u00fc\u015f\u00fcnce, fikir yahut teknik ortaya koyabiliriz. \u015eimdi sizlere bunlardan sadece bir tanesini(amma d\u00fcnyada en \u00e7ok tercih edileni<\/em>) sunaca\u011f\u0131m. Lazy Load y\u00f6ntemi. Bu y\u00f6ntem sayesinde web sitemizde bulunan resimlerin hepsini tek \u00e7elsede y\u00fcklemekten ziyade, ihtiya\u00e7 olduk\u00e7a y\u00fckleyecek ve bu i\u015flemi jQuery e\u015fli\u011finde Client taraf\u0131nda ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

Daha da detayland\u0131rmak gerekirse, web sitemizde bulunan resimleri k\u00e2h sayfada g\u00f6rd\u00fck\u00e7e, k\u00e2h \u00fczerine t\u0131klad\u0131k\u00e7a veyahut k\u00e2h kendi belirledi\u011fimiz durumlarda y\u00fckleyecek, bu \u015fekilde i\u015fimiz olmayan resimlerin y\u00fcklenmesini beklemeyecek, ee haliyle sitenin a\u00e7\u0131lma s\u00fcresini uzatmam\u0131\u015f olacak, performans\u0131 spontane olarak gerekti\u011fi yerde kullanm\u0131\u015f olaca\u011f\u0131z.<\/p>\n

\u015eimdi dilerseniz ufak \u00f6rneklendirmeyle Lazy Load y\u00f6ntemini pratikle\u015ftirelim.
\n\u00d6ncelikle bu y\u00f6ntem i\u00e7in jquery.lazyload.js<\/a> dosyas\u0131n\u0131 indiriniz.<\/p>\n

\u0130lk yapmam\u0131z gereken indirmi\u015f oldu\u011funuz jquery.lazyload.js dosyas\u0131n\u0131 projenize entegre ediniz.<\/p>\n

\r\n    <script src="~\/Scripts\/jquery-1.10.2.js"><\/script>\r\n    <script src="~\/Scripts\/jquery.lazyload.js"><\/script>\r\n<\/pre>\nArd\u0131ndan resimler \u00fczerinde a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 genelleyin, ger\u00e7ekle\u015ftirin.<\/p>\n
\r\n<img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="{Y\u00fckleniyor Resmi}" data-original="{Orjinal Resim}" \/>\r\n<\/pre>\nBurada dikkat etmemiz gereken “src” ile “data-original” attributelar\u0131d\u0131r.<\/p>\n
\n\nsrc<\/strong>
\nOrjinal resim y\u00fcklenene kadar g\u00f6sterilecek resmi ayarl\u0131yoruz.\n<\/li>\n
\ndata-original<\/strong>
\nOrjinal resmimizi veriyoruz.\n<\/li>\n<\/ul>\nVe son olarak body tag\u0131n\u0131 kapatmadan \u00f6nce a\u015fa\u011f\u0131daki jQuery kodlar\u0131n\u0131 yaz\u0131yoruz.<\/p>\n
\r\n    <script type="text\/javascript" charset="utf-8">\r\n        $(function () {\r\n            $("img.lazy").lazyload();\r\n        });\r\n    <\/script>\r\n<\/pre>\nBu i\u015flemden sonra sayfan\u0131zdaki resimlerin hepsi bodoslama y\u00fcklenmeyecek, sayfada g\u00f6z\u00fckt\u00fck\u00e7e y\u00fcklenecektir.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131da b\u00fct\u00fcn olarak \u00f6rnek bir Lazy Load i\u015fleminin uyguland\u0131\u011f\u0131 sayfa payla\u015fal\u0131m ve ard\u0131ndan video ile nas\u0131l sonu\u00e7 ald\u0131\u011f\u0131m\u0131z\u0131 inceleyelim.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/jquery-1.10.2.js"><\/script>\r\n    <script src="~\/Scripts\/jquery.lazyload.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0011.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0043.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0043.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0042.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0043.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0043.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0044.jpg" width="500" heigh="500" \/>\r\n    <br \/>\r\n    <img class="lazy " alt="Resim A\u00e7\u0131klamas\u0131" src="\/Content\/Images\/Yukleniyor.gif" data-original="\/Content\/Images\/IMAG0045.jpg" width="500" heigh="500" \/>\r\n\r\n    <script type="text\/javascript" charset="utf-8">\r\n        $(function () {\r\n            $("img.lazy").lazyload();\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/iframe><\/p>\n<p>G\u00f6rd\u00fcld\u00fc\u011f\u00fc \u00fczere Lazy Load y\u00f6ntemiyle resimlerimizi tek \u00e7elsede de\u011fil, sayfada g\u00f6z\u00fck\u00e7e y\u00fcklemekteyiz.<\/p>\n<p>Bunun d\u0131\u015f\u0131nda Lazy Load y\u00f6ntemine belli ba\u015fl\u0131 ayarlamalar \u00e7ekebilmekteyiz. \u015eimdi gelin bu ayarlar\u0131 inceleyelim.<\/p>\n<h3>Resim E\u015fi\u011fini Ayarlama<\/h3>\n<p>Lazy Load y\u00f6ntemiyle y\u00fcklenecek resmin alt limitini ayarlayabilmekte, haliyle performans\u0131 kasmayacak derecedeki resimleri anl\u0131k olarak \u00f6nceden y\u00fckletebilmekteyiz. Bu i\u015flem i\u00e7in &#8220;threshold&#8221; propertysini kullanmaktay\u0131z. Verilen de\u011fer piksel cinsinden de\u011ferlendirilmekte ve i\u015flem yap\u0131lmaktad\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &lt;script type=&quot;text\/javascript&quot; charset=&quot;utf-8&quot;&gt;\r\n        $(function () {\r\n            $(&quot;img.lazy&quot;).lazyload({\r\n                threshold: 200\r\n            });\r\n        });\r\n    &lt;\/script&gt;\r\n<\/pre>\n<h3>Olay \u0130le Y\u00fckleme<\/h3>\n<p>Biz makalemizde resimler sayfada g\u00f6r\u00fcld\u00fc\u011f\u00fc anda y\u00fcklemeyi ger\u00e7ekle\u015ftirdik. Bunun d\u0131\u015f\u0131nda resimlerin y\u00fcklenmesini herhangi bir olaya ba\u011flayabiliriz. Bu i\u015flem i\u00e7in &#8220;event&#8221; parametresini kullanmam\u0131z yeterlidir. &#8220;event&#8221; \u00f6zelli\u011fi; &#8220;click&#8221;, &#8220;mouseover&#8221;, &#8220;sporty&#8221;, &#8220;foobar&#8221; vs. de\u011ferlerini alabilir.<\/p>\n<p>\u00d6rne\u011fin a\u015fa\u011f\u0131daki uygulama ile \u00fczerine t\u0131klanan resim serverdan y\u00fcklenecektir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &lt;script type=&quot;text\/javascript&quot; charset=&quot;utf-8&quot;&gt;\r\n        $(function () {\r\n            $(&quot;img.lazy&quot;).lazyload({\r\n                event: &quot;click&quot;\r\n            });\r\n        });\r\n    &lt;\/script&gt;\r\n<\/pre>\n<h3>Efekt Kullan\u0131m\u0131<\/h3>\n<p>Lazy Load esnas\u0131nda efekt belirtebiliriz. &#8220;effect&#8221; \u00f6zelli\u011fi ile &#8220;fadeIn&#8221; yahut &#8220;show&#8221; gibi parametrelerle \u00e7al\u0131\u015fmaktad\u0131r.<br \/>\nA\u015fa\u011f\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere &#8220;click&#8221; event\u0131yla, &#8220;fadeIn&#8221; efektiyle \u00e7al\u0131\u015fmas\u0131n\u0131 belirtmi\u015f oluyoruz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &lt;script type=&quot;text\/javascript&quot; charset=&quot;utf-8&quot;&gt;\r\n        $(function () {\r\n            $(&quot;img.lazy&quot;).lazyload({\r\n                event: &quot;click&quot;,\r\n                effect: &quot;fadeIn&quot;\r\n            });\r\n        });\r\n    &lt;\/script&gt;\r\n<\/pre>\n<p>Evet&#8230; G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Lazy Load y\u00f6ntemiyle web sitemizdeki resimleri daha performansl\u0131 bir \u015fekilde y\u00fckleyebilmekte ve h\u0131z\u0131m\u0131za h\u0131z katmaktay\u0131z. Bu \u015fekilde b\u00fcy\u00fck bir sorun olan resimleri boyutlar\u0131 \u00f6nemsemeksizin siteyi kasmadan y\u00fckleyebiliyor, kaliteli ve kullan\u0131c\u0131 dostu bir site in\u015fa edebiliyoruz.<\/p>\n<p>Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar dilerim&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Merhaba, Her f\u0131rsatta bahsetti\u011fim gibi web projelerimizde \u00f6ncelikli i\u015fimiz, kullan\u0131c\u0131lara hizmet sa\u011flayabilmek amma bu hizmeti olabildi\u011fince performansl\u0131 bir \u015fekilde sa\u011flayabilmektir. Bir web sitesinin i\u015fleyi\u015fi, hizmeti, s\u0131n\u0131rlar\u0131 ve \u00f6zellikleri her ne kadar geni\u015f ve zengin&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[62,265,748,1607,1608],"class_list":["post-5572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-event","tag-javascript-2","tag-jquery","tag-lazy-load","tag-threshold"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/5572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=5572"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/5572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3401"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=5572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=5572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=5572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}