Web uygulamalar\u0131n\u0131n performans\u0131, g\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimi ve i\u015f ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. B\u00fcy\u00fck JavaScript paketleri ve yava\u015f y\u00fckleme s\u00fcreleri, kullan\u0131c\u0131lar\u0131n sabr\u0131n\u0131 zorlayabilir. Peki, web uygulamalar\u0131n\u0131z\u0131n ilk y\u00fckleme s\u00fcresini dramatik bir \u015fekilde iyile\u015ftirerek kullan\u0131c\u0131lar\u0131n\u0131z\u0131 etkile\u015fime sokmak m\u00fcmk\u00fcn m\u00fc? Cevap, modern \u00e7er\u00e7evelerin sundu\u011fu gran\u00fcler kod b\u00f6lme yeteneklerinde, \u00f6zellikle de yeni nesil bir \u00f6zellik olan Modern web uygulamalar\u0131, zengin kullan\u0131c\u0131 aray\u00fczleri ve karma\u015f\u0131k i\u015flevselliklerle doludur. Ancak bu zenginlik, beraberinde ciddi performans zorluklar\u0131n\u0131 da getirir. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, ilk y\u00fckleme s\u00fcresi (initial load time) kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen en \u00f6nemli fakt\u00f6rlerden biridir. Genellikle, bir web uygulamas\u0131n\u0131n t\u00fcm JavaScript kodunun tek bir b\u00fcy\u00fck paket (bundle) halinde istemciye g\u00f6nderilmesi, taray\u0131c\u0131n\u0131n bu paketi indirmesi, ayr\u0131\u015ft\u0131rmas\u0131 ve y\u00fcr\u00fctmesi i\u00e7in \u00f6nemli miktarda zaman harcamas\u0131na neden olur. Bu durum, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131lar\u0131n uygulaman\u0131n tamamen etkile\u015fime ge\u00e7mesini beklerken sab\u0131rlar\u0131n\u0131n t\u00fckenmesine yol a\u00e7ar.<\/p>\n Kullan\u0131c\u0131lar, bir web sitesinin 2-3 saniyeden fazla y\u00fcklenmesini beklemeye isteksizdirler. Bu e\u015fi\u011fin a\u015f\u0131lmas\u0131, hemen \u00e7\u0131kma oranlar\u0131n\u0131n (bounce rate) artmas\u0131na ve potansiyel m\u00fc\u015fteri veya okuyucu kaybetmeye neden olabilir. Google’\u0131n Core Web Vitals metrikleri (Largest Contentful Paint – LCP, First Input Delay – FID, Cumulative Layout Shift – CLS) de bu durumu teyit eder niteliktedir ve iyi performans g\u00f6steren siteleri \u00f6d\u00fcllendirir. LCP, sayfan\u0131n ana i\u00e7eri\u011finin ne kadar s\u00fcrede y\u00fcklendi\u011fini \u00f6l\u00e7erken, FID kullan\u0131c\u0131n\u0131n bir siteyle ilk kez etkile\u015fime ge\u00e7ebilmesi i\u00e7in ge\u00e7en s\u00fcreyi g\u00f6sterir. B\u00fcy\u00fck JavaScript paketleri bu metriklerin her ikisini de olumsuz etkiler.<\/p>\n Mevcut kod b\u00f6lme (code splitting) \u00e7\u00f6z\u00fcmleri, genellikle rota baz\u0131nda tembel y\u00fckleme (lazy loading) veya b\u00fcy\u00fck bile\u015fen gruplar\u0131n\u0131 ay\u0131rma \u015feklinde \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda “\u00fcr\u00fcnler” sayfas\u0131 veya “sepet” sayfas\u0131 ayr\u0131 ayr\u0131 y\u00fcklenir. Ancak bu yakla\u015f\u0131mlar, bazen yeterince gran\u00fcler olmayabilir. Bir sayfan\u0131n tamam\u0131 y\u00fcklense bile, o sayfa i\u00e7indeki baz\u0131 bile\u015fenlerin (\u00f6rne\u011fin, \u00fcr\u00fcn yorumlar\u0131, \u00f6nerilen \u00fcr\u00fcnler, harita bile\u015fenleri) ilk g\u00f6r\u00fcn\u00fcmde veya hemen etkile\u015fime ge\u00e7ildi\u011finde kullan\u0131c\u0131 i\u00e7in kritik olmamas\u0131 durumunda, bu bile\u015fenlerin de hemen y\u00fcklenmesi hala gereksiz bir performans y\u00fck\u00fc olu\u015fturur. \u0130\u015fte tam bu noktada, daha hassas kontrol sa\u011flayan ve yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda ilgili kodu y\u00fckleyen bir mekanizmaya ihtiya\u00e7 duyar\u0131z. Gran\u00fcler kod b\u00f6lmeye neden ihtiya\u00e7 duyar\u0131z? Cevap basit: Kullan\u0131c\u0131 deneyimini optimize etmek ve kaynak kullan\u0131m\u0131n\u0131 daha verimli hale getirmek. Geleneksel tembel y\u00fckleme genellikle t\u00fcm bir rotay\u0131 veya b\u00fcy\u00fck bir bile\u015fen grubunu y\u00fckler. Ancak bir blog g\u00f6nderisi sayfas\u0131n\u0131 d\u00fc\u015f\u00fcnelim: Kullan\u0131c\u0131 ilk olarak yaz\u0131n\u0131n kendisini okumak ister. Yorumlar, yazar biyografisi veya ilgili g\u00f6nderiler genellikle sayfan\u0131n alt k\u0131sm\u0131nda yer al\u0131r ve kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rmad\u0131k\u00e7a g\u00f6r\u00fcnmez. Bu durumda, yorum bile\u015fenini veya ilgili g\u00f6nderiler b\u00f6l\u00fcm\u00fcn\u00fc sayfa ile birlikte y\u00fcklemek, gereksiz bant geni\u015fli\u011fi t\u00fcketir ve taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke ederek ana i\u00e7eri\u011fin render s\u00fcresini uzat\u0131r. K\u0131sacas\u0131, gran\u00fcler kod b\u00f6lme, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve A\u015fa\u011f\u0131daki \u00f6rnekte, Bu, sayfan\u0131z\u0131n hemen y\u00fcklenmesi gereken ana i\u00e7eri\u011fidir.<\/p>\n \n <\/section>\n\n @defer<\/code> yap\u0131s\u0131nda yat\u0131yor. Bu makalede, @defer<\/code>‘\u0131 g\u00fcnlerce s\u00fcren yo\u011fun \u00e7al\u0131\u015fmalar sonucunda nas\u0131l ba\u015far\u0131yla uygulad\u0131\u011f\u0131m\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya senaryolar\u0131yla destekleyecek ve uygulaman\u0131z\u0131n performans\u0131n\u0131 ba\u015ftan sona nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011finizi g\u00f6sterece\u011fim.<\/p>\n@defer<\/code> gibi yap\u0131lar, bu gran\u00fclerli\u011fi sa\u011flayarak geli\u015ftiricilere daha ince ayar yapma imkan\u0131 sunar ve modern web uygulamalar\u0131n\u0131n performans engellerini a\u015fmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 haline gelir.<\/p>\n@defer Nedir ve Neden Gran\u00fcler Kod B\u00f6lmeye \u0130htiya\u00e7 Duyar\u0131z?<\/h2>\n
@defer<\/code>, modern web \u00e7er\u00e7evelerinde (\u00f6zellikle Angular 17+ gibi yenilik\u00e7i platformlarda) tan\u0131t\u0131lan deklaratif bir s\u00f6zdizimidir. Temel amac\u0131, bir \u015fablon blo\u011funun veya bir bile\u015fenin render edilmesini ve buna ait JavaScript, CSS gibi kaynaklar\u0131n y\u00fcklenmesini ko\u015fullu olarak geciktirmektir. Yani, sayfan\u0131n ilk y\u00fcklenmesi s\u0131ras\u0131nda t\u00fcm i\u00e7eri\u011fi de\u011fil, sadece acil ve kritik olanlar\u0131 y\u00fcklerken, daha az \u00f6ncelikli veya kullan\u0131c\u0131 etkile\u015fimine ba\u011fl\u0131 i\u00e7erikleri arka plana atar. Bu, taray\u0131c\u0131n\u0131n daha k\u00fc\u00e7\u00fck bir ba\u015flang\u0131\u00e7 paketi i\u015flemesine olanak tan\u0131r, b\u00f6ylece uygulaman\u0131n daha h\u0131zl\u0131 etkile\u015fime ge\u00e7mesini sa\u011flar.<\/p>\n@defer<\/code> alt\u0131nda yatan mekanizma, asl\u0131nda dinamik i\u00e7e aktar\u0131mlara (dynamic imports) dayan\u0131r. Siz bir @defer<\/code> blo\u011fu tan\u0131mlad\u0131\u011f\u0131n\u0131zda, \u00e7er\u00e7eve bu blo\u011fun i\u00e7eri\u011fini ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ayr\u0131 bir JavaScript par\u00e7as\u0131na (chunk) b\u00f6ler. Bu par\u00e7a, yaln\u0131zca @defer<\/code> blo\u011funun tetikleyici ko\u015fullar\u0131 kar\u015f\u0131land\u0131\u011f\u0131nda (\u00f6rne\u011fin, kullan\u0131c\u0131 bir alana kayd\u0131rd\u0131\u011f\u0131nda, belirli bir s\u00fcre ge\u00e7ti\u011finde veya bir elemente t\u0131klad\u0131\u011f\u0131nda) dinamik olarak y\u00fcklenir. Bu sayede, uygulaman\u0131z\u0131n ilk y\u00fckleme an\u0131nda indirmesi gereken JavaScript miktar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r, bu da First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) gibi kritik performans metriklerinde belirgin iyile\u015fmeler sa\u011flar.<\/p>\n@defer<\/code> ile bu b\u00f6l\u00fcmler, kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131\u011f\u0131nda (on viewport<\/code>), belirli bir s\u00fcre sonra (on timer<\/code>) veya hatta bir butona t\u0131klad\u0131\u011f\u0131nda (on interaction<\/code>) y\u00fcklenecek \u015fekilde ayarlanabilir. Bu “sadece ihtiyac\u0131n olan\u0131 y\u00fckle” felsefesi, \u015fu faydalar\u0131 sa\u011flar:<\/p>\n\n
@defer<\/code> bu s\u00fcreci geli\u015ftiriciler i\u00e7in hem daha kolay hem de daha etkili hale getiren g\u00fc\u00e7l\u00fc, deklaratif bir yakla\u015f\u0131md\u0131r. Uygulaman\u0131z\u0131n performans\u0131n\u0131 radikal bir \u015fekilde art\u0131rmak istiyorsan\u0131z, @defer<\/code>‘\u0131 stratejik olarak kullanmak kritik bir ad\u0131md\u0131r.<\/p>\n@defer’\u0131 Uygulaman\u0131zda Ad\u0131m Ad\u0131m Nas\u0131l Entegre Edersiniz?<\/h2>\n
@defer<\/code>‘\u0131 projenize entegre etmek, ba\u015flang\u0131\u00e7ta g\u00f6z korkutucu g\u00f6r\u00fcnse de, asl\u0131nda olduk\u00e7a basit ve deklaratif bir s\u00fcre\u00e7tir. Do\u011fru tetikleyicileri ve geri bildirim mekanizmalar\u0131n\u0131 kullanarak uygulaman\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz. \u0130\u015fte ad\u0131m ad\u0131m entegrasyon s\u00fcreci:<\/p>\nTemel Kullan\u0131m: Bir Bile\u015fenin Y\u00fcklenmesini Geciktirme<\/h3>\n
@defer<\/code>‘\u0131n en temel kullan\u0131m\u0131, bir HTML blo\u011funun veya bile\u015fenin ne zaman y\u00fcklenece\u011fini belirtmektir. Bunu yapmak i\u00e7in, geciktirmek istedi\u011finiz i\u00e7eri\u011fi @defer<\/code> ve @placeholder<\/code> bloklar\u0131 aras\u0131na yerle\u015ftirirsiniz. En basit senaryo, bir bile\u015feni yaln\u0131zca belirli bir ko\u015ful kar\u015f\u0131land\u0131\u011f\u0131nda veya belirli bir tetikleyici meydana geldi\u011finde y\u00fcklemektir. \u00d6rne\u011fin, bir sayfan\u0131n alt k\u0131sm\u0131nda yer alan yorumlar b\u00f6l\u00fcm\u00fcn\u00fc d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 bu b\u00f6l\u00fcme ula\u015fana kadar yorumlar\u0131 y\u00fcklemeye gerek yoktur.<\/p>\napp-comments<\/code> bile\u015fenini, taray\u0131c\u0131 bo\u015fta kald\u0131\u011f\u0131nda (on idle<\/code>) veya kullan\u0131c\u0131 yorumlar b\u00f6l\u00fcm\u00fcn\u00fc g\u00f6r\u00fcnt\u00fc alan\u0131na kayd\u0131rd\u0131\u011f\u0131nda (on viewport<\/code>) y\u00fcklemek i\u00e7in @defer<\/code>‘\u0131 nas\u0131l kullanabilece\u011fimizi g\u00f6r\u00fcyorsunuz. Bu sayede, ana sayfa y\u00fcklenirken yorum bile\u015feni paketinize dahil edilmez, sadece ihtiya\u00e7 duyuldu\u011funda ayr\u0131 bir JavaScript par\u00e7as\u0131 olarak getirilir.<\/p>\n\n Ana \u0130\u00e7erik<\/h2>\n
Yorumlar<\/h2>\n @defer (on idle; on viewport) {\n
Yorumlar y\u00fckleniyor... Birka\u00e7 saniye i\u00e7inde g\u00f6r\u00fcnecektir.<\/p>\n }\n <\/section>\n\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte,
@defer<\/code> blo\u011funun ko\u015fullar\u0131 (on idle<\/code> VEYAon viewport<\/code>) tetiklenene kadar y\u00fcklenmeyecektir.@placeholder<\/code> blo\u011fu ise, i\u00e7erik y\u00fcklenene kadar kullan\u0131c\u0131ya g\u00f6sterilecek ge\u00e7ici bir UI sa\u011flar. Bu, kullan\u0131c\u0131n\u0131n bo\u015f bir alan g\u00f6rmek yerine, bir \u015feylerin y\u00fcklendi\u011fine dair g\u00f6rsel bir geri bildirim almas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n
@defer Tetikleyicileri ve Ko\u015fullar\u0131 Detayl\u0131 \u0130nceleme<\/h3>\n
@defer<\/code> bloklar\u0131, farkl\u0131 kullan\u0131c\u0131 etkile\u015fimlerine veya sistem durumlar\u0131na yan\u0131t verebilen bir dizi tetikleyiciye sahiptir. Bu tetikleyiciler, uygulaman\u0131z\u0131n performans\u0131 ile kullan\u0131c\u0131 deneyimi aras\u0131nda hassas bir denge kurman\u0131za olanak tan\u0131r. \u0130\u015fte en yayg\u0131n kullan\u0131lan tetikleyiciler:<\/p>\n\n
on idle<\/code>:<\/strong> Taray\u0131c\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131 bo\u015fta kald\u0131\u011f\u0131nda i\u00e7eri\u011fi y\u00fckler. Bu, genellikle sayfan\u0131n ana i\u00e7eri\u011fi y\u00fcklendikten ve taray\u0131c\u0131 rahatlad\u0131ktan sonra ger\u00e7ekle\u015fir. Arka plan y\u00fcklemeleri i\u00e7in idealdir.<\/li>\non viewport<\/code>:<\/strong> Belirtilen bir element kullan\u0131c\u0131n\u0131n g\u00f6r\u00fc\u015f alan\u0131na girdi\u011finde i\u00e7eri\u011fi y\u00fckler. \u00d6zellikle sayfan\u0131n alt k\u0131s\u0131mlar\u0131ndaki bile\u015fenler i\u00e7in \u00e7ok etkilidir.<\/li>\non timer()<\/code>:<\/strong> Belirli bir gecikmeden sonra (milisaniye cinsinden) i\u00e7eri\u011fi y\u00fckler. \u00d6rne\u011fin, on timer(5s)<\/code> 5 saniye sonra y\u00fckleme yapar.<\/li>\non interaction<\/code>:<\/strong> Kullan\u0131c\u0131,@defer<\/code> blo\u011fu i\u00e7indeki veya blo\u011fa referans veren bir elementle etkile\u015fime girdi\u011finde (t\u0131klama, odaklanma vb.) i\u00e7eri\u011fi y\u00fckler. \u00d6zellikle formlar veya a\u00e7\u0131l\u0131r men\u00fcler gibi etkile\u015fimli bile\u015fenler i\u00e7in uygundur.<\/li>\non hover<\/code>:<\/strong> Kullan\u0131c\u0131,@defer<\/code> blo\u011fu i\u00e7indeki veya blo\u011fa referans veren bir elementin \u00fczerine geldi\u011finde i\u00e7eri\u011fi y\u00fckler. Genellikle men\u00fc \u00f6\u011feleri veya k\u00fc\u00e7\u00fck ara\u00e7 ipu\u00e7lar\u0131 i\u00e7in kullan\u0131l\u0131r.<\/li>\nwhen<\/code>:<\/strong> \u00d6zel bir boolean ko\u015ful do\u011fru oldu\u011funda i\u00e7eri\u011fi y\u00fckler. Bu, uygulaman\u0131z\u0131n durumuna (\u00f6rne\u011fin, bir kullan\u0131c\u0131n\u0131n giri\u015f yap\u0131p yapmad\u0131\u011f\u0131 veya belirli bir ayar\u0131n etkin olup olmad\u0131\u011f\u0131) ba\u011fl\u0131 olarak i\u00e7erik y\u00fcklemek i\u00e7in esneklik sa\u011flar.<\/li>\n<\/ul>\n Birden fazla tetikleyiciyi bir arada kullanabilirsiniz. \u00d6rne\u011fin,
(on idle; on viewport)<\/code> demek, taray\u0131c\u0131 bo\u015fta kald\u0131\u011f\u0131nda VEYA element g\u00f6r\u00fc\u015f alan\u0131na girdi\u011finde y\u00fckle anlam\u0131na gelir. Ayr\u0131ca,prefetch on<\/code> ifadesi ile i\u00e7eri\u011fin ne zaman \u00f6nceden y\u00fcklenece\u011fini de belirleyebilirsiniz. Bu, kullan\u0131c\u0131 tetikleyiciyi ger\u00e7ekten aktive etmeden \u00f6nce ilgili kodun indirilmesini sa\u011flayarak, ger\u00e7ek y\u00fckleme an\u0131ndaki gecikmeyi daha da azalt\u0131r.<\/p>\n