Site Açılış Süresini Optimize Edin – Extreme SEO

Bir internet kullanıcısı, adres çubuğuna bir web sitesi adresini yazıp enterladığı anda, 3 adımda gerçekleşen bir olay zinciri tetiklenir. Sitenin, sunucu üzerinden son kullanıcıya servis edilmesi (sitenin açılması) için bir takım bağlantı protollerinin kurulması gerekir ve bağlantılar oluşturulduktan sonra veri aktarımı başlar, yani site internet tarayıcısında görüntülenmeye başlar. Enter tuşuna basıp kullanıcıdan gönderilen sorguya verilen ilk yanıt arasında geçen süreye round-trip times (makalemde bundan sonra RTT olarak kısaltacağım) denilmekte ve http’nin response ettiği ilk byte’lık datanın alımına kadar da sürer. İnternet teknolojilerinde RTT terimini, bir ping süresi olarak da düşünebilirsiniz. Bir çok web sitesinin açılması için düzinelerce RTT’ye ihtiyaç vardır. Fakat daha önce burada gelen ilk RTT’lerden biraz bahsetmek istiyorum.

İlk RTT DNS çözümlemesi için kullanılır, 2inci RTT bir TCP bağlantısının kurulması için ve 3üncüsü bir http üzerinden yapılan istek ve buna verilen yanıtta kullanılır. 3üncü RTT, http’den alınan ilk byte’lık datanın alımına kadar sürer. Şu aşamada TCP’nin ve RTT ne olduğu anlamamız gerekiyor. Kısaca:

Bilgisayarlar ile veri iletme/alma birimleri arasında organizasyonu sağlayan, böylece bir yerden diğerine veri iletişimini olanaklı kılan pek çok veri iletişim protokolüne verilen genel addır. (Yani, TCP/IP protokolleri bilgisayarlar arası veri iletişiminin kurallarını koyar). Bu protokollere örnek olarak, dosya alma/gönderme protokolü FTP (File Transfer Protocol), elektronik posta iletişim protokolü SMTP (Simple Mail Transfer Protocol), TELNET protokolü (Internet üzerindeki başka bir bilgisayarda etkileşimli çalışma için geliştirilen *login* protokolü) verilebilir.

TCP hakkında daha fazla bilgi için ise TCP/IP Protokolü Nedir yazısından faydalanabilirsiniz.

RTT süresi bir LAN (Local Area Network) ortamında genelde 1ms‘den daha kısa sürer. Fakat bazı durumlarda 1sn’nin üzerine çıkabiliyor. Bu duruma örnek olarak, bir istemci modemin yer aldığı kıta ile talep edilen dataları servis eden server’ının başka bir kıtada yer alması olabilir…

Bu yüzden RTT sürelerini kısa tutmamızda yarar var. Ayrıca istemciye gönderilecek dataların aktarımını ne kadar çok fazla paralel hat üzerinden gerçekleştirirseniz, sitenizin kullanıcı tarafında olan load time değerini düşürebilirsiniz. Bu bağlamda en ucuz ve pratik olan çözüm, bir subdomaininizi cname olarak tanımlayıp resim, sitil ve(ya) javascriptleri bu kanallardan yükletmektir.

Burada dikkat etmeniz gereken nokta, bazı durumlarda bir cname üzerinden 25-30’un üzerinde bir yükleme oluşturmanız, iyileştirmeden çok kötüleştirme (veya nötr bir durum) yapabiliyor. Örneğin sitenizin açılması için bir istemci 240 http isteğinde bulunuyor ve siz bunun 40’ını ana domain, 200’ünü de tek bir cname üzerinden yapıyorsanız çok da fazla yararlı olmayacaktır. Çünkü tarayıcı sadece 80 talebi paralel olarak yükleyecak, kalan 160 isteği tek bir hat üzerinden yüklemeye devam edecektir. Bu gibi durumlarda sitenize ait dosyaları (resim, javascript kütüphaneleri, sitil dosyaları vb.) çok iyi bir şekilde organize etmek ve ihtiyaç halinde cname’lerinizi de artırmanız gerekebilir. Paralel hatları artırarak bu sorunu çözümlemiş olursunuz. Profesyonel anlamda ise alternatif olarak CDN servislerini kullanılabilirsiniz, fakat biraz bütçeli bir mevzudur 🙂 Testlerinizi yaparken türk telekom faktörünü de göz önünde bulundurmanız faydalı olacaktır 🙂

Site Yüklenme Süresi ve Analiz
Site Yüklenme Süresi ve Analiz

RTT Sürelerini Kısaltmak?

RTT sürelerini kısaltmak için bir takım iyileştirme çalışmaları yapılabilir. Bu konuda Google Pagespeed yardım dokümanları size çok iyi bir şekilde kaynaklık edecektir. Ayrıca Yahoo Developer Network sayfalarına da göz atabilirsiniz. Yazımın kalan kısmında da bu dokümanlardan biraz faydalandım.

Şu ana kadar RTT’yi anladığımıza göre, temel mantıkta http isteklerini en aza indirgemek ve gelen istekleri hızlı bir şekilde yanıtlamamız (serverside tarafında) gerektiğini anlamış olmalısınız. Şimdi de yapabileceklerimize bakalım:

  1. DNS sorgularını azaltma
  2. Yönlendirmeleri en aza indirgeme
  3. Yanıt dönmeyen sorgulardan uzak durma (http 404)
  4. Javascript dosyalarınızı tek bir dosyada birleştirme
  5. CSS dosyalarınız tek bir dosyada birleştirme
  6. CSS sprites tekniği ile resim dosyalarınızı, tek bir resim dosyasında birleştirme
  7. Sitil ve script dosyaların sıralamasını optimize edilmesi (Head içerisinde önce css daha sonra javascriptleri ekleyin)
  8. document.write ‘dan uzak durma
  9. CSS dosyalarınızı @import ile siteye eklemememe
  10. Asenkron kaynaklarını tercih etme
  11. Yapılacak downloadların paralelize edilmesi

Bunlara ek olarak font tiplerini dışarıdan almak ve cufon, siFR gibi uygulamaları kullanmak, load time süresini artıracaktır. Aynı zamanda cross-browsing çalışmalarınızda “filter:” kullanmak tarayının sitenizi render etmesini zorlaştıracak, haliyle yüklenme süresini uzayacaktır. Bu yüzden olabildiğince standartlara uymaya çalışın. SEO dünyasında siteyi w3 valid etmenin gerçekte bir seo kriteri olduğu uzun bir süre kabul edildi, ama sonra bir işe yaramadığı savunuldu ve bunun nedeni olarak da çok kritik kelimelerde kafayı çeken sitelerin w3 valid olmadıkları gösterildi. Fakat w3 validation, her zaman dediğim gibi, dün de, bugün de, yarın da, dolaylı olarak bir SEO kriteri olarak ele alınmalı. İster konuya kullanıcı davranışı (UX), ister erişebilirlik, isterseniz de tarayıcıda sağlıklı render edilmesi ve sitenin hızlı açılması açısından bakın, hiç farketmez. Elinizden geldiğince sitelerinizi w3 validator’den geçirmeye çalışın. Bu kurallar boşuna konmuyor değil mi? 🙂

Ufak Bir İpucu

Eğer php tabanlı bir web siteniz varsa, RTT sürelerini kısaltmak ve daha hızlı response süreleri vermek için bir ipucu verelim. Sanırım flush(); fonksiyonunu biliyorsunuzdur; bilmiyorsanız da php manuel’in flush fonksiyonu hakkındaki dokümantasyona göz gezdirebilirsiniz.

Bir kullanıcı server’dan bir html sayfasını talep ettiğinde, serverın html sayfa ile birlikle servis etmesi 500ms’yi bulabiliyor ve bu süre içerisinde tarayıcı ise dataların gelmesi için boşta bekliyor. Fakat siz flush fonksiyonu ile tarayıcının boşta beklemesi yerine, diğer bileşenleri almaya başlamasını sağlayabilirsiniz. Ve bunun içinde bu fonksiyonun en kullanılabilesi yeri </head> etiketinden hemen sonrasıdır, çünkü genellikle head içerisinde css ve javascript kütüphaneleriniz yer alıyordur. Böylelikle sunucu talebinizi işlerken, siz de diğer dosyaları browserın alıp işlemesini sağladınız ve binevi seri olarak ilerleyen süreci, paralellemiş oldunuz 🙂 Bunun için yapmanız gereken sadece </head> den hemen sonra aşağıdaki kodu sitenize eklemektir:

< ?php flush(); ?>

Bazı durumlarda, özellikle session kullanımana göre bu fonksiyon bazı sitelerde problem yaratabilir. Bu yüzden iyi bir şekilde test etmenizi öneririm. Sonra Uğur sitemi mahvettin derseniz sizi ne gördüm, ne duydum, ne de tanıdım modundayım ona göre 🙂 Bu yüzden bu uygulama sonrasında sitenizi test etmenizi şiddetle öneriyor ve sorun çıkmaması durumunda kullanmanızı tavsiye ediyorum.

Adım uğur eskici, hakkımda daha çok bilgi verdiğim yazıya buradan ulaşabilirsiniz. Lütfen yapacağınız yorumlarda, kişi ve kurumlara hakaret etmeden ve kişilik haklarına zarar vermeden düşüncelerinizi yazınız.

Google Alışveriş Reklamları için GTIN Zorunluluğu

Google, alışveriş reklamları için 2015 yılında GTIN’i özellikle belirlemiş olduğu 50 özel markada zorunlu tutmaya başlamıştı. 2016 yılında ise sadece 50 marka için değil, GTIN numarasına sahip tüm ürünler şeklinde kapsamını genişletti. Nedir bu 50…

Pogo Sticking Nedir?

Pogo Sticking aslında 1990’ların başında trend olan, duruş pozisyonunda zıplamak için kullanılan bir eğlence aracıdır. Google terminolojisinde ise siteden aniden çıkma anlamında kullanılır. Bir çok insan pogo sticking terimini bounce rate ile karıştırmakta. Aslında ilk…

14 yorum

    kimse bişey yazmamış, bari ben yazayım, fakat yazın kaliteli değil, tam açıklama yapmamışsın, şuradan bakın, buradan bakın diye link vermişsin, olmamış yegen

    Tabi burada önemli olan kalite kıstasıdır. Eleştiriniz için teşekkür ederim fakat yazıyı çok uzun tutmamak ve konuda bahsettiğim bazı detayları asıl merkezinden incelemenizi istemem çok abes değil. Biraz da zahmet edip tıklarsanız en azından kalıcı olarak öğrenebileceğinizi düşünüyorum. Yok ben hazır balık satın almak istiyorum diyorsanız, yanlış yerdesiniz.

    Teşekkür ederim . kodu muhteşem sitenin tema html sinde altına girdim. Açılış hızlandı. Emeğinize sağlık.

    Kesinlikle güzel bir konuya değinmişsiniz seo ile ilgilenen herkezin bildiği gibi kişi bir sözcük üzerinde arama yapıyor karşısına çıkan siteleri geziyor ve 1 sitede aradığını buluyor ve o sözcük üzerinde olan aramasını sonlandırıyorsa demekki o site başarılıbir sitedir.
    Eğer kişi sayfaya girdi ve sayfa açılışı ve kişi gezerken zorlanıyorsa eğer o sayfada faydalı bir içerik olsa bile kişi kapatır ve aramasına devam eder.
    Bu nedenle sayfanın açılış hızı çok öenmidir Makale için teşekkürler.

    Teşekkürler. Faydalı bir yazı olmuş. Sayfa açılış süresini azaltmak için yavaş yavaş uygulamaya çalışacam.

    Kodu bazı scriptlerin mobil versiyonlarında sorun olabiliyor gibi. Ancak kesin olarak “böyledir” diyemem. Herkes iyice test etsin öyle kullansın. Yazı genel olarak faydalı ama daha detaylı olsaymış keşke. Gene de emeğinize sağlık.

    @sukru bey, ilk fırsatta yazıyı detaylandıracağım o halde 🙂
    @mutludent , eklentiler wp sisteminde yavaşlık yaratacaktır. Haklısınız, fakat WP için konuşursak olabildiğince işlerinizi eklentisiz halletmeye çalışın 🙂 Her halükarda w3 total cache eklentisi bir çok konuda rahatlık sağlıyor. Konfigürasyonunu düzgün yaparsanız tabii..

    apache, php den gelen flush komutu ile sayfa dönüşünü oldukça hızlı sağlıyor. litespeed ise bunu otomatik olarak yapıyor, bu sebeple apache ye oranla oldukça hızlı yüklenme süresi var. yazınız için teşekkürler.

    Süpersin kardeşim kodu kullandım, wordpress sitemde başımı ağrıtan page speed olayı birden değişti. Ulan ufacık kod nelere kadir miş. açılış hızı tek kodla %85 oldu 🙂 teşekkür ederim gerçekten

    Uğur veya Yusuf arkadaşım. bu kodu wordpress’de hangi dosyaya eklememiz gerekiyor acaba? bende de aynı sıkıntı var. 3,6 saniye hiç bişey yapmadan bekliyor. sonrasında tıkır tıkır anında açıyor siteyi. anasayfa yani index.php ye mi ekleyeceğiz?

    Merhaba
    Yazı için çok teşekkür ederim, parantezlere ve detaya indirgemişsiniz, benim gibi acemi kişiler için fazlaca açıklayıcı 😉

    Yalnız benim bir problemim var, site açılış değerlerim desktop olarak yüksek (google speed92) ancak mobilde pek de öyle değil. Aldığım hata ise js/css leri head den sonrasına entegre etmem gerekiyor sanırım. Bunu yapabilecek eklenti de buldum (bu arada wp kullanıyorum) ancak bu sefer de site içerisinde googlemaps,carusel,lightbox tarzı araçlar çalışmamaya başladı.

    Sizce ne yapmalıyım, önerebileceğiniz eklenti var mı?

    @Ahmet; dostum o kodu header.php de body nin hemen üstüne ya da hemen içine ekleyebilirsin.

    Teşekkür ederim çok güzel anlatım olmuş uygularsak güzel sonuçlar verir sanırım test ettikten sonra faydalarını bende sizlerle paylaşmak isterim.

    Dostum çok bir kod bilgim yok .3 gündür %77 olan site hızımı arttırmaya çalışıyorum.. Tek kod ile ” ” 77 olan hızımı 90 yaptın . Çok teşekkür ederim adamın dibisin =)

Bir Cevap Yazın

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