{"id":1510,"date":"2025-11-07T22:09:10","date_gmt":"2025-11-07T19:09:10","guid":{"rendered":"https:\/\/www.dchost.com\/blog\/goruntu-optimizasyonu-boru-hatti-nasil-kurulur-avif-webp-origin-shield-ve-akilli-cache-key-ile-cdn-faturaniza-nefes-aldirin\/"},"modified":"2025-11-07T22:09:10","modified_gmt":"2025-11-07T19:09:10","slug":"goruntu-optimizasyonu-boru-hatti-nasil-kurulur-avif-webp-origin-shield-ve-akilli-cache-key-ile-cdn-faturaniza-nefes-aldirin","status":"publish","type":"post","link":"https:\/\/www.dchost.com\/blog\/goruntu-optimizasyonu-boru-hatti-nasil-kurulur-avif-webp-origin-shield-ve-akilli-cache-key-ile-cdn-faturaniza-nefes-aldirin\/","title":{"rendered":"G\u00f6r\u00fcnt\u00fc Optimizasyonu Boru Hatt\u0131 Nas\u0131l Kurulur? AVIF\/WebP, Origin Shield ve Ak\u0131ll\u0131 Cache-Key ile CDN Faturan\u0131za Nefes Ald\u0131r\u0131n"},"content":{"rendered":"<div class=\"dchost-blog-content-wrapper\"><div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">\u0130&ccedil;indekiler<\/p><ul class=\"toc_list\"><li><a href=\"#Ofiste_Kucuk_Bir_Sarsinti_Gorseller_CDN_ve_O_Kacan_Fatura\"><span class=\"toc_number toc_depth_1\">1<\/span> Ofiste K\u00fc\u00e7\u00fck Bir Sars\u0131nt\u0131: G\u00f6rseller, CDN ve O Ka\u00e7an Fatura<\/a><\/li><li><a href=\"#Gorselin_Parasi_Bytelar_Neden_Bu_Kadar_Agir\"><span class=\"toc_number toc_depth_1\">2<\/span> G\u00f6rselin Paras\u0131: Byte\u2019lar Neden Bu Kadar A\u011f\u0131r?<\/a><\/li><li><a href=\"#AVIF_ve_WebP_Nereye_Ne_Zaman_Nasil\"><span class=\"toc_number toc_depth_1\">3<\/span> AVIF ve WebP: Nereye, Ne Zaman, Nas\u0131l?<\/a><\/li><li><a href=\"#Boyutlandirma_Kac_Piksel_Kime_Yeter\"><span class=\"toc_number toc_depth_1\">4<\/span> Boyutland\u0131rma: Ka\u00e7 Piksel Kime Yeter?<\/a><\/li><li><a href=\"#Cache-Key_Disiplini_Kaos_Degil_Akil\"><span class=\"toc_number toc_depth_1\">5<\/span> Cache-Key Disiplini: Kaos De\u011fil, Ak\u0131l<\/a><\/li><li><a href=\"#Origin_Shield_Orijine_Bir_Siper_POPlara_Huzur\"><span class=\"toc_number toc_depth_1\">6<\/span> Origin Shield: Orijine Bir Siper, POP\u2019lara Huzur<\/a><\/li><li><a href=\"#Uctan_Uca_Bir_Boru_Hatti_Akis_Nasil_Oturur\"><span class=\"toc_number toc_depth_1\">7<\/span> U\u00e7tan Uca Bir Boru Hatt\u0131: Ak\u0131\u015f Nas\u0131l Oturur?<\/a><\/li><li><a href=\"#Tuzaklar_Kucuk_Hatalar_Buyuk_Faturalar\"><span class=\"toc_number toc_depth_1\">8<\/span> Tuzaklar: K\u00fc\u00e7\u00fck Hatalar, B\u00fcy\u00fck Faturalar<\/a><\/li><li><a href=\"#Olcum_Ne_Kadar_Isindik_Ne_Kadari_Cebe_Kaldi\"><span class=\"toc_number toc_depth_1\">9<\/span> \u00d6l\u00e7\u00fcm: Ne Kadar Is\u0131nd\u0131k, Ne Kadar\u0131 Cebe Kald\u0131?<\/a><\/li><li><a href=\"#Kalite_Ayari_Goz_Terazisi_Byte_Tasarrufu\"><span class=\"toc_number toc_depth_1\">10<\/span> Kalite Ayar\u0131: G\u00f6z Terazisi, Byte Tasarrufu<\/a><\/li><li><a href=\"#Guvenli_Kenarlar_Imzali_URL_Gecersiz_Kilma_ve_Surumleme\"><span class=\"toc_number toc_depth_1\">11<\/span> G\u00fcvenli Kenarlar: \u0130mzal\u0131 URL, Ge\u00e7ersiz K\u0131lma ve S\u00fcr\u00fcmleme<\/a><\/li><li><a href=\"#Son_Rotuslar_Kisisellestirme_Dinamik_Metin_ve_Gorsel_Katmanlari\"><span class=\"toc_number toc_depth_1\">12<\/span> Son R\u00f6tu\u015flar: Ki\u015fiselle\u015ftirme, Dinamik Metin ve G\u00f6rsel Katmanlar\u0131<\/a><\/li><li><a href=\"#Kapanis_Sade_Kurallar_Yumusak_Bir_Fatura\"><span class=\"toc_number toc_depth_1\">13<\/span> Kapan\u0131\u015f: Sade Kurallar, Yumu\u015fak Bir Fatura<\/a><\/li><\/ul><\/div>\n<h2 id='section-1'><span id=\"Ofiste_Kucuk_Bir_Sarsinti_Gorseller_CDN_ve_O_Kacan_Fatura\">Ofiste K\u00fc\u00e7\u00fck Bir Sars\u0131nt\u0131: G\u00f6rseller, CDN ve O Ka\u00e7an Fatura<\/span><\/h2>\n<p>Hi\u00e7 ba\u015f\u0131n\u0131za geldi mi? Bir pazartesi sabah\u0131 kahvenizi al\u0131p panoya bak\u0131yorsunuz ve CDN faturas\u0131 ufak bir da\u011f gibi beliriyor. Benim ba\u015f\u0131ma geldi. \u00dcr\u00fcn liste sayfas\u0131, bol g\u00f6rsel, \u015f\u0131k bir tasar\u0131m; her \u015fey yerli yerindeydi sanki. Ama loglara \u015f\u00f6yle bir dal\u0131nca, ayn\u0131 g\u00f6rselin onlarca varyantla farkl\u0131 parametrelerde istenip \u00f6nbelle\u011fi par\u00e7alad\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fcm. Kalite de\u011feri de\u011fi\u015fmi\u015f, geni\u015flik parametresi ayr\u0131 tak\u0131lm\u0131\u015f, format se\u00e7imi tamamen \u015fansa b\u0131rak\u0131lm\u0131\u015f. Ortaya \u00e7\u0131kan \u015fey \u015fu: k\u00fc\u00e7\u00fck k\u00fc\u00e7\u00fck kararlar, b\u00fcy\u00fck b\u00fcy\u00fck byte\u2019lara d\u00f6n\u00fc\u015f\u00fcyor.<\/p>\n<p>O g\u00fcn \u015funu fark ettim: G\u00f6r\u00fcnt\u00fc optimizasyonu sadece \u2018resmi s\u0131k\u0131\u015ft\u0131r\u2019 meselesi de\u011fil. <strong>Do\u011fru format\u0131 do\u011fru cihaza<\/strong> vermek, <strong>tutarl\u0131 bir cache-key<\/strong> politikas\u0131 olu\u015fturmak ve <strong>Origin Shield ile orijini korumak<\/strong> birlikte bir hik\u00e2ye anlat\u0131yor. Bu yaz\u0131da, g\u00f6r\u00fcnt\u00fc optimizasyonu boru hatt\u0131n\u0131 ba\u015ftan sona, koddan \u00e7ok mant\u0131\u011f\u0131 konu\u015farak kuraca\u011f\u0131z. Nerede sa\u011fa \u00e7ekip nefes alaca\u011f\u0131m\u0131z\u0131, nerede gaza basaca\u011f\u0131m\u0131z\u0131 beraber g\u00f6rece\u011fiz. Sonunda amac\u0131m\u0131z basit: kaliteyi korurken CDN maliyetini nazik\u00e7e a\u015fa\u011f\u0131 \u00e7ekmek.<\/p>\n<h2 id='section-2'><span id=\"Gorselin_Parasi_Bytelar_Neden_Bu_Kadar_Agir\">G\u00f6rselin Paras\u0131: Byte\u2019lar Neden Bu Kadar A\u011f\u0131r?<\/span><\/h2>\n<p>Mesela \u015f\u00f6yle d\u00fc\u015f\u00fcn\u00fcn: M\u00fc\u015fteriniz katalog sayfas\u0131nda geziniyor. G\u00f6z\u00fcn\u00fcn g\u00f6rd\u00fc\u011f\u00fc her \u00fcr\u00fcn kutucu\u011fu bir istek demek; her istek de bir ta\u015f\u0131ma maliyeti. G\u00f6rselin kendisi b\u00fcy\u00fckse, ta\u015f\u0131d\u0131\u011f\u0131n\u0131z y\u00fck b\u00fcy\u00fcyor. G\u00f6rsel say\u0131s\u0131 art\u0131nca, ayn\u0131 hikaye katlan\u0131yor. Bir de her cihaz ve taray\u0131c\u0131ya farkl\u0131 bir varyant g\u00f6ndermek i\u00e7in desen desen parametre \u00fcretti\u011finizde, CDN\u2019in \u00f6n belle\u011fi par\u00e7alan\u0131yor. Yani, \u00e7ok say\u0131da benzersiz anahtar, daha az isabet oran\u0131, daha \u00e7ok orijin iste\u011fi demek.<\/p>\n<p>As\u0131l mesele \u015fu: Maliyet \u00e7o\u011fu zaman CPU\u2019dan de\u011fil, <strong>ta\u015f\u0131d\u0131\u011f\u0131n\u0131z bayt<\/strong> ve <strong>ka\u00e7\u0131rd\u0131\u011f\u0131n\u0131z cache isabetlerinden<\/strong> gelir. G\u00f6rselin format\u0131n\u0131 ak\u0131ll\u0131ca se\u00e7mek, boyutunu kullan\u0131c\u0131ya g\u00f6re ayarlamak ve cache anahtarlar\u0131n\u0131 disipline etmek bu y\u00fczden g\u00fc\u00e7l\u00fc \u00fc\u00e7l\u00fc. \u00dc\u00e7\u00fc el ele verince, ayn\u0131 sayfa daha az veri harcar, daha az farkl\u0131 varyasyon \u00fcretir ve orijin daha az yorulur. T\u00fcm hamleyi bu g\u00f6zle planlayal\u0131m.<\/p>\n<h2 id='section-3'><span id=\"AVIF_ve_WebP_Nereye_Ne_Zaman_Nasil\">AVIF ve WebP: Nereye, Ne Zaman, Nas\u0131l?<\/span><\/h2>\n<p>AVIF ve WebP\u2019nin g\u00fczelli\u011fi, daha az byte ile g\u00f6ze ho\u015f gelen g\u00f6r\u00fcnt\u00fcler sunmalar\u0131. Ama her taray\u0131c\u0131 her format\u0131 ayn\u0131 sevgiyle kar\u015f\u0131lam\u0131yor. Burada yap\u0131lacak \u015fey zor de\u011fil: <strong>taray\u0131c\u0131n\u0131n neyi kabul etti\u011fini anlay\u0131p<\/strong> ona g\u00f6re cevap vermek. Taray\u0131c\u0131 \u2018AVIF severim\u2019 diyorsa AVIF verirsiniz, \u2018WebP de olur\u2019 diyorsa WebP, \u2018ben klasik\u00e7iyim\u2019 diyenlere de JPEG\/PNG. Bu, i\u00e7ten i\u00e7e bir pazarl\u0131k gibi; her istemciyle k\u00fc\u00e7\u00fck bir anla\u015fma.<\/p>\n<p>Format se\u00e7imini basitle\u015ftirmenin yolu, <strong>i\u00e7erik anla\u015fmas\u0131<\/strong> mant\u0131\u011f\u0131yla ilerlemek. \u0130stek \u00fcstbilgilerinde taray\u0131c\u0131n\u0131n kabul etti\u011fi formatlar\u0131 okuyup, <strong>tek bir kalite aral\u0131\u011f\u0131nda<\/strong> standardize etti\u011finiz AVIF\/WebP \u00e7\u0131kt\u0131y\u0131 verin. Fazla varyasyon pe\u015finde ko\u015fmay\u0131n; i\u015f kaliteden \u00e7almaz, ama \u00f6nbellek daha d\u00fczenli kal\u0131r. AVIF\u2019in detaylarda daha usta oldu\u011fu, WebP\u2019nin yayg\u0131n cihazlarda tatl\u0131 bir denge sundu\u011fu bir ger\u00e7ek. Yine de herkes i\u00e7in tek bir do\u011fru yok; kendinize bir ana rota belirleyin ve k\u00fc\u00e7\u00fck g\u00fcncellemelerle ilerleyin.<\/p>\n<p>Daha teknik okumay\u0131 sevenler i\u00e7in, formatlar\u0131n temelini anlatan kaynaklar da akl\u0131mda. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#avif_image\" rel=\"nofollow noopener\" target=\"_blank\">MDN \u00fczerinde AVIF b\u00f6l\u00fcm\u00fcn\u00fc<\/a> incelemek ufuk a\u00e7ar. WebP taraf\u0131nda ise <a href=\"https:\/\/developers.google.com\/speed\/webp\" rel=\"nofollow noopener\" target=\"_blank\">Google\u2019\u0131n WebP sayfas\u0131<\/a> pratik ipu\u00e7lar\u0131yla dolu. Ama ka\u011f\u0131t \u00fcst\u00fcndeki bilgiyi sahaya s\u00fcrmek i\u00e7in as\u0131l ihtiyac\u0131n\u0131z, kendi g\u00f6rsellerinizle k\u00fc\u00e7\u00fck denemeler yapmak. Bir-iki sayfa, birka\u00e7 kalite ayar\u0131, \u00fc\u00e7 be\u015f cihaz. Sonra sonu\u00e7lar zaten konu\u015fur.<\/p>\n<h2 id='section-4'><span id=\"Boyutlandirma_Kac_Piksel_Kime_Yeter\">Boyutland\u0131rma: Ka\u00e7 Piksel Kime Yeter?<\/span><\/h2>\n<p>G\u00f6rselleri b\u00fcy\u00fct\u00fcp k\u00fc\u00e7\u00fcltme i\u015finde gere\u011finden fazla ciddile\u015fmek, maliyeti co\u015fturur. Her geni\u015flik i\u00e7in ayr\u0131 bir varyant \u00fcretmek yerine, <strong>sembolik birka\u00e7 geni\u015flik<\/strong> belirleyin. Mesela k\u00fc\u00e7\u00fck, orta, b\u00fcy\u00fck gibi. B\u00f6ylece hem taray\u0131c\u0131ya se\u00e7im \u015fans\u0131 tan\u0131rs\u0131n\u0131z, hem de arka tarafta \u00fcretilen ve saklanan varyant say\u0131s\u0131 kontrol alt\u0131nda kal\u0131r. \u0130lle de her bo\u015fluk i\u00e7in m\u00fckemmel kesim derdine d\u00fc\u015fmeyin; kaliteyi g\u00f6zle do\u011frulay\u0131n, kula\u011f\u0131n\u0131z lojistikte olsun.<\/p>\n<p>Retina ekranlar i\u015fin tuzu biberi. Ayn\u0131 geni\u015flikte, farkl\u0131 yo\u011funluklar olabilir. Bunu da bo\u011fup parametre cehennemine \u00e7evirmek yerine, <strong>iki yo\u011funluk<\/strong> civar\u0131nda kalmak \u00e7o\u011fu zaman yeter. Taray\u0131c\u0131lar se\u00e7im yapmay\u0131 biliyor; siz sadece makul se\u00e7enekler sunun. G\u00f6rsellerin lazy-load ile sayfaya yava\u015f yava\u015f gelmesi de hem kullan\u0131c\u0131y\u0131 hem c\u00fczdan\u0131 rahatlat\u0131r. \u0130lk ekranda g\u00f6r\u00fcnenlere \u00f6ncelik verin; gerisi kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a gelsin.<\/p>\n<p>Boyutland\u0131rma ak\u0131\u015f\u0131n\u0131 ak\u0131lda tutman\u0131n pratik yolu \u015fu: \u00d6nden birka\u00e7 basamak haz\u0131rlay\u0131n, taray\u0131c\u0131ya ak\u0131ll\u0131 se\u00e7im alan\u0131 b\u0131rak\u0131n, fakat <strong>varyant say\u0131s\u0131n\u0131 disiplinli tutun<\/strong>. \u00c7o\u011fumuz paray\u0131 pikselde de\u011fil, varyasyonda kaybediyoruz.<\/p>\n<h2 id='section-5'><span id=\"Cache-Key_Disiplini_Kaos_Degil_Akil\">Cache-Key Disiplini: Kaos De\u011fil, Ak\u0131l<\/span><\/h2>\n<p>Bir CDN cache-key\u2019i, o g\u00f6rselin kimli\u011fidir. Kimli\u011fe yazd\u0131\u011f\u0131n\u0131z her farkl\u0131 not, yeni bir ki\u015fi demektir. \u2018width=1200\u2019 ile \u2018w=1200\u2019 birbirinin ayn\u0131s\u0131 gibi g\u00f6r\u00fcnse de, cache anahtar\u0131 g\u00f6z\u00fcnde apayr\u0131. Ayn\u0131 \u015fekilde \u2018q=75\u2019 ile \u2018quality=75\u2019 de ba\u015fka bir d\u00fcnya. <strong>Parametreleri normalize etmek<\/strong> bu y\u00fczden kritik. Ayn\u0131 \u015feyi ayn\u0131 \u015fekilde yaz\u0131n; gereksizlerini tamamen at\u0131n. Boyut ve format \u00e7o\u011fu senaryoda tek ba\u015f\u0131na yeter. Kalite gibi hassas ayarlarda bile, say\u0131y\u0131 k\u00fc\u00e7\u00fck bir aral\u0131kta sabitlemek \u00f6nbelle\u011fi huzurlu tutar.<\/p>\n<p>Cache-key\u2019e kullan\u0131c\u0131ya \u00f6zel bir \u015fey kar\u0131\u015fmas\u0131n. Oturum bilgilerinin, kampanya etiketlerinin, izleme parametrelerinin g\u00f6rsellerle ilgisi yoksa, <strong>anahtara dahil etmeyin<\/strong>. Aksi halde her t\u0131klama yeni bir varyant do\u011furur. URL\u2019nin sonunda beliren fazladan i\u015faretler, sorunun g\u00f6r\u00fcnmez kahramanlar\u0131d\u0131r. Ayr\u0131ca, b\u00fcy\u00fck-k\u00fc\u00e7\u00fck harf farklar\u0131, sonda slash olup olmamas\u0131, s\u0131raya dizilmeyen parametreler de an\u0131nda par\u00e7alanma yarat\u0131r. Hepsini bir d\u00fczene koyun, anahtar\u0131 temiz tutun.<\/p>\n<p>Burada bir de i\u00e7erik anla\u015fmas\u0131na uyan varyasyon konusu var. Taray\u0131c\u0131 AVIF destekliyorsa \u2018format=avif\u2019, yaln\u0131zca WebP ise \u2018format=webp\u2019, destek yoksa \u2018format=jpeg\u2019 gibi <strong>net ve tutarl\u0131<\/strong> bir anahtar kural\u0131 belirleyin. B\u00f6ylece ayn\u0131 g\u00f6rsel i\u00e7in \u00fc\u00e7 ana kova olu\u015fur ve her cihaz o kovadan nasibini al\u0131r. Avantaj\u0131 \u015fu: isabet oran\u0131 y\u00fckselir, orijin daha az \u00e7a\u011fr\u0131l\u0131r, maliyet iner.<\/p>\n<h2 id='section-6'><span id=\"Origin_Shield_Orijine_Bir_Siper_POPlara_Huzur\">Origin Shield: Orijine Bir Siper, POP\u2019lara Huzur<\/span><\/h2>\n<p>Origin Shield, tek c\u00fcmleyle \u015fu: <strong>Orijininize gelen talebi tek bir kap\u0131dan s\u00fczmek<\/strong>. Yani d\u00fcnyan\u0131n farkl\u0131 noktalar\u0131ndaki CDN kenar noktalar\u0131 ayn\u0131 dosyay\u0131 almak istedi\u011finde, \u00f6nce bir ara katmana u\u011frar. O ara katman orijinden bir kez \u00e7ekip, herkese ayn\u0131 dosyay\u0131 da\u011f\u0131t\u0131r. Orijine binen y\u00fck dalga dalga yay\u0131lmak yerine, tek noktada toplan\u0131r. Darbo\u011faz azal\u0131p, maliyet daha \u00f6ng\u00f6r\u00fclebilir hale gelir.<\/p>\n<p>Benim sevdi\u011fim yakla\u015f\u0131m, shield katman\u0131n\u0131 orijine <strong>co\u011frafi olarak makul yak\u0131n<\/strong> bir yerde konumland\u0131rmak. B\u00f6ylece orijin ile shield aras\u0131ndaki yol k\u0131sa, shield ile d\u00fcnyadaki POP\u2019lar aras\u0131ndaki yol daha dengeli olur. \u0130lk \u0131s\u0131nma s\u0131ras\u0131nda birka\u00e7 istek daha pahal\u0131 gelebilir, ama \u00f6nbellek \u0131s\u0131nd\u0131k\u00e7a rahatlama ba\u015flar. Her yeni POP, \u0131s\u0131y\u0131 payla\u015f\u0131r.<\/p>\n<p>Detay okumay\u0131 sevenler i\u00e7in pratik bir kaynak b\u0131rakay\u0131m: <a href=\"https:\/\/developers.cloudflare.com\/cache\/origin-cache\/origin-shield\/\" rel=\"nofollow noopener\" target=\"_blank\">Cloudflare\u2019\u0131n Origin Shield belgeleri<\/a> mant\u0131\u011f\u0131 yal\u0131n bir dille anlat\u0131yor. Ama inan\u0131n, uygularken i\u015fin p\u00fcf noktas\u0131 yine ayn\u0131: <strong>varyant say\u0131s\u0131n\u0131 s\u0131n\u0131rl\u0131 tutmak<\/strong>. Shield, kaosu b\u00fcy\u00fctmez; ama kaosla beslerseniz mucize beklemeyin.<\/p>\n<h2 id='section-7'><span id=\"Uctan_Uca_Bir_Boru_Hatti_Akis_Nasil_Oturur\">U\u00e7tan Uca Bir Boru Hatt\u0131: Ak\u0131\u015f Nas\u0131l Oturur?<\/span><\/h2>\n<p>Gelin, pratik bir senaryo d\u00fc\u015f\u00fcnelim. Pazarlama ekibi yeni sezon g\u00f6rsellerini y\u00fckl\u00fcyor. Y\u00fcklenen her g\u00f6rsel, arka tarafta k\u00fc\u00e7\u00fck bir servise d\u00fc\u015f\u00fcyor. Bu servis g\u00f6rseli temizliyor, EXIF\u2019leri k\u0131rp\u0131yor, mant\u0131kl\u0131 bir <strong>g\u00f6rsel kimli\u011fi<\/strong> \u00fcretiyor ve belirledi\u011finiz geni\u015fliklerde AVIF\/WebP\/JPEG varyantlar\u0131n\u0131 haz\u0131rl\u0131yor. Hepsi ar\u015fivde yerini al\u0131yor. \u0130simler d\u00fczenli, parametreler sabit, kalite aral\u0131\u011f\u0131 makul.<\/p>\n<p>\u00d6n y\u00fczde, taray\u0131c\u0131dan gelen iste\u011fe bak\u0131yorsunuz. Kabul edilen formatlar belliyse, en iyi uyumlu formata y\u00f6nlendiriyorsunuz. Cihaza g\u00f6re geni\u015flik se\u00e7imi, daha toplanm\u0131\u015f bir setten yap\u0131l\u0131yor. Cache-key\u2019iniz yaln\u0131zca \u2018id, width, format\u2019 \u00fc\u00e7l\u00fcs\u00fcne g\u00f6re \u00e7al\u0131\u015f\u0131yor. \u0130zleme etiketleri, kampanya kodlar\u0131 anahtar\u0131n d\u0131\u015f\u0131nda kal\u0131yor. Sonu\u00e7 mu? Farkl\u0131 pazarlama kanallar\u0131ndan gelen trafi\u011fin k\u0131v\u0131lc\u0131mlar\u0131 \u00f6nbelle\u011fi rahats\u0131z etmiyor.<\/p>\n<p>E\u011fer medyay\u0131 bir nesne depolamada tutuyorsan\u0131z, imzal\u0131 URL ve sonradan ge\u00e7ersiz k\u0131lma s\u00fcre\u00e7lerini de d\u00fc\u015f\u00fcnmek gerekir. Bu ak\u0131\u015fa merakl\u0131ysan\u0131z, ad\u0131m ad\u0131m bir yolculuk i\u00e7in <a href=\"https:\/\/www.dchost.com\/blog\/wordpress-medyani-s3e-tasiyalim-mi-cdn-imzali-url-ve-onbellek-gecersizlestirme-adim-adim\/\">medyay\u0131 S3\u2019e ta\u015f\u0131ma, CDN ve imzal\u0131 URL\u2019ler \u00fczerine yazd\u0131\u011f\u0131m\u0131z rehberi<\/a> faydal\u0131 bulabilirsiniz. G\u00f6rsel boru hatt\u0131yla el ele y\u00fcr\u00fcd\u00fc\u011f\u00fcnde, hem g\u00fcvenli hem ekonomik bir d\u00fczen kurulur.<\/p>\n<h2 id='section-8'><span id=\"Tuzaklar_Kucuk_Hatalar_Buyuk_Faturalar\">Tuzaklar: K\u00fc\u00e7\u00fck Hatalar, B\u00fcy\u00fck Faturalar<\/span><\/h2>\n<p>En s\u0131k g\u00f6rd\u00fc\u011f\u00fcm hata, <strong>parametre patlamas\u0131<\/strong>. Geni\u015flikler rastgele, kalite say\u0131lar\u0131 tutars\u0131z, format se\u00e7imi belirsiz olunca \u00f6nbellek insan kalabal\u0131\u011f\u0131na d\u00f6n\u00fcyor. Herkes ayn\u0131 g\u00f6rseli farkl\u0131 bir anahtarla ar\u0131yor; sonu\u00e7ta kimse kimseyi bulam\u0131yor. Bu y\u00fczden en ba\u015fta bir s\u00f6zl\u00fck belirleyin: \u2018width sadece w olsun, kalite i\u00e7in q kullanal\u0131m, format i\u00e7in format yazal\u0131m\u2019 gibi. Kimlik ortak bir dil konu\u015fsun.<\/p>\n<p>Bir ba\u015fka tuzak, <strong>kullan\u0131c\u0131ya \u00f6zel etiketlerin anahtara s\u0131zmas\u0131<\/strong>. Oturum cookie\u2019leri, A\/B testi varyantlar\u0131, izleme zincirlerinin ekledi\u011fi uzun uzad\u0131ya parametreler\u2026 G\u00f6rselin kendisine dokunmayan hi\u00e7bir \u015fey o anahtarda olmamal\u0131. Gerekirse bir katman koyun ve istekten \u00f6nce t\u00fcm bu fazlal\u0131klar\u0131 temizleyin. Hem g\u00fcvenlik hissi artar, hem \u00f6nbellek \u015feffafla\u015f\u0131r.<\/p>\n<p>Son olarak, <strong>m\u00fckemmellik tak\u0131nt\u0131s\u0131<\/strong> bazen d\u00fc\u015fman\u0131n\u0131z olabilir. On piksel i\u00e7in yeni bir varyant \u00fcretmek, \u0131srarla her sayfaya \u00f6zel bir kalite de\u011feri denemek, ayn\u0131 format\u0131 farkl\u0131 isimlerle \u00e7a\u011f\u0131rmak\u2026 Bunlar ka\u011f\u0131t \u00fczerinde zarars\u0131z g\u00f6r\u00fcn\u00fcr; pratikte ise hem depolama hem transfer masraflar\u0131n\u0131 kabart\u0131r. G\u00f6zle test edin, kullan\u0131c\u0131 deneyimini sahici senaryolarla tart\u0131n ve az ama \u00f6z varyantla y\u00fcr\u00fcy\u00fcn.<\/p>\n<h2 id='section-9'><span id=\"Olcum_Ne_Kadar_Isindik_Ne_Kadari_Cebe_Kaldi\">\u00d6l\u00e7\u00fcm: Ne Kadar Is\u0131nd\u0131k, Ne Kadar\u0131 Cebe Kald\u0131?<\/span><\/h2>\n<p>G\u00f6z\u00fcn\u00fcz\u00fc seveyim, \u00f6l\u00e7meden karar vermeyin. En az\u0131ndan basit bir hedefiniz olsun: isabet oran\u0131 arts\u0131n, orijine giden istek azals\u0131n, ortalama g\u00f6rsel boyutu d\u00fc\u015fs\u00fcn. CDN raporlar\u0131nda isabet grafikleri, \u00fcstten ka\u00e7an istekler ve veri transferi birlikte g\u00fczel bir hik\u00e2ye anlat\u0131r. Ak\u0131\u015fa k\u00fc\u00e7\u00fck dokunu\u015flar yapt\u0131k\u00e7a, bu grafiklerin nas\u0131l yumu\u015fad\u0131\u011f\u0131n\u0131 g\u00f6rmek moral verir.<\/p>\n<p>Bazen tek bir kategori sayfas\u0131, b\u00fct\u00fcn d\u00fczeni yoldan \u00e7\u0131karabilir. \u00c7ok farkl\u0131 ebatlarda g\u00f6rsel kullanan bir tema, beklenmedik bir cihaz da\u011f\u0131l\u0131m\u0131, a\u015f\u0131r\u0131 hareketli bir kampanya d\u00f6nemi\u2026 B\u00f6yle anlarda so\u011fukkanl\u0131 kal\u0131n. Sorun ya\u015fayan sayfay\u0131 k\u0131sa s\u00fcreli\u011fine daha s\u0131k\u0131 bir kurala al\u0131n, varyantlar\u0131 ge\u00e7ici olarak azalt\u0131n, gerekiyorsa birka\u00e7 kritik g\u00f6rseli elden ge\u00e7irin. Boru hatt\u0131 ya\u015fayan bir organizma; d\u00f6nem d\u00f6nem nabz\u0131n\u0131 tutmak gerekir.<\/p>\n<h2 id='section-10'><span id=\"Kalite_Ayari_Goz_Terazisi_Byte_Tasarrufu\">Kalite Ayar\u0131: G\u00f6z Terazisi, Byte Tasarrufu<\/span><\/h2>\n<p>Kalite denen \u015fey \u00e7o\u011fu zaman ekrandaki iki pikselin ili\u015fkisi. Ona bu g\u00f6zle bak\u0131nca, \u2018q=82 mi, q=78 mi\u2019 kavgas\u0131 yerine, \u2018bu kategoride bu kalite i\u015f g\u00f6r\u00fcyor\u2019 demek daha rahatlat\u0131c\u0131. Ben genelde kaliteyi i\u00e7erik t\u00fcr\u00fcne g\u00f6re \u00e7ivilerim. \u00dcr\u00fcn g\u00f6rsellerinde bir noktada durulur, blog g\u00f6rsellerinde ba\u015fka bir noktada. Hepsinde ortak nokta, <strong>kalite aral\u0131\u011f\u0131n\u0131 dar tutmak<\/strong>. Onlarca farkl\u0131 say\u0131 yerine, bir-iki sa\u011flam basamak se\u00e7mek \u00f6nbelle\u011fi ok\u015far.<\/p>\n<p>AVIF ve WebP taraf\u0131nda da ayn\u0131 felsefe ge\u00e7erli. Taray\u0131c\u0131ya senkron ve tutarl\u0131 davran\u0131rsan\u0131z, kimi anlarda AVIF ile ciddi bir incelme g\u00f6r\u00fcrs\u00fcn\u00fcz; kimi anlarda WebP i\u015finizi g\u00f6r\u00fcr. Esas olan, \u2018ben bu \u00fc\u00e7 varyanttan birini veririm, hepsi kaliteli ve yeter\u2019. Basit, anla\u015f\u0131l\u0131r ve uygulanabilir bir s\u00f6z. Uzun vadede maliyeti d\u00fc\u015f\u00fck tutan da bu sadelik.<\/p>\n<h2 id='section-11'><span id=\"Guvenli_Kenarlar_Imzali_URL_Gecersiz_Kilma_ve_Surumleme\">G\u00fcvenli Kenarlar: \u0130mzal\u0131 URL, Ge\u00e7ersiz K\u0131lma ve S\u00fcr\u00fcmleme<\/span><\/h2>\n<p>G\u00f6rselleri d\u0131\u015fa a\u00e7\u0131k bir depoda tutarken, bazen imzal\u0131 URL\u2019ler kullanmak gerekir. \u0130mza parametresi, cache-key\u2019i bozmamal\u0131. \u00c7o\u011fu CDN, do\u011frulama sonras\u0131 <strong>anahtara imza parametresini katmadan<\/strong> \u00f6nbelle\u011fe atabilmenizi sa\u011flar. \u0130mza sadece kap\u0131da kontrol i\u00e7indir; i\u00e7eri giren \u00fcr\u00fcn ayn\u0131 \u00fcr\u00fcn olmal\u0131. Ge\u00e7ersiz k\u0131lma taraf\u0131nda ise s\u00fcr\u00fcm numaras\u0131 imdad\u0131n\u0131za yeti\u015fir. \u2018\/images\/\u2026\/v3\/\u2026\u2019 gibi bir d\u00fczen, tek tek dosya silmekle u\u011fra\u015fmadan yeni s\u00fcr\u00fcm\u00fc itmenizi sa\u011flar.<\/p>\n<p>\u0130\u015f ak\u0131\u015f\u0131n\u0131 iyice d\u00fczene koydu\u011funuzda, bu konular birbirine ba\u011flan\u0131yor. S\u00fcr\u00fcm y\u00fckseldi\u011finde, yeni varyantlar haz\u0131rlan\u0131yor, cache-key ayn\u0131 dilde kal\u0131yor, shield \u0131s\u0131n\u0131yor, POP\u2019lar s\u0131rayla ayd\u0131nlan\u0131yor. D\u0131\u015far\u0131dan bak\u0131nca \u2018ne g\u00fczel ak\u0131yor\u2019 dedi\u011fimiz \u015fey, i\u00e7eride <strong>tutarl\u0131l\u0131\u011f\u0131n<\/strong> meyvesi asl\u0131nda.<\/p>\n<h2 id='section-12'><span id=\"Son_Rotuslar_Kisisellestirme_Dinamik_Metin_ve_Gorsel_Katmanlari\">Son R\u00f6tu\u015flar: Ki\u015fiselle\u015ftirme, Dinamik Metin ve G\u00f6rsel Katmanlar\u0131<\/span><\/h2>\n<p>Bazen g\u00f6rsellerin \u00fczerinde dinamik metinler, rozetler, indirim etiketleri olur. Bu i\u015f, \u00f6nbelle\u011fi bir anda ki\u015fiselle\u015ftirme bata\u011f\u0131na \u00e7ekebilir. M\u00fcmk\u00fcnse g\u00f6rseli sabit tutun, metni <strong>ayr\u0131 bir katman<\/strong> olarak yerlile\u015ftirin. Ya CSS ile, ya k\u00fc\u00e7\u00fck bir SVG dokunu\u015fuyla. G\u00f6rselin kendisi her yerde ayn\u0131 kals\u0131n ki, \u00f6nbellek her yerde ayn\u0131 \u00fcr\u00fcn\u00fc satabilsin. Dinamik katman say\u0131s\u0131 azald\u0131k\u00e7a, maliyet de nefes al\u0131r.<\/p>\n<p>Ki\u015fiselle\u015ftirmeyi seviyoruz ama her \u015feyi ki\u015fiselle\u015ftirmek zorunda de\u011filiz. G\u00f6rsel i\u00e7erik, \u00e7o\u011fu zaman evrensel bir dil konu\u015fur. Pahal\u0131 olan, her kullan\u0131c\u0131 i\u00e7in yeni bir g\u00f6rsel yontmakt\u0131r. Boru hatt\u0131n\u0131n havas\u0131n\u0131 bozmamak i\u00e7in, ki\u015fisel dokunu\u015flar\u0131 metin ve aray\u00fcz katmanlar\u0131na b\u0131rakmak \u00e7o\u011fu senaryoda daha ak\u0131ll\u0131ca.<\/p>\n<h2 id='section-13'><span id=\"Kapanis_Sade_Kurallar_Yumusak_Bir_Fatura\">Kapan\u0131\u015f: Sade Kurallar, Yumu\u015fak Bir Fatura<\/span><\/h2>\n<p>Toplayal\u0131m. G\u00f6r\u00fcnt\u00fc optimizasyonu boru hatt\u0131, bir s\u00fcr\u00fc k\u00fc\u00e7\u00fck karar\u0131n uyum i\u00e7inde at\u0131ld\u0131\u011f\u0131 bir y\u00fcr\u00fcy\u00fc\u015f. <strong>AVIF\/WebP ile format\u0131 do\u011fru se\u00e7mek<\/strong> g\u00f6rselleri inceltir, <strong>cache-key\u2019i disipline etmek<\/strong> \u00f6nbelle\u011fi sakinle\u015ftirir, <strong>Origin Shield<\/strong> orijini kalabal\u0131ktan korur. Boyutland\u0131rmay\u0131 makul basamaklarda tutmak, kaliteyi i\u00e7erik t\u00fcr\u00fcne g\u00f6re sabitlemek, parametreleri temizlemek\u2026 Hepsi ayn\u0131 manzaraya bak\u0131yor: daha az bayt, daha \u00e7ok isabet.<\/p>\n<p>\u0130\u015fe nereden ba\u015flayay\u0131m derseniz, \u00f6nce \u00f6l\u00e7\u00fcn. En \u00e7ok trafik alan \u00fc\u00e7 sayfay\u0131 se\u00e7in, onlar\u0131n g\u00f6rsel ak\u0131\u015f\u0131n\u0131 sadele\u015ftirin, format ve kaliteyi minimalli\u011fe \u00e7ekin. Sonra bir haftal\u0131k rapora bak\u0131n. Ufak k\u0131m\u0131ldanmalar sizi cesaretlendirecektir. Vakit bulduk\u00e7a shield ekleyin, anahtarlar\u0131 toparlay\u0131n, varyant say\u0131lar\u0131n\u0131 g\u00f6zden ge\u00e7irin. Bir bakm\u0131\u015fs\u0131n\u0131z, fatura daha yumu\u015fak, kullan\u0131c\u0131 daha ne\u015feli, sistem ise \u00e7ok daha huzurlu. Umar\u0131m bu yaz\u0131 yolunuzu ayd\u0131nlat\u0131r; bir sonraki bulu\u015fmada tecr\u00fcbelerinizi duymay\u0131 \u00e7ok isterim.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0130&ccedil;indekiler1 Ofiste K\u00fc\u00e7\u00fck Bir Sars\u0131nt\u0131: G\u00f6rseller, CDN ve O Ka\u00e7an Fatura2 G\u00f6rselin Paras\u0131: Byte\u2019lar Neden Bu Kadar A\u011f\u0131r?3 AVIF ve WebP: Nereye, Ne Zaman, Nas\u0131l?4 Boyutland\u0131rma: Ka\u00e7 Piksel Kime Yeter?5 Cache-Key Disiplini: Kaos De\u011fil, Ak\u0131l6 Origin Shield: Orijine Bir Siper, POP\u2019lara Huzur7 U\u00e7tan Uca Bir Boru Hatt\u0131: Ak\u0131\u015f Nas\u0131l Oturur?8 Tuzaklar: K\u00fc\u00e7\u00fck Hatalar, B\u00fcy\u00fck Faturalar9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1511,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknoloji"],"_links":{"self":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/1510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/comments?post=1510"}],"version-history":[{"count":0,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/1510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media\/1511"}],"wp:attachment":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media?parent=1510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/categories?post=1510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/tags?post=1510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}