Bu ara\u00e7lar\u0131n raporlar\u0131, sitenizdeki performans sorunlar\u0131n\u0131n nedenlerini a\u00e7\u0131klar ve sorunlar\u0131 gidermek i\u00e7in somut \u00f6neriler sunar. \u00d6rne\u011fin, “Olu\u015fturmay\u0131 Engelleyen Kaynaklar\u0131 Kald\u0131r\u0131n” veya “Resimleri Sonra Y\u00fckleyin” gibi maddeler, yapman\u0131z gerekenleri a\u00e7\u0131k\u00e7a belirtir.<\/p>\n

Uzman \u0130pucu: Lighthouse ve PageSpeed Insights raporlar\u0131n\u0131 d\u00fczenli olarak kontrol etmek, \u00f6zellikle yeni \u00f6zellikler ekledikten veya b\u00fcy\u00fck g\u00fcncellemeler yapt\u0131ktan sonra, sitenizin performans\u0131n\u0131 istikrarl\u0131 bir \u015fekilde y\u00fcksek tutman\u0131za yard\u0131mc\u0131 olur. Farkl\u0131 sayfa t\u00fcrlerini (ana sayfa, \u00fcr\u00fcn sayfas\u0131, blog yaz\u0131s\u0131) ayr\u0131 ayr\u0131 analiz etmeyi unutmay\u0131n.<\/div>\n

2. GTmetrix:<\/strong> Sitenizin h\u0131z\u0131n\u0131 ve performans\u0131n\u0131 detayl\u0131 bir \u015fekilde analiz eden bir di\u011fer pop\u00fcler ara\u00e7t\u0131r. GTmetrix, sitenizin y\u00fckleme s\u00fcresini, toplam sayfa boyutunu ve istek say\u0131s\u0131n\u0131 g\u00f6sterir. Ayr\u0131ca, Google Lighthouse ve Google PageSpeed Insights’\u0131n yan\u0131 s\u0131ra, kendi Performance, Structure, Waterfall, Video ve History sekmeleriyle daha derinlemesine analizler sunar. Waterfall grafi\u011fi, her bir \u00f6\u011fenin (resim, CSS, JS dosyalar\u0131 vb.) ne kadar s\u00fcrede y\u00fcklendi\u011fini g\u00f6stererek darbo\u011fazlar\u0131 g\u00f6rselle\u015ftirmenize yard\u0131mc\u0131 olur.<\/p>\n

3. WebPageTest:<\/strong> Daha teknik kullan\u0131c\u0131lar i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. WebPageTest, sitenizi farkl\u0131 co\u011frafi konumlardan, farkl\u0131 taray\u0131c\u0131lardan ve farkl\u0131 ba\u011flant\u0131 h\u0131zlar\u0131ndan test etme imkan\u0131 sunar. Bu sayede, k\u00fcresel kullan\u0131c\u0131lar\u0131n\u0131z\u0131n deneyimini daha do\u011fru bir \u015fekilde sim\u00fcle edebilirsiniz. Ara\u00e7, ayr\u0131nt\u0131l\u0131 bir \u015felale diyagram\u0131, video kayd\u0131, ana metrikler ve iyile\u015ftirme \u00f6nerileri sunar.<\/p>\n

Vaka Analizi: Yava\u015f Y\u00fcklenen Bir E-ticaret Sitesinin D\u00f6n\u00fc\u015f\u00fcm Kayb\u0131<\/h3>\n
Bir orta \u00f6l\u00e7ekli e-ticaret sitesi olan “H\u0131zl\u0131Moda”, son zamanlarda artan trafikle birlikte d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131nda d\u00fc\u015f\u00fc\u015f ya\u015fad\u0131\u011f\u0131n\u0131 fark etti. Google Analytics verileri, sepet terk oranlar\u0131n\u0131n artt\u0131\u011f\u0131n\u0131 ve kullan\u0131c\u0131lar\u0131n ana sayfa veya \u00fcr\u00fcn sayfalar\u0131nda \u00e7ok k\u0131sa s\u00fcre kald\u0131\u011f\u0131n\u0131 g\u00f6steriyordu. PageSpeed Insights ile yap\u0131lan analizde, sitenin mobil performans\u0131 30\/100 gibi olduk\u00e7a d\u00fc\u015f\u00fck bir puan ald\u0131. LCP de\u011feri 7 saniyenin \u00fczerindeydi ve g\u00f6rsel karars\u0131zl\u0131k (CLS) sorunlar\u0131 vard\u0131.<\/p>\n
GTmetrix raporlar\u0131 ise ana sayfan\u0131n 5MB’tan b\u00fcy\u00fck oldu\u011funu, \u00e7ok say\u0131da y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve optimize edilmemi\u015f \u00fcr\u00fcn g\u00f6rseli i\u00e7erdi\u011fini g\u00f6sterdi. Ayr\u0131ca, sayfan\u0131n ba\u015f\u0131nda yer alan b\u00fcy\u00fck bir JavaScript dosyas\u0131, i\u00e7eri\u011fin render edilmesini engelliyordu. Sunucu yan\u0131t s\u00fcresi de (TTFB) 1 saniyenin \u00fczerindeydi.<\/p>\n
Bu analizler sonucunda H\u0131zl\u0131Moda ekibi, a\u015fa\u011f\u0131daki iyile\u015ftirmeleri yapmaya karar verdi:<\/p>\n
\n
T\u00fcm \u00fcr\u00fcn g\u00f6rsellerini WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcp s\u0131k\u0131\u015ft\u0131rd\u0131lar ve gecikmeli y\u00fckleme (lazy loading) uygulad\u0131lar.<\/li>\n
Gereksiz JavaScript ve CSS dosyalar\u0131n\u0131 temizleyerek ve kalanlar\u0131 k\u00fc\u00e7\u00fclterek (minify) sayfa boyutunu d\u00fc\u015f\u00fcrd\u00fcler.<\/li>\n
Kritik CSS’i inline olarak ekleyerek ve di\u011fer CSS dosyalar\u0131n\u0131 asenkron y\u00fckleyerek render engellemeyi azaltt\u0131lar.<\/li>\n
Bir CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) kullanarak statik i\u00e7eriklerini co\u011frafi olarak da\u011f\u0131tt\u0131lar.<\/li>\n
Veritaban\u0131 sorgular\u0131n\u0131 optimize ederek ve sunucu \u00f6nbelleklemesini art\u0131rarak TTFB de\u011ferini d\u00fc\u015f\u00fcrd\u00fcler.<\/li>\n<\/ul>\n
Bu de\u011fi\u015fikliklerin ard\u0131ndan yap\u0131lan yeni analizlerde, sitenin mobil performans\u0131 85\/100’e y\u00fckseldi, LCP 2 saniyenin alt\u0131na d\u00fc\u015ft\u00fc ve CLS sorunlar\u0131 giderildi. En \u00f6nemlisi, d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131 %15 artt\u0131 ve sepet terk oranlar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azald\u0131. Bu vaka, performans de\u011ferlendirmesinin ve optimize etmenin bir web sitesinin ba\u015far\u0131s\u0131 \u00fczerindeki do\u011frudan etkisini a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n
G\u00f6rsel \u0130\u00e7erik Optimizasyonu: Resimler ve Videolar Nas\u0131l H\u0131zland\u0131r\u0131l\u0131r?<\/h2>\n
Web sitelerinin toplam boyutunun \u00f6nemli bir k\u0131sm\u0131n\u0131 genellikle g\u00f6rsel i\u00e7erikler olu\u015fturur. Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc, optimize edilmemi\u015f resimler ve videolar, sitenizin y\u00fckleme s\u00fcresini ciddi \u015fekilde art\u0131rarak kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Dolay\u0131s\u0131yla, web performans\u0131n\u0131 “boost” etme yolunda g\u00f6rsel i\u00e7eriklerin optimizasyonu, \u00fczerinde en \u00e7ok durulmas\u0131 gereken konulardan biridir. Bu b\u00f6l\u00fcmde, g\u00f6rselleri ve videolar\u0131 nas\u0131l daha h\u0131zl\u0131 hale getirece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
1. Do\u011fru Resim Format\u0131n\u0131 Se\u00e7mek:<\/strong> Resim optimizasyonu, do\u011fru format se\u00e7imiyle ba\u015flar. Her format\u0131n kendine \u00f6zg\u00fc avantajlar\u0131 vard\u0131r:<\/p>\n
\n
JPEG:<\/strong> Foto\u011fraflar ve karma\u015f\u0131k renk ge\u00e7i\u015fleri i\u00e7eren g\u00f6rseller i\u00e7in idealdir. Kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma sunar, yani boyut k\u00fc\u00e7\u00fcl\u00fcrken kalite bir miktar d\u00fc\u015fer.<\/li>\n
PNG:<\/strong> \u015eeffaf arka planlar ve keskin kenarlar\u0131 olan grafikler (logolar, ikonlar) i\u00e7in uygundur. Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunar, bu da dosya boyutlar\u0131n\u0131n JPEG’den daha b\u00fcy\u00fck olmas\u0131na neden olabilir.<\/li>\n
SVG:<\/strong> Vekt\u00f6r tabanl\u0131 grafikler i\u00e7in m\u00fckemmeldir (logolar, ikonlar, ill\u00fcstrasyonlar). Boyutlar\u0131 k\u00fc\u00e7\u00fckt\u00fcr, \u00f6l\u00e7eklenebilirdir ve kalitelerini kaybetmezler.<\/li>\n
WebP ve AVIF:<\/strong> Modern ve gelecek nesil resim formatlar\u0131d\u0131r. Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunabilirler ve JPEG veya PNG’den \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131nda daha iyi kalite sa\u011flayabilirler. Chrome, Firefox ve Edge gibi modern taray\u0131c\u0131lar taraf\u0131ndan desteklenir.<\/li>\n<\/ul>\n
2. Resim S\u0131k\u0131\u015ft\u0131rma:<\/strong> Format se\u00e7imi ne olursa olsun, resimlerinizi s\u0131k\u0131\u015ft\u0131rmak hayati \u00f6nem ta\u015f\u0131r. \u00c7evrimi\u00e7i ara\u00e7lar (TinyPNG, Compressor.io) veya masa\u00fcst\u00fc yaz\u0131l\u0131mlar\u0131 (Adobe Photoshop, GIMP) kullanarak resimlerinizi web i\u00e7in optimize edebilirsiniz. S\u0131k\u0131\u015ft\u0131rma i\u015flemi, gereksiz meta verileri kald\u0131r\u0131r ve resim kalitesini g\u00f6zle g\u00f6r\u00fcl\u00fcr bir fark yaratmadan dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\n
Uzman \u0130pucu: WebP veya AVIF formatlar\u0131n\u0131 kullanarak \u00f6nemli \u00f6l\u00e7\u00fcde dosya boyutu tasarrufu sa\u011flayabilirsiniz. Taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in <\/code> etiketi ile yedek formatlar sunarak eski taray\u0131c\u0131larda da resimlerinizin g\u00f6r\u00fcnmesini sa\u011flay\u0131n.<\/div>\n3. Duyarl\u0131 Resimler (srcset<\/code> ve sizes<\/code>):<\/strong> Her kullan\u0131c\u0131 ayn\u0131 ekran boyutuna veya bant geni\u015fli\u011fine sahip de\u011fildir. Duyarl\u0131 resimler, kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun boyutta ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte resim sunarak bant geni\u015fli\u011finden tasarruf etmenizi sa\u011flar. Bu, <\/code> ve <\/code> nitelikleriyle veya <\/code> etiketiyle yap\u0131l\u0131r.<\/p>\n \n\n \n \n \n<\/picture>\n <\/pre>\n<\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, taray\u0131c\u0131 s\u0131ras\u0131yla AVIF, WebP formatlar\u0131n\u0131 deneyecek, desteklemezse JPEG versiyonunu y\u00fckleyecektir. Bu, en yeni ve en verimli formatlar\u0131 \u00f6nceliklendirirken geni\u015f uyumluluk sa\u011flar.<\/p>\n 4. Gecikmeli Y\u00fckleme (Lazy Loading):<\/strong> Sayfada g\u00f6r\u00fcn\u00fcr alanda olmayan (yani, a\u015fa\u011f\u0131 kayd\u0131r\u0131lana kadar g\u00f6r\u00fcnmeyen) resimlerin ve videolar\u0131n hemen y\u00fcklenmesini engellemektir. Bu sayede, taray\u0131c\u0131 yaln\u0131zca kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc veya g\u00f6rmek \u00fczere oldu\u011fu i\u00e7eri\u011fi y\u00fckler, bu da ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n Modern taray\u0131c\u0131larda loading=\"lazy\"<\/code> niteli\u011fini kullanarak bunu kolayca uygulayabilirsiniz:<\/p>\n \n\n <\/pre>\n<\/code><\/p>\n Bu nitelik, taray\u0131c\u0131n\u0131n resmi yaln\u0131zca g\u00f6r\u00fcn\u00fcr alana yakla\u015ft\u0131\u011f\u0131nda y\u00fcklemesini sa\u011flar. Geni\u015flik ve y\u00fckseklik niteliklerini eklemek, resim y\u00fcklenmeden \u00f6nce yer ayr\u0131lmas\u0131n\u0131 sa\u011flayarak CLS (Cumulative Layout Shift) sorunlar\u0131n\u0131 engeller.<\/p>\n 5. Video Optimizasyonu:<\/strong> Videolar, resimlerden bile daha b\u00fcy\u00fck dosyalar olabilir. Videolar\u0131 optimize etmek i\u00e7in:<\/p>\n \nFormat Se\u00e7imi:<\/strong> MP4 (H.264 veya H.265\/HEVC kodekli) genellikle en uyumlu ve verimli formatt\u0131r. WebM format\u0131 da iyi bir alternatiftir.<\/li>\n S\u0131k\u0131\u015ft\u0131rma:<\/strong> Video s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131 (HandBrake gibi) kullanarak dosya boyutunu d\u00fc\u015f\u00fcr\u00fcn.<\/li>\n CDN Kullan\u0131m\u0131:<\/strong> Videolar\u0131 bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunmak, kullan\u0131c\u0131lara co\u011frafi olarak daha yak\u0131n sunuculardan ak\u0131\u015f sa\u011flayarak y\u00fckleme s\u00fcrelerini iyile\u015ftirir.<\/li>\n Gecikmeli Y\u00fckleme ve \u00d6nizleme Resimleri:<\/strong> Videolar i\u00e7in de lazy loading uygulay\u0131n ve video y\u00fcklenmeden \u00f6nce bir \u00f6nizleme resmi (thumbnail) g\u00f6sterin. Kullan\u0131c\u0131 t\u0131klad\u0131\u011f\u0131nda video y\u00fcklenmeye ba\u015flas\u0131n.<\/li>\n<\/ul>\nG\u00f6rsel i\u00e7eriklerinizi dikkatlice optimize ederek, web sitenizin y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir, kullan\u0131c\u0131 deneyimini iyile\u015ftirebilir ve SEO performans\u0131n\u0131z\u0131 g\u00fc\u00e7lendirebilirsiniz. Bu ad\u0131mlar, sitenizin daha h\u0131zl\u0131 ve daha duyarl\u0131 hissetmesini sa\u011flayarak dijital hedeflerinize ula\u015fman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Kod Optimizasyonu: CSS, JavaScript ve HTML Dosyalar\u0131n\u0131 Nas\u0131l \u0130yile\u015ftirirsiniz?<\/h2>\nWeb sitenizin iskeletini, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve interaktifli\u011fini sa\u011flayan CSS, JavaScript ve HTML dosyalar\u0131, sitenizin performans\u0131nda \u00e7ok \u00f6nemli bir rol oynar. Bu dosyalar\u0131n boyutu, say\u0131s\u0131 ve y\u00fcklenme \u015fekli, sayfa y\u00fckleme h\u0131z\u0131n\u0131 do\u011frudan etkiler. Kod optimizasyonu, gereksiz kodlar\u0131 temizlemek, dosyalar\u0131 k\u00fc\u00e7\u00fcltmek ve taray\u0131c\u0131n\u0131n sayfay\u0131 daha verimli bir \u015fekilde i\u015flemesini sa\u011flamak anlam\u0131na gelir. Gelin, bu temel kodlama bile\u015fenlerini nas\u0131l \"boost\" edece\u011finizi detayl\u0131ca inceleyelim.<\/p>\n 1. K\u00fc\u00e7\u00fcltme (Minification) ve Birle\u015ftirme (Concatenation):<\/strong><\/p>\n \nMinification (K\u00fc\u00e7\u00fcltme):<\/strong> CSS, JavaScript ve HTML dosyalar\u0131ndaki t\u00fcm gereksiz karakterleri (bo\u015fluklar, yorumlar, yeni sat\u0131rlar) kald\u0131rarak dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltme i\u015flemidir. Bu i\u015flem, kodun i\u015flevselli\u011fini de\u011fi\u015ftirmeden transfer edilecek veri miktar\u0131n\u0131 azalt\u0131r.<\/li>\n Concatenation (Birle\u015ftirme):<\/strong> Birden fazla k\u00fc\u00e7\u00fck CSS veya JavaScript dosyas\u0131n\u0131 tek bir b\u00fcy\u00fck dosyada birle\u015ftirmek demektir. Bu, taray\u0131c\u0131n\u0131n sunucuya daha az istek g\u00f6ndermesini sa\u011flar, \u00e7\u00fcnk\u00fc her dosya i\u00e7in ayr\u0131 bir HTTP iste\u011fi yapmak yerine tek bir istek yeterli olur. Ancak HTTP\/2 ve HTTP\/3 protokolleri sayesinde birden fazla istek paralel olarak yap\u0131labildi\u011finden, birle\u015ftirmenin faydas\u0131 g\u00fcn\u00fcm\u00fczde eskisi kadar b\u00fcy\u00fck olmayabilir. Yine de, \u00f6zellikle HTTP\/1.1 kullanan sunucularda veya \u00e7ok say\u0131da k\u00fc\u00e7\u00fck dosya i\u00e7in hala de\u011ferli bir stratejidir.<\/li>\n<\/ul>\n\u00d6rnek bir JavaScript k\u00fc\u00e7\u00fcltme \u00f6ncesi ve sonras\u0131:<\/p>\n \n\/\/ K\u00fc\u00e7\u00fcltme \u00d6ncesi\nfunction hesaplaToplam(sayi1, sayi2) {\n \/\/ \u0130ki say\u0131n\u0131n toplam\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr\n return sayi1 + sayi2;\n}\nconsole.log(hesaplaToplam(5, 3));\n\n\/\/ K\u00fc\u00e7\u00fcltme Sonras\u0131 (\u00d6rnek)\nfunction hesaplaToplam(a,b){return a+b}console.log(hesaplaToplam(5,3))\n <\/pre>\n<\/code><\/p>\n Bu i\u015flemler genellikle Webpack, Gulp, Grunt gibi derleme ara\u00e7lar\u0131 veya WordPress gibi CMS'lerdeki eklentiler arac\u0131l\u0131\u011f\u0131yla otomatikle\u015ftirilir.<\/p>\n 2. CSS Optimizasyonu: Kritik CSS ve Render Engelleme:<\/strong><\/p>\n Taray\u0131c\u0131 bir web sayfas\u0131n\u0131 olu\u015ftururken, t\u00fcm CSS dosyalar\u0131n\u0131n indirilmesini ve ayr\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 bekler. Bu durum, \"render engelleme\" olarak bilinir ve sayfan\u0131n g\u00f6r\u00fcn\u00fcr hale gelme s\u00fcresini (FCP) art\u0131rabilir. Bunu a\u015fmak i\u00e7in:<\/p>\n \nKritik CSS (Critical CSS):<\/strong> Sayfan\u0131n ilk g\u00f6r\u00fcn\u00fcr alan\u0131n\u0131 (above-the-fold content) stilize etmek i\u00e7in kesinlikle gerekli olan CSS kodlar\u0131n\u0131 tan\u0131mlay\u0131n ve bunlar\u0131 HTML belgesinin <\/code> etiketi aras\u0131na inline olarak yerle\u015ftirin. Bu, taray\u0131c\u0131n\u0131n harici CSS dosyalar\u0131n\u0131 beklemeden ana i\u00e7eri\u011fi hemen render etmesini sa\u011flar.<\/li>\n Kritik Olmayan CSS'i Asenkron Y\u00fckleme:<\/strong> Geri kalan CSS dosyalar\u0131n\u0131, HTML'in y\u00fcklenmesini ve render edilmesini engellemeyecek \u015fekilde asenkron olarak y\u00fckleyin. Bunu genellikle <\/code> etiketi i\u00e7indeki media<\/code> niteli\u011fini print<\/code> olarak ayarlayarak ve JavaScript ile y\u00fcklendikten sonra media<\/code> niteli\u011fini all<\/code> olarak de\u011fi\u015ftirerek yapabilirsiniz.<\/li>\n<\/ul>\n\n\n