GTMetrix: Web Sitesi Performans Arttırımı İçin Cookie Free Domain Ayarlamak

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. Tabii 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 ama suyunu çıkartmadan 🙂

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.

Ö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. 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 🙂

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

<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.

<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.

<?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>

Yazar: Anthony Burak DURSUN

Adjans Digital Agency CEO, Gömülü sistemler, yazılım, fotoğraf çekmek, tasarım, teknoloji konularına hisli, evli, 4 kedi babası, asabi, anksiyetik bir kişi. Tekrarlayan şeyleri sevmez, her an her şey hakkında yazabilir, konuşabilir. Önceki hayatında marangoz olduğunu düşünüyor.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir