{"id":1601,"date":"2025-11-09T22:52:58","date_gmt":"2025-11-09T19:52:58","guid":{"rendered":"https:\/\/www.dchost.com\/blog\/webp-avifi-kirmadan-sunmak-nginx-apache-ve-cdn-ile-icerik-pazarligi-rewrite-kurallari-ve-seo-uyumlu-donusum\/"},"modified":"2025-11-09T22:52:58","modified_gmt":"2025-11-09T19:52:58","slug":"webp-avifi-kirmadan-sunmak-nginx-apache-ve-cdn-ile-icerik-pazarligi-rewrite-kurallari-ve-seo-uyumlu-donusum","status":"publish","type":"post","link":"https:\/\/www.dchost.com\/blog\/webp-avifi-kirmadan-sunmak-nginx-apache-ve-cdn-ile-icerik-pazarligi-rewrite-kurallari-ve-seo-uyumlu-donusum\/","title":{"rendered":"WebP\/AVIF\u2019i K\u0131rmadan Sunmak: Nginx\/Apache ve CDN ile \u0130\u00e7erik Pazarl\u0131\u011f\u0131, Rewrite Kurallar\u0131 ve SEO Uyumlu D\u00f6n\u00fc\u015f\u00fcm"},"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=\"#Bir_Gorsel_Yuzunden_Kopan_Firtina_Hic_Basiniza_Geldi_mi\"><span class=\"toc_number toc_depth_1\">1<\/span> Bir G\u00f6rsel Y\u00fcz\u00fcnden Kopan F\u0131rt\u0131na: Hi\u00e7 Ba\u015f\u0131n\u0131za Geldi mi?<\/a><\/li><li><a href=\"#Icerik_Pazarligi_Nedir_ve_Neden_Bu_Kadar_Onemli\"><span class=\"toc_number toc_depth_1\">2<\/span> \u0130\u00e7erik Pazarl\u0131\u011f\u0131 Nedir ve Neden Bu Kadar \u00d6nemli?<\/a><\/li><li><a href=\"#Nginx_ile_Kirmadan_Donusum_Map_Try_Files_ve_Varyin_Sessiz_Uyumu\"><span class=\"toc_number toc_depth_1\">3<\/span> Nginx ile K\u0131rmadan D\u00f6n\u00fc\u015f\u00fcm: Map, Try_Files ve Vary\u2019\u0131n Sessiz Uyumu<\/a><ul><li><a href=\"#Nginx_yapi_tasi\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Nginx yap\u0131 ta\u015f\u0131<\/a><\/li><li><a href=\"#Gelistirirken_rahat_test\"><span class=\"toc_number toc_depth_2\">3.2<\/span> Geli\u015ftirirken rahat test<\/a><\/li><\/ul><\/li><li><a href=\"#Apachehtaccess_ile_Donusum_Sefkatli_Rewrite_ve_Vary\"><span class=\"toc_number toc_depth_1\">4<\/span> Apache\/.htaccess ile D\u00f6n\u00fc\u015f\u00fcm: \u015eefkatli Rewrite ve Vary<\/a><ul><li><a href=\"#Apache_yapi_tasi\"><span class=\"toc_number toc_depth_2\">4.1<\/span> Apache yap\u0131 ta\u015f\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#CDN_ile_Baris_Cache-Key_Origin_Shield_ve_Yanlis_Varyantlarin_Sessiz_Talani\"><span class=\"toc_number toc_depth_1\">5<\/span> CDN ile Bar\u0131\u015f: Cache-Key, Origin Shield ve Yanl\u0131\u015f Varyantlar\u0131n Sessiz Talan\u0131<\/a><\/li><li><a href=\"#SEO_ile_Dost_URLleri_Bozmadan_Donusturmenin_Zarif_Yollari\"><span class=\"toc_number toc_depth_1\">6<\/span> SEO ile Dost: URL\u2019leri Bozmadan D\u00f6n\u00fc\u015ft\u00fcrmenin Zarif Yollar\u0131<\/a><ul><li><a href=\"#Picture_ile_kibarca_bildirmek\"><span class=\"toc_number toc_depth_2\">6.1<\/span> Picture ile kibarca bildirmek<\/a><\/li><\/ul><\/li><li><a href=\"#Test_Saha_Denemesi_ve_Loglardan_Kucuk_Ipuclari\"><span class=\"toc_number toc_depth_1\">7<\/span> Test, Saha Denemesi ve Log\u2019lardan K\u00fc\u00e7\u00fck \u0130pu\u00e7lar\u0131<\/a><\/li><li><a href=\"#Kucuk_Tuzaklar_Yanlis_Content-Type_406lar_ve_Karisan_Cacheler\"><span class=\"toc_number toc_depth_1\">8<\/span> K\u00fc\u00e7\u00fck Tuzaklar: Yanl\u0131\u015f Content-Type, 406\u2019lar ve Kar\u0131\u015fan Cache\u2019ler<\/a><\/li><li><a href=\"#Kapanis_Zarif_Bir_Anlasma_Daha_Hizli_Bir_Dunya\"><span class=\"toc_number toc_depth_1\">9<\/span> Kapan\u0131\u015f: Zarif Bir Anla\u015fma, Daha H\u0131zl\u0131 Bir D\u00fcnya<\/a><\/li><\/ul><\/div>\n<h2 id=\"section-1\"><span id=\"Bir_Gorsel_Yuzunden_Kopan_Firtina_Hic_Basiniza_Geldi_mi\">Bir G\u00f6rsel Y\u00fcz\u00fcnden Kopan F\u0131rt\u0131na: Hi\u00e7 Ba\u015f\u0131n\u0131za Geldi mi?<\/span><\/h2>\n<p>Bir sabah kahvemi al\u0131p siteyi a\u00e7t\u0131m, ana sayfadaki kahraman g\u00f6rseli p\u0131t diye yok olmu\u015f. Masa\u00fcst\u00fcnde var, telefonda yok. Garip olan \u015fu; dosya sunucuda duruyor, CDN\u2019de cache dolu, izleme panelleri ye\u015fil. Me\u011fer mobil taray\u0131c\u0131 AVIF istiyor, CDN WebP cache\u2019ini \u0131s\u0131t\u0131p herkese da\u011f\u0131t\u0131yor, sunucu da \u201ctamamd\u0131r\u201d diye ba\u015f\u0131n\u0131 sall\u0131yor. Sonu\u00e7? Baz\u0131 cihazlarda do\u011fru format, baz\u0131lar\u0131nda bo\u015f kutu. O g\u00fcn anlad\u0131m ki, WebP\/AVIF\u2019i h\u0131zl\u0131 sunmak ayr\u0131, <strong>k\u0131rmadan<\/strong> sunmak bamba\u015fka bir konu.<\/p>\n<p>Hi\u00e7 benzer bir \u015fey ya\u015fad\u0131n\u0131z m\u0131? G\u00f6rsellerinizi yeni nesil formata \u00e7evirdiniz, her \u015fey h\u0131zl\u0131 a\u00e7\u0131l\u0131yor, derken bir cihazda bozuldu, ba\u015fka bir cihazda \u00e7al\u0131\u015ft\u0131, CDN ise eski varyant\u0131 saklad\u0131. B\u00f6yle durumlarda as\u0131l mesele tek tek formatlar de\u011fil; taray\u0131c\u0131yla <strong>i\u00e7erik pazarl\u0131\u011f\u0131<\/strong>, sunucu taraf\u0131 <strong>rewrite<\/strong> ve <strong>cache anahtar\u0131<\/strong> d\u00fczeni. Bu yaz\u0131da tam da bunu konu\u015faca\u011f\u0131z. Ad\u0131m ad\u0131m, Nginx ve Apache taraf\u0131nda k\u0131rmadan d\u00f6n\u00fc\u015ft\u00fcrmeyi, CDN\u2019de cache kar\u0131\u015f\u0131kl\u0131\u011f\u0131n\u0131 engellemeyi ve SEO\u2019dan \u00f6d\u00fcn vermeden nas\u0131l ilerleyece\u011finizi anlataca\u011f\u0131m.<\/p>\n<p>Mesela \u015f\u00f6yle d\u00fc\u015f\u00fcn\u00fcn: Ayn\u0131 URL\u2019den, taray\u0131c\u0131n\u0131n kabul etti\u011fine g\u00f6re AVIF ya da WebP veya klasik JPEG d\u00f6nmek istiyorsunuz. \u0130\u015fin b\u00fcy\u00fcs\u00fc Accept ba\u015fl\u0131\u011f\u0131nda ve do\u011fru <strong>Vary<\/strong> kullan\u0131m\u0131nda gizli. Kod par\u00e7alar\u0131yla, k\u00fc\u00e7\u00fck hikayelerle, canl\u0131 ortamda ba\u015f\u0131ma gelenleri \u00f6rnek vererek gidece\u011fiz. Haz\u0131rsan\u0131z, taray\u0131c\u0131yla zarif bir anla\u015fma yap\u0131p g\u00f6rselleri u\u00e7urman\u0131n derdine d\u00fc\u015felim.<\/p>\n<h2 id=\"section-2\"><span id=\"Icerik_Pazarligi_Nedir_ve_Neden_Bu_Kadar_Onemli\">\u0130\u00e7erik Pazarl\u0131\u011f\u0131 Nedir ve Neden Bu Kadar \u00d6nemli?<\/span><\/h2>\n<p>Taray\u0131c\u0131yla konu\u015fman\u0131n en pratik yolu, istek ba\u015fl\u0131klar\u0131. \u00d6zellikle de Accept. Taray\u0131c\u0131 \u201cimage\/avif\u201d ya da \u201cimage\/webp\u201d diyerek neyi yuttu\u011funu s\u00f6yl\u00fcyor. Sunucu ise \u201ctamam, sende AVIF \u00e7al\u0131\u015f\u0131r, o zaman AVIF d\u00f6neyim\u201d diyebiliyor. Bu anla\u015fman\u0131n ad\u0131 i\u00e7erik pazarl\u0131\u011f\u0131. Basit gibi g\u00f6r\u00fcn\u00fcr ama yanl\u0131\u015f kurgulan\u0131rsa CDN, bu cevab\u0131 herkese tek tip zannedip <strong>yanl\u0131\u015f varyant\u0131<\/strong> saklayabiliyor.<\/p>\n<p>\u0130\u015fte burada <strong>Vary: Accept<\/strong> devreye giriyor. Sunucu \u201cben bu cevab\u0131 Accept ba\u015fl\u0131\u011f\u0131na g\u00f6re \u00fcrettim\u201d dedi\u011finde, aradaki cache\u2019ler bunu ciddiye al\u0131p anahtar\u0131 Accept\u2019e g\u00f6re farkl\u0131la\u015ft\u0131r\u0131yor. Bu olmazsa, bir kez WebP g\u00f6ren cache, AVIF isteyen bir taray\u0131c\u0131ya da ayn\u0131 WebP\u2019yi itmeye \u00e7al\u0131\u015f\u0131yor. Sonra bazen g\u00f6rsel hi\u00e7 a\u00e7\u0131lm\u0131yor, bazen a\u00e7\u0131l\u0131yor, i\u015fte o sabahki tuhafl\u0131klar b\u00f6yle do\u011fuyor. Detay\u0131n\u0131 merak ederseniz Accept ba\u015fl\u0131\u011f\u0131na dair k\u0131sa ve anla\u015f\u0131l\u0131r bir teknik \u00f6zet i\u00e7in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Accept\" rel=\"noopener nofollow\" target=\"_blank\">MDN\u2019deki Accept ba\u015fl\u0131\u011f\u0131 anlat\u0131m\u0131<\/a> i\u015finizi g\u00f6r\u00fcr.<\/p>\n<p>Buradaki pratik \u00f6l\u00e7\u00fc \u015fu: Taray\u0131c\u0131n\u0131n kabul etti\u011fine g\u00f6re format se\u00e7, ancak bu se\u00e7imi CDN ve taray\u0131c\u0131 \u00f6nbelle\u011fi anlayacak \u015fekilde i\u015faretle. Vary etiketi, do\u011fru Content-Type ve do\u011fru dosya e\u015fle\u015fmesi\u2026 Hepsi k\u00fc\u00e7\u00fck ama kritik ta\u015flar. Birini eksik b\u0131rak\u0131rsan\u0131z, \u201cbende \u00e7al\u0131\u015f\u0131yor\u201d c\u00fcmlesi \u00fcretime \u00e7\u0131kt\u0131\u011f\u0131n\u0131z an havada kalabiliyor.<\/p>\n<h2 id=\"section-3\"><span id=\"Nginx_ile_Kirmadan_Donusum_Map_Try_Files_ve_Varyin_Sessiz_Uyumu\">Nginx ile K\u0131rmadan D\u00f6n\u00fc\u015f\u00fcm: Map, Try_Files ve Vary\u2019\u0131n Sessiz Uyumu<\/span><\/h2>\n<p>Nginx taraf\u0131nda i\u015fin tad\u0131 <strong>map<\/strong> direktifiyle \u00e7\u0131k\u0131yor. Benim y\u0131llard\u0131r kulland\u0131\u011f\u0131m yakla\u015f\u0131m \u015fu: Taray\u0131c\u0131 Accept\u2019inde AVIF varsa AVIF, yoksa WebP, o da yoksa orijinal JPEG\/PNG. Dosya adland\u0131rmas\u0131n\u0131 ba\u015ftan planlamak gerekiyor. En rahat y\u00f6ntem, ayn\u0131 dosya g\u00f6vdesini farkl\u0131 uzant\u0131larla karde\u015f yapmak. Mesela <em>\/img\/hero.jpg<\/em> i\u00e7in <em>\/img\/hero.avif<\/em> ve <em>\/img\/hero.webp<\/em> \u00fcretmek. Bu sayede tek bir URL\u2019den, taray\u0131c\u0131ya g\u00f6re do\u011fru dosyay\u0131 d\u00f6nd\u00fcrmek m\u00fcmk\u00fcn oluyor.<\/p>\n<h3><span id=\"Nginx_yapi_tasi\">Nginx yap\u0131 ta\u015f\u0131<\/span><\/h3>\n<pre class=\"language-python line-numbers\"><code class=\"language-python\"># mime.types dosyan\u0131zda bu t\u00fcrler tan\u0131ml\u0131 de\u011filse ekleyin:\n# types {\n#     image\/avif avif;\n#     image\/webp webp;\n# }\n\n# 1) Accept'e g\u00f6re hedef uzant\u0131y\u0131 se\u00e7\nmap $http_accept $img_ext {\n    ~*image\/avif   &quot;.avif&quot;;\n    ~*image\/webp   &quot;.webp&quot;;\n    default        &quot;&quot;;\n}\n\n# 2) \u0130stekteki URI'dan uzant\u0131y\u0131 ay\u0131r\nmap $uri $no_ext {\n    ~^(.+).(?:jpe?g|png)$ $1;\n    default $uri;\n}\n\nserver {\n    # ...\n\n    location ~* .(?:jpe?g|png)$ {\n        add_header Vary Accept;\n        # \u00d6nce d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f varsa onu, yoksa orijinali g\u00f6nder\n        try_files $no_ext$img_ext $uri =404;\n    }\n}\n<\/code><\/pre>\n<p>Burada \u00fc\u00e7 k\u00fc\u00e7\u00fck sihir var. Birincisi AVIF\u2019i tercih ettik; \u00e7\u00fcnk\u00fc dosyalar genelde daha ufak oluyor, ama AVIF yoksa WebP\u2019ye d\u00fc\u015f\u00fcyor. \u0130kincisi, Accept\u2019e g\u00f6re se\u00e7imi map ile \u00fcstte yapt\u0131k, bu performansl\u0131 ve okunakl\u0131. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, cache\u2019lerin kar\u0131\u015fmamas\u0131 i\u00e7in Vary: Accept ekledik. Bu \u00fc\u00e7l\u00fcy\u00fc kurunca, ayn\u0131 URL\u2019den herkes kendi format\u0131na kavu\u015fuyor.<\/p>\n<p>\u00dcretimde bir defa \u015funa tak\u0131lm\u0131\u015ft\u0131m: Baz\u0131 CDN\u2019ler Accept\u2019e g\u00f6re otomatik vary\u2019lamaz; yani <strong>cache anahtar\u0131na Accept\u2019i siz dahil etmelisiniz<\/strong>. A\u015fa\u011f\u0131da CDN k\u0131sm\u0131nda bunu ayr\u0131ca konu\u015faca\u011f\u0131z. Bu Nginx kurgusunun g\u00fczelli\u011fi \u015fu; d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f dosya yoksa orijinali d\u00f6n\u00fcyor. Yani yar\u0131m kalm\u0131\u015f bir d\u00f6n\u00fc\u015f\u00fcm pipeline\u2019\u0131 y\u00fcz\u00fcnden g\u00f6rselin kaybolmas\u0131 zor.<\/p>\n<h3><span id=\"Gelistirirken_rahat_test\">Geli\u015ftirirken rahat test<\/span><\/h3>\n<p>Ben testleri genelde \u015fu k\u00fc\u00e7\u00fck komutlarla yap\u0131yorum. Basit ama etkili:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\"># AVIF isteyen bir istemci gibi davran\ncurl -I -H &quot;Accept: image\/avif&quot; https:\/\/site.com\/img\/hero.jpg\n\n# WebP isteyen bir istemci\ncurl -I -H &quot;Accept: image\/webp&quot; https:\/\/site.com\/img\/hero.jpg\n\n# Hi\u00e7bir \u015fey istemeyen (kendi haline b\u0131rak)\ncurl -I https:\/\/site.com\/img\/hero.jpg\n<\/code><\/pre>\n<p>Gelen Content-Type ve i\u00e7erik uzunlu\u011funa \u015f\u00f6yle bir bak\u0131yorum. Yanl\u0131\u015f varyant d\u00f6nerse hemen belli oluyor. E\u011fer \u00fcretimde d\u00f6n\u00fc\u015f\u00fcmleri otomatikle\u015ftirmek istiyorsan\u0131z, g\u00f6rsellerin nas\u0131l s\u0131raya girece\u011fini, hangi kaliteyle d\u00f6n\u00fc\u015ft\u00fcr\u00fclece\u011fini ve cache\u2019in nas\u0131l temizlenece\u011fini bir boru hatt\u0131na ba\u011flamak ak\u0131ll\u0131ca. Bunun \u00fcst\u00fcne konu\u015ftu\u011fum bir yaz\u0131y\u0131 da isterseniz bakabilirsiniz; <a href=\"https:\/\/www.dchost.com\/blog\/goruntu-optimizasyonu-boru-hatti-nasil-kurulur-avif-webp-origin-shield-ve-akilli-cache-key-ile-cdn-faturaniza-nefes-aldirin\/\" target=\"_blank\">AVIF\/WebP ile bir g\u00f6r\u00fcnt\u00fc optimizasyonu boru hatt\u0131 kurma<\/a> deneyimlerini orada toparlam\u0131\u015ft\u0131m.<\/p>\n<h2 id=\"section-4\"><span id=\"Apachehtaccess_ile_Donusum_Sefkatli_Rewrite_ve_Vary\">Apache\/.htaccess ile D\u00f6n\u00fc\u015f\u00fcm: \u015eefkatli Rewrite ve Vary<\/span><\/h2>\n<p>Apache taraf\u0131nda da yol benzer. mod_rewrite ile istek geldi\u011finde \u00f6nce d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f karde\u015fi ar\u0131yoruz, varsa ona y\u00f6nlendiriyoruz. Yine Accept\u2019e bak\u0131yor ve bir <strong>Vary: Accept<\/strong> ba\u015fl\u0131\u011f\u0131 ekleyerek cache\u2019lerin kar\u0131\u015fmas\u0131n\u0131 engelliyoruz.<\/p>\n<h3><span id=\"Apache_yapi_tasi\">Apache yap\u0131 ta\u015f\u0131<\/span><\/h3>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\"># mime t\u00fcrleri tan\u0131ml\u0131 de\u011filse ekleyin\nAddType image\/avif avif\nAddType image\/webp webp\n\n# cache'lere ipucu\nHeader merge Vary Accept\n\nRewriteEngine On\n\n# 1) AVIF varsa ve istemci AVIF kabul ediyorsa\nRewriteCond %{REQUEST_FILENAME} (.+).(?:jpe?g|png)$ [NC]\nRewriteCond %1.avif -f\nRewriteCond %{HTTP_ACCEPT} &quot;image\/avif&quot; [NC]\nRewriteRule ^ %1.avif [L]\n\n# 2) WebP varsa ve istemci WebP kabul ediyorsa\nRewriteCond %{REQUEST_FILENAME} (.+).(?:jpe?g|png)$ [NC]\nRewriteCond %1.webp -f\nRewriteCond %{HTTP_ACCEPT} &quot;image\/webp&quot; [NC]\nRewriteRule ^ %1.webp [L]\n\n# 3) Aksi halde orijinal dosyaya izin ver (varsay\u0131lan ak\u0131\u015f)\n<\/code><\/pre>\n<p>Burada \u00f6zel bir nokta var: \u201cDosya var m\u0131?\u201d kontrol\u00fc. B\u00f6ylece d\u00f6n\u00fc\u015ft\u00fcrme pipeline\u2019\u0131 yeti\u015fmediyse kullan\u0131c\u0131y\u0131 bo\u015fa bekletmiyoruz. Bir kez buna dikkat etmeyi unuttum; istekler 404\u2019e d\u00fc\u015ft\u00fc, izleme ekran\u0131nda k\u0131rm\u0131z\u0131 bir dalga g\u00f6rd\u00fcm. Basit bir <em>-f<\/em> ko\u015fuluyla mesele bitti.<\/p>\n<p>Apache\u2019de mod_headers ile Vary\u2019\u0131 netle\u015ftirmek iyi bir al\u0131\u015fkanl\u0131k. Ayr\u0131ca <em>KeepAlive<\/em> ve s\u0131k\u0131\u015ft\u0131rma ayarlar\u0131 zaten varsa, g\u00f6rsellerde ekstra bir \u015fey yapmaya gerek yok. As\u0131l kazan\u00e7 do\u011fru format, do\u011fru cache anahtar\u0131 ve k\u0131r\u0131lmayan URL mant\u0131\u011f\u0131nda.<\/p>\n<h2 id=\"section-5\"><span id=\"CDN_ile_Baris_Cache-Key_Origin_Shield_ve_Yanlis_Varyantlarin_Sessiz_Talani\">CDN ile Bar\u0131\u015f: Cache-Key, Origin Shield ve Yanl\u0131\u015f Varyantlar\u0131n Sessiz Talan\u0131<\/span><\/h2>\n<p>CDN i\u015fin tatl\u0131 ama hassas taraf\u0131. Lokasyon yak\u0131nl\u0131\u011f\u0131, h\u0131z ve trafik maliyeti derken herkesi mutlu ediyor. Fakat Accept\u2019e g\u00f6re farkl\u0131 dosya d\u00f6nd\u00fcr\u00fcyorsan\u0131z, CDN\u2019in cache anahtar\u0131na Accept\u2019i dahil etmesi \u015fart. Aksi halde bir lokasyonda WebP olarak saklanan g\u00f6rsel, AVIF isteyenlere de aynen gidebiliyor. Sonra Safari\u2019de bo\u015f kutu, Chrome\u2019da p\u0131r\u0131l p\u0131r\u0131l g\u00f6rsel gibi tats\u0131z s\u00fcrprizler oluyor.<\/p>\n<p>Genelde yap\u0131lmas\u0131 gereken iki \u015fey var. Birincisi <strong>origin cevab\u0131na Vary: Accept eklemek<\/strong>. \u0130kincisi CDN taraf\u0131nda \u201ccache key\u2019e Accept\u2019i ekle\u201d demek. Baz\u0131 CDN\u2019lerde bu, header bazl\u0131 vary ayar\u0131yla \u00e7\u00f6z\u00fcl\u00fcyor. Baz\u0131lar\u0131nda <em>custom cache key<\/em> kural\u0131na Accept\u2019i koyuyorsunuz. Nginx ve Apache \u00f6rneklerinde Vary\u2019\u0131 eklemi\u015ftik; CDN bunu g\u00f6r\u00fcrse \u00e7o\u011fu zaman do\u011fru anahtar\u0131 kurar, g\u00f6rmezse siz yine UI ya da kural setiyle dahil edersiniz.<\/p>\n<p>Bir projede \u015funu ya\u015fad\u0131m: CDN, Accept\u2019in her farkl\u0131 kombinasyonu i\u00e7in bamba\u015fka cache anahtar\u0131 \u00fcretti ve cache par\u00e7aland\u0131. Basit bir \u00e7\u00f6z\u00fcm, sunucuda Accept\u2019i \u201cAVIF varsa AVIF, yoksa WebP, yoksa bo\u015f\u201d gibi mant\u0131ksal bir <em>map<\/em> ile tek tipe indirip Vary\u2019\u0131 yine de eklemek. B\u00f6ylece anahtar say\u0131s\u0131 kontrol alt\u0131nda kal\u0131yor. Nginx\u2019teki <em>map<\/em> bu y\u00fczden ho\u015fuma gidiyor; Accept ne kadar kalabal\u0131k gelirse gelsin, bizim g\u00f6z\u00fcm\u00fczde iki varyant var: AVIF veya WebP. Gerisi orijinal.<\/p>\n<p>CDN taraf\u0131nda <strong>Origin Shield<\/strong> kullan\u0131yorsan\u0131z, ilk istekler origin\u2019e daha az y\u00fck bindirir. Bir de ak\u0131ll\u0131 invalidation yapman\u0131z\u0131 \u00f6neririm. Yeni bir AVIF yay\u0131mlad\u0131ysan\u0131z, ilgili URL\u2019leri hedef alan k\u00fc\u00e7\u00fck bir temizleme i\u015flemi \u00e7ok i\u015f g\u00f6r\u00fcyor. Detayl\u0131 d\u00fc\u015f\u00fcnmek isterseniz, bu konuyu bir t\u00fcr hikaye tad\u0131nda anlatt\u0131\u011f\u0131m yaz\u0131y\u0131 \u00f6nerebilirim: <a href=\"https:\/\/www.dchost.com\/blog\/goruntu-optimizasyonu-boru-hatti-nasil-kurulur-avif-webp-origin-shield-ve-akilli-cache-key-ile-cdn-faturaniza-nefes-aldirin\/\" target=\"_blank\">Origin Shield ve ak\u0131ll\u0131 cache anahtar\u0131yla nefes alan bir CDN faturas\u0131<\/a>.<\/p>\n<p>Son bir not: Baz\u0131 CDN\u2019ler Accept yerine <em>Client-Hints<\/em> ba\u015fl\u0131klar\u0131yla (\u00f6rne\u011fin <em>Sec-CH<\/em> ailesi) vary ayar\u0131 yapman\u0131z\u0131 da destekler. Bu yaz\u0131da Accept \u00fczerinden gidiyoruz \u00e7\u00fcnk\u00fc her yerde \u00e7al\u0131\u015f\u0131yor ve kafa kar\u0131\u015ft\u0131rm\u0131yor. E\u011fer UI\u2019de \u201cHeader\u2019a g\u00f6re vary\u201d diye bir ayar g\u00f6r\u00fcrseniz, g\u00f6n\u00fcl rahatl\u0131\u011f\u0131yla Accept\u2019i i\u015faretleyin.<\/p>\n<h2 id=\"section-6\"><span id=\"SEO_ile_Dost_URLleri_Bozmadan_Donusturmenin_Zarif_Yollari\">SEO ile Dost: URL\u2019leri Bozmadan D\u00f6n\u00fc\u015ft\u00fcrmenin Zarif Yollar\u0131<\/span><\/h2>\n<p>G\u00f6rsel performans\u0131 bir yana, SEO s\u00f6z konusu oldu\u011funda iki \u015feye dikkat ediyorum: URL istikrar\u0131 ve eri\u015filebilirlik. URL\u2019yi de\u011fi\u015ftirmeden, ayn\u0131 yol \u00fczerinden sadece format\u0131 ak\u0131ll\u0131ca se\u00e7mek hem payla\u015f\u0131mlar\u0131 hem de \u00f6nbellekleri rahat ettiriyor. Bir de <strong>alt<\/strong> metinleri, boyut bilgisi ve lazy-load gibi g\u00fcnl\u00fck al\u0131\u015fkanl\u0131klar var; bunlar ayr\u0131 ayr\u0131 minik ama birle\u015fince etkisi b\u00fcy\u00fck.<\/p>\n<p>Ben \u015fu iki yakla\u015f\u0131m\u0131 seviyorum. Birincisi bu yaz\u0131daki sunucu taraf\u0131 i\u00e7erik pazarl\u0131\u011f\u0131: Ayn\u0131 URL, farkl\u0131 Content-Type. \u0130kincisi, HTML\u2019de <strong>&lt;picture&gt;<\/strong> elementiyle a\u00e7\u0131k\u00e7a \u201c\u00f6nce AVIF, olmazsa WebP, o da olmazsa JPEG\u201d demek. \u0130kisini birlikte kullanmak da m\u00fcmk\u00fcn, ama \u00e7o\u011fu projede biri yeterli oluyor. <em>Picture<\/em> yakla\u015f\u0131m\u0131, front-end \u00fczerinde daha g\u00f6r\u00fcn\u00fcr ve kontrol edilebilir.<\/p>\n<h3><span id=\"Picture_ile_kibarca_bildirmek\">Picture ile kibarca bildirmek<\/span><\/h3>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">&lt;picture&gt;\n  &lt;source srcset=&quot;\/images\/hero.avif&quot; type=&quot;image\/avif&quot;&gt;\n  &lt;source srcset=&quot;\/images\/hero.webp&quot; type=&quot;image\/webp&quot;&gt;\n  &lt;img src=&quot;\/images\/hero.jpg&quot; alt=&quot;\u00dcr\u00fcn\u00fcn \u00f6n y\u00fcz\u00fcn\u00fc g\u00f6steren kahraman g\u00f6rseli&quot; width=&quot;1200&quot; height=&quot;800&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;\n&lt;\/picture&gt;\n<\/code><\/pre>\n<p>Bu y\u00f6ntemin g\u00fczelli\u011fi, taray\u0131c\u0131n\u0131n kendi maharetini kullanmas\u0131. Ayr\u0131ca width\/height verdi\u011finiz i\u00e7in layout kaymas\u0131 azal\u0131yor. Lazy-load ve decoding ipu\u00e7lar\u0131yla da sayfa ak\u0131\u015f\u0131n\u0131 rahatlat\u0131yorsunuz. G\u00f6rsellerin ke\u015ffi ve arama motoru taraf\u0131ndaki ipu\u00e7lar\u0131 i\u00e7in \u015fu rehber ho\u015f bir \u00f6zet sunar: <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/images\/optimize-images\" rel=\"noopener nofollow\" target=\"_blank\">image SEO i\u00e7in pratik \u00f6neriler<\/a>.<\/p>\n<p>Sunucu taraf\u0131 i\u00e7erik pazarl\u0131\u011f\u0131nda ise <strong>Content-Type<\/strong>\u2019\u0131n do\u011fru d\u00f6nmesi ve Vary\u2019\u0131n net olmas\u0131 yeterli. URL de\u011fi\u015fmedi\u011finden payla\u015f\u0131mlarla aras\u0131 iyi olur, y\u00f6nlendirme trafi\u011fi azalt\u0131l\u0131r. Kaynak haritas\u0131, site haritas\u0131 gibi dosyalarda da ekstra bir \u015fey yapmaya gerek kalmaz. Ben ek olarak, g\u00f6rselleri d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken orijinali sakl\u0131 tutmay\u0131 seviyorum; beklenmedik bir taray\u0131c\u0131 davran\u0131\u015f\u0131nda geri ad\u0131m atmak daha kolay.<\/p>\n<h2 id=\"section-7\"><span id=\"Test_Saha_Denemesi_ve_Loglardan_Kucuk_Ipuclari\">Test, Saha Denemesi ve Log\u2019lardan K\u00fc\u00e7\u00fck \u0130pu\u00e7lar\u0131<\/span><\/h2>\n<p>Teoride her \u015fey g\u00fczel ama \u00fcretimde beklenmedik detaylar \u00e7\u0131kar. Mesela baz\u0131 eski taray\u0131c\u0131lar Accept\u2019i eksik g\u00f6nderir ya da ara bir proxy bu ba\u015fl\u0131\u011f\u0131 budar. O y\u00fczden ben \u201cher ko\u015fulda orijinale d\u00fc\u015f\u201d \u015feridini hep a\u00e7\u0131k b\u0131rak\u0131yorum. Yani d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f yoksa orijinal var. Bu yakla\u015f\u0131m y\u00fcz\u00fcnden performanstan \u00f6d\u00fcn vermiyorum; \u00e7\u00fcnk\u00fc \u00e7o\u011funluk zaten AVIF\/WebP al\u0131yor, kalan az\u0131nl\u0131k ise sorunsuz g\u00f6r\u00fcnt\u00fc g\u00f6r\u00fcyor.<\/p>\n<p>Bir di\u011fer pratik, log\u2019lara k\u0131sa bir s\u00fcre daha fazla bakmak. Accept ba\u015fl\u0131klar\u0131 g\u00f6zlemlendi\u011finde, hangi format\u0131n ne kadar kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcrs\u00fcn\u00fcz. E\u011fer log tutmay\u0131 seviyorsan\u0131z, bunu bir s\u00fcre panoda izlemek ak\u0131ll\u0131ca oluyor. Ben bu i\u015f i\u00e7in merkezi loglama kurulumuna g\u00fcveniyorum; <a href=\"https:\/\/www.dchost.com\/blog\/vps-log-yonetimi-nasil-rayina-oturur-grafana-loki-promtail-ile-merkezi-loglama-tutma-sureleri-ve-alarm-kurallari\/\" target=\"_blank\">Loki + Promtail ile merkezi loglamay\u0131 kurdu\u011fum yaz\u0131da<\/a> basit ve hafif bir yakla\u015f\u0131m\u0131 anlatm\u0131\u015ft\u0131m. G\u00f6rsel format kabul oranlar\u0131n\u0131 bir grafi\u011fe d\u00f6k\u00fcnce, d\u00f6n\u00fc\u015f\u00fcm stratejisini ayarlamak \u00e7ok kolayla\u015f\u0131yor.<\/p>\n<p>Canl\u0131ya al\u0131rken s\u0131f\u0131r kesinti prensibi de hayat kurtar\u0131yor. Nginx\/Apache konfig\u00fcrasyonu bir kerede de\u011fil, k\u00fc\u00e7\u00fck ad\u0131mlarla a\u00e7mak iyi fikir. Mesela \u00f6nce sadece AVIF \u00fcretimi olan birka\u00e7 klas\u00f6rde pazarl\u0131\u011f\u0131 etkinle\u015ftirip izleyin, sonra t\u00fcm g\u00f6rsellere geni\u015fletin. B\u00f6ylece yanl\u0131\u015f bir <em>rewrite<\/em> hatas\u0131 varsa etkisi s\u0131n\u0131rl\u0131 kal\u0131r. Bu bak\u0131\u015f a\u00e7\u0131s\u0131n\u0131 bir ba\u015fka yaz\u0131da, servisleri nas\u0131l sakin sakin canl\u0131ya ald\u0131\u011f\u0131m\u0131z\u0131 anlat\u0131rken de i\u015flemi\u015ftim; merak ederseniz <a href=\"https:\/\/www.dchost.com\/blog\/node-jsi-canliya-alirken-panik-yapma-pm2-systemd-nginx-ssl-ve-sifir-kesinti-deploy-nasil-kurulur\/\" target=\"_blank\">s\u0131f\u0131r kesinti deploy \u00fczerine notlar<\/a> ho\u015funuza gidebilir.<\/p>\n<p>Bir WordPress sitesinde bunu uygulad\u0131\u011f\u0131mda, Docker ile kurdu\u011fum Nginx\u2019in i\u00e7inde sadece k\u00fc\u00e7\u00fck bir <em>map + try_files<\/em> eklemek yetti. G\u00f6rselleri d\u00f6n\u00fc\u015ft\u00fcrmeyi ayr\u0131 bir container\u2019a verdi\u011fim i\u00e7in web katman\u0131 hi\u00e7 yorulmad\u0131. Benzer bir d\u00fczende ilerlemek isterseniz, <a href=\"https:\/\/www.dchost.com\/blog\/docker-ile-wordpressi-vpste-nasil-yasatiriz-nginx-mariadb-redis-ve-lets-encrypt-ile-kalici-depolama-macerasi\/\" target=\"_blank\">WordPress\u2019i VPS\u2019te Docker ile ya\u015fatma maceras\u0131<\/a> yaz\u0131s\u0131nda basit bir \u00e7er\u00e7eve \u00e7izmi\u015ftim.<\/p>\n<h2 id=\"section-8\"><span id=\"Kucuk_Tuzaklar_Yanlis_Content-Type_406lar_ve_Karisan_Cacheler\">K\u00fc\u00e7\u00fck Tuzaklar: Yanl\u0131\u015f Content-Type, 406\u2019lar ve Kar\u0131\u015fan Cache\u2019ler<\/span><\/h2>\n<p>En s\u0131k g\u00f6rd\u00fc\u011f\u00fcm tuzaklardan biri, dosyay\u0131 AVIF olarak d\u00f6nd\u00fcr\u00fcp Content-Type\u2019\u0131 image\/jpeg b\u0131rakmak. Taray\u0131c\u0131 kafas\u0131 kar\u0131\u015f\u0131nca g\u00f6rseli bazen hi\u00e7 a\u00e7m\u0131yor, bazen de hatal\u0131 davran\u0131yor. O y\u00fczden mime t\u00fcrlerini Nginx\/Apache taraf\u0131nda tan\u0131ml\u0131 tuttu\u011funuzdan emin olun. Nginx\u2019te bu <em>mime.types<\/em> dosyas\u0131na bakar; Apache\u2019de AddType ile ekledik. K\u0131sa ve net.<\/p>\n<p>\u0130kinci tuzak, Accept\u2019e uymayan 406 Not Acceptable gibi yan\u0131tlarla kullan\u0131c\u0131y\u0131 \u00fczmek. Bence hi\u00e7 gerek yok. Her zaman bir <strong>orijinal format<\/strong> emniyet kemeri kals\u0131n. \u201cAVIF yoksa WebP, o da yoksa JPEG\u201d \u00fc\u00e7l\u00fcs\u00fc g\u00fcvenli ve pratik. Sahnede hata yoksa kullan\u0131c\u0131 da hata g\u00f6rmez.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc tuzak, CDN cache anahtar\u0131nda Accept\u2019i unutmak. Bunu \u00e7\u00f6zmek i\u00e7in hem <strong>Vary: Accept<\/strong> verin, hem de CDN taraf\u0131nda explicit bir kural yaz\u0131n. Baz\u0131 panellerde \u201cCache by header\u201d ya da \u201cIgnore\/Include headers\u201d \u015femalar\u0131 vard\u0131r. Oraya Accept\u2019i ekleyince i\u015f biter. Nginx taraf\u0131ndaki <em>map<\/em> ile Accept\u2019i \u00fc\u00e7 varyanta indirmeniz de cache\u2019in par\u00e7alanmas\u0131n\u0131 engeller. Nginx\u2019in map davran\u0131\u015f\u0131yla ilgili orijinal d\u00f6k\u00fcmana g\u00f6z atmak isteyenler i\u00e7in: <a href=\"https:\/\/nginx.org\/en\/docs\/http\/ngx_http_map_module.html\" rel=\"noopener nofollow\" target=\"_blank\">ngx_http_map_module<\/a>.<\/p>\n<p>D\u00f6rd\u00fcnc\u00fc tuzak, d\u00f6n\u00fc\u015f\u00fcm\u00fc anl\u0131k yapmak. \u0130lk bak\u0131\u015fta pratik g\u00f6r\u00fcn\u00fcr ama anl\u0131k AVIF \u00fcretimi yo\u011fun trafikte CPU\u2019yu yorabiliyor. Ben genelde bir s\u0131ra ve i\u015fleyiciyle, g\u00f6rselleri arka planda d\u00f6n\u00fc\u015ft\u00fcr\u00fcp haz\u0131r ettiriyorum. B\u00f6ylece web katman\u0131 sadece dosya se\u00e7iyor, d\u00f6n\u00fc\u015ft\u00fcrm\u00fcyor. Zaten bu sayede k\u0131r\u0131lma riski azal\u0131yor, pageload s\u00fcreleri daha istikrarl\u0131 kal\u0131yor.<\/p>\n<h2 id=\"section-9\"><span id=\"Kapanis_Zarif_Bir_Anlasma_Daha_Hizli_Bir_Dunya\">Kapan\u0131\u015f: Zarif Bir Anla\u015fma, Daha H\u0131zl\u0131 Bir D\u00fcnya<\/span><\/h2>\n<p>WebP\/AVIF\u2019i k\u0131rmadan sunmak, asl\u0131nda k\u00fc\u00e7\u00fck kararlar\u0131n uyumuyla m\u00fcmk\u00fcn oluyor. Taray\u0131c\u0131yla i\u00e7erik pazarl\u0131\u011f\u0131 yap, Nginx\/Apache\u2019de basit ve g\u00fcvenli bir <em>rewrite<\/em> kur, CDN cache anahtar\u0131na Accept\u2019i ekle ve SEO taraf\u0131nda URL istikrar\u0131n\u0131 koru. Hepsi bir arada olunca, ayn\u0131 URL\u2019den herkes kendi format\u0131n\u0131 al\u0131yor ve performans ivmesi hissedilir hale geliyor.<\/p>\n<p>Pratik bir yol haritas\u0131 \u015f\u00f6yle \u00f6zetlenebilir: \u00d6nce d\u00f6n\u00fc\u015ft\u00fcrme hatt\u0131n\u0131 kurup g\u00f6rselleri AVIF\/WebP olarak haz\u0131rlay\u0131n. Nginx\/Apache\u2019de <strong>map + try_files<\/strong> ya da <strong>RewriteCond + -f<\/strong> ile k\u0131r\u0131lmayan bir ge\u00e7i\u015f olu\u015fturun. <strong>Vary: Accept<\/strong> eklemeyi unutmay\u0131n ve CDN\u2019de cache anahtar\u0131n\u0131 Accept\u2019e g\u00f6re ayarlay\u0131n. HTML taraf\u0131nda isterseniz <strong>&lt;picture&gt;<\/strong> kullanarak ekstra kontrol sa\u011flay\u0131n. Canl\u0131da k\u00fc\u00e7\u00fck bir trafik y\u00fczdesiyle deneyip, log\u2019larda kabul oranlar\u0131n\u0131 takip edin. Birka\u00e7 g\u00fcn sab\u0131rla izledi\u011finizde zaten do\u011fru ayarlar kendini belli ediyor.<\/p>\n<p>Umar\u0131m bu yolculuk size fikir vermi\u015ftir. E\u011fer kafan\u0131za tak\u0131lan noktalar olursa not al\u0131n, bir sonraki bak\u0131m penceresinde ufak ufak deneyin. Bu konular\u0131n \u00e7o\u011fu k\u00fc\u00e7\u00fck dokunu\u015flarla ray\u0131na oturuyor. Benzer tempoda, TLS ayarlar\u0131ndan Nginx disiplinine kadar pek \u00e7ok ba\u015fl\u0131k \u00fczerine konu\u015ftu\u011fumuz yaz\u0131lar\u0131 da seviyorsan\u0131z, arada bir u\u011fray\u0131n. \u015eimdilik benden bu kadar; umar\u0131m sitenizdeki g\u00f6rseller, kimseyi k\u0131rmadan en h\u0131zl\u0131 haliyle par\u0131ldar. Bir dahaki yaz\u0131da g\u00f6r\u00fc\u015fmek \u00fczere.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0130&ccedil;indekiler1 Bir G\u00f6rsel Y\u00fcz\u00fcnden Kopan F\u0131rt\u0131na: Hi\u00e7 Ba\u015f\u0131n\u0131za Geldi mi?2 \u0130\u00e7erik Pazarl\u0131\u011f\u0131 Nedir ve Neden Bu Kadar \u00d6nemli?3 Nginx ile K\u0131rmadan D\u00f6n\u00fc\u015f\u00fcm: Map, Try_Files ve Vary\u2019\u0131n Sessiz Uyumu3.1 Nginx yap\u0131 ta\u015f\u01313.2 Geli\u015ftirirken rahat test4 Apache\/.htaccess ile D\u00f6n\u00fc\u015f\u00fcm: \u015eefkatli Rewrite ve Vary4.1 Apache yap\u0131 ta\u015f\u01315 CDN ile Bar\u0131\u015f: Cache-Key, Origin Shield ve Yanl\u0131\u015f Varyantlar\u0131n Sessiz Talan\u01316 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1602,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1601","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\/1601","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=1601"}],"version-history":[{"count":0,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/1601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media\/1602"}],"wp:attachment":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media?parent=1601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/categories?post=1601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/tags?post=1601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}