{"id":43049,"date":"2026-07-04T08:00:38","date_gmt":"2026-07-04T05:00:38","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=43049"},"modified":"2026-07-04T08:01:06","modified_gmt":"2026-07-04T05:01:06","slug":"chrome-devtools-ile-performans-darbogazlarini-bulma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/","title":{"rendered":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma"},"content":{"rendered":"

Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma<\/h2>\n

Web performans\u0131n\u0131n optimize edilmesi, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr. Yava\u015f y\u00fcklenen web siteleri, kullan\u0131c\u0131lar\u0131n siteden ayr\u0131lma oran\u0131n\u0131 art\u0131r\u0131r, d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr ve genel olarak olumsuz bir izlenim b\u0131rak\u0131r. Bu noktada, Chrome Geli\u015ftirici Ara\u00e7lar\u0131 (Chrome DevTools), web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez bir ara\u00e7 seti sunarak performans darbo\u011fazlar\u0131n\u0131 tespit etme ve giderme konusunda g\u00fc\u00e7l\u00fc yetenekler sa\u011flar. Bu makalede, Chrome DevTools’un performans analizindeki rol\u00fcn\u00fc, temel \u00f6zelliklerini ve bu \u00f6zelliklerin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Performans Analizinin \u00d6nemi<\/h3>\n

Web performans\u0131 sadece h\u0131zla ilgili de\u011fildir; ayn\u0131 zamanda kaynaklar\u0131n verimli kullan\u0131m\u0131, etkile\u015fim s\u00fcresi ve genel kullan\u0131c\u0131 memnuniyeti ile de yak\u0131ndan ili\u015fkilidir. Y\u00fcksek performansl\u0131 bir web sitesi:<\/p>\n

* Daha \u0130yi Kullan\u0131c\u0131 Deneyimi Sunar:<\/strong> H\u0131zl\u0131 y\u00fcklenen ve ak\u0131c\u0131 \u00e7al\u0131\u015fan siteler, kullan\u0131c\u0131lar\u0131n daha keyifli vakit ge\u00e7irmesini sa\u011flar.
\n* Daha Y\u00fcksek D\u00f6n\u00fc\u015f\u00fcm Oranlar\u0131 Elde Eder:<\/strong> E-ticaret sitelerinde, yava\u015fl\u0131k do\u011frudan sat\u0131\u015flar\u0131 olumsuz etkileyebilir.
\n* SEO S\u0131ralamalar\u0131n\u0131 \u0130yile\u015ftirir:<\/strong> Arama motorlar\u0131, kullan\u0131c\u0131 deneyimini \u00f6nemser ve performansl\u0131 siteleri \u00f6d\u00fcllendirir.
\n* Daha D\u00fc\u015f\u00fck Sunucu Maliyetleri Sa\u011flar:<\/strong> Kaynaklar\u0131n verimli kullan\u0131m\u0131, sunucu y\u00fck\u00fcn\u00fc azaltarak maliyetleri d\u00fc\u015f\u00fcrebilir.<\/p>\n

Bu nedenlerle, d\u00fczenli performans analizi ve optimizasyonu, her web projesinin ayr\u0131lmaz bir par\u00e7as\u0131 olmal\u0131d\u0131r.<\/p>\n

Chrome DevTools’a Giri\u015f<\/h3>\n

Chrome DevTools, Google Chrome taray\u0131c\u0131s\u0131na entegre edilmi\u015f, web geli\u015ftiricileri i\u00e7in zengin bir ara\u00e7 setidir. Bu ara\u00e7lar, HTML, CSS, JavaScript, a\u011f istekleri, bellek kullan\u0131m\u0131 ve performans gibi bir\u00e7ok alan\u0131 denetlemeye ve de\u011fi\u015ftirmeye olanak tan\u0131r. Performans analizi i\u00e7in en \u00f6nemli paneller \u015funlard\u0131r:<\/p>\n

* Performance (Performans) Paneli:<\/strong> Sayfan\u0131n y\u00fcklenme ve \u00e7al\u0131\u015fma s\u00fcresi boyunca CPU, bellek, a\u011f ve di\u011fer kaynaklar\u0131n kullan\u0131m\u0131n\u0131 ayr\u0131nt\u0131l\u0131 olarak g\u00f6sterir.
\n* Network (A\u011f) Paneli:<\/strong> T\u00fcm a\u011f isteklerini, bunlar\u0131n boyutlar\u0131n\u0131, s\u00fcrelerini ve s\u0131ralamas\u0131n\u0131 g\u00f6r\u00fcnt\u00fcler.
\n* Memory (Bellek) Paneli:<\/strong> JavaScript bellek kullan\u0131m\u0131n\u0131 ve olas\u0131 bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 tespit etmek i\u00e7in kullan\u0131l\u0131r.
\n* Lighthouse (Fener):<\/strong> Otomatik olarak web sayfas\u0131n\u0131n performans, eri\u015filebilirlik, SEO ve en iyi uygulamalar gibi alanlarda denetimler yapar ve iyile\u015ftirme \u00f6nerileri sunar.<\/p>\n

Bu makalede \u00f6ncelikli olarak Performance (Performans) Paneli<\/strong>‘ne odaklanaca\u011f\u0131z.<\/p>\n

Performance (Performans) Paneli’ni Kullanma<\/h3>\n

Performance paneli, bir web sayfas\u0131n\u0131n \u00e7al\u0131\u015fma zaman\u0131 analizini yapmak i\u00e7in en g\u00fc\u00e7l\u00fc ara\u00e7lardan biridir. Bu paneli a\u00e7mak i\u00e7in Chrome taray\u0131c\u0131n\u0131zda sa\u011f t\u0131klay\u0131p “\u0130ncele” (Inspect) se\u00e7ene\u011fini se\u00e7in veya Ctrl+Shift+I<\/code> (Windows\/Linux) \/ Cmd+Option+I<\/code> (Mac) klavye k\u0131sayolunu kullan\u0131n. Ard\u0131ndan \u00fcstteki sekmelerden “Performance” sekmesine t\u0131klay\u0131n.<\/p>\n

1. Kay\u0131t Alma (Recording a Profile)<\/h4>\n

Performans analizine ba\u015flamak i\u00e7in \u00f6ncelikle sayfan\u0131n y\u00fcklenme ve \u00e7al\u0131\u015fma s\u00fcrecini kaydetmeniz gerekir.<\/p>\n

* Sayfay\u0131 Yeniden Y\u00fckleme:<\/strong> En yayg\u0131n y\u00f6ntem, Performance paneli a\u00e7\u0131kken sayfan\u0131n y\u00fcklenme s\u00fcrecini kaydetmektir. Bunun i\u00e7in paneldeki yuvarlak kay\u0131t d\u00fc\u011fmesine (Record) t\u0131klay\u0131n ve ard\u0131ndan sayfay\u0131 Ctrl+R<\/code> (Windows\/Linux) \/ Cmd+R<\/code> (Mac) ile yeniden y\u00fckleyin. Kay\u0131t tamamland\u0131\u011f\u0131nda, tekrar kay\u0131t d\u00fc\u011fmesine t\u0131klayarak kayd\u0131 durdurun.
\n* Etkile\u015fimleri Kaydetme:<\/strong> Sadece sayfa y\u00fcklenmesini de\u011fil, kullan\u0131c\u0131 etkile\u015fimlerinin (bir d\u00fc\u011fmeye t\u0131klama, bir formu g\u00f6nderme vb.) performans\u0131n\u0131 da analiz etmek isteyebilirsiniz. Bu durumda, kay\u0131t d\u00fc\u011fmesine t\u0131klad\u0131ktan sonra istedi\u011finiz etkile\u015fimi ger\u00e7ekle\u015ftirin ve ard\u0131ndan kayd\u0131 durdurun.
\n* CPU ve A\u011f K\u0131s\u0131tlamalar\u0131:<\/strong> Performans\u0131 daha ger\u00e7ek\u00e7i senaryolarda test etmek i\u00e7in, panelin sol \u00fcst k\u00f6\u015fesindeki CPU ve A\u011f simgelerini kullanarak farkl\u0131 k\u0131s\u0131tlama seviyeleri belirleyebilirsiniz. \u00d6rne\u011fin, d\u00fc\u015f\u00fck CPU g\u00fcc\u00fc veya yava\u015f bir a\u011f ba\u011flant\u0131s\u0131 sim\u00fcle edilebilir.<\/p>\n

2. Kay\u0131t Sonras\u0131 Analiz: Zaman \u00c7izelgesi (Timeline)<\/h4>\n

Kay\u0131t durdurulduktan sonra, Performance paneli size bir zaman \u00e7izelgesi sunar. Bu zaman \u00e7izelgesi, sayfan\u0131n y\u00fcklenme ve \u00e7al\u0131\u015fma s\u00fcresi boyunca neler oldu\u011funu g\u00f6rselle\u015ftirir. Ana bile\u015fenleri \u015funlard\u0131r:<\/p>\n

* FPS (Frames Per Second):<\/strong> Taray\u0131c\u0131n\u0131n kare h\u0131z\u0131n\u0131 g\u00f6sterir. D\u00fc\u015f\u00fck FPS de\u011ferleri, ak\u0131c\u0131 olmayan animasyonlar veya genel bir yava\u015fl\u0131k anlam\u0131na gelebilir.
\n* CPU:<\/strong> CPU’nun ne kadar kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir. Y\u00fcksek CPU kullan\u0131m\u0131, yo\u011fun JavaScript i\u015flemleri veya karma\u015f\u0131k DOM manip\u00fclasyonlar\u0131 gibi sorunlar\u0131 i\u015faret edebilir.
\n* NET:<\/strong> A\u011f trafi\u011fini g\u00f6sterir. B\u00fcy\u00fck dosyalar veya \u00e7ok say\u0131da istek performans\u0131 olumsuz etkileyebilir.
\n* HEAP:<\/strong> Bellek kullan\u0131m\u0131n\u0131 g\u00f6sterir. A\u015f\u0131r\u0131 bellek kullan\u0131m\u0131 veya bellek s\u0131z\u0131nt\u0131lar\u0131 performans d\u00fc\u015f\u00fc\u015flerine neden olabilir.
\n* Timings:<\/strong> Sayfan\u0131n farkl\u0131 a\u015famalar\u0131n\u0131n (DNS aramas\u0131, TCP ba\u011flant\u0131s\u0131, ilk bayt\u0131n al\u0131nmas\u0131, DOM y\u00fcklenmesi, sayfan\u0131n tamamlanmas\u0131 vb.) ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.<\/p>\n

Zaman \u00e7izelgesinin alt k\u0131sm\u0131nda, sayfan\u0131n y\u00fcklenmesi ve \u00e7al\u0131\u015fmas\u0131 s\u0131ras\u0131nda ger\u00e7ekle\u015fen \u00e7e\u015fitli olaylar\u0131 g\u00f6steren ayr\u0131nt\u0131l\u0131 bir grafik bulunur. Bu grafik, daro\u011fazlar\u0131 tespit etmek i\u00e7in en \u00f6nemli k\u0131s\u0131md\u0131r.<\/p>\n

3. Zaman \u00c7izelgesi \u00dczerindeki Ana Darbo\u011faz T\u00fcrleri<\/h4>\n

Zaman \u00e7izelgesinde kar\u015f\u0131m\u0131za \u00e7\u0131kabilecek yayg\u0131n performans darbo\u011fazlar\u0131 ve bunlar\u0131 nas\u0131l anlayaca\u011f\u0131m\u0131z a\u015fa\u011f\u0131da a\u00e7\u0131klanm\u0131\u015ft\u0131r:<\/p>\n

* Uzun S\u00fcren JavaScript \u0130\u015flemleri (Long Tasks):<\/strong> Zaman \u00e7izelgesinde k\u0131rm\u0131z\u0131 renkli \u00fc\u00e7genlerle i\u015faretlenen “Long Tasks”, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) 50 milisaniyeden daha uzun s\u00fcre bloke eden i\u015flemleri temsil eder. Bu t\u00fcr g\u00f6revler, taray\u0131c\u0131n\u0131n kullan\u0131c\u0131 girdilerine yan\u0131t vermesini engeller ve tak\u0131lmalara (jank) neden olur.
\n * Nas\u0131l Tespit Edilir:<\/strong> Zaman \u00e7izelgesinde uzun, kal\u0131n k\u0131rm\u0131z\u0131 \u00e7ubuklar aray\u0131n. Bu \u00e7ubuklar\u0131n \u00fczerine gelindi\u011finde, hangi JavaScript fonksiyonlar\u0131n\u0131n bu uzun g\u00f6reve neden oldu\u011fu hakk\u0131nda bilgi alabilirsiniz.
\n * Nas\u0131l Giderilir:<\/strong>
\n * Kod Optimizasyonu:<\/strong> Gereksiz veya verimsiz JavaScript kodunu bulun ve optimize edin.
\n * Asenkron \u0130\u015flemler:<\/strong> Uzun s\u00fcren i\u015flemleri web worker’lara ta\u015f\u0131yarak ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rak\u0131n.
\n * Kod B\u00f6lme (Code Splitting):<\/strong> JavaScript dosyalar\u0131n\u0131 daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lerek ilk y\u00fckleme s\u00fcresini azalt\u0131n.
\n * Gereksiz K\u00fct\u00fcphanelerden Ka\u00e7\u0131nma:<\/strong> Kullan\u0131lmayan veya a\u011f\u0131r k\u00fct\u00fcphaneleri projeden \u00e7\u0131kar\u0131n.<\/p>\n

* Y\u00fcksek CPU Kullan\u0131m\u0131:<\/strong> CPU grafi\u011finin s\u00fcrekli olarak y\u00fcksek seviyelerde olmas\u0131, taray\u0131c\u0131n\u0131n yo\u011fun bir \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6sterir. Bu genellikle karma\u015f\u0131k DOM manip\u00fclasyonlar\u0131, yo\u011fun hesaplamalar yapan JavaScript veya yetersiz optimize edilmi\u015f animasyonlardan kaynaklan\u0131r.
\n * Nas\u0131l Tespit Edilir:<\/strong> CPU grafi\u011finin s\u00fcrekli olarak dolu veya tepede oldu\u011funu g\u00f6zlemleyin. Zaman \u00e7izelgesindeki “Scripting”, “Rendering” ve “Painting” gibi b\u00f6l\u00fcmlerin uzun s\u00fcrmesi de CPU kullan\u0131m\u0131n\u0131n y\u00fcksek oldu\u011funu g\u00f6sterir.
\n * Nas\u0131l Giderilir:<\/strong>
\n * DOM Manip\u00fclasyonlar\u0131n\u0131 Azaltma:<\/strong> Toplu DOM g\u00fcncellemeleri yap\u0131n veya sanal DOM (Virtual DOM) kullanan framework’lerden (React, Vue) yararlan\u0131n.
\n * Animasyon Optimizasyonu:<\/strong> requestAnimationFrame<\/code> kullanarak animasyonlar\u0131 optimize edin ve CSS animasyonlar\u0131n\u0131 tercih edin.
\n * Gereksiz Hesaplamalar\u0131 \u00d6nleme:<\/strong> Sadece gerekti\u011finde hesaplama yap\u0131n ve \u00f6nbelle\u011fe alma (caching) mekanizmalar\u0131n\u0131 kullan\u0131n.<\/p>\n

* Yava\u015f Olu\u015fturma (Rendering) ve Boyama (Painting):<\/strong> Sayfan\u0131n ekrana \u00e7izilmesi (rendering) ve boyanmas\u0131 (painting) i\u015flemleri zaman alabilir. \u00d6zellikle karma\u015f\u0131k CSS, b\u00fcy\u00fck resimler veya s\u0131k s\u0131k yeniden \u00e7izilmesi gereken \u00f6\u011feler bu s\u00fcreyi uzatabilir.
\n * Nas\u0131l Tespit Edilir:<\/strong> Zaman \u00e7izelgesindeki “Rendering” ve “Painting” b\u00f6l\u00fcmlerinin uzun s\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6zlemleyin. Bu a\u015famalarda meydana gelen tak\u0131lmalar (jank) da performans sorunlar\u0131na i\u015faret eder.
\n * Nas\u0131l Giderilir:<\/strong>
\n * CSS Optimizasyonu:<\/strong> Karma\u015f\u0131k CSS se\u00e7icilerinden ka\u00e7\u0131n\u0131n, box-shadow<\/code> veya filter<\/code> gibi pahal\u0131 \u00f6zellikleri dikkatli kullan\u0131n.
\n * Layout Thrashing’den Ka\u00e7\u0131nma:<\/strong> Bir DOM \u00f6\u011fesinin boyutunu veya konumunu okuyup ard\u0131ndan o \u00f6\u011feyi g\u00fcncelleyen kod dizileri (layout thrashing), performans\u0131 ciddi \u015fekilde d\u00fc\u015f\u00fcrebilir.
\n * Resim Optimizasyonu:<\/strong> Resimleri do\u011fru boyutlarda ve modern formatlarda (WebP gibi) sunun.<\/p>\n

* A\u011f \u0130stekleri (Network Requests):<\/strong> \u00c7ok say\u0131da veya b\u00fcy\u00fck a\u011f istekleri, sayfan\u0131n y\u00fcklenme s\u00fcresini uzat\u0131r. \u00d6zellikle JavaScript ve CSS dosyalar\u0131, resimler ve di\u011fer varl\u0131klar\u0131n indirilmesi zaman al\u0131r.
\n * Nas\u0131l Tespit Edilir:<\/strong> Network panelini kullanarak hangi dosyalar\u0131n ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc, boyutlar\u0131n\u0131 ve s\u0131ralamas\u0131n\u0131 inceleyin. Performance panelindeki “NET” grafi\u011fi de genel bir fikir verir.
\n * Nas\u0131l Giderilir:<\/strong>
\n * Dosya Boyutlar\u0131n\u0131 K\u00fc\u00e7\u00fcltme:<\/strong> JavaScript, CSS ve resim dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131r\u0131n (minify ve compress).
\n * \u0130stek Say\u0131s\u0131n\u0131 Azaltma:<\/strong> Birden fazla CSS dosyas\u0131n\u0131 birle\u015ftirin, tek bir resim yerine sprite kullan\u0131n.
\n * \u00d6nbelle\u011fe Alma (Caching):<\/strong> Taray\u0131c\u0131 \u00f6nbelle\u011fini etkili bir \u015fekilde kullan\u0131n.
\n * Lazy Loading:<\/strong> G\u00f6r\u00fcn\u00fcr olmayan \u00f6\u011feleri (resimler, videolar) kullan\u0131c\u0131 sayfay\u0131 kayd\u0131rd\u0131k\u00e7a y\u00fckleyin.
\n * CDN Kullan\u0131m\u0131:<\/strong> \u0130\u00e7erikleri co\u011frafi olarak da\u011f\u0131t\u0131lm\u0131\u015f sunuculardan sunarak indirme s\u00fcrelerini azalt\u0131n.<\/p>\n

* Bellek S\u0131z\u0131nt\u0131lar\u0131 (Memory Leaks):<\/strong> Bellek s\u0131z\u0131nt\u0131lar\u0131, bir uygulama taraf\u0131ndan kullan\u0131lan belle\u011fin serbest b\u0131rak\u0131lmamas\u0131 durumudur. Bu, zamanla bellek kullan\u0131m\u0131n\u0131n artmas\u0131na ve uygulaman\u0131n yava\u015flamas\u0131na veya \u00e7\u00f6kmesine neden olabilir.
\n * Nas\u0131l Tespit Edilir:<\/strong> Memory paneline gidin. “Heap snapshot” alarak farkl\u0131 zamanlardaki bellek kullan\u0131m\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131r\u0131n. E\u011fer belirli nesnelerin say\u0131s\u0131 s\u00fcrekli art\u0131yorsa, bir bellek s\u0131z\u0131nt\u0131s\u0131 olabilir.
\n * Nas\u0131l Giderilir:<\/strong>
\n * Event Listener’lar\u0131 Kald\u0131rma:<\/strong> Art\u0131k kullan\u0131lmayan DOM \u00f6\u011felerine ba\u011fl\u0131 event listener’lar\u0131 kald\u0131r\u0131n.
\n * Global De\u011fi\u015fkenleri Dikkatli Kullanma:<\/strong> Gereksiz yere global de\u011fi\u015fkenlere referans tutmaktan ka\u00e7\u0131n\u0131n.
\n * Closures’\u0131 Anlama:<\/strong> Closures’\u0131n belle\u011fi nas\u0131l tuttu\u011funu anlay\u0131n ve gereksiz referanslar\u0131 temizleyin.<\/p>\n

4. Detayl\u0131 Analiz \u0130\u00e7in \u00dcst K\u0131s\u0131m \u00d6zeti (Summary Bar)<\/h4>\n

Zaman \u00e7izelgesinin en \u00fcst\u00fcnde yer alan \u00f6zet \u00e7ubu\u011fu, kaydetti\u011finiz s\u00fcrenin genel bir \u00f6zetini sunar. Bu \u00e7ubu\u011fun \u00fczerine t\u0131klayarak, se\u00e7ti\u011finiz zaman aral\u0131\u011f\u0131 i\u00e7in daha ayr\u0131nt\u0131l\u0131 bir analiz g\u00f6rebilirsiniz. Bu b\u00f6l\u00fcmde:<\/p>\n

* Timings:<\/strong> Sayfan\u0131n farkl\u0131 y\u00fcklenme a\u015famalar\u0131n\u0131n (DNS, Ba\u011flant\u0131, TTFB, DOMContentLoaded, Load) ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.
\n* Interactions:<\/strong> Kullan\u0131c\u0131 etkile\u015fimlerinin ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.
\n* Frames:<\/strong> Karelerin olu\u015fturulma s\u00fcresini ve d\u00fc\u015f\u00fc\u015fleri g\u00f6sterir.
\n* CPU:<\/strong> CPU kullan\u0131m\u0131n\u0131n da\u011f\u0131l\u0131m\u0131n\u0131 g\u00f6sterir.
\n* Network:<\/strong> A\u011f trafi\u011finin da\u011f\u0131l\u0131m\u0131n\u0131 g\u00f6sterir.<\/p>\n

Bu \u00f6zet, performans sorunlar\u0131n\u0131n hangi a\u015famada yo\u011funla\u015ft\u0131\u011f\u0131n\u0131 h\u0131zl\u0131ca anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n

5. Etkinlikler B\u00f6l\u00fcm\u00fc (Events Breakdown)<\/h4>\n

Zaman \u00e7izelgesinin alt\u0131ndaki “Events” b\u00f6l\u00fcm\u00fc, o an se\u00e7ili olan zaman aral\u0131\u011f\u0131nda ger\u00e7ekle\u015fen t\u00fcm olaylar\u0131 listeler. Bu liste, olay t\u00fcr\u00fcne g\u00f6re (Scripting, Rendering, Painting, System, vb.) grupland\u0131r\u0131labilir ve her bir olay\u0131n ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.<\/p>\n

* Scripting:<\/strong> JavaScript kodunun \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131 zamanlar\u0131 g\u00f6sterir. Uzun s\u00fcren scripting<\/code> i\u015flemleri, performans sorunlar\u0131n\u0131n ana nedenlerinden biridir.
\n* Rendering:<\/strong> DOM’un yeniden d\u00fczenlenmesi ve hesaplanmas\u0131 (layout) gibi i\u015flemleri kapsar.
\n* Painting:<\/strong> Sayfan\u0131n ekrana \u00e7izilmesi i\u015flemini kapsar.
\n* System:<\/strong> Taray\u0131c\u0131n\u0131n kendi i\u00e7 i\u015flemleriyle ilgili olaylar\u0131 g\u00f6sterir.<\/p>\n

Bu b\u00f6l\u00fcme t\u0131klayarak, belirli bir olay\u0131n zaman \u00e7izelgesindeki yerini ve s\u00fcresini kolayca bulabilirsiniz.<\/p>\n

6. Denetimler (Audits) Paneli (\u015eimdi Lighthouse)<\/h4>\n

Performance paneli art\u0131k Lighthouse’un bir par\u00e7as\u0131d\u0131r. Lighthouse, web sayfan\u0131z\u0131n performans, eri\u015filebilirlik, SEO ve en iyi uygulamalar gibi bir\u00e7ok alanda otomatik denetimler yapar ve iyile\u015ftirme \u00f6nerileri sunar.<\/p>\n

* Nas\u0131l Kullan\u0131l\u0131r:<\/strong> DevTools’u a\u00e7\u0131n, “Lighthouse” sekmesine gidin. Analiz etmek istedi\u011finiz kategorileri se\u00e7in (Performans genellikle varsay\u0131lan olarak se\u00e7ilidir). “Analyze page” d\u00fc\u011fmesine t\u0131klay\u0131n.
\n* Neler Sunar:<\/strong> Lighthouse, sayfan\u0131z\u0131n y\u00fcklenme s\u00fcresini, etkile\u015fim s\u00fcresini, g\u00f6rsel kararl\u0131l\u0131\u011f\u0131n\u0131 (CLS – Cumulative Layout Shift), CPU kullan\u0131m\u0131n\u0131 ve di\u011fer bir\u00e7ok metrikleri \u00f6l\u00e7er. Ayr\u0131ca, iyile\u015ftirme \u00f6nerileri sunarak size yol g\u00f6sterir.<\/p>\n

Lighthouse, ilk analizler i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r ve genellikle g\u00f6zden ka\u00e7an sorunlar\u0131 tespit etmenize yard\u0131mc\u0131 olur.<\/p>\n

Performans Optimizasyonu \u0130\u00e7in \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n

* \u00d6nceliklendirme:<\/strong> En kritik kullan\u0131c\u0131 ak\u0131\u015flar\u0131n\u0131 ve sayfa y\u00fckleme s\u00fcrelerini optimize etmeye odaklan\u0131n.
\n* K\u00fc\u00e7\u00fck Ba\u015flay\u0131n, \u0130yile\u015ftirin:<\/strong> T\u00fcm sorunlar\u0131 ayn\u0131 anda \u00e7\u00f6zmeye \u00e7al\u0131\u015fmak yerine, en b\u00fcy\u00fck performans etkisini yaratacak sorunlar\u0131 belirleyip \u00f6nce onlara odaklan\u0131n.
\n* G\u00f6rsel Kararl\u0131l\u0131k (CLS):<\/strong> Kullan\u0131c\u0131 deneyimini olumsuz etkileyen en \u00f6nemli metriklerden biridir. Resimler i\u00e7in width<\/code> ve height<\/code> \u00f6zellikleri belirtmek, dinamik i\u00e7eriklerin yerini \u00f6nceden belirlemek CLS’yi azalt\u0131r.
\n* Etkile\u015fim S\u00fcresi (FID – First Input Delay):<\/strong> Kullan\u0131c\u0131n\u0131n ilk etkile\u015fimine taray\u0131c\u0131n\u0131n ne kadar s\u00fcrede yan\u0131t verdi\u011fini \u00f6l\u00e7er. Uzun s\u00fcren JavaScript g\u00f6revleri FID’yi art\u0131r\u0131r.
\n* Toplam Engelleme S\u00fcresi (TBT – Total Blocking Time):<\/strong> Uzun s\u00fcren g\u00f6revlerin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 ne kadar s\u00fcreyle engelledi\u011fini \u00f6l\u00e7er. TBT, FID ile yak\u0131ndan ili\u015fkilidir.
\n* Mobil \u00d6ncelikli (Mobile-First):<\/strong> Performans testlerinizi \u00f6ncelikle mobil cihazlarda ve d\u00fc\u015f\u00fck bant geni\u015flikli a\u011flarda yap\u0131n.
\n* D\u00fczenli Testler:<\/strong> Web sitenizin performans\u0131n\u0131 d\u00fczenli olarak test edin ve de\u011fi\u015fikliklerin etkisini izleyin. Otomatik test ara\u00e7lar\u0131 (\u00f6rne\u011fin, LighthouseCI) bu konuda yard\u0131mc\u0131 olabilir.<\/p>\n

Sonu\u00e7<\/h3>\n

Chrome DevTools, web performans\u0131n\u0131 anlamak ve optimize etmek i\u00e7in paha bi\u00e7ilmez bir ara\u00e7t\u0131r. Performance paneli, sayfan\u0131n \u00e7al\u0131\u015fma zaman\u0131 boyunca meydana gelen her \u015feyi detayl\u0131 bir \u015fekilde incelememize olanak tan\u0131r. Uzun s\u00fcren JavaScript g\u00f6revlerinden a\u011f isteklerine, bellek s\u0131z\u0131nt\u0131lar\u0131ndan olu\u015fturma ve boyama i\u015flemlerine kadar her t\u00fcrl\u00fc performans darbo\u011faz\u0131n\u0131 bu ara\u00e7la tespit edebiliriz. Lighthouse ise otomatik analizler ve \u00f6nerilerle bu s\u00fcreci daha da kolayla\u015ft\u0131r\u0131r.<\/p>\n

Web geli\u015ftiricileri olarak, bu ara\u00e7lar\u0131 etkin bir \u015fekilde kullanmay\u0131 \u00f6\u011frenmek, daha h\u0131zl\u0131, daha duyarl\u0131 ve daha iyi kullan\u0131c\u0131 deneyimi sunan web uygulamalar\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r. Performans, sadece bir teknik gereksinim de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 memnuniyetini ve i\u015f ba\u015far\u0131s\u0131n\u0131 do\u011frudan etkileyen stratejik bir unsurdur. Chrome DevTools’u d\u00fczenli olarak kullanarak ve sundu\u011fu verileri anlayarak, web sitelerinizin potansiyelini en \u00fcst d\u00fczeye \u00e7\u0131karabilirsiniz.<\/p>\n

\u00d6rnek kod:<\/strong> github.com\/fatihsoysalcom\/chrome-devtools-performance-bottleneck-demo<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma Web performans\u0131n\u0131n optimize edilmesi, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-43049","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nChrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma\" \/>\n<meta property=\"og:description\" content=\"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma Web performans\u0131n\u0131n optimize edilmesi, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-04T05:00:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-04T05:01:06+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma\",\"datePublished\":\"2026-07-04T05:00:38+00:00\",\"dateModified\":\"2026-07-04T05:01:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\"},\"wordCount\":2472,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\",\"name\":\"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-07-04T05:00:38+00:00\",\"dateModified\":\"2026-07-04T05:01:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/","og_locale":"tr_TR","og_type":"article","og_title":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma","og_description":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma Web performans\u0131n\u0131n optimize edilmesi, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr.","og_url":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-04T05:00:38+00:00","article_modified_time":"2026-07-04T05:01:06+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma","datePublished":"2026-07-04T05:00:38+00:00","dateModified":"2026-07-04T05:01:06+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/"},"wordCount":2472,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/","url":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/","name":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-07-04T05:00:38+00:00","dateModified":"2026-07-04T05:01:06+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/chrome-devtools-ile-performans-darbogazlarini-bulma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Chrome DevTools ile Performans Darbo\u011fazlar\u0131n\u0131 Bulma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43049"}],"version-history":[{"count":2,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43049\/revisions"}],"predecessor-version":[{"id":43051,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43049\/revisions\/43051"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}