SEO

Google PageSpeed Insight Nedir? Nasıl Optimize Edilir?

Google PageSpeed Insights, web sitesi sahiplerinin ve geliştiricilerinin Google Developer tarafından ücretsiz sunulan bir hizmettir. Sayfa hızı ve SEO puanı dahil websiteniz hakkında birçok bilgi veriyor. Bu bilgilere göre hem kullanıcı deneyiminizi hem site hızınızı hem de arama motoru optimizasyon skorunuzu daha iyi hale getirebilmek için mükemmel bir araçtır.

Google PageSpeed Insight Nedir? 

Google PageSpeed analiz edilen site veya sayfaları Chrome verilerine göre analiz eder. Sitenin ilk bağlantı aşamasında tamamen yüklenene kadar test sürer. Bu testi hem mobil hem de masaüstü cihazlar için 2 farklı şekilde ölçüm yapar. Verdiği verilere göre de hem masaüstü hem de mobil site hızında verimli bir optimizasyon gerçekleştirmenize olanak sağlıyor. Hataların olduğu yerde sorunların neyden kaynaklandığını ve nasıl düzeltilebileceğini de anlatmakta. Kaynaklar ingilizce olsa da sayfayı Türkçe diline çevirerek detaylı şekilde inceleyebilirsiniz.

PageSpeed Skorunu 100 Puan Yapmak İçin Tavsiyeler

PageSpeed aslında bize birçok veriyi veriyor. Bu veriler ne kadar iyi olursa hem site hızımız hem de SEO Puanımız o kadar iyi derecede artmakta. Bu sayede ise Google’daki arama sonuçlarında daha iyi konumlarda yer alma ihtimaliniz oldukça artmakta

Bu içerikte PageSpeed hızını arttırmak ve skoru yükseltmek için genel olarak neler yaptığımı anlatacağım. Bu aşamalar her site için geçerli değildir. Çünkü tasarım düzeni, site içerisinde kullanılan kodlar, sitenin kod dili gibi çok durum PageSpeed değerini etkileyen faktörler arasında.

1- Hosting Seçimi

Hosting seçimi birçok durum için oldukça önemlidir. Hem SEO hem de PageSpeed verileri için oldukça etkilidir. Ne kadar sorunsuz bir hosting kullanırsanız hem sunucu yanıt süreniz, hem bağlantı hızınız, hem de sitenizin hızı o kadar iyi derecede olur. Başlangıçta düşük özelliklerde bir hosting kullanabilirsiniz fakat web trafiğiniz ve sayfa sayınız arttıkça hosting paketinizde yükseltmeye gitmenizi tavsiye ederiz. Bu konuda bizim kendi optimizasyonunu yaptığımız sunucumuz var. Optimizasyon yapıldığı halde veriler iyileşmiyor ise genellikle biz bizim sunucularımıza alıyoruz.

İlginizi Çekebilir:  SEO Hosting Nedir?
CDN Kullanımı
CDN Kullanımı

2- CDN Kullanımı

CDN kullanımı için halen fikir ayrılıkları mevcut. Bazı projelerde Google üzerinden indexlerimizin silindiğini test ettik. Farklı servisler kullanarak bu sorunu çözdük. Özellikle paylaşımlı ya da düşük özellikli hosting servislerine sahipseniz bu durum oldukça işinize yarayacaktır. Ben genel olarak projelerimde Cloudflare kullanıyorum. Ücretsiz sürümü bile büyük çoğunlukla işe yarıyor. Cloudflare kullanmak istemeyenler diğer sağlayıcılara bakabilirler.

CDN Tavsiyeleri

Bu firmalara bakarak sitenizi CDN ağına bağlayabilir ve sunucu üzerindeki yükü azaltabilirsiniz. Eğer sunucular ile aranız iyiyse kendi CDN ağınızı kurabilirsiniz.

3- Sunucu Yanıt Süresini Düşürmek

Google PageSpeed Insgiht için en önemli verilerden birisi sunucu yanıt süredir. Yanıt süresinin düşük olmasında birden çok sebep olabilir. Bunların en başında az öncede bahsettiğimiz gibi kullandığınız hosting ya da sunucunun performansıdır. Eğer iyi olduğundan şüpheniz yok ise diğer adımları okumaya devam edebilirsiniz.

PHP 7.x versiyonları son güncellemeleri ile yüksek performansa sahip oldu. Çoğu websitesi sahibi sunucu üzerinde kullanılan PHP sürümünü fazla umursamaz ya da teknik bilgiden dolayı ne olduğunu anlayamayabilir. PageSpeed değerlerinizin yükselmesi için sunucu üzerinde kurulu olan PHP sürümünü kontrol ederek yükseltmenizi tavsiye ederiz.

PHP sürümünüzü yükseltmek için Cpanel üzerinde oturum açın. Ardından “Multi PHP Manager” seçeneğine tıklayarak PHP selector kısmından aktif olan sürümü ve yükseltebileceğiniz sürümleri görüntüleyebilirsiniz. Buradaki tavsiyemiz PHP 7.x ve üzeri sürümlerdir.

Not: PHP Sürümü yükseltmeden önce site yedeği almanızı tavsiye ederiz.

İlginizi Çekebilir: Sunucu Optimizasyonu

4- CSS ve JavaScript Yükünü Azaltma

CSS ve JavaScript kodları yükleme hızını etkileyen en önemli faktörlerden biridir. Bu kodları düzenlerken sitenizde bozulmalar meydana gelebilir. Bu yüzde değişiklik yapmadan önce site yedeğini almanızı yine tavsiye edeceğim. En azından değişiklik yapacağınız dosyanın yedeğini alabilirsiniz.

PageSpeed Insgiht optimizasyonu için kritik olmayan CSS ve JavaScript kodlarını engellemenizi ya da gecikmeli olarak çalışmasını tavsiye ederiz. Bu açılıştaki süreyi hem kısaltacak hem de gecikmeli açılma sayesinde sunucuya binen fazla yük dağıtılacaktır. Paylaştığım kodu sitenizin <head> etiketleri arasına ekleyerek CSS ve JS kodlarında gecikme yapabilir, Google fontlarının yüklenmesini erteleyebilirsiniz.

<noscript id="deferred-styles-number-1">
      &amp;amp;lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Do+Hyeon"/&amp;amp;gt;
    </noscript><script>
    window.addEventListener('DOMContentLoaded', function() {
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles-number-1");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    });
    </script>


5- Görsellerin Optimizasyonu

Görsel sorunları neredeyse tüm sitelerde mevcut. Hepimiz sitemizin daha iyi görünmesi için yüksek kaliteli görseller kullanmak isteriz. Fakat bu açılış ve yüklenme hızında büyük sorunlara yol açabilmetedir. Bu yüzden Google tavsiyesi olan uzantıları sitenizde kullanabilirsiniz

Biz sitede çok fazla görsel var ise (örn: E-Ticaret Siteleri) görseller için CDN kullanıyoruz. Fakat işletmelerin web sitesinde kullanılan görseller daha az olduğu için yeni nesil görsel uzantıları kullanıyoruz. Bu formatta tercih ettiğimiz ise .webp formatı. Hem görsel kalitesinde minimum kayıp yaşanıyor hem de JPEG, PNG gibi dosyalara göre dosya boyutları oldukça düşük.

Cache Kullanımı
Cache Kullanımı

6- Cache Kullanımı

Özellikle WordPress siteler için önbellekleme, dosya küçültme adına birçok eklenti var. Her eklenti her site için iyi olmayabilir. Çünkü sizin sitenizde çalışması gereken dosyaların küçülmesi ya da kapatılması sitenizin hem tasarım hem de işlevinde bozukluk meydana getirebilir. Genel olarak kullandığım eklentileri paylaşıyorum. Sizler de test yaparak uygun olan eklentiyi seçebilirsiniz.

WordPress Cache Tavsiyeleri

  • LiteSpeed Cache (Favorim)
  • Auto Optimize
  • Better Wodpress Minify
  • WP Fastest Cache
İlginizi Çekebilir WordPress SEO

7- Gereksiz Eklenti – Dosya – Tema Temizliği

Tema ya da eklentilerin yanında gereksiz bir sürü eklenti gelebiliyor ya da sürekli eklenti denendiği için diğerlerinin silinmesi unutuluyor. Aslında bu eklentiler hem sunucunuzu hem de sitenizi yormaktan başka bir şey değil. Bu yüzden mümkün olduğunca az eklenti kullanmaya çalışın. Pasif eklentileri kaldırın. Bu hem sitenizin güvenliği ve sağlığı için son derece önemlidir hem de site performansı için dikkat edilmesi gereklidir.

8- GZIP Teknolojisini Kullanın

Her yerde GZIP teknolojisi olarak geçse de aslında bu durum .htacces dosyasına eklenen kodlar ile oluşmaktadır. Yine de kullandığınız hosting/sunucunun bu durumu desteklemesi gereklidir. Aşağıdaki kodları .htacces dosyanıza ekleyerek GZIP sıkıştırması yapabilir, Google PageSpeed Insight değerlerinizi arttırabilirsiniz.

############## CACHING-GZIP ############

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000

<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(css)$">
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A2592000
</FilesMatch>

</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(txt|xml|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip              svgz
</IfModule>
</IfModule>


Pagespeed Optimizasyonu için genel olarak yaptığımız işlemler bunlar. Bu işlemleri yapmadan önce site ve database yedeği almadan başlamamanızı tavsiye ederim. Çünkü kullanılan eklentiler, yapılan çalışmalar gibi durumlardan dosyalarda ve tasarımda bozukluk meydana gelebilmekte.

Pagespeed Insight hatalarını düzeltmek için iletişim bilgilerimden bana ulaşabilir, soru ve sorunlarınızı yorum kısmında paylaşabilirsiniz.

Oguzhan

Ben Oğuzhan Şentürk. Profesyonel olarak gerçekleştirdiğim dijital pazarlama ve SEO bilgilerimi sizlerle paylaşıyor daha fazla kişiye doğru bilgiyi ulaştırmayı hedefliyorum.

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu