12 Adımda Site Hızlandırma ve Dönüşüm Oranlarını Arttırmak

Web sitenizi hızlandırmanın önemli olmadığını mı düşünüyorsunuz? SEO çalışmalarından olan web site hızlanırmanın size kazandıracaklarından bahsedelim.


Web sitenizi hızlandırmanın önemli olmadığını mı düşünüyorsunuz? Bu rehberdeki adımlar hem wordpress kullanıcıları hemde wordpress kullanmayan yapılar için uygulanabilir. Wordpress Site Hızlandırma işlemleri için uygulayabilirsiniz. SEO çalışmalarından olan web site hızlanırmanın size kazandıracaklarından bahsedelim.

-          Hedef kitleniz siteye daha hızlı ulaşabilirler

-          Müşterileriniz daha hızlı alışveriş yapabilirler

-          Google sıralamalarında üst sıralarda yer alabilir

-          Google botları sitenizi daha çabuk tarayabilir

-          Rakiplerinizde önce olabilirsiniz.

-          Dönüşüm oranlarını arttırabilirsiniz.

Google sıramalarında mobil site hızlarının bir sıralama kriteri olduğunu biliyoruz. Fakat Google bunu  kendi bloğunda Temmuz 2018’den itibaren bir sıralama sinyali olacağını açıkladı.

Mobil Kullanıcıların %85’i girdiklerin web sitelerinin masaüstü sitelerden daha hızlı açılmasını bekliyor. Kullanıcıların %57’si web sitelerine girerken bu sorunla karşılaşıyor. Neredeyse insanların yarısı yavaş açılan web sitelerini terk ediyor. Kendinizde web sitelerine giriş yaparken böyle yapmıyor musunuz?

Google PageSpeed ​​Insights, aracı web sitenizin performansını ölçebileceğiniz araçlardan biridir. Web sitenizi hızını ölçmek için bir çok araç bulunuyor fakat PageSpeed ​​Insights sonuçları siteyi ziyaret eden kişilerin verilerini sonuç olarak göstermektedir. Bu verileri hesaplarken FCP ve DCL metriklerinden yararlanmaktadır.

FCP: Web Sayfasına ait DOM’u içerisinde bulunan ilk nesne parçasının yüklenme anına kadar geçen süre. Yani kullanıcının ilk gördüğü nesne anına kadar ki süredir.

DCL: Web Sayfasına ait DOM’un tamamen yüklenmesine kadar geçen süredir. Kullanıcı için sayfa kullanıma hazırdır. Fakat dışardan çekilen js kodları bu süreye dahil olmayabilir.

Web sitenizin hızını arttırmak için bazı metrikleri öğrendik.

Şimdi web sitenizi hızını arttırmak için ve kullanıcı deneyimini geliştirmek için yapabileceğiniz adımları inceleyelim. Bu yazının devamında sitenizi iyileştirmek için 20 önemli ipucunda bahsedeceğiz. Fakat bu adımların hepsini yapmanıza gerek yoktur. Bazı ufak dokunuşlar bile web sitenizin hızını arttırabilir.

1.Adım: Web Site Hızınızı Ölçmek

Yukarıda bahsettim gibi hız ölçmek için bir çok araç bulunuyor fakat biz PageSpeed ​​Insights aracını kullanacağız.

Web sitenizi analiz ettiğinizde sonuçları görebilirsiniz.

Hız kısmında yukarıda açıkladığımız kavramlar üzerinden bir puanlama yapılmıştır.

 

Optimizasyon kısmında Google tarafından sayfamıza verilen hız puanı yer almaktadır. Sonuçlar 3 şekilde karşımıza çıkabilir.

Good: 80 üstü puanlar. Sayfa en iyi performansı gösteriyor. Daha yüksek puan için bir daha optimizasyon gerekiyor.

Medium: 60-79 puan. Sayfada bazı performans optimizasyonları eksik. Bir daha optimizasyon gerekir.

Low: 0-59 puan. Sayfa optimize edilmemiş ve optimizasyon için daha çok işiniz var.

 

2.Adım: HTTP isteklerini azaltın

Yahoo’ya göre bir web sayfasının yükleme süresinin %80’ini sayfanın farklı bölümlerinde resim, css ve komut dosyası gibi indirerek harcamaktadır. Web sayfasında daha fazla http isteği sayfanın hızlı açılmasına etken olacaktır. 

Chrome tarayıcı ile sitenize kaç HTTP isteği olduğunu görebilirsiniz. Analiz etmek için Mouse ile sağ tıklayın > İncele > Network sekmesine tıklayın.

Bu alanda http istediğinin adı(Name), büyüklüğü(Size) ve ne kadar süre yüklendiğini(time) görebilirsiniz.

Bu isteklerin sayısını azaltmak sitenizi hızlandıracak için dosyaları gözden geçirin ve sizin için gereksiz olup olmadığını kontrol etmelisiniz.

Hemen sonuç göremeyebilirsiniz fakat sonraki adımlarla birleştiğinde etkisini göreceksiniz.

 

3.Adım: Dosyaları küçültün ve birleştirin

Artık sitenin kaç istekte bulunduğunu bildiğimize göre bu sayıyı azaltmak için çalışabiliriz. Dosyalarda bizim için en önemlileri: HTML, CSS ve JavaScript dosyalarıdır. Bunlar, sitenizin görünümü için önemli dosyalardır.

Her dosya boyutunu küçülttüğünüzde toplam dosya botunu da azalacaktır.

Küçültmek için gereksiz biçimlendirmeyi, boşluklar ve gereksiz kodları kaldırmayı deneyebilirsiniz. Tüm dosyaları gereksiz kod parçaları eklendiğinde büyük bir gereksiz dosya yığını olmaktadır.

Kod bilginiz yoksa merak etmeyin LiteSpeed Cache gibi eklentiler işi çok basit hale getirir.

LiteSpeed Cache eklentisini yükleyin > Settings > Advanced View’e tıklayın > Optimize sekmesine tıklayın.

Optimize sekmesindeki CSS Minify, CSS Combine, JS Minify, JS Combine, HTML Minify seçeneklerini ON konumuna getirin Ardında Save Changes’e tıklayarak yaptığımız işlemleri kayıt edelim.

Not: Burada yaptığınız bazı değişikler sitenizin görüntüsünü bozabilir. Ayarları kaydettikten sonra siteyi kontrol ediniz. Bir aksilik durumunda bazı ON yaptıklarınız OFF konumuna getirin. Tekrar test edin böylelikle siteniz için en iyi sonucu elde edebilirsiniz.

 

 

 

4.Adım: CSS dosyalarını sekronize olmayan şekilde yükleyin

CSS dosyaları iki farklı şekilde yüklenebilir: Seknorize ve Sekronize olmayan.

Komut dosyalarınız Seknorize olarak yükleniyorsa, sayfada görüntülenenler sıralar yüklenir ve CSS dosyaları genellikle HTMl yapısında <head> etiketlerinde sayfanın başında olduğu için CSS dosyaları yüklenmeden sayfa yüklenmeyecektir. Fakat Komut dosyaları Sekronize olmayan olarak yüklüyse CSS olan nesneler CSS dosyasının yüklenmesini beklemeden yüklenir.

Dosyaların sekronize olmayan şekilde yüklenmesi sayfalarınızın hızlandırabilir.

CSS dosyalarını sekronize olmayan şekilde yüklenmesini sağlamak için LiteSpeed eklentisinin seçeneği mevcuttur.

Optimize sekmesinde bulunan Load CSS Asynchronously seçeneği ile bunu yapabilirsiniz.

 

5.Adım: JavaScript dosyalarını ertele

Bir dosyanın yüklenmesi beklenmesi diğer dosyanın yüklenmesini beklemektir. JavaScript dosyalarını ertelerseniz sayfa içeriğinde bir gecikme olmadan yükleyebilirsiniz.

Diğer adımlarda gösterdiğimiz LiteSpeed eklentisinin böyle bir özelliği bulunmuyor. Sanırım eklentinin en büyük eksikliği olsa gerek.

Bu adımı manuel olarak nasıl yapabiliriz?

JavaScript dosyaları genelde header.php dosyası içinde olur,  bunları footer.php dosyası içinde alarak yapabiliriz. Tema özelliklerine göre farklı bir dosyanın içinde de olabilir.

Eğer header.php dosyasının içinde javascript dosyaları yoksa functions.php dosyasının en son satırına aşağıdaki kodu ekleyin;

function remove_head_scripts() {

   remove_action('wp_head', 'wp_print_scripts'); 
   remove_action('wp_head', 'wp_print_head_scripts', 9); 
   remove_action('wp_head', 'wp_enqueue_scripts', 1);

   add_action('wp_footer', 'wp_print_scripts', 5);
   add_action('wp_footer', 'wp_enqueue_scripts', 5);
   add_action('wp_footer', 'wp_print_head_scripts', 5);


add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

 6.Adım: Veritabanı Temizleme

Veritabanı optimize etmek, veritabanı boyutunu azaltır ve performansın artmasına etken olan verileri temizler. Wordpress’i bir süredir kullanıyorsanız büyük olasılıkla taslaklar, spam yorumlar, çöp kutusu, geçici seçenekler gibi pek çok işe yaramayan veriler vardır. Veritabanı deyince zor gibi görünebilir fakat tek tıkla optimize edebilirsiniz. 

LiteSpeed eklentisiyle bu işlemi yapabilirsiniz. Resimde gösterdiğim gibi LiteSpeed iconu üzerine gelerek > Manage tıklayın > Açılan ekranda DB Optimizer’e tıklayın > Clean All seçeneğine tıklayın.

Tebrikler! Artık veritabanınız optimize oldu.

 

7.Adım: Sunucu yanıt süresini azaltın

Sayfaların hızlı yüklenmesinin en büyük nedenlerin biri, sunucu(DNS) yanıt süresinin uzun olmasıdır. Yavaş bir Sunucu veya Hosting kullanıyorsanız, bu tarayıcıların sitenizi bulması için gereken süreyi arttıırız. Daha hızlı bir Sunucu kullanmak işlemi hızlandırabilir.

Pagespeed testinde Sunucu yanıt süresini kısaltın gibi bir hatayla karşılaşıyorsunuz bu optimizasyonu yapmalısınız. Sunucu yanıt süresi ne kadar hızlı olursa pagespeed testlerinde sitemiz yüksek puanlar alabilir.

Google PageSpeed aracında şu şekilde gözükmektedir;          

8. Adım: Tarayıcı Önbellek(Cache)’i etkinleştirin

Bir web sitenizi ziyaret ettiğinizde, ziyaret ettiğiniz sayfadaki öğerler bilgisayarınızda geçici depolama biriminizde saklanır.

Aynı siteyi bir sonraki ziyaretinizde aynı dosyaları tekrar indirmenize gerek kalmadan bilgisayarınızdan yükler.

Cache özelliği kullanılmış bir web sitenizi ziyaret edelim ve Chrome Network sekmesinde kaç sn’de yüklendiğine bakalım.

Daha sonra aynı siteyi ziyaret ettiğinzde daha ise daha kısa sürede siteye ulaştığınızı göreceksiniz.

Sizde kullanıcılar sitenizi ziyaret ettiğinde kısa süre ulaşmalarını istiyorsanız. LiteSpeed Cache eklentisinin Cache özelliğinizi kullanabilirsiniz. Cache sekmesinden aşağıdaki ayarları ON konumunda getirin.

9. Adım: Görselleri sıkıştırın

Görüntüler site hızında önemli bir rol oynamaktadır. Genellikle sayfa yükleme süreleri yavaşlatan büyük dosyalardır. Ancak görselleri tamamen kaldırmak bir seçenek değildir.

Özellikle E-Ticaret siteleri görseller çok önemlidir. Dönüşümleri arttırmak için görsellerin kaliteli ve hızlı yükleniyor olması gerekmektedir. Bazı E-Ticaret altyapıları resim optimizasyon seçenekleri bulunmaktadır.

Wordpress’te resim sıkılaştırmak için LiteSpeed Cache eklentisini kullanabilirsiniz fakat iyi performans sergilemiyor. Bunun yerine WP-Smush eklentisini öneriyorum. Ücretsiz sürümde tek sefer 50 görsel sıkıştırabilirsiniz.

Aşağıdaki görseldeki adımları uygulayarak resimleri sıkıştırabilirsiniz.

Yeni yüklediğiniz resimler için https://tinypng.com/ siteni kullanabilirsiniz.

10. Adım: Videolar için dış barındırma platformlarını kullanın

Sitenizin dosyalarını bir CDN’de barındırmanın yanı sıra, bazı büyük dosyalarınız için harici barındırma platformlarını kullanabilirsiniz.

Örneğin, sitenizde bir video eğitimi eklemek istediğinizi varsayalım. Video dosyasınız kendi sunucunuza yüklemek videoyu kendi sunucunuzdan yükleyeceği için sayfanın yüklemesini geciktirebilir ve kendi sunucunuzun da yer kaplar.

Özellikle paylaşımlı bir sunucu kullanıyorsanız sınırlı miktarda alanınınız olur. Ayrıca sunucunuzun sınırlı bir bant genişliği varsa, bu durum gecikmelere ve oynatma sırasında duraklamaya neden olabilir.

Video izlerken sürekli

durmasının ne kadar sinir bozucu olduğu bilirsiniz. Bu yüzden bunu ziyaretçilerinize yapmayın.

Bunun yerine videonuzu Youtube, Vimeo veya Wistia gibi üçüncü taraf hizmetinde barındırın.

Bonuslar:


- Videoların üçüncü taraf sitelerde barındırırsanız burada backlink alabilirsiniz.

- Google sayfanızda bir video varsa sizi rakiplerinizden öne geçirebilir.

- Youtube’nin büyük potansiyelinden yararlanın videonuzun izlenmesinden faydalanabilirsiniz.

 

11. CSS dosyalarını birleştirmek        

CSS dosyaları sitenizin stil gereksinimlerini karşılayan dosyalardır. Genel olarak web siteniz bu bilgilere iki yoldan ulaşır. Harici veya satır içi olarak ulaşmaktadır.

Harici CSS, HTML’inizin başında şu şekilde görünür;

<link rel=”stylesheet” type=”text/css” media=”all” href=http://siteadiniz.com/style.css />

HTML içinde yer alan CSS kodları şu şekilde görünür;

Yukarıda gösterilen satır içi CSS’de olduğu gibi HTML kodunda olduğu gibi HTML kodunda (div veya başlıklarda olduğu gibi) CSS’yi dahil etmekten kaçınmalısınız. Tüm CSS’lerinizi harici bir stil sayfanıza koyarsanız daha temiz bir kod alırsınız.

Stillerinizi ayarlarken, birden fazla CSS dosyası 2 adımda söylediğim gibi ek http isteklerini arttıracağı için bir CSS stil sayfası kullanmak en iyisidir.

CSS dosyalarının nasıl göründüğünü görmek için şu aracı kullanabilirsiniz: https://varvy.com/tools/css-delivery/

CSS dosyalarını birleştirmek kopya ve yapışmadan başka bir işlem gerçekleştirmez. Fakat bu işleme bile gerek kalmadan LiteSpeed Cache ile yapabilirsiniz.

İşte bu kadar kolay;

 

12. Görünen içeriği öncelikledirin

Kullanıcın gördüğü kısmı daha hızlı yükleyerek kullanıcı deneyimi iyileştirebilirsiniz. Buna Lazy Load denir ve özellikle çok fazla içeriğe sahip sayfalar için yararlıdır.

Örneğin, 20 fotograf içeren bir blog yazısı yazdığınızı varsayalım. Normalde bir kullanıcının tarayıcısının, sayfadaki hiçbir şeyi görüntülemeden önce görüntülen tümünü indirmesi gerekir.

Lazy load kullanarak kullanıcı sayfaya erişmek için beklemek zorunda kalmaz ve görüntüler sayfayı kaydırdıkça yüklenir.

LiteSpeed Cache ile bunu kolayca yapabilirsiniz;

 

Bonus

Sitenizin alt yapısı Wordpress ise gereksiz eklentileri kullanmak sunucunuzu yorabilir bu sebeple kullanmadığınız ve işe yaramayan eklentileri devre dışı bırakın ve silin.

Sonuç

Yukarıda bahsettiğim 11 adımla gerçekten sitenizin hızını arttırabilirsiniz. Adımlar daha önce yapmadıysanız muhtemelen sitenizin hız skoru düşük ve kullanıcı deneyimi acısından sınıfta kaldı demektedir. Adımlarda dönüşümlerden fazla söz etmedik fakat unutulmamalıdır ki Hız = Dönüşüm’dür. Dönüşüm oranlarını arttırmanın bir diğer yolu SEO hizmeti almaktadır. Kullanıcılar sizi aradıklarında bulamıyorsa buda dönüşüm kayıplarına yol açabilir.

Faydalı olması ve bir sonraki yazıda görüşmek dileğiyle…

Yunus Korkmaz

SEO Executive