Modern web uygulamalar\u0131nda h\u0131z, kullan\u0131c\u0131 deneyimi ve SEO i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Geleneksel optimizasyonlar\u0131n \u00f6tesinde, ilk bak\u0131\u015fta ‘\u00e7\u0131lg\u0131n’ g\u00f6r\u00fcnen ama performans\u0131 katlayan gizli teknikleri bu makalede ke\u015ffedin.<\/p>\n
G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, bir web sitesinin h\u0131z\u0131, sadece kullan\u0131c\u0131lar\u0131n sabr\u0131n\u0131 test etmekle kalmaz, ayn\u0131 zamanda arama motoru s\u0131ralamalar\u0131ndan d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131na kadar pek \u00e7ok kritik metrik \u00fczerinde do\u011frudan etki yarat\u0131r. Kullan\u0131c\u0131lar, yava\u015f y\u00fcklenen bir siteyi terk etme e\u011filimindedir ve bu durum, i\u015fletmeler i\u00e7in ciddi gelir kay\u0131plar\u0131na yol a\u00e7abilir. Geleneksel optimizasyon y\u00f6ntemleri, \u00f6rne\u011fin resim boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek, \u00f6nbellekleme kullanmak veya CSS\/JS dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rmak gibi yakla\u015f\u0131mlar, elbette ki \u00e7ok \u00f6nemlidir ve her projenin temelini olu\u015fturur. Ancak, bazen bu temel ad\u0131mlar yeterli olmaz. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli, dinamik ve interaktif web uygulamalar\u0131nda, ilk bak\u0131\u015fta mant\u0131ks\u0131z veya “\u00e7\u0131lg\u0131n” g\u00f6r\u00fcnen ancak asl\u0131nda derinlemesine teknik bilgi gerektiren performans engelleriyle kar\u015f\u0131la\u015fabiliriz. Bu engeller, genellikle taray\u0131c\u0131n\u0131n \u00e7al\u0131\u015fma prensipleri, JavaScript motorunun davran\u0131\u015flar\u0131 veya a\u011f protokollerinin incelikleriyle ilgilidir. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck bir JavaScript kodu par\u00e7ac\u0131\u011f\u0131n\u0131n t\u00fcm sayfan\u0131n y\u00fcklenmesini dakikalarca geciktirmesi, veya g\u00f6r\u00fcnmez bir elementin bile DOM (Document Object Model – Belge Nesne Modeli) \u00fczerinde beklenmedik bir y\u00fcke neden olmas\u0131 gibi durumlar, geli\u015ftiricileri \u015fa\u015f\u0131rtabilir. \u0130\u015fte bu noktada, geleneksel \u00e7\u00f6z\u00fcmlerin \u00f6tesine ge\u00e7erek, sorunun k\u00f6kenine inen ve bazen “delice” g\u00f6r\u00fcnen ancak inan\u0131lmaz derecede etkili olan optimizasyon stratejilerine ihtiya\u00e7 duyar\u0131z. Bu b\u00f6l\u00fcmde, modern web’deki bu t\u00fcr beklenmedik performans engellerini ve bunlar\u0131n arkas\u0131ndaki temel mekanizmalar\u0131 detayl\u0131ca inceleyece\u011fiz. Bu, sadece sorunlar\u0131 tan\u0131mlamakla kalmayacak, ayn\u0131 zamanda \u00e7\u00f6z\u00fcmlere giden yolu da ayd\u0131nlatacakt\u0131r. Web performans\u0131n\u0131 anlamak, sadece kod yazmak de\u011fil, ayn\u0131 zamanda taray\u0131c\u0131n\u0131n, a\u011f\u0131n ve kullan\u0131c\u0131n\u0131n etkile\u015fimini bir b\u00fct\u00fcn olarak kavramak anlam\u0131na gelir. Bu nedenle, bu “\u00e7\u0131lg\u0131n” engelleri anlamak, geli\u015ftiriciler i\u00e7in vazge\u00e7ilmez bir yetkinliktir.<\/p>\n
Web sayfalar\u0131, temel olarak HTML, CSS ve JavaScript’in birle\u015fimiyle olu\u015fur. Taray\u0131c\u0131, HTML belgesini ayr\u0131\u015ft\u0131rarak bir a\u011fa\u00e7 yap\u0131s\u0131 olu\u015fturur; i\u015fte bu yap\u0131ya DOM (Document Object Model – Belge Nesne Modeli) denir. DOM, JavaScript’in sayfa i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmesi i\u00e7in bir aray\u00fcz sa\u011flar. Ancak, DOM manip\u00fclasyonu, \u00f6zellikle yo\u011fun ve s\u0131k yap\u0131ld\u0131\u011f\u0131nda, ciddi performans sorunlar\u0131na yol a\u00e7abilen “g\u00f6r\u00fcnmez” bir maliyete sahiptir. Her DOM de\u011fi\u015fikli\u011fi, taray\u0131c\u0131n\u0131n sayfay\u0131 yeniden d\u00fczenlemesine (reflow) ve yeniden \u00e7izmesine (repaint) neden olabilir. Reflow, bir elementin boyutunun veya konumunun de\u011fi\u015fmesiyle di\u011fer elementlerin de etkilenerek yeniden hesaplanmas\u0131 i\u015flemidir. Repaint ise, elementlerin renk veya arka plan gibi g\u00f6rsel \u00f6zelliklerinin de\u011fi\u015fmesiyle piksel de\u011ferlerinin yeniden \u00e7izilmesidir. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k bir DOM a\u011fac\u0131na sahip sayfalarda, tek bir k\u00fc\u00e7\u00fck de\u011fi\u015fiklik bile t\u00fcm sayfan\u0131n yeniden hesaplanmas\u0131na yol a\u00e7arak saniyenin onda birinden daha uzun s\u00fcrebilen gecikmelere neden olabilir. Bu durum, \u00f6zellikle kullan\u0131c\u0131 aray\u00fcz\u00fcnde animasyonlar veya s\u0131k g\u00fcncellemeler yap\u0131ld\u0131\u011f\u0131nda, sayfan\u0131n tak\u0131lmas\u0131na veya “donuk” g\u00f6r\u00fcnmesine neden olabilir.<\/p>\n
\u00d6rne\u011fin, bir listedeki her bir \u00f6\u011feyi tek tek d\u00f6ng\u00fc i\u00e7inde eklemek yerine, t\u00fcm \u00f6\u011feleri \u00f6nce bir string veya DocumentFragment (belge par\u00e7as\u0131) i\u00e7inde olu\u015fturup, ard\u0131ndan tek seferde DOM’a eklemek, reflow ve repaint i\u015flemlerini minimize ederek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Geleneksel JavaScript ile yap\u0131lan bir \u00f6rnekte, her d\u00f6ng\u00fcde DOM’a eleman eklemek yerine, bir dizi eleman\u0131 toplu halde eklemenin fark\u0131n\u0131 g\u00f6rebiliriz:<\/p>\n
\/\/ K\u00f6t\u00fc pratik: Her d\u00f6ng\u00fcde DOM manip\u00fclasyonu\nconst listElement = document.getElementById('myList');\nfor (let i = 0; i < 1000; i++) {\n const item = document.createElement('li');\n item.textContent = \u00d6\u011fe ${i}<\/code>;\n listElement.appendChild(item);\n}\n\n\/\/ \u0130yi pratik: DocumentFragment kullanarak toplu DOM manip\u00fclasyonu\nconst listElementOptimized = document.getElementById('myListOptimized');\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 1000; i++) {\n const item = document.createElement('li');\n item.textContent = Optimize Edilmi\u015f \u00d6\u011fe ${i}<\/code>;\n fragment.appendChild(item);\n}\nlistElementOptimized.appendChild(fragment);<\/code><\/pre>\n<\/div>\nYukar\u0131daki \u00f6rnekte, ilk y\u00f6ntem 1000 kez DOM’u de\u011fi\u015ftirirken, ikinci y\u00f6ntem sadece bir kez de\u011fi\u015ftirir. Bu fark, \u00f6zellikle b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken veya React, Vue gibi Virtual DOM (sanal DOM) kullanan framework’ler kullanmadan do\u011frudan DOM ile etkile\u015fime girerken kritik hale gelir. Virtual DOM, bu t\u00fcr maliyetleri soyutlayarak, de\u011fi\u015fiklikleri optimize eder ve ger\u00e7ek DOM’a tek bir seferde uygular. Bu nedenle, do\u011frudan DOM manip\u00fclasyonu yaparken bu t\u00fcr “\u00e7\u0131lg\u0131n” maliyetlerin fark\u0131nda olmak ve en az say\u0131da DOM i\u015flemi yapmaya \u00f6zen g\u00f6stermek, web performans\u0131n\u0131 art\u0131rman\u0131n temel yollar\u0131ndan biridir.<\/p>\n
Kaynak Y\u00fcklemede “S\u00fcrpriz” Blokajlar: Render Blocking Nedir?<\/h3>\n
Bir web sayfas\u0131n\u0131n taray\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fcnt\u00fclenmesi s\u00fcreci, bir\u00e7ok a\u015famadan olu\u015fur. Bu a\u015famalardan biri olan “render blocking” (olu\u015fturmay\u0131 engelleyen) kaynaklar, sayfan\u0131n i\u00e7eri\u011finin kullan\u0131c\u0131ya g\u00f6sterilmesini geciktirerek ciddi performans sorunlar\u0131na yol a\u00e7abilir. Temel olarak, taray\u0131c\u0131 bir HTML belgesini ayr\u0131\u015ft\u0131rmaya ba\u015flad\u0131\u011f\u0131nda, metin ve resim gibi i\u00e7eri\u011fi hemen i\u015flemeye ba\u015flayabilir. Ancak, HTML dosyas\u0131 i\u00e7erisinde d\u0131\u015far\u0131dan y\u00fcklenen CSS (Cascading Style Sheets – Basamakl\u0131 Stil Sayfalar\u0131) ve JavaScript (JS) dosyalar\u0131yla kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda, taray\u0131c\u0131n\u0131n davran\u0131\u015f \u015fekli de\u011fi\u015fir. CSS dosyalar\u0131, sayfan\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini belirledi\u011fi i\u00e7in, taray\u0131c\u0131 t\u00fcm CSS dosyalar\u0131n\u0131 indirip ayr\u0131\u015ft\u0131rmadan sayfan\u0131n g\u00f6rsel yap\u0131s\u0131n\u0131 olu\u015fturmaya (render etmeye) ba\u015flayamaz. Aksi takdirde, kullan\u0131c\u0131lar stilize edilmemi\u015f, “\u00e7\u0131plak” bir sayfa g\u00f6rebilirler ki bu da k\u00f6t\u00fc bir deneyimdir. Bu nedenle, taray\u0131c\u0131, bir <link><\/code> etiketiyle kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda, bu CSS dosyas\u0131n\u0131 indirip i\u015fleyene kadar sayfa olu\u015fturma i\u015flemini duraklat\u0131r. Bu durum, CSS’in “render blocking” bir kaynak olmas\u0131na neden olur.<\/p>\nJavaScript dosyalar\u0131 ise daha da kritik bir rol oynar. Taray\u0131c\u0131, bir <script><\/code> etiketiyle kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda, bu JavaScript dosyas\u0131n\u0131 indirip \u00e7al\u0131\u015ft\u0131rmadan HTML ayr\u0131\u015ft\u0131rma i\u015flemini durdurur. Bunun nedeni, JavaScript’in DOM yap\u0131s\u0131n\u0131 de\u011fi\u015ftirebilme potansiyelidir. E\u011fer taray\u0131c\u0131, HTML’i ayr\u0131\u015ft\u0131rmaya devam ederken bir JavaScript kodu DOM’u de\u011fi\u015ftirirse, bu tutars\u0131zl\u0131klara yol a\u00e7abilir. Bu y\u00fczden, JavaScript varsay\u0131lan olarak “parser blocking” (ayr\u0131\u015ft\u0131r\u0131c\u0131y\u0131 engelleyen) bir kaynakt\u0131r. \u00d6zellikle sayfan\u0131n \u00fcst k\u0131s\u0131mlar\u0131na yerle\u015ftirilen b\u00fcy\u00fck JavaScript dosyalar\u0131, sayfan\u0131n tamamen y\u00fcklenip etkile\u015fimli hale gelmesini \u00f6nemli \u00f6l\u00e7\u00fcde geciktirebilir. Bu durum, “First Contentful Paint (FCP)” (\u0130lk Anlaml\u0131 Boyama) ve “Time to Interactive (TTI)” (Etkile\u015fim S\u00fcresi) gibi metrikleri olumsuz etkiler.<\/p>\nBu “s\u00fcrpriz” blokajlar\u0131 a\u015fmak i\u00e7in \u00e7e\u015fitli stratejiler mevcuttur. CSS i\u00e7in, kritik olmayan stilleri geciktirmeli y\u00fcklemek veya medya sorgular\u0131 kullanarak sadece belirli cihazlara \u00f6zg\u00fc CSS’i y\u00fcklemek d\u00fc\u015f\u00fcn\u00fclebilir. JavaScript i\u00e7in ise async<\/code> ve defer<\/code> nitelikleri kurtar\u0131c\u0131 rol oynar:<\/p>\n\n<\/div>\nasync<\/code> ile script, HTML ayr\u0131\u015ft\u0131rmay\u0131 engellemeden arka planda indirilir ve indirildikten hemen sonra \u00e7al\u0131\u015f\u0131r. Bu, HTML ayr\u0131\u015ft\u0131rmay\u0131 yine de durdurabilir. defer<\/code> ise script’i yine arka planda indirir, ancak \u00e7al\u0131\u015ft\u0131rma i\u015flemini HTML ayr\u0131\u015ft\u0131rma tamamen bittikten ve DOM haz\u0131r hale geldikten sonraya b\u0131rak\u0131r. Bu sayede, JavaScript kodlar\u0131 sayfa i\u00e7eri\u011finin g\u00f6r\u00fcnmesini engellemez. Bu teknikleri do\u011fru bir \u015fekilde uygulamak, web sitenizin y\u00fckleme h\u0131z\u0131n\u0131 ve dolay\u0131s\u0131yla kullan\u0131c\u0131 deneyimini radikal bir \u015fekilde iyile\u015ftirebilir. Bu “s\u00fcrpriz” blokajlar\u0131 anlamak ve y\u00f6netmek, modern web geli\u015ftiricilerinin temel becerilerinden biridir.<\/p>\nPerformans Sorunlar\u0131na “Delice” Gelen \u00c7\u00f6z\u00fcmler: S\u0131rad\u0131\u015f\u0131 Optimizasyon Teknikleri<\/h2>\n
Geleneksel optimizasyon y\u00f6ntemleri, \u00e7o\u011fu web sitesi i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar. Ancak, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, standart yakla\u015f\u0131mlar yetersiz kalabilir. \u0130\u015fte bu noktada, ilk bak\u0131\u015fta “delice” veya al\u0131\u015f\u0131lmad\u0131k gelebilecek, ancak derinlemesine anla\u015f\u0131ld\u0131\u011f\u0131nda inan\u0131lmaz derecede etkili olan s\u0131rad\u0131\u015f\u0131 optimizasyon teknikleri devreye girer. Bu teknikler, taray\u0131c\u0131n\u0131n \u00e7al\u0131\u015fma \u015feklinden, a\u011f protokollerinin inceliklerine kadar bir\u00e7ok farkl\u0131 alan\u0131 kapsar ve genellikle geli\u015ftiricilerden daha ileri d\u00fczeyde bir anlay\u0131\u015f bekler. Bu b\u00f6l\u00fcmde, web sitenizin performans\u0131n\u0131 bir sonraki seviyeye ta\u015f\u0131yacak, belki de daha \u00f6nce duymad\u0131\u011f\u0131n\u0131z veya g\u00f6z ard\u0131 etti\u011finiz bu “\u00e7\u0131lg\u0131n” \u00e7\u00f6z\u00fcmleri detayl\u0131ca inceleyece\u011fiz. Bu yakla\u015f\u0131mlar, sadece y\u00fckleme s\u00fcrelerini k\u0131saltmakla kalmayacak, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini k\u00f6kten de\u011fi\u015ftirecek potansiyele sahiptir. Amac\u0131m\u0131z, sadece sorunlar\u0131 \u00e7\u00f6zmek de\u011fil, ayn\u0131 zamanda olas\u0131 performans darbo\u011fazlar\u0131n\u0131 \u00f6nceden tahmin ederek proaktif bir yakla\u015f\u0131m benimsemektir. Bu teknikler, modern web geli\u015ftirme ekosisteminde giderek daha fazla \u00f6nem kazanmakta ve rekabet avantaj\u0131 sa\u011flamaktad\u0131r. Her bir tekni\u011fin arkas\u0131ndaki mant\u0131\u011f\u0131 ve nas\u0131l uygulanaca\u011f\u0131n\u0131 anlamak, geli\u015ftiricilerin ara\u00e7 kutusuna de\u011ferli yeni ara\u00e7lar ekleyecektir. Bu sayede, “delice” g\u00f6r\u00fcnen bu \u00e7\u00f6z\u00fcmlerin asl\u0131nda ne kadar mant\u0131kl\u0131 ve g\u00fc\u00e7l\u00fc oldu\u011funu ke\u015ffedece\u011fiz.<\/p>\n
Lazy Loading (Tembel Y\u00fckleme) ve Intersection Observer API<\/h3>\n
Web sayfalar\u0131nda genellikle \u00e7ok say\u0131da g\u00f6rsel veya video bulunur. Bu medya \u00f6\u011felerinin hepsi ayn\u0131 anda y\u00fcklenmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda, sayfan\u0131n a\u00e7\u0131l\u0131\u015f h\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde d\u00fc\u015fer. Kullan\u0131c\u0131lar\u0131n sayfay\u0131 kayd\u0131rarak g\u00f6rece\u011fi, ba\u015flang\u0131\u00e7ta ekran d\u0131\u015f\u0131nda kalan (above the fold) i\u00e7erikleri hemen y\u00fcklemek yerine, sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklemek, yani “lazy loading” (tembel y\u00fckleme) yapmak, performans\u0131 art\u0131rman\u0131n en etkili yollar\u0131ndan biridir. Geleneksel olarak, lazy loading genellikle scroll (kayd\u0131rma) olaylar\u0131n\u0131 dinleyerek ve elementlerin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc manuel olarak hesaplayarak yap\u0131l\u0131rd\u0131. Ancak bu y\u00f6ntem, \u00f6zellikle mobil cihazlarda ve d\u00fc\u015f\u00fck performansl\u0131 makinelerde, scroll olaylar\u0131n\u0131n s\u0131k tetiklenmesi nedeniyle ciddi performans sorunlar\u0131na yol a\u00e7abilir. Her scroll olay\u0131nda DOM’u sorgulamak ve element pozisyonlar\u0131n\u0131 hesaplamak, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) me\u015fgul ederek sayfan\u0131n tak\u0131lmas\u0131na neden olabilir. \u0130\u015fte bu noktada, modern web API’lerinden biri olan Intersection Observer API (Kesi\u015fim G\u00f6zlemci API), bu soruna zarif ve performansl\u0131 bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
Intersection Observer API, bir elementin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc (yani, viewport – g\u00f6r\u00fcnt\u00fc alan\u0131 ile kesi\u015fip kesi\u015fmedi\u011fini) ve ne kadar\u0131n\u0131n g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 engellemeden asenkron olarak izlemenizi sa\u011flar. Bu, scroll olaylar\u0131n\u0131 manuel olarak dinlemekten \u00e7ok daha verimlidir ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar. Intersection Observer’\u0131 kullanarak, bir g\u00f6rselin veya herhangi bir elementin ekrana girdi\u011fi anda y\u00fcklenmesini tetikleyebiliriz. B\u00f6ylece, sadece ger\u00e7ekten ihtiya\u00e7 duyulan kaynaklar y\u00fcklenir ve sayfa ba\u015flang\u0131\u00e7ta \u00e7ok daha h\u0131zl\u0131 a\u00e7\u0131l\u0131r.<\/p>\n
\u0130\u015fte basit bir Intersection Observer ile lazy loading \u00f6rne\u011fi:<\/p>\n
\n<img data-src=\"resim.jpg\" alt=\"A\u00e7\u0131klama\" class=\"lazyload-image\">\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const lazyImages = document.querySelectorAll(\"img.lazyload-image\");\n const imageObserver = new IntersectionObserver(function(entries, observer) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n const image = entry.target;\n image.src = image.dataset.src; \/\/ data-src'den src'ye ta\u015f\u0131\n image.classList.remove(\"lazyload-image\");\n observer.unobserve(image); \/\/ Resim y\u00fcklendi, art\u0131k g\u00f6zlemlemeye gerek yok\n }\n });\n });\n\n lazyImages.forEach(function(image) {\n imageObserver.observe(image);\n });\n });\n<\/script><\/code><\/pre>\n<\/div>\nBu \u00f6rnekte, data-src<\/code> niteli\u011fiyle i\u015faretlenmi\u015f g\u00f6rseller, ekrana girdi\u011finde ger\u00e7ek src<\/code> de\u011ferini al\u0131r ve y\u00fcklenir. Bu teknik, \u00f6zellikle i\u00e7erik a\u011f\u0131rl\u0131kl\u0131 web siteleri, bloglar veya e-ticaret platformlar\u0131 i\u00e7in hayati \u00f6neme sahiptir. Intersection Observer API, sadece g\u00f6rseller i\u00e7in de\u011fil, ayn\u0131 zamanda reklamlar\u0131, videolar\u0131, yorumlar\u0131 veya herhangi bir dinamik i\u00e7eri\u011fi de “tembel” bir \u015fekilde y\u00fcklemek i\u00e7in kullan\u0131labilir. Bu “\u00e7\u0131lg\u0131n” basitlikteki API, web performans\u0131n\u0131 art\u0131rman\u0131n modern ve etkili bir yolunu sunar.<\/p>\nWeb Workers ile Ana \u0130\u015f Par\u00e7ac\u0131\u011f\u0131n\u0131 Rahatlatma<\/h3>\n
JavaScript, taray\u0131c\u0131da tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir. Bu, t\u00fcm DOM manip\u00fclasyonlar\u0131, kullan\u0131c\u0131 etkile\u015fimleri ve JavaScript kodlar\u0131n\u0131n ayn\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. E\u011fer bu ana i\u015f par\u00e7ac\u0131\u011f\u0131nda yo\u011fun hesaplama gerektiren veya uzun s\u00fcren bir i\u015flem \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rsa, taray\u0131c\u0131 donar, kullan\u0131c\u0131 aray\u00fcz\u00fc tepkisiz hale gelir ve kullan\u0131c\u0131 deneyimi ciddi \u015fekilde bozulur. \u0130\u015fte bu durum, geli\u015ftiriciler i\u00e7in ger\u00e7ek bir “\u00e7\u0131lg\u0131n” problem yarat\u0131r. Kullan\u0131c\u0131lar\u0131n bir butona t\u0131klamas\u0131na ra\u011fmen hi\u00e7bir \u015fey olmamas\u0131 veya sayfan\u0131n birka\u00e7 saniye boyunca donmas\u0131 kabul edilemez bir durumdur. Web Workers (Web \u0130\u015f\u00e7ileri) API’si, bu sorunu \u00e7\u00f6zmek i\u00e7in taray\u0131c\u0131ya \u00e7oklu i\u015f par\u00e7ac\u0131\u011f\u0131 (multi-threading) benzeri bir yetenek kazand\u0131r\u0131r.<\/p>\n
Web Worker’lar, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak arka planda JavaScript kodlar\u0131 \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Bu sayede, yo\u011fun hesaplamalar, b\u00fcy\u00fck veri i\u015fleme veya a\u011f istekleri gibi zaman al\u0131c\u0131 g\u00f6revleri bir Web Worker’a devrederek, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rakabilir ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn ak\u0131c\u0131 kalmas\u0131n\u0131 sa\u011flayabilirsiniz. Web Worker’lar kendi global ba\u011flamlar\u0131na sahiptir ve DOM’a do\u011frudan eri\u015femezler. Ana i\u015f par\u00e7ac\u0131\u011f\u0131 ile Web Worker aras\u0131nda ileti\u015fim, mesajla\u015fma (postMessage()<\/code> ve onmessage<\/code> olay dinleyicileri) yoluyla ger\u00e7ekle\u015fir. Bu, veri transferi i\u00e7in belirli k\u0131s\u0131tlamalar getirse de, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n performans\u0131n\u0131 korumak i\u00e7in vazge\u00e7ilmez bir mekanizmad\u0131r.<\/p>\n\u00d6rne\u011fin, b\u00fcy\u00fck bir JSON dosyas\u0131n\u0131 ayr\u0131\u015ft\u0131rmak veya karma\u015f\u0131k bir matematiksel hesaplama yapmak gibi g\u00f6revleri bir Web Worker’a devredebiliriz:<\/p>\n
\n\/\/ main.js (Ana i\u015f par\u00e7ac\u0131\u011f\u0131)\nif (window.Worker) {\n const myWorker = new Worker('worker.js');\n\n \/\/ Worker'a veri g\u00f6nder\n myWorker.postMessage({ type: 'startCalculation', data: 1000000 });\n\n \/\/ Worker'dan gelen mesaj\u0131 dinle\n myWorker.onmessage = function(e) {\n if (e.data.type === 'calculationComplete') {\n console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131: Hesaplama sonucu', e.data.result);\n document.getElementById('result').textContent = Sonu\u00e7: ${e.data.result}<\/code>;\n }\n };\n\n \/\/ Kullan\u0131c\u0131 aray\u00fcz\u00fc hala tepkisel kal\u0131r\n document.getElementById('myButton').addEventListener('click', () => {\n alert('Butona t\u0131klad\u0131n\u0131z! Aray\u00fcz hala \u00e7al\u0131\u015f\u0131yor.');\n });\n} else {\n console.log('Web Workers bu taray\u0131c\u0131da desteklenmiyor.');\n}<\/code><\/pre>\n<\/div>\n\n\/\/ worker.js (Web Worker dosyas\u0131)\nonmessage = function(e) {\n if (e.data.type === 'startCalculation') {\n const limit = e.data.data;\n let sum = 0;\n for (let i = 0; i < limit; i++) {\n sum += i; \/\/ Yo\u011fun hesaplama\n }\n \/\/ Ana i\u015f par\u00e7ac\u0131\u011f\u0131na sonucu g\u00f6nder\n postMessage({ type: 'calculationComplete', result: sum });\n }\n};<\/code><\/pre>\n<\/div>\nBu \u00f6rnekte, worker.js<\/code> dosyas\u0131ndaki yo\u011fun hesaplama, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden arka planda \u00e7al\u0131\u015f\u0131r. Kullan\u0131c\u0131, hesaplama devam ederken bile butona t\u0131klayabilir veya sayfay\u0131 kayd\u0131rabilir. Web Worker’lar, \u00f6zellikle karma\u015f\u0131k Single Page Application (Tek Sayfa Uygulamas\u0131 – SPA) veya oyun gibi performans\u0131n kritik oldu\u011fu uygulamalarda, “\u00e7\u0131lg\u0131n” denebilecek kadar etkili bir optimizasyon arac\u0131d\u0131r. Bu sayede, kullan\u0131c\u0131 deneyimi kesintisiz ve ak\u0131c\u0131 bir \u015fekilde devam eder.<\/p>\nService Workers ile \u00c7evrimd\u0131\u015f\u0131 Deneyim ve \u00d6nbellekleme<\/h3>\n
\u0130nternet ba\u011flant\u0131s\u0131n\u0131n zay\u0131f oldu\u011fu veya hi\u00e7 olmad\u0131\u011f\u0131 durumlarda bile web uygulamalar\u0131n\u0131n \u00e7al\u0131\u015fmaya devam etmesi, g\u00fcn\u00fcm\u00fcz kullan\u0131c\u0131lar\u0131 i\u00e7in giderek artan bir beklenti haline geldi. \u0130\u015fte bu noktada, Progressive Web App (A\u015famal\u0131 Web Uygulamas\u0131 – PWA) teknolojisinin temel ta\u015flar\u0131ndan biri olan Service Workers (Servis \u0130\u015f\u00e7ileri), “\u00e7\u0131lg\u0131n” bir \u00e7\u00f6z\u00fcm sunarak web’e yepyeni bir boyut kazand\u0131r\u0131r. Service Worker, taray\u0131c\u0131 ile a\u011f aras\u0131nda bir proxy (vekil sunucu) g\u00f6revi g\u00f6ren, arka planda \u00e7al\u0131\u015fan bir JavaScript dosyas\u0131d\u0131r. Bu sayede, geli\u015ftiricilere a\u011f isteklerini programatik olarak kontrol etme, kaynaklar\u0131 \u00f6nbelle\u011fe alma ve hatta \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekten i\u00e7erik sunma yetene\u011fi verir. Bu, web uygulamalar\u0131n\u0131n mobil uygulamalar gibi \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131na, an\u0131nda y\u00fcklenmesine ve g\u00fcvenilir bir deneyim sunmas\u0131na olanak tan\u0131r.<\/p>\n
Bir Service Worker’\u0131n temel g\u00fcc\u00fc, taray\u0131c\u0131n\u0131n a\u011f isteklerini yakalayabilme (intercept) yetene\u011fidir. Bir web sayfas\u0131 bir kaynak (HTML, CSS, JS, g\u00f6rsel vb.) istedi\u011finde, bu istek \u00f6nce Service Worker’a ula\u015f\u0131r. Service Worker, iste\u011fi do\u011frudan a\u011fa g\u00f6nderebilir, \u00f6nbellekteki bir yan\u0131t\u0131 d\u00f6nd\u00fcrebilir veya hatta kendi dinamik yan\u0131t\u0131n\u0131 olu\u015fturabilir. Bu kontrol seviyesi, geli\u015ftiricilere a\u011f stratejileri \u00fczerinde tam hakimiyet sa\u011flar. \u00d6rne\u011fin, bir PWA’n\u0131n ilk y\u00fcklenmesinde t\u00fcm kritik kaynaklar\u0131 \u00f6nbelle\u011fe alarak, sonraki ziyaretlerde uygulaman\u0131n an\u0131nda a\u00e7\u0131lmas\u0131n\u0131 sa\u011flayabiliriz. \u0130nternet ba\u011flant\u0131s\u0131 olmasa bile, kullan\u0131c\u0131 \u00f6nbelle\u011fe al\u0131nm\u0131\u015f i\u00e7eri\u011fi g\u00f6rebilir ve hatta baz\u0131 i\u015flevleri kullanmaya devam edebilir.<\/p>\n
\u0130\u015fte basit bir Service Worker kayd\u0131 ve \u00f6nbellekleme \u00f6rne\u011fi:<\/p>\n
\n\/\/ index.html (Main script)\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', function() {\n navigator.serviceWorker.register('\/service-worker.js').then(function(registration) {\n console.log('ServiceWorker kayd\u0131 ba\u015far\u0131l\u0131: ', registration.scope);\n }).catch(function(err) {\n console.log('ServiceWorker kayd\u0131 ba\u015far\u0131s\u0131z: ', err);\n });\n });\n}<\/code><\/pre>\n<\/div>\n\n\/\/ service-worker.js\nconst CACHE_NAME = 'my-app-cache-v1';\nconst urlsToCache = [\n '\/',\n '\/index.html',\n '\/style.css',\n '\/app.js',\n '\/images\/logo.png'\n];\n\nself.addEventListener('install', function(event) {\n \/\/ Service Worker y\u00fcklendi\u011finde \u00f6nbelle\u011fe al\u0131nacak dosyalar\u0131 belirle\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(function(cache) {\n console.log('\u00d6nbellek a\u00e7\u0131ld\u0131');\n return cache.addAll(urlsToCache);\n })\n );\n});\n\nself.addEventListener('fetch', function(event) {\n \/\/ Her a\u011f iste\u011fini yakala\n event.respondWith(\n caches.match(event.request) \/\/ \u0130ste\u011fi \u00f6nbellekte ara\n .then(function(response) {\n \/\/ \u00d6nbellekte varsa d\u00f6nd\u00fcr, yoksa a\u011fdan getir\n if (response) {\n return response;\n }\n return fetch(event.request);\n })\n );\n});<\/code><\/pre>\n<\/div>\nBu \u00f6rnekte, service-worker.js<\/code> dosyas\u0131 y\u00fcklendi\u011finde, urlsToCache<\/code> dizisindeki t\u00fcm kaynaklar\u0131 \u00f6nbelle\u011fe al\u0131r. Daha sonra, her a\u011f iste\u011fi \u00f6nbellekte aran\u0131r; e\u011fer kaynak \u00f6nbellekte varsa, h\u0131zl\u0131 bir \u015fekilde oradan sunulur. Yoksa, normal a\u011f iste\u011fi yap\u0131l\u0131r. Bu sayede, kullan\u0131c\u0131lar bir kez ziyaret ettikleri sayfalara \u00e7ok daha h\u0131zl\u0131 eri\u015febilir, hatta \u00e7evrimd\u0131\u015f\u0131 olsalar bile temel i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fcleyebilirler. Service Workers, web’in gelece\u011fini \u015fekillendiren “\u00e7\u0131lg\u0131n” ama vazge\u00e7ilmez bir teknolojidir ve web uygulamalar\u0131na mobil uygulama benzeri yetenekler kazand\u0131r\u0131r.<\/p>\nSanal DOM’un \u00d6tesinde: Incremental Static Regeneration (ISR) ve Edge Computing<\/h2>\n
Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli olarak yeni ve daha verimli yakla\u015f\u0131mlar aray\u0131\u015f\u0131nda. React ve Vue gibi framework’lerin pop\u00fclerle\u015fmesiyle Sanal DOM (Virtual DOM) kavram\u0131, performans\u0131 art\u0131rmak i\u00e7in bir standart haline geldi. Sanal DOM, ger\u00e7ek DOM manip\u00fclasyonlar\u0131n\u0131n maliyetini azaltarak uygulamalar\u0131n daha h\u0131zl\u0131 ve ak\u0131c\u0131 olmas\u0131n\u0131 sa\u011flad\u0131. Ancak, dinamik i\u00e7eriklerin ve ki\u015fiselle\u015ftirilmi\u015f deneyimlerin artmas\u0131yla birlikte, Sanal DOM’un tek ba\u015f\u0131na yeterli olmad\u0131\u011f\u0131 durumlar ortaya \u00e7\u0131kt\u0131. \u00d6zellikle statik site olu\u015fturucular\u0131n (Static Site Generators – SSG) sundu\u011fu h\u0131z ve g\u00fcvenlik avantajlar\u0131n\u0131, dinamik i\u00e7erik g\u00fcncellemeleriyle birle\u015ftirmek, geli\u015ftiriciler i\u00e7in \u00f6nemli bir zorluk te\u015fkil ediyordu. \u0130\u015fte bu noktada, “\u00e7\u0131lg\u0131n” denebilecek kadar yenilik\u00e7i iki kavram devreye giriyor: Incremental Static Regeneration (ISR) ve Edge Computing (U\u00e7 Bili\u015fim). Bu iki teknoloji, web performans\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini Sanal DOM’un \u00f6tesine ta\u015f\u0131yarak, modern web uygulamalar\u0131 i\u00e7in yeni bir \u00e7a\u011f ba\u015flat\u0131yor.<\/p>\n
Incremental Static Regeneration (ISR): Dinamik Statik Siteler<\/h3>\n<\/p>\n
Statik siteler, \u00f6nceden olu\u015fturulmu\u015f HTML dosyalar\u0131 oldu\u011fu i\u00e7in inan\u0131lmaz derecede h\u0131zl\u0131d\u0131r ve CDN’ler (Content Delivery Network – \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinden kolayca da\u011f\u0131t\u0131labilir. Ancak, i\u00e7erik g\u00fcncellendi\u011finde t\u00fcm sitenin yeniden olu\u015fturulmas\u0131 (rebuild) ve da\u011f\u0131t\u0131lmas\u0131 gerekir ki bu da b\u00fcy\u00fck siteler i\u00e7in zaman al\u0131c\u0131 ve maliyetli olabilir. \u0130\u015fte Next.js gibi framework’lerin \u00f6nc\u00fcl\u00fck etti\u011fi ISR, bu soruna “\u00e7\u0131lg\u0131n” bir \u00e7\u00f6z\u00fcm getiriyor. ISR, statik sitelerin h\u0131z ve g\u00fcvenilirlik avantajlar\u0131n\u0131 korurken, dinamik i\u00e7erik g\u00fcncellemelerini m\u00fcmk\u00fcn k\u0131lar. Nas\u0131l m\u0131? Bir sayfa ilk kez istendi\u011finde, statik olarak olu\u015fturulur ve \u00f6nbelle\u011fe al\u0131n\u0131r. Sonraki isteklerde, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f bu statik sayfa an\u0131nda sunulur. Ancak, belirlenen bir s\u00fcre (\u00f6rne\u011fin 60 saniye) dolduktan sonra gelen bir istekte, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f sayfa yine an\u0131nda sunulur, ancak ayn\u0131 zamanda arka planda sayfan\u0131n yeni bir versiyonu olu\u015fturulmaya ba\u015flan\u0131r. Bu i\u015flem tamamland\u0131\u011f\u0131nda, yeni versiyon \u00f6nbelle\u011fe al\u0131n\u0131r ve sonraki isteklerde bu g\u00fcncel sayfa sunulur. Bu sayede, kullan\u0131c\u0131lar her zaman h\u0131zl\u0131 bir deneyim ya\u015farken, i\u00e7erik de d\u00fczenli aral\u0131klarla g\u00fcncel kal\u0131r. Bu yakla\u015f\u0131m, e-ticaret siteleri, bloglar ve haber portallar\u0131 gibi s\u0131k g\u00fcncellenen i\u00e7eriklere sahip siteler i\u00e7in devrim niteli\u011findedir. Geleneksel sunucu taraf\u0131 render (Server-Side Rendering – SSR) ile her istekte sayfa yeniden olu\u015fturulurken, ISR ile bu maliyet sadece belirli aral\u0131klarla ve arka planda yap\u0131l\u0131r.<\/p>\n
Edge Computing (U\u00e7 Bili\u015fim): Veriyi Kullan\u0131c\u0131ya Yakla\u015ft\u0131rmak<\/h3>\n<\/p>\n
Geleneksel olarak, web siteleri merkezi sunucularda bar\u0131nd\u0131r\u0131l\u0131r. Bir kullan\u0131c\u0131 bir web sitesine eri\u015fmek istedi\u011finde, istek bu merkezi sunuculara gider ve yan\u0131t geri d\u00f6ner. Co\u011frafi mesafe artt\u0131k\u00e7a, bu gidi\u015f-d\u00f6n\u00fc\u015f s\u00fcresi (latency) de artar ve kullan\u0131c\u0131 deneyimi olumsuz etkilenir. Edge Computing, bu soruna “\u00e7\u0131lg\u0131n” ama mant\u0131kl\u0131 bir \u00e7\u00f6z\u00fcm getirir: Veri i\u015flemeyi ve i\u00e7eri\u011fi, merkezi sunuculardan ziyade, kullan\u0131c\u0131lara co\u011frafi olarak daha yak\u0131n olan “u\u00e7” konumlara (\u00f6rne\u011fin CDN sunucular\u0131 veya \u00f6zel u\u00e7 d\u00fc\u011f\u00fcmlerine) ta\u015f\u0131r. Bu sayede, istekler ve yan\u0131tlar daha k\u0131sa mesafeler kat eder, bu da y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve performans\u0131 art\u0131r\u0131r.<\/p>\n
Edge fonksiyonlar\u0131 veya Edge Workers (Cloudflare Workers, Vercel Edge Functions gibi), sunucu taraf\u0131 kodlar\u0131n\u0131n (\u00f6rne\u011fin API istekleri, kimlik do\u011frulama, A\/B testi y\u00f6nlendirmeleri) do\u011frudan bu u\u00e7 lokasyonlarda \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na olanak tan\u0131r. Bu, sadece statik i\u00e7erik da\u011f\u0131t\u0131m\u0131ndan \u00f6teye ge\u00e7erek, dinamik i\u00e7eri\u011fin de kullan\u0131c\u0131ya en yak\u0131n noktada i\u015flenmesini sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n konumuna g\u00f6re ki\u015fiselle\u015ftirilmi\u015f bir sayfa g\u00f6stermek veya bir API iste\u011fini en yak\u0131n veri merkezinden kar\u015f\u0131lamak, Edge Computing ile \u00e7ok daha h\u0131zl\u0131 ve verimli hale gelir. Bu teknolojiler, \u00f6zellikle global eri\u015fime sahip uygulamalar, e-ticaret siteleri ve ak\u0131\u015f hizmetleri i\u00e7in vazge\u00e7ilmezdir. ISR ile h\u0131zl\u0131 ve g\u00fcncel statik i\u00e7erik, Edge Computing ile ise bu i\u00e7eri\u011fin ve dinamik i\u015flemlerin kullan\u0131c\u0131ya en h\u0131zl\u0131 \u015fekilde ula\u015fmas\u0131 sa\u011flan\u0131r. Bu iki “\u00e7\u0131lg\u0131n” teknoloji bir araya geldi\u011finde, web performans\u0131nda ger\u00e7ekten devrim niteli\u011finde sonu\u00e7lar elde edilebilir.<\/p>\n
Vaka Analizi: B\u00fcy\u00fck Bir E-ticaret Sitesinin “Ak\u0131l Almaz” Performans Yolculu\u011fu<\/h2>\n
T\u00fcrkiye’nin \u00f6nde gelen e-ticaret platformlar\u0131ndan biri olan “H\u0131zl\u0131Sepet”, y\u0131llard\u0131r s\u00fcregelen ba\u015far\u0131s\u0131n\u0131 s\u00fcrekli yenilik\u00e7i yakla\u015f\u0131mlara bor\u00e7luydu. Ancak, kullan\u0131c\u0131 say\u0131s\u0131n\u0131n ve \u00fcr\u00fcn kataloglar\u0131n\u0131n h\u0131zla artmas\u0131yla birlikte, sitenin performans\u0131 beklenmedik sorunlarla kar\u015f\u0131la\u015fmaya ba\u015flad\u0131. Ba\u015flang\u0131\u00e7ta uygulanan geleneksel optimizasyonlar (resim s\u0131k\u0131\u015ft\u0131rma, \u00f6nbellekleme vb.) bir yere kadar etki etse de, sitenin ana sayfas\u0131n\u0131n ve \u00fcr\u00fcn listeleme sayfalar\u0131n\u0131n y\u00fcklenme s\u00fcreleri giderek uzuyordu. \u00d6zellikle mobil kullan\u0131c\u0131lar ve d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip b\u00f6lgelerdeki m\u00fc\u015fteriler, yava\u015f y\u00fcklenen sayfalar nedeniyle al\u0131\u015fveri\u015f sepetlerini terk etme oranlar\u0131nda (abandonment rate) ciddi art\u0131\u015flar ya\u015fan\u0131yordu. H\u0131zl\u0131Sepet’in m\u00fchendislik ekibi, bu “ak\u0131l almaz” performans d\u00fc\u015f\u00fc\u015f\u00fcn\u00fcn nedenlerini ara\u015ft\u0131rmak i\u00e7in derinlemesine bir analiz ba\u015flatt\u0131.<\/p>\n
Analizler sonucunda, temel sorunlar\u0131n \u015funlar oldu\u011fu tespit edildi:<\/p>\n
\n- A\u015f\u0131r\u0131 DOM Y\u00fck\u00fc:<\/strong> Ana sayfadaki dinamik kampanya banner’lar\u0131, pop\u00fcler \u00fcr\u00fcn listeleri ve ki\u015fiselle\u015ftirilmi\u015f \u00f6neriler, sayfan\u0131n DOM a\u011fac\u0131n\u0131 a\u015f\u0131r\u0131 derecede b\u00fcy\u00fct\u00fcyordu. Her bir k\u00fc\u00e7\u00fck g\u00fcncelleme veya etkile\u015fim, taray\u0131c\u0131n\u0131n t\u00fcm sayfay\u0131 yeniden d\u00fczenlemesine ve \u00e7izmesine neden olarak ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 kilitliyordu.<\/li>\n
- Render Blocking Kaynaklar:<\/strong> Sayfan\u0131n \u00fcst k\u0131sm\u0131na yerle\u015ftirilmi\u015f, kritik olmayan bir\u00e7ok JavaScript dosyas\u0131 (analitik scriptleri, \u00fc\u00e7\u00fcnc\u00fc taraf reklam kodlar\u0131) ve b\u00fcy\u00fck CSS dosyalar\u0131, sayfan\u0131n ilk g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc (First Contentful Paint) \u00f6nemli \u00f6l\u00e7\u00fcde geciktiriyordu. Kullan\u0131c\u0131lar, i\u00e7eri\u011fi g\u00f6rmeden \u00f6nce uzun s\u00fcre bo\u015f bir ekranla kar\u015f\u0131la\u015f\u0131yordu.<\/li>\n
- G\u00f6rsel Y\u00fckleme Sorunlar\u0131:<\/strong> Binlerce \u00fcr\u00fcn g\u00f6rseli, ana sayfada veya kategori sayfalar\u0131nda “tembel y\u00fckleme” yap\u0131lmadan do\u011frudan y\u00fcklenmeye \u00e7al\u0131\u015f\u0131l\u0131yordu. Bu da sayfan\u0131n ilk y\u00fcklemesini devasa boyutlara ula\u015ft\u0131rarak, mobil veri kullanan m\u00fc\u015fteriler i\u00e7in maliyetli ve yava\u015f bir deneyim yarat\u0131yordu.<\/li>\n
- API \u0130stek Gecikmeleri:<\/strong> Kullan\u0131c\u0131n\u0131n konumuna ve ge\u00e7mi\u015f al\u0131\u015fveri\u015flerine g\u00f6re ki\u015fiselle\u015ftirilmi\u015f \u00fcr\u00fcn \u00f6nerileri, merkezi sunuculardan gelen API istekleriyle sa\u011flan\u0131yordu. \u00d6zellikle uluslararas\u0131 kullan\u0131c\u0131larda, bu API isteklerinin gecikme s\u00fcreleri (latency) kullan\u0131c\u0131 deneyimini do\u011frudan etkiliyordu.<\/li>\n<\/ol>\n
Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in H\u0131zl\u0131Sepet ekibi, gelenekselin \u00f6tesine ge\u00e7erek “\u00e7\u0131lg\u0131n” ama etkili bir dizi optimizasyon stratejisi uygulad\u0131:<\/p>\n
\n- DOM Optimizasyonu ve Sanal DOM Ge\u00e7i\u015fi:<\/strong> Mevcut SPA (Single Page Application) yap\u0131s\u0131n\u0131 React tabanl\u0131 bir mimariye ta\u015f\u0131yarak Sanal DOM’un g\u00fcc\u00fcnden faydaland\u0131lar. Ayr\u0131ca, kritik olmayan DOM elementlerini sadece ihtiya\u00e7 duyuldu\u011funda olu\u015fturacak \u015fekilde kodlar\u0131n\u0131 yeniden yap\u0131land\u0131rd\u0131lar. \u00d6rne\u011fin, kullan\u0131c\u0131 bir a\u00e7\u0131l\u0131r men\u00fcye t\u0131klayana kadar men\u00fc i\u00e7eri\u011fini DOM’a eklemediler.<\/li>\n
- Kritik CSS ve JavaScript Optimizasyonu:<\/strong>\n
\n- T\u00fcm CSS’i par\u00e7alara ay\u0131rarak, sadece ilk ekran i\u00e7in gerekli olan “kritik CSS”i do\u011frudan HTML i\u00e7ine (inline) yerle\u015ftirdiler. Geri kalan CSS’i ise
<link rel=\"preload\"><\/code> ve onload<\/code> nitelikleriyle asenkron olarak y\u00fcklediler.<\/li>\n- JavaScript dosyalar\u0131n\u0131
defer<\/code> niteli\u011fiyle i\u015faretleyerek, HTML ayr\u0131\u015ft\u0131rmay\u0131 engellemelerini \u00f6nlediler. \u00d6zellikle \u00fc\u00e7\u00fcnc\u00fc taraf scriptleri i\u00e7in, taray\u0131c\u0131n\u0131n requestIdleCallback<\/code> API’sini kullanarak taray\u0131c\u0131n\u0131n bo\u015fta oldu\u011fu anlarda y\u00fcklenmelerini sa\u011flad\u0131lar.<\/li>\n<\/ul>\n<\/li>\n- Ak\u0131ll\u0131 Lazy Loading ve Intersection Observer:<\/strong> Binlerce \u00fcr\u00fcn g\u00f6rseli i\u00e7in \u00f6zel bir Intersection Observer tabanl\u0131 tembel y\u00fckleme mekanizmas\u0131 geli\u015ftirdiler. G\u00f6rseller sadece kullan\u0131c\u0131 viewport’a yakla\u015ft\u0131\u011f\u0131nda y\u00fckleniyordu. Ayr\u0131ca, g\u00f6rsellerin farkl\u0131 ekran boyutlar\u0131na uygun olarak otomatik olarak yeniden boyutland\u0131r\u0131lmas\u0131n\u0131 sa\u011flayan bir CDN entegrasyonu yapt\u0131lar.<\/li>\n
- ISR ve Edge Computing Entegrasyonu:<\/strong>\n
\n- Ana sayfa ve kategori sayfalar\u0131 gibi s\u0131k g\u00fcncellenen ancak statik \u00f6nbellekten sunulabilen sayfalar i\u00e7in Next.js’in Incremental Static Regeneration (ISR) \u00f6zelli\u011fini kulland\u0131lar. Bu sayede, sayfalar statik olarak h\u0131zl\u0131ca sunulurken, i\u00e7erik g\u00fcncellemeleri arka planda ve belirlenen aral\u0131klarla yap\u0131l\u0131yordu.<\/li>\n
- Kullan\u0131c\u0131ya \u00f6zel ki\u015fiselle\u015ftirilmi\u015f \u00f6neriler ve API istekleri i\u00e7in Edge Computing platformlar\u0131n\u0131 (\u00f6rne\u011fin Cloudflare Workers) kulland\u0131lar. Bu sayede, API istekleri kullan\u0131c\u0131n\u0131n co\u011frafi konumuna en yak\u0131n sunucudan i\u015flenerek gecikme s\u00fcreleri minimuma indirildi.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Bu “ak\u0131l almaz” optimizasyon yolculu\u011funun sonu\u00e7lar\u0131, H\u0131zl\u0131Sepet i\u00e7in ger\u00e7ekten d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc oldu:<\/p>\n
\n\n\nMetrik<\/th>\n \u00d6nceki Durum<\/th>\n Sonraki Durum<\/th>\n \u0130yile\u015fme<\/th>\n<\/tr>\n<\/thead>\n \n\nAna Sayfa Y\u00fckleme S\u00fcresi (Mobil)<\/td>\n 8.5 saniye<\/td>\n 2.1 saniye<\/td>\n %75<\/td>\n<\/tr>\n \nFirst Contentful Paint (FCP)<\/td>\n 4.2 saniye<\/td>\n 0.9 saniye<\/td>\n %78<\/td>\n<\/tr>\n \nTime to Interactive (TTI)<\/td>\n 7.0 saniye<\/td>\n 1.8 saniye<\/td>\n %74<\/td>\n<\/tr>\n \nHemen \u00c7\u0131kma Oran\u0131 (Bounce Rate)<\/td>\n %35<\/td>\n %22<\/td>\n %37 Azalma<\/td>\n<\/tr>\n \nMobil D\u00f6n\u00fc\u015f\u00fcm Oran\u0131<\/td>\n %1.8<\/td>\n %2.5<\/td>\n %39 Art\u0131\u015f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nH\u0131zl\u0131Sepet’in vaka analizi, web performans optimizasyonunun sadece teknik bir gereklilik olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda do\u011frudan i\u015f hedeflerine (d\u00f6n\u00fc\u015f\u00fcm, gelir) etki eden stratejik bir yat\u0131r\u0131m oldu\u011funu g\u00f6sterdi. \u0130lk ba\u015fta “\u00e7\u0131lg\u0131n” gelebilecek bu ileri d\u00fczey teknikler, do\u011fru uyguland\u0131\u011f\u0131nda somut ve \u00f6l\u00e7\u00fclebilir sonu\u00e7lar do\u011furarak, kullan\u0131c\u0131 deneyimini ve i\u015fletmenin ba\u015far\u0131s\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n
Sonu\u00e7: “\u00c7\u0131lg\u0131n” F\u0131rsatlar ve Gelece\u011fin Performans Trendleri<\/h2>\n
Web performans optimizasyonu, statik kaynaklar\u0131 s\u0131k\u0131\u015ft\u0131rmaktan veya basit \u00f6nbellekleme stratejileri uygulamaktan \u00e7ok daha fazlas\u0131d\u0131r. Modern web uygulamalar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, geli\u015ftiricilerin “\u00e7\u0131lg\u0131n” g\u00f6r\u00fcnen ancak bilimsel temellere dayanan ve inan\u0131lmaz derecede etkili olan yeni tekniklere y\u00f6nelmesi ka\u00e7\u0131n\u0131lmaz hale gelmi\u015ftir. Bu makale boyunca, DOM manip\u00fclasyonunun g\u00f6r\u00fcnmez maliyetlerinden render blocking kaynaklar\u0131n s\u00fcrpriz blokajlar\u0131na kadar bir\u00e7ok temel performans engelini ele ald\u0131k. Ard\u0131ndan, bu engelleri a\u015fmak i\u00e7in Intersection Observer API ile ak\u0131ll\u0131 tembel y\u00fckleme, Web Workers ile ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 rahatlatma ve Service Workers ile \u00e7evrimd\u0131\u015f\u0131 deneyim ve ileri d\u00fczey \u00f6nbellekleme gibi “delice” ama son derece verimli \u00e7\u00f6z\u00fcmleri inceledik. Ayr\u0131ca, Sanal DOM’un \u00f6tesine ge\u00e7erek, Incremental Static Regeneration (ISR) ile dinamik statik sitelerin g\u00fcc\u00fcn\u00fc ve Edge Computing (U\u00e7 Bili\u015fim) ile veriyi kullan\u0131c\u0131ya yakla\u015ft\u0131rman\u0131n devrimsel etkilerini ke\u015ffettik. H\u0131zl\u0131Sepet’in vaka analizi, bu ileri d\u00fczey tekniklerin sadece teorik olmad\u0131\u011f\u0131n\u0131, ger\u00e7ek d\u00fcnya senaryolar\u0131nda somut ve \u00f6l\u00e7\u00fclebilir ba\u015far\u0131lar sa\u011flad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a ortaya koydu.<\/p>\n
Gelece\u011fe bakt\u0131\u011f\u0131m\u0131zda, web performans\u0131n\u0131n \u00f6nemi daha da artacak. WebAssembly (Wasm) gibi teknolojiler, taray\u0131c\u0131da C++, Rust gibi dillerde yaz\u0131lm\u0131\u015f y\u00fcksek performansl\u0131 kodlar\u0131 \u00e7al\u0131\u015ft\u0131rma yetene\u011fi sunarak, web uygulamalar\u0131n\u0131n i\u015flem g\u00fcc\u00fcn\u00fc masa\u00fcst\u00fc uygulamalar\u0131na yakla\u015ft\u0131racak. Yeni taray\u0131c\u0131 API’leri, geli\u015ftiricilere daha fazla kontrol ve optimizasyon imkan\u0131 sa\u011flayacak. Ayr\u0131ca, yapay zeka ve makine \u00f6\u011frenimi destekli otomasyon ara\u00e7lar\u0131, performans sorunlar\u0131n\u0131 daha h\u0131zl\u0131 tespit etmeye ve hatta proaktif \u00e7\u00f6z\u00fcmler \u00fcretmeye yard\u0131mc\u0131 olacak. Kullan\u0131c\u0131 beklentileri y\u00fckselmeye devam ettik\u00e7e, web geli\u015ftiricilerinin bu “\u00e7\u0131lg\u0131n” ama yenilik\u00e7i yakla\u015f\u0131mlar\u0131 benimsemesi, sadece rekabet\u00e7i kalmak i\u00e7in de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131na \u00fcst\u00fcn bir deneyim sunmak i\u00e7in de kritik \u00f6neme sahip olacakt\u0131r. Unutmay\u0131n, en iyi web deneyimi, ayn\u0131 zamanda en h\u0131zl\u0131 web deneyimidir.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n\n- \n S: Web Performans\u0131 neden bu kadar \u00f6nemli?<\/strong><\/p>\n
C: Web performans\u0131, kullan\u0131c\u0131 deneyimini do\u011frudan etkiler. Yava\u015f y\u00fcklenen siteler, kullan\u0131c\u0131lar\u0131n hemen \u00e7\u0131kmas\u0131na (bounce rate), d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131n d\u00fc\u015fmesine ve arama motoru s\u0131ralamalar\u0131n\u0131n olumsuz etkilenmesine neden olur. H\u0131zl\u0131 siteler ise daha y\u00fcksek etkile\u015fim, daha iyi SEO ve artan gelir anlam\u0131na gelir.<\/p>\n<\/li>\n
- \n S: Sanal DOM (Virtual DOM) nedir ve performansa nas\u0131l yard\u0131mc\u0131 olur?<\/strong><\/p>\n
C: Sanal DOM, React veya Vue gibi framework’lerde kullan\u0131lan, ger\u00e7ek DOM’un haf\u0131zadaki hafif bir kopyas\u0131d\u0131r. Do\u011frudan DOM manip\u00fclasyonu yapmak yerine, de\u011fi\u015fiklikler \u00f6nce Sanal DOM \u00fczerinde yap\u0131l\u0131r. Ard\u0131ndan, framework bu Sanal DOM’u ger\u00e7ek DOM ile kar\u015f\u0131la\u015ft\u0131r\u0131r ve sadece gerekli olan minimum de\u011fi\u015fiklikleri ger\u00e7ek DOM’a uygulayarak reflow ve repaint maliyetlerini minimize eder, bu da performans\u0131 art\u0131r\u0131r.<\/p>\n<\/li>\n
- \n S: Lazy Loading (Tembel Y\u00fckleme) hangi durumlarda kullan\u0131lmal\u0131?<\/strong><\/p>\n
C: Lazy Loading, \u00f6zellikle sayfan\u0131n ba\u015flang\u0131\u00e7ta g\u00f6r\u00fcnmeyen (above the fold olmayan) g\u00f6rseller, videolar, iframeler veya dinamik i\u00e7erikler gibi b\u00fcy\u00fck kaynaklar i\u00e7in idealdir. Bu sayede, sayfa ba\u015flang\u0131\u00e7ta daha h\u0131zl\u0131 y\u00fcklenir ve sadece kullan\u0131c\u0131 bu i\u00e7eri\u011fe yakla\u015ft\u0131\u011f\u0131nda ilgili kaynaklar y\u00fcklenir, bant geni\u015fli\u011fi ve sunucu kaynaklar\u0131 korunur.<\/p>\n<\/li>\n
- \n S: Service Workers (Servis \u0130\u015f\u00e7ileri) ile neler yap\u0131labilir?<\/strong><\/p>\n
C: Service Workers, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme, a\u011f isteklerini yakalama ve programatik olarak yan\u0131tlama, arka plan senkronizasyonu, push bildirimleri gibi bir\u00e7ok ileri d\u00fczey yetenek sunar. Bu sayede web uygulamalar\u0131, mobil uygulamalar gibi \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilir, h\u0131zl\u0131 y\u00fcklenir ve g\u00fcvenilir bir deneyim sunar.<\/p>\n<\/li>\n
- \n S: Incremental Static Regeneration (ISR) ile geleneksel statik site olu\u015fturma aras\u0131ndaki temel fark nedir?<\/strong><\/p>\n
C: Geleneksel statik site olu\u015fturma, i\u00e7erik her de\u011fi\u015fti\u011finde t\u00fcm sitenin yeniden olu\u015fturulmas\u0131n\u0131 gerektirir. ISR ise, statik sitelerin h\u0131z avantaj\u0131n\u0131 korurken, belirli sayfalar\u0131n \u00f6nbelle\u011fini belirli aral\u0131klarla veya bir istek \u00fczerine arka planda yeniden olu\u015fturarak dinamik i\u00e7erik g\u00fcncellemelerini m\u00fcmk\u00fcn k\u0131lar. Bu, b\u00fcy\u00fck sitelerde \u00e7ok daha verimli bir yakla\u015f\u0131md\u0131r.<\/p>\n<\/li>\n<\/ul>\n
#WebPerformans #Optimizasyon #WebGeli\u015ftirme #Frontend #SEO<\/p>\n