Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Nedir Bu Cookie-Free Domain? Ne İşe Yarar

Bu makale size faydalı oldu mu? Yada Kısaca Düşünceleriniz?

  • İçerik olarak gelişmeli

  • Denemeden bilemedim!

  • Uygulama konusunda yol gösterici...


Sonuçlar yalnızca oylamadan sonra görülebilir.

XDinc

xFanatik
Kullanıcı
Katılım
28 Ara 2016
Mesajlar
117
Bir web sitesi yaparken artık dış güzelliği ve yazılım başarısı kadar, alt yapı kurulumu ve daha bir çok etmen önemli rol oynamakta.
Özellikle web sitesini yaptıktan sonra “nasıl olmuş” diye ölçümlemek için kullanabileceğimiz bir çok tool var.

Bunlardan önde geleni GTMetrix dediğimiz ücretsiz tool. Oldukça başarılı sonuçlar sunabiliyor. Bende uzun zamandır bu tool ile geliştirdiğim web sitelerini kontrol ediyor ve optimize ediyorum. İyi bir web sitesi için yapılması gereken bir çok alt yapı çalışması var. Yani tasarımı çok güzel yaptık, css dosyamızı inci gibi dizdik, müthiş kod yazdık, veritabanı desen mühendislik ötesi, site takır takır çalışıyor.

Hatta günde 1 milyon ziyaretçi kaldırıyor, çünkü dehşetül vahşet bir sunucuda barındırdık. Peki yeter mi? İşte bugünün anahtarı Cookie Free Domain oluşturmak.


İşiniz için bir web sitesi yapıyorsanız her şey de maliyetinizi kısmanız gerekiyor. Mesela, büyük boyutlu imajlar yerine compress edilmiş uygun imajlar kullanmak, gzip aktif etmek, daha az kod yazmak gibi yapacağınız bir çok ince işçilik ile belki her ay ödediğiniz server masrafından 30$ ile 50$ arasında tasarruf etme şansınız var demektir. Bu da bir siteden reklam aracılığı ile para kazanıyorsanız iyi bir tasarruf sağlayacaktır.

Zaman buldukça GTMetrix ölçümlemelerime ne tür optimizasyonlar ile destek verdiğimiz yazacağım. Yani nasıl score yükseltirsiniz ve nasıl hem tasarruflu hemde performanslı çalışan bir web sitesi yaparsınız bunları anlatacağım. Tabi kısa vadede olacak bir şey değil bu O yüzden takipte kalın.


ySlow Score Nedir ?
ySlow bölümü altında bir çok başlık görüyorsunuzdur. Genel olarak sunucu-istemci arasında ki ilişkiyi irdeleyen bir bölüm. Ne tür bir bağlantı yapıldığı, bu bağlantıdan gelen trafiğin analizi, hızı, istek adedi gibi bir çok parametreyi inceliyor. Bugün bu parametrelerden en zor çözümleneni olan Cookie Free Domain / Çeresiz Domain kullanımı nasıl en basit ve maliyetsiz yoldan çözeceğinizi kısaca anlatacağım. Bildiğiniz gibi GTMetrix bunun için CDN kullanmanızı, statik içeriklerinizi buradan servis etmenizi söylüyor. Fakat iyi bir CDN için yinede aylık maliyetleriniz bulunuyor.

Amaç neydi? Tasarruf yapmak ekonomik kriz kafası...

GTMetrix üzerinden ySlow analizi yaparak konumuza dönelim.
Karşımızda ilk kırmızı uyarımızı cookie-free den alıyoruz.

1542656336574.png

Cookie-Free Domain Nedir ?
Her dinamik alt yapılı (IIS, Apache vb) web sunucu otomatik olarak state için cookie bırakır. Haliyle bu cookie’ler analiz araçları tarafından hoş karşılanmaz. Analiz araçları ySlow arttırımı için bu tip statik içeriklerinizi (css, js, jpg, png vb) cookie free yani çeresiz bir alandan servis etmenizi ister. Bu noktada bir çok geliştirici nasıl yapacağını bilmez. Bunun sebebi, çözümü bulabilmek için IIS, Apache gibi yapıları bilmek, biraz network konusuna hakim olmak gerekliliğidir. Haliyle bir çok yazılımcı, tasarımcı yada ne derseniz webmaster kişiler bu sorunu çözmek için analiz araçlarının yönlendirmelerine güvenir. Haliyle tasarruf kayıplı gerçekleşir

Gelelim kendimiz nasıl cookie-free domain yapacağımıza???

CDN miz var mı yok? :)...


Öncelikle web siteniz domain.com olsun, bu domainin altında bir subdomain açıyoruz ve adını static olarak ayarlıyoruz.
Subdomainimiz; static.domain.com olacak, bu tür bir isim seçmemizin sebebi, analiz araçlarının bu isimleri daha rahat tanıması içindir. Daha sonra açtığınız bu subdomainin yazılım desteği bölümünde bulunan asp, asp.net, php gibi tüm yazılım desteğini kapatıyoruz.


1542656344406.png

Bildiğiniz düz HTML servis edebilen bir subdomain hostingimiz olmalı. Çünkü bu tür alt yapılar otomatik olarak bir state oluşturur, bu state de bir cookie dir. Haliyle analiz araçları bu state’lere karşı alerji sahibidir.

1542656352395.png

Tüm statik dosyalarımızı bu alana taşıyoruz. Tüm dosya türleri için şöyle bir liste verelim;

  • Tüm İmaj Türleri – png, gif, jpg
  • CSS Dosyaları
  • favicon.ico Dosyaları
  • JS – JavaScript Dosyaları
Bundan sonra ilgili tüm dosyaları açtığımız bu subdomain üzerinden çağırıyoruz.

Örnek verecek olursak,

1542656361153.png

Kod:
<img src=”http://static.domain.com/images/test.png” alt=”test” />

<link rel=”stylesheet” href=”http://static.domain.com/css/jquery.min.css” />

Analytics Kullanıcılarına Önemli Not:
Analytics ile ölçümleme yapıyorsanız, değiştirmeniz gereken ufak bir nokta var. Analytics, otomizasyonu gereği tüm alt domainlerinizi otomatik olarak cookie’ler. Haliyle ona sadece ana domaininizi cookilemesi gerektiğini belirtmelisiniz. Aşağıda standart bir analytics kodu var. Burada ga() fonksiyonu içinde ki ‘auto’ dan sonra eklemeniz gereken parametre şudur: {‘legacyCookieDomain’: ‘www.domain.com’}

Bu parametreye mutlaka www ön ekini koymalısınız.

Örnek:

Kod:
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXX', {'cookieDomain': 'www.domain.com'});
    ga('send', 'pageview');
</script>

Yapmanız gereken bu kadar. En basit yöntemiyle cookie-free domaini bu şekilde oluşturabilirsiniz. Yalnız önemli bir not verelim, alt yapınızda asp, asp.net, php vb yazılım desteklerini kapatmadan bu subdomaini tarayıcınız ile ziyaret etmeyin.

Windows Sunucu Kullanlara Özel web.config Ayarları
Windows sunucu kullanıyorsanız statik alanı altında mutlaka ana dizine aşağıda ki web.config dosyasını oluşturmanızı öneririm. İçerisinde gzip, cache, cookie state set ayarları hazırladım.

Kod:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.web>
        <sessionState mode="InProc" timeout ="60" cookieless="false"></sessionState>
    </system.web>

    <system.webServer>

        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="8.00:00:00" />
        </staticContent>

        <caching>
            <profiles>
                <add extension=".jpg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
                <add extension=".jpeg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
                <add extension=".png" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
                <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
                <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
            </profiles>
        </caching>

        <urlCompression doDynamicCompression="true" />

    </system.webServer>
</configuration>

XenForo İçin Yapılandırma

Şuana kadar adım adım yaptıklarımız aslında kullandığımız script iyileştirmelerine henüz yansımadı peki neden?
Config dosyamızda cookie domain için external hizmet belirtmedik.

Kod:
$config['externalDataUrl'] = 'https://static.xxx.com/data';
$config['javaScriptUrl'] = 'https://static.xxx.com/js';

Bu kodun değişik versiyonlarını internette bulabilirsiniz. Kullandığınız sunucu modüllerine göre değişir.


Gelelim sonuca!
Neden daha iyi olmasın?

1542656379183.png

Umarım tüm arkadaşlara faydalı olur.
Bir sonraki konumuz Minify JavaScript işlemleri olacak.
Keyifle kalın.
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.