{"id":1754,"date":"2022-12-25T16:52:47","date_gmt":"2022-12-25T13:52:47","guid":{"rendered":"https:\/\/fikirbilisim.com\/?p=1754"},"modified":"2026-03-11T14:15:28","modified_gmt":"2026-03-11T11:15:28","slug":"lazy-loading-nedir","status":"publish","type":"post","link":"https:\/\/roiux.com\/tr\/lazy-loading-nedir\/","title":{"rendered":"Lazy Loading Nedir?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">[ez-toc]\u0130nternet \u00fczerindeki kullan\u0131mlar\u0131n artmas\u0131 ve insanlar\u0131n site h\u0131zlar\u0131n\u0131 \u00f6nemsemesi ile beraber \u201c<\/span><b>Lazy loading nedir<\/b><span style=\"font-weight: 400;\">?\u201d sorusu da s\u0131kl\u0131kla sorulmaya ba\u015flanm\u0131\u015ft\u0131r.<\/span> <span style=\"font-weight: 400;\">Gelin <\/span><b>lazy loading <\/b><span style=\"font-weight: 400;\">ne demekmi\u015f beraber inceleyelim.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Lazy loading<\/b><span style=\"font-weight: 400;\">, size ait sayfan\u0131n y\u00fcklenmesi s\u0131ras\u0131nda, bu y\u00fcklenmenin h\u0131zland\u0131r\u0131lmas\u0131 i\u00e7in sayfaya ait \u00f6gelerin ertelenmesi demektir. Bu durum, kullan\u0131c\u0131lar\u0131n sitenize girmesi i\u00e7in \u00e7ok \u00f6nemlidir. E\u011fer bir kullan\u0131c\u0131 siteye girerken \u00f6gelerin y\u00fcklenmesini beklerse, kendisine alternatif olarak ba\u015fka bir site arayacakt\u0131r. Yap\u0131lan i\u015flemlerdeki ana hedef, fikir ve kritik olu\u015fturma yolunun uzunlu\u011funu ya da kullan\u0131c\u0131n\u0131n sayfaya girerken ki sayfaya ait olan alt LCP\u2019ye ula\u015fmas\u0131 i\u00e7in gereken s\u00fcreyi azaltmakt\u0131r.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">LCP, En B\u00fcy\u00fck \u0130\u00e7erikli Boya anlam\u0131na gelir. Bu ise y\u00fckleme h\u0131z\u0131 olarak bildi\u011fimiz h\u0131z\u0131 s\u00f6ylemenin s\u00fcsl\u00fc bir halidir. Fakat bu h\u0131z\u0131 bu \u015fekilde telaffuz ediyor ve kullan\u0131yor olmak \u00e7ok \u00f6nem arz eder. Bunun sebebi ise Google\u2019\u0131n bu isim ile hitap ediyor, tan\u0131ml\u0131yor olu\u015fudur.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">En b\u00fcy\u00fck i\u00e7erikli A\u011fr\u0131, sayfaya ait olan ana i\u00e7eri\u011fin y\u00fcklenme zaman\u0131ndaki \u00e7izelgeyi i\u015faretlemektedir. LCP, bu anlamda her zaman sayfa h\u0131z\u0131 ve kullan\u0131c\u0131 deneyimi olarak belirleyici bir unsur olmu\u015ftur. Bunun yan\u0131nda, Google taraf\u0131ndan \u00f6ne s\u00fcr\u00fclen web verileri, bu h\u0131z ve kullan\u0131c\u0131 deneyimi konusunda \u00e7ok daha \u00f6nemli bir fakt\u00f6r olmaya ba\u015flam\u0131\u015ft\u0131r.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Google taraf\u0131ndan May\u0131s 2022 tarihinde kullan\u0131ma sunulan \u00f6nemli web verileri, siteye ait olan teknik sa\u011fl\u0131k i\u00e7in temel gereksinimler olarak g\u00f6r\u00fclebilir. Bu veriler, Google \u00fczerinde yer alan ve kullan\u0131c\u0131 deneyimlerine eri\u015filebilen, de\u011ferlendirme \u015fans\u0131 bulunabilen verilerdir. Bu veriler, bir dahaki y\u0131l\u0131n May\u0131s ay\u0131 i\u00e7erisinde kullan\u0131c\u0131 deneyimi ve web sitesi performans\u0131n\u0131 baz alarak kritik s\u0131ralama fakt\u00f6rleri haline getirecek olan Sayfa Deneyimi g\u00fcncellemesine ait ayr\u0131lmaz birer veri par\u00e7alar\u0131d\u0131r.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Google, sa\u011fl\u0131kl\u0131 bir s\u0131ralama olu\u015fturabilmek i\u00e7in kullan\u0131c\u0131 deneyimlerini baz alan yeni teknik gereksinimleri olmu\u015ftur. Bu gereksinimler, sunulmakta olan <\/span><b>lazy loading<\/b><span style=\"font-weight: 400;\"> ile kar\u015f\u0131lan\u0131r. Bu gereksinimler ile beraber h\u0131z, Google s\u0131ralamalar\u0131 i\u00e7erisinde kritik bir \u00f6neme sahip olan bir unsur olmaktad\u0131r. Fakat bunun yan\u0131nda, \u00d6nemli Web Verileri\u2019nin piyasa i\u00e7erisine sunulmas\u0131 ve Sayfa Deneyimi G\u00fcncellemesi\u2019nin yap\u0131laca\u011f\u0131n\u0131n duyurulmas\u0131, \u00f6n\u00fcm\u00fczdeki y\u0131llarda organik trafik elde edilirken etkileyici bir fakt\u00f6r olacak olan rulo sayfa h\u0131z\u0131 de\u011fi\u015fimlerinin de duyurulmas\u0131 demektir.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">\u00d6nemli Web Verileri\u2019ne ait olan son iki bile\u015fen \u0130lk Giri\u015f Gecikmesi (FID) ve K\u00fcm\u00fclatif D\u00fczen Kaymas\u0131\u2019d\u0131r (CLS). Bu bile\u015fenler, kullan\u0131c\u0131n\u0131n sayfaya giri\u015f yapmas\u0131 ile beraber nas\u0131l bir etkile\u015fimde bulundu\u011fuyla alakal\u0131 bile\u015fenlerdir. Sayfa i\u00e7erisinde yer alan ve kritik bir \u00f6neme sahip bulunmayan \u00f6geler, sayfan\u0131n \u00e7ok daha h\u0131zl\u0131 y\u00fcklenebilmesi ve iyi bir kullan\u0131c\u0131 deneyimi sunulmas\u0131 i\u00e7in geciktirilerek y\u00fcklenilen \u00f6gelerdir. Bu sayede kullan\u0131c\u0131lar \u00e7ok daha h\u0131zl\u0131 siteye girebilerek elde tutulmu\u015f olur.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Sitenizin lazy load&#8217;a ihtiyac\u0131 olup olmad\u0131\u011f\u0131n\u0131 nas\u0131l anlars\u0131n\u0131z?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Sitenizin yava\u015f bir hareket kabiliyetine sahip olmas\u0131, sizin kesinlikle tembel y\u00fckleme yapman\u0131z\u0131 gerekmez. Sayfa h\u0131z\u0131na dair yapacak oldu\u011funuz bir optimizasyon, sitenizin PageSpeed Insights ya da GTmetrix gibi bir sayfa h\u0131z\u0131 performans arac\u0131 ile tan\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">PageSpeed i\u00e7erisinde resimler i\u00e7in yava\u015f y\u00fckleme uygulamalar\u0131n\u0131 gerektirebilecek \u00f6neriler alabilirsiniz. Fakat bunlar\u0131n yan\u0131nda, a\u015fa\u011f\u0131da verilen h\u0131z optimizasyonlar\u0131na ait \u00f6nerileri kesinlikle alacaks\u0131n\u0131z:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131 aktif etme<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">CSS, JavaScript ve HTML\u2019yi k\u00fc\u00e7\u00fcltme<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Y\u00f6nlendirmelerin say\u0131s\u0131n\u0131 azaltma<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Olu\u015fumu engelleyen JavaScript uygulamas\u0131n\u0131 kald\u0131rma<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Taray\u0131c\u0131ya ait \u00f6nbellekten yararlanma<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Sunucuya ait yan\u0131t s\u00fcresini iyile\u015ftirme<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">\u0130\u00e7erik da\u011f\u0131t\u0131m a\u011f\u0131n\u0131 kullanma<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Resimleri ve videolar\u0131 optimize etme<\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Burada yap\u0131lan i\u015flemler ile belirtilen fikir, sitenize ait sayfa h\u0131z\u0131n\u0131 art\u0131rma amac\u0131 ile baz\u0131 \u00f6geleri kald\u0131rarak baz\u0131lar\u0131na \u00f6ncelik vermektir.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">\u201cEkran d\u0131\u015f\u0131ndaki g\u00f6r\u00fcnt\u00fcleri ertele\u201d uyar\u0131s\u0131 ile kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z, bu \u00f6neri ile beraber g\u00f6r\u00fcnt\u00fcler i\u00e7in yava\u015f y\u00fckleme \u00f6zelli\u011fi devreye girmektedir. Bu \u00f6neri, sizin kesinlikle yava\u015f y\u00fcklemeye ihtiya\u00e7 duydu\u011funuzu g\u00f6sterir. Sitenizde yer alan sayfalardan hangilerinin LCP sorunlar\u0131na sahip oldu\u011funu g\u00f6rmek i\u00e7in Search Console i\u00e7erisindeki \u00d6nemli Web Verileri raporlar\u0131n\u0131 inceleyebilirsiniz. Google, iyi \u00e7al\u0131\u015fan bir LCP\u2019nin d\u00f6rt saniyede ya da daha k\u0131sa s\u00fcrede i\u015fe yarayaca\u011f\u0131n\u0131 tan\u0131mlamaktad\u0131r. Bu, <\/span><b>lazy loading <\/b><span style=\"font-weight: 400;\">i\u00e7in \u00f6nemli bir ayr\u0131nt\u0131d\u0131r.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Bir sayfaya ait olan LCP 4 saniyeden daha uzun s\u00fcr\u00fcyorsa, bu alanda mutlaka ge\u00e7 y\u00fckleme yapman\u0131z gerekmez. Fakat bu rapor, site i\u00e7erisindeki yava\u015fl\u0131\u011fa dair size g\u00fczel bir rapor sunacakt\u0131r. Bu raporlar ile biraz \u00f6nce payla\u015f\u0131lan h\u0131z ara\u00e7lar\u0131n\u0131 kullanabilir ve <\/span><b>lazy loading<\/b><span style=\"font-weight: 400;\"> i\u00e7in \u00e7al\u0131\u015fmalarda bulunabilirsiniz.\u00a0<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Lazy load nas\u0131l uygulan\u0131r?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Lazy load <\/b><span style=\"font-weight: 400;\">\u00e7al\u0131\u015fmas\u0131n\u0131 kendiniz uygulamaya \u00e7al\u0131\u015f\u0131yorsan\u0131z, y\u00fcksek ihtimalle ba\u015far\u0131l\u0131 olamayacaks\u0131n\u0131z. Ba\u015far\u0131l\u0131 bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirmeniz i\u00e7in kesinlikle bir uzman geli\u015ftirici olman\u0131z gerekir. Bu alanda <\/span><b>seo ajans <\/b><span style=\"font-weight: 400;\">olarak \u00e7al\u0131\u015fan kurumlar ya da <\/span><a href=\"https:\/\/roiux.com\/hizmetler\/seo-uzmani\/\"><b>seo uzman\u0131 <\/b><\/a><span style=\"font-weight: 400;\">olan ki\u015filer size yard\u0131mc\u0131 olabilirler.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">WordPress kullanan ki\u015filer i\u00e7in geli\u015ftirilen birka\u00e7 tembel y\u00fckleme uygulamas\u0131 vard\u0131r. Bu eklentiler aras\u0131nda en \u00e7ok kullan\u0131lan\u0131 ise Lazy Load ve Smush uygulamas\u0131d\u0131r. Smush, g\u00f6r\u00fcnt\u00fc optimizasyonu olarak m\u00fckemmel bir \u00e7\u00f6z\u00fcm olup SEO i\u00e7in bir\u00e7ok g\u00f6r\u00fcnt\u00fc s\u0131k\u0131\u015ft\u0131rma, yava\u015f y\u00fckleme ve g\u00f6r\u00fcnt\u00fc d\u00f6n\u00fc\u015ft\u00fcrme \u00f6zelli\u011fi sa\u011flar.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Bunlar\u0131n yan\u0131nda, i\u00e7erik y\u00f6netim sisteminize ba\u011fl\u0131 olarak ister Shopify isterseniz de WordPress kullan\u0131yor olun, ge\u00e7 y\u00fckleme i\u015flemleri bazen eklenti uygulamak kadar basit bir i\u015flem olmayabilir. Shopify, genel olarak kendi <\/span><b>lazy load <\/b><span style=\"font-weight: 400;\">uygulamas\u0131n\u0131 \u00f6nermektedir. BigCommerce ise Blueprint ve Stencil gibi yayg\u0131n temalar aras\u0131nda ge\u00e7 y\u00fcklemeyi destekleyen eklentilerine sahiptir.\u00a0<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">E\u011fer bu uygulamalar\u0131n tamam\u0131 sizi a\u015fan bir durumdaysa, orijinal halimize geri d\u00f6nelim. Geli\u015ftirme \u00f6zelliklerinize g\u00fcvenmiyorsan\u0131z, zaman\u0131n\u0131z\u0131 ve enerjinizi tembel y\u00fcklemeyi kendiniz yapmak i\u00e7in harcamay\u0131n. Bunun yerine \u00e7ok daha profesyonel bir geli\u015ftirici ile \u00e7al\u0131\u015fmay\u0131 deneyin. Bu geli\u015ftiriciler, kendine g\u00fcvenilir bir \u015fekilde ihtiya\u00e7 duyulan t\u00fcm <\/span><b>lazy load <\/b><span style=\"font-weight: 400;\">\u00e7al\u0131\u015fmalar\u0131n\u0131 sitenize uygulayacakt\u0131r. Bu durum, sitenizin i\u00e7erisinde 2-3 saniyelik bir h\u0131z tasarrufu sa\u011fl\u0131yor ise, kesinlikle uygulamal\u0131 ya da bir profesyonelden destek almal\u0131s\u0131n\u0131z. Bu \u00e7al\u0131\u015fmalar ile getirecek oldu\u011fu kazan\u00e7, muhtemelen sizin harcam\u0131\u015f oldu\u011funuz paralardan daha b\u00fcy\u00fck olacakt\u0131r.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Web siteniz i\u00e7in lazy load ne kadar kritik?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">PageSpeed Insights ve GTMetrix raporlar\u0131n\u0131zda yer alan potansiyel olarak y\u00fcksek verim sahibi i\u015flem \u00f6gesi yoksa, kendinizin ya da geli\u015ftiricinizin zaman\u0131n\u0131 yava\u015f y\u00fckleme uygulamas\u0131na harcaman\u0131z gerekti\u011fini d\u00fc\u015f\u00fcnmeyin. E\u011fer bu \u00f6geler en y\u00fcksek y\u00fckleme s\u00fcresi tasarruflar\u0131na sahipse, \u00f6ncelik verebilece\u011finiz farkl\u0131 site h\u0131z\u0131 iyile\u015ftirmeleri de vard\u0131r. Bunlar JavaScript, Gzip s\u0131k\u0131\u015ft\u0131rma, CSS, HTML k\u00fc\u00e7\u00fcltme ve sunucu yan\u0131t s\u00fcresinin iyile\u015ftirmesi gibi uygulamalard\u0131r.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Bunun yan\u0131nda, g\u00f6rsel olarak \u00e7ok say\u0131da \u00f6genin bulundu\u011fu bir internet siteniz varsa ve Search Console \u00fczerindeki \u00d6nemli Web Verileri raporunuzda \u00e7ok say\u0131da yava\u015f LCP yer al\u0131yorsa, site h\u0131z\u0131 performans arac\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz. <\/span><b>Lazy load<\/b><span style=\"font-weight: 400;\">, ekran\u0131n alt taraf\u0131nda yer alan daha b\u00fcy\u00fck \u00f6geler varsa, bu \u00f6gelerin bulundu\u011fu siteler ve sayfalar i\u00e7in y\u00fckleme s\u00fcreleri \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirme sa\u011flayabilir. Bu tarz siteler i\u00e7in yava\u015f y\u00fckleme uygulamalar\u0131 do\u011fru olmayacakt\u0131r.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Bu uygulamalar\u0131 yaparken bir uzman ile \u00e7al\u0131\u015fmay\u0131 unutmay\u0131n. Bu sayede \u00e7al\u0131\u015fmalar\u0131n\u0131z \u00e7ok daha profesyonel bir \u015fekilde ilerleyecektir.\u00a0\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ez-toc]\u0130nternet \u00fczerindeki kullan\u0131mlar\u0131n artmas\u0131 ve insanlar\u0131n site h\u0131zlar\u0131n\u0131 \u00f6nemsemesi ile beraber \u201cLazy loading nedir?\u201d sorusu da s\u0131kl\u0131kla sorulmaya ba\u015flanm\u0131\u015ft\u0131r. Gelin lazy loading ne demekmi\u015f beraber inceleyelim. Lazy loading, size ait sayfan\u0131n y\u00fcklenmesi s\u0131ras\u0131nda, bu y\u00fcklenmenin h\u0131zland\u0131r\u0131lmas\u0131 i\u00e7in sayfaya ait \u00f6gelerin ertelenmesi demektir. Bu durum, kullan\u0131c\u0131lar\u0131n sitenize girmesi i\u00e7in \u00e7ok \u00f6nemlidir. E\u011fer bir kullan\u0131c\u0131 siteye girerken [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":1755,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/posts\/1754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":0,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/posts\/1754\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/media\/1755"}],"wp:attachment":[{"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/media?parent=1754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/categories?post=1754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/roiux.com\/tr\/wp-json\/wp\/v2\/tags?post=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}