Site Hızının SEO Üzerindeki Etkisi, Site Hızı Optimizasyonu

Web site oluşturma süreci ve web tasarımın gelişimi dur durak bilmeden devam eden bir süreçtir. Web siteler, düzenli olarak optimize edilmeye muhtaçtır. Site hızının iyileştirmesi, SEO çalışmaları içerisinde önemli faktörlerden biri olurken, bir web sayfanın arama sonuçlarında aldığı sıralamada büyük etkiye sahiptir.

Bu yazı içerisinde site hızının ne olduğu, SEO’ya olan etkisi ve nasıl optimize edilebileceğini öğreneceğiz. Size sunacağımız adımlar ile birlikte web site hızını artırma yöntemlerini öğrenebilir ve bu konuda uzman yardımı alabilirsiniz.

Site Hızı Nedir?

Site hızı, bir web sayfasının yüklenme süresine karşılık gelmektedir. Bu konuda, kullanıcı açısından bir test yapmak isterseniz, sahip olduğunuz web siteye bir kullanıcı gözüyle giriş yapın. Siteniz anında yükleniyor mu? Yoksa yüklenmesi saniyeler mi alıyor? Kullanıcı deneyimi ve arama motorlarının web sitenizi değerlendirmesi açısından direkt olarak etkiye sahip olan site hızı, kesinlikle optimize edilmesi gereken bir özelliktir.

Dijital dünya, sosyal yaşantımıza oranla sabrın çok daha az olduğu ve tüketimin ışık hızında olduğu bir mecradır. Bu nedenle, kullanıcılar uzun sürede açılan web sayfalarına tahammül edemezler ve sayfanın yüklenmesi saniyeler aldığı takdirde daha fazla beklemeden web siteyi terk ederler. Bunun sonucunda da web sitenin hemen çıkma oranı yükselir ve arama motorları bu metrik üzerinden sıralamanızı düşürür.

Yapılan araştırmalar gösteriyor ki; dijital dünyada gezinen kullanıcıların yaklaşık %40’ı, 3 saniyenin üzerinde yüklenen web sayfaları açılmadan terk ediyor. Bu süre daha da uzarsa, hemen çıkma oranı katlanarak artıyor.

İçerik üreten siteler reklam geliri oluşturacak ziyaretçileri kaybederken e-ticaret siteleri ise potansiyel müşterileri kaybeder. Bunun sonucunda dramatik satış kayıpları yaşanabilir. Bu olumsuzlukları sıralama kayıpları da takip edecektir.

Sadece ziyaretçiler değil arama motoru botları da beklemekten hiç hoşlanmazlar. Google tarafından gerçekleştirilen 2010 algoritma güncellemesi ile birlikte, site hızı, önemli bir sıralama faktörü haline geldi.

Sayfa hızını sadece masaüstü yüklenme hızı olarak dikkate almamak gerekir. Mobil cihazlarda gerçekleşen yüklenme hızı da çok önemlidir. Günümüzün mobil kullanıcı sayısı göz önüne alındığında hiç olmadığı kadar önemli hale geldiği kolaylıkla söylenebilir.

Web Sitem Neden Yavaş Yükleniyor?

Bir web sitenin yavaş yüklenmesine neden olabilecek çok sayıda faktör bulunmaktadır. Bu faktörlerin birçoğu aynı anda etki ediyor olabilir. Web sitenin yavaşlamasına neden olabilecek temel faktörleri şu şekilde sıralayabiliriz;

• Optimize edilmemiş resimler
• Javascript sorunları
• Çok fazla reklam yayınlamak
• Kalitesiz yer sağlayıcı
• gZIP Sıkıştırmasını kullanmamak
• Aşırı HTTP istekleri
• Çok fazla gösterişli içerik

Yukarıda yer alan faktörlerin detaylarını ve nasıl optimize edileceğini merak ediyor olabilirsiniz. Yazının devamında bu faktörleri ayrıntılı bir şekilde inceleyeceğiz.

Öncelikle, optimize edilmiş ve iyi kabul edilen sayfa hızını öğrenmek gerekir.

İyi Bir Sayfa Yükleme Süresi Nedir?

Google tarafından ideal olarak değerlendirilen sayfa yüklenme süresi 3 saniyenin altında olmalıdır. Sitelerin büyük bir bölümü ise bu sürenin üzerinde bir sürede yüklenmektedir. Bu açıdan optimizasyon gereken site sayısı yüksek olduğu gibi optimizasyon yaptıran sitelere de büyük bir fırsat oluşturmaktadır. Yavaş yüklenen web site sayısının bu kadar yüksek olduğu bir durumda, hızlı yüklenen bir web site ile fark yaratmak çok daha kolay olacaktır.

Web siteler üzerinde gerçekleştirilecek optimizasyon çalışmaları ile birlikte hedeflenen 3 saniyenin altında yüklenme süresine kolay bir şekilde ulaşılabilir. Öncelikle durum tespit yapmak ve sorunları tespit etmek gerekir. Sonrasında ise gerekli optimizasyon çalışmaları yapılarak süreç çok daha kolay bir şekilde yürütülür.

Web Tasarım ve Geliştirmede Site Hızı Neden Önemlidir?

Sayfa hızını bu kadar önemli kılan şey ne diye merak ediyor olabilirsiniz. Kullanıcı deneyimi ve SEO, sayfa hızını önemli kılan 2 ana etmendir.

• Kullanıcı deneyimi: Sayfa hızı yavaş olan web siteler, zayıf kullanıcı deneyimi sunar. Memnun olmayan ziyaretçiler, sayfa üzerinde çok az vakit geçirirler ya da hiç beklemeden çıkarlar. Bunun sonucunda hemen çıkma oranı artar ve dönüşüm oranı düşer.
• SEO: Google, arama sonuçlarında web siteleri sıralarken, yüklenme hızını da önemli bir ölçüt olarak dikkate alıyor. Kötü kullanıcı deneyimi, Google’ın kesinlikle istemediği bir durumdur. Ayrıca Google botları bir sayfayı tararken kısıtlı zamana yanı kısıtlı tarama bütçesine sahiptir. Yavaş yüklenen bir site ile uzun süre harcamak, daha az sayfa tarama anlamına gelir. Bu nedenle yavaş yüklenen sayfalara zaman ayırmak istemeyen Google botları, başka bir siteye geçiş yapabilir ve indekslenme sorunları oluşabilir.

Sayfa hızının önemi birçok webmaster için şehir efsanesiydi ancak şimdilerde hemen hemen herkes sayfa hızının önemini kavradı.

Site Hızımızı Artırmak İçin Neler Yapabiliriz?

Her web sitenin yaşadığı sorunları biz de yaşıyor ve sürekli olarak optimizasyon çalışmaları gerçekleştiriyoruz. Site hızını artırmak için yapmış olduğumuz sıralı çalışmalar ile birlikte, kullanıcı deneyimini her zaman en üst seviyede tutmaya çalışıyoruz.

Site hızını optimize etmek amacı ile aşağıda yer alan önemli çalışmaları gerçekleştiriyoruz;

• Maksimum sıkıştırma (GZip aracılığıyla)
• Görsellerin optimizasyonları
• Javascript ve CSS dağıtımını optimize etme
• Simgeler ve yazı tipi kullanım optimizasyonları
• CSS, JavaScript ve HTML kaynaklarını küçültme
• Yönlendirmeleri minimuma indirme
• Bir İçerik Dağıtım Ağı (CDN) kullanma
• Birbirinden farklı önbelleğe alma teknikleri; tarayıcı önbelleği, sayfa önbelleği ve HTTP önbelleğe alma

Sahip olduğumuz deneyimi birçok SEO çalışması ile birlikte site hızı çalışmalarında da müşterilerimize sunuyoruz.

Hangi Site Hızı Metriklerini Kullanıyorum?

Site hızı üzerinde gerçekleştirilebilecek çalışmalara geçmeden önce hangi metriklerin kullanıldığını öğrenmek gerekir. Aşağıda yer alan metrikler, dikkat edilmesi gereken temel metriklerdir.

• İlk bayta kadar geçen süre: Site sunucunun ilk bayt için ihtiyaç duyduğu süredir.
• İlk boyama: İçerik yerine genel alan boyamasına karşılık gelmektedir.
• İlk anlamlı boyama: İlk metnin ya da görselin boyanması için geçen süreye karşılık gelmektedir.
• Etkileşim zamanı: Etkileşim başlatmak için gerekli olan süre.
• Kaynak yükleme şelalesi: Web sayfası üzerinde yer alan tüm kaynakların, sunucudan temini için gerekli olan süreye karşılık gelir.

Site Hızı Nasıl Hesaplanır?

Web site hızını ölçmek için çeşitli araçlar bulunmaktadır. Bu araçlar aracılığı ile hem site hızını ölçmüş hem de optimize edebileceğiniz noktaları öğrenmiş olursunuz. Bu araçlar, optimizasyon işlemleri için güzel bir yol haritası çıkaracaktır. Site hızı optimizasyon işlemleri, genellikle uzmanlık gerektiren çalışmalardır. Bu açıdan, herhangi bir değişiklik yapmadan önce web tasarım ve programlama konusunda uzman bir kişiden ya da ajanstan destek alabilirsiniz.

Aşağıda en çok tercih edilen araçlara ulaşabilirsiniz;

• Google PageSpeed Insights
• GTMetrix
• Google Test My Site

Site Hızı Nasıl Optimize Edilir?

Herhangi bir web sitenin hızını optimize etmek istiyorsanız, bu konuda bilmeniz gereken 8 temel başlık bulunmaktadır. Aşağıda ayrıntıları ile sunulan 8 faktörü iyi bir şekilde optimize ettiğiniz takdirde, site hızı için gerekli olan çalışmaları büyük oranda tamamlamış olursunuz.

Site hızını artırmak için yapabileceğiniz optimizasyon çalışmalarının bir kısmını basit bilgiler ile uygulayabileceğiniz gibi bir kısmı için uzmanlığa ihtiyaç duyabilirsiniz. Daha büyük sorunlar yaşamamak adına, optimizasyon çalışmalarını yedek alarak gerçekleştirmek ve karmaşık konularda uzman kişilerden ya da ajanslardan yardım almakta fayda var.

1.    Sıkıştırmayı Etkinleştirin (Gzip aracılığıyla)

Tarayıcılar, ziyaret etmek istediğiniz web sitenin öncelikle kaynaklarını indirir. 150 baytın üzerinde kaynak dosyalarının olması durumunda, tarayıcının kaynakları indirme süresi uzayacak ve bu da web sayfasının yavaş yüklenmesine neden olacaktır.

Bu durum göz önüne alınarak 150 baytın üzerinde yer alan dosyaları sıkıştırmak iyi ve etkili bir yöntemdir. Bunun için .htaccess dosyasında gerekli olan geliştirmeler yapılmalıdır.

Nginx sunucuları için de gerekli kodlar kullanılarak ana yapılandırılması düzenlenebilir. Sunucu üzerindeki değişiklikleri geçerli kılmak için yeniden yüklemek gerekmektedir.

Sunucu üzerindeki büyük dosyaların sıkıştırılması ile birlikte, web sayfasının kaynakları çok daha hızlı yüklenecektir. Sıkıştırma işlemi, sayfa üzerinde yer alan görsellerin çözünürlüğünü bozabilir. Bu açıdan, sıkıştırma işlemi, görsellerin haricindeki dosyalar için gerçekleştirilmelidir.

2.   Görsellerin optimizasyonları

Görsellerin optimizasyonu ile birlikte site hızında çok ciddi iyileştirme gerçekleştirilebilir. Görsellerin optimizasyonu ile birlikte arama sonuçlarında çok daha iyi bir sıraya sahip olabilirsiniz.

Site hızını artırmak için kullanılan görsellerin optimizasyonunda, aşağıda yer alan üç yöntem dikkat çekmektedir;

• Aşamalı görüntü yükleme tekniği: Görsellerin aşamalı bir şekilde yüklenmesi ile sayfa yüklenme süresi kısaltılabilir. Tek bir tarama yerine aşamalı tarama yönteminde, ilk taramadan görselin düşük kalitede bir sunumu yapılır. Sonrasında gerçekleşen taramalar ile birlikte görüntü çözünürlüğü iyileştirilir. Bu yaklaşım, kullanıcı deneyimini artırır ve hemen çıkma oranını düşürür.
• Cihaza göre farklı medya sunumu: Masaüstü, tablet ve mobil cihazlar için farklı medyaya sahip olabilirsiniz. Bunu gerçekleştirmek için HTML5 görsel etiketini kullanmanız gerekir. Kaynakları bu sayede tanımlayabilirsiniz.
• Lazysizes eklentisi kullanımı: Görsel önceliklendirme eklentisidir. Bu sayede, önem arz eden görseller ilk yüklenir.

3.   Javascript ve CSS dağıtımını optimize edin

Kritik rendering yolunu optimize etmek için JavaScript ve CSS dağıtımını optimize etmek gerekir. Rendering yolu, arka planda gerçekleşen olaylar silsilesini simgeler ve bu işlemler ziyaretçiye içeriğin gösteriminden önce gerçekleşir.

Bu süreci optimize etmekle beraber, web sayfasının yüklenmesi için ihtiyaç duyulan süreden ciddi kazanımlar sağlanabilir.

Javascript Optimizasyonu nasıl yapılır?

Bu optimizasyon sürecinde, JavaScript varlıkların sayısını olabildiğinde azaltmak gerekir. Ayrıca indirilen JavaScript varlıkların boyutları da minimuma indirilmelidir.

Bu optimizasyonu gerçekleştirmek için önemli JavaScript dosyaları tek bir JavaScript dosyası içerisinde birleştirmek gerekir. jQuery ya da zepto gibi çok sayıda JavaScript dosyası olabilir. Bunları tek bir dosyada topladıktan sonra o dosyanın da boyutunu küçültmeniz gerekir.

Oluşturma yolu sürecinde indirilmesi gerekmeyen tüm JavaScript dosyaları HTML yapısının altına ve </body> etiketinin önüne yerleştirin. Konut dosyası olarak işaretlemeyi unutmayın.

Küçük sayılan JavaScript kodları satır içi olarak tercih edin. Bu yaklaşım ile birlikte ilk boyama, ilk anlamlı boyama, etkileşim süresi gibi süreçleri de optimize etmiş olursunuz. Nedeni ise, satır içi komut dosyalarının hızlı bir şekilde yürütülmesidir.

CSS Optimizasyonu Nasıl Yapılır?

Kritik CSS’i ayırmak, CSS optimizasyonunda ilk adımdır. Bunun için ekranın üstünde yer alan bölgeye hangi CSS kurallarının stil oluşturduğunu belirlemeniz ve bunları HTML işaretlemenize göre yerleştirmek gerekir. Web sayfasının üst kısmına hangi CSS dosyalarının stil verdiğini nasıl bulacağınızı biliyor musunuz? Bu konuda Google araçlarını kullanabilirsiniz;

• Geliştirici araçlarınızı açın
• Cmd + Shift + P (Mac için); Ctrl + Shift + P (Windows için)
• Ve “Kapsam” için arama yapmalısınız

Duyarlı görünüme sahip web siteler, farklı cihazlar için bünyelerinde gerekli olmayan çok sayıda CSS kodu bulundururlar. Bu konuda en güzel örnek, ziyaretçinin cihazına göre farklı kodların bulunmasıdır. Mesela, sadece masaüstü bilgisayarlar için CSS kodu bulunduğu gibi sadece mobil cihazlar için de CSS kodu bulunmaktadır. Kurallar ayrılarak farklı dosyalar aracılığı ile optimize edilmeli ve CSS çağırılırken medya etiketi tanımlanmalıdır.

4.   Simgeler ve yazı tipi kullanım optimizasyonları

Web sayfasının hızını etkileyen bir diğer önemli faktör de, kullanılan simge ve yazı tipidir. Bu konuda optimizasyon yapmak için aşağıda yer alan iki farklı yöntemi kullanabilirsiniz;

• Simgelerin görünümlerini kontrol etmek için CSS kullanın. Web site üzerinde kullanılan küçük simgelerin farklı farklı görseller olarak yüklenmesi sağlıklı bir yöntem değildir. Çünkü, hepsi farklı bir resim dosyası anlamına gelir. Bunun yerine, tek bir dosya üzerinden tüm simgelerin yüklenmesi, bant genişliği açısından çok büyük verimlilik sağlar. Tek bir dosya talep edileceği için düşük bant genişliği kullanılır.
• Simgeleri .svg’ye dönüştürme ile başlayın. Sonrasında da yazı tipi olarak kullanmaya başlayın. Bu işlemi yapmak için en çok kullanılan uygulamalardan biri IcoMoon uygulamasıdır.

Yazı tipi konusunda optimizasyon yapmak istiyorsanız, farklı türde yazı tipleri eklememek için web sayfası üzerinde kullanılan yazı tiplerini kontrol etmelisiniz. Tipografi tutarlılık isteyen bir konudur. Kurumsal bir kimlik yaratmak için doğru yazı tipini seçmeniz gerekir. Markanın kendini ifade şeklidir. Bununla birlikte farklı yazı tipleri de kullanılmamalıdır.

Web site ziyaretçileri arasında farklı tarayıcı kullanan çok sayıda kişi olabilir. Farklı tarayıcı için optimizasyon geçmiş yazı tipleri kullanmak gerekir. Bu açıdan, yazı tiplerinin WOFF2, WOFF, EOT, TTF formatlarında sağlamak son derece önem arz eder. Çoğunlukla sıkıştırma işleminden geçmediği için EOT ve TTF türlerine Gzip sıkıştırması yapmayı unutmayın.

Src listesi içerisinde local() öğesinin öncelikli hale getirmeniz gerekir. Mevcut yazı tipleri için HTTP isteklerinin yapılmadığını kontrol etmek için src listenizde yerel (‘Font Name’) ilk sırada listeleyin.

Google Fonts vb. harici yazı tiplerini kullanmak yerine, web sitenizde yüklenmiş olan fontlara öncelik tanımanız mantıklı olabilir. Bu sayede, harici web sitelerden gelen aramalar azalmış ve yüklenme süresini de azaltmış olursunuz.

5.   CSS, JavaScript ve HTML kaynaklarını küçültün

Web sunucusundan talep edilen veri miktarını azaltmak için CSS, JavaScript ve HTML dosya boyutlarını azaltmak gerekir. Bu optimizasyon yönetimini sağlıklı bir şekilde gerçekleştirdiğiniz takdirde, sayfa hızı üzerinde çok ciddi olumlu etkisi olacaktır.

CSS, HTML ve JavaScript dosya boyutlarını azaltmak istiyorsanız, fazla boşlukları ve yorumları kaldırmanız gerekmektedir. Ayrıca, değişken adlarını sıkıştırmak da kodun azaltılması ve boyutun düşürülmesinde önemlidir.

6.   Yönlendirmeleri azaltın

Bir web sayfasının başka bir web sayfasına yönlendirilmesi, ziyaretçinin sayfaya ulaşması için ek süre ihtiyacı yaratacaktır. Ziyaretçiler beklemeyi sevmezler. Her bir yönlendirme, hemen çıkma oranının artmasına neden olur. Bu açıdan, web sitenizin ana sayfasında, anlamsız bir yönlendirme oluşturmaktan kaçının. Paylaşılan dahili ve site dışı linklerin yönlendirme yapmaması istenilen bir durumdur.

Yönlendirmeleri olabildiğince gerektiği durumlarda kullanın. Büyük bir yenilik, alan adının transferi vb. durumlarda yönlendirme kullanılmalıdır.

7.   Bir İçerik Dağıtım Ağı (CDN) Kullanın

CDN kullanmak özellikle web sitenin farklı coğrafyalarda ziyaretçi alması durumunda çok önemlidir. Eğer ki bir web sitesi, çok farklı ülkelerden ziyaretçi alıyorsa, mesafe olarak uzaktan giriş yapmaya çalışan kullanıcılar daha fazla beklemek zorunda kalabilir. Çünkü yükleme sunucuya yakın ziyaretçilere oranla daha uzun sürecektir. Türkiye’de bulunan bir sunucu üzerinden Avrupa ve ABD’de yaşayan kişilere hizmet veriyorsanız, CDN kullanmak zorunluluk olacaktır. CDN, web sitenin yüklenme süresi üzerinde direkt olarak etkisi vardır.

CDN kullanarak, web sitenizi ziyaret etmek isteyen kullanıcıya en yakın veri merkezi üzerinden sayfa sunulmuş olur. CDN kullanmanın, sayfa yüklenme süresi üzerinde ve dolayısıyla arama motoru sıralaması üzerinde direkt olarak etkisi vardır. Ayrıca, ana sunucu üzerindeki yükü alacağı için çok daha sağlıklı bir hizmet sağlanmış olur. Özellikle yüksek trafik alan web sitelerin sunucuyu yorması muhtemeldir. Hatta çökmeler dahi yaşanabilir. CDN kullanımı ile birlikte bu gibi olası sorunların da önüne geçilmiş olur.

8.   Önbelleğe alma tekniklerini uygulayın

Büyük site hızı optimizasyon teknikleri arasında son olanı ise, önbelleğe alma yöntemidir. Bu yöntemin kesinlikle kullanılması gerekir. Önbelleğe alma yöntemleri arasında üç tane yöntem bulunmaktadır. Bunlar;

• Tarayıcının önbelleği: Bu yöntem ile birlikte, tarayıcılara, bir ziyaretçi herhangi bir sayfayı ziyaret ettikten sonra tekrar aynı sayfayı ziyaret etmek için geldiğinde, daha önce aynı sayfayı yüklediği için hatırlamasını istersiniz.
• HTTP önbelleği: Tarayıcı, kaynakları daha hızlı almak için ilgili kaynakların kopyalarına erişir. Bu kopyalar hali hazırda depolanmıştır. Web sitenizde bulunan JavaScript, CSS ve görsellerin önbelleğe alınması için iki önbellek başlığı bulunmaktadır. Bunlar; Cache-Control ve Expires olarak karşımıza çıkar.
• Sayfa önbelleği: Web sayfalarının HTML dosyası olarak sunucu üzerinde depolanması ile gerçekleşir. Depolama işlemi, hızlı bir sunucunun RAM’inde gerçekleşir. Etkinleştirilmesi ile birlikte, sunucu sadece ilgili web sayfasının HTML dosyasına erişerek kullanıcılara sunar. Işık hızında sayfalar bu şekilde ziyaretçilere gösterilmiş olur. Bu yöntem ile birlikte web sayfasının yüklenme hızını 3 kat artırabilirsiniz.