Google Pagespeed Test Aracında en iyi değer nasıl elde edilir ?
Bildiğiniz gibi website yükleme hızı genel kullanıcı deneyimi için önceliğe sahiptir ve yüzlerce SEO derecelendirme faktörlerinden sadece birisidir. Günümüzde insanlar artık 4–5 saniyeden fazla bir sayfayı bekleyemiyor ve maalesef siteye girmeden çıkıp gidiyorlar. Ve bu da doğal olarak sizin için ziyaretçi / müşteri kaybı anlamına geliyor.
Çevrimiçi trafiğin %50'sinden fazlası mobil cihazlardan geliyor ve herkes bir anda sitenin yüklenmesini bekliyor. İşte bu yüzden sizler için Google Pagespeed test aracında siteniz için en iyi değeri nasıl elde edebiliriz bunu göstereceğim.
Giriş
Deneme yaptığım siteyi şu anda kurdum. Temasını yükledim ve böyle bir basit tema için aldığım değerler gerçektende hiç iç açıcı değildi.
Siz de bu resimden görüyorsunuz işte mobilde 63 masaüstü cihazlarda 79 değerini aldım.


İşte bu noktada bazı şeyleri yapmadığımı farkettim. Peki ne yapmak gerekirdir sizce ? Tabi ki her ne kadar eklentileri sevmesekte bizi bu noktada maalesef eklentiler kurtaracak.
Tabi eklenti kullanmış olsakta en iyi değeri hemen elde edemeyeceğiz. Eklenti harici yapmamız gereken şeylerde mevcut.
Sayfaları hızlandırma
İzlediğim adımları göstermeye başlamadan önce bir kaç şey söylemek istiyorum. Google pagespeed aracı size öneriler sunar sitenizi en hızlı hale getirmeye çalışır ancak her ne kadar en iyi değeri almış olsanız bile bazen siteniz hızlı açılmayabilir bunun sebebi ise kullandığınız hosting ile alakalıdır.
- Adım: Resimleri optimize edelim
Benim kullandığım temada herhangi bir resim yok o yüzden Google pagespeed aracında resimlerle alakalı bir uyarı vermedi. Ancak büyük ihtimalle sizin kullanmış olduğunuz temanızda resimler olacaktır o yüzden aşağıdaki önerilere dikkat etmenizi öneririm.
Resimleri sıkıştırmak için yapmanız gereken şey compressor.io ve tinypng sitelerini kullanın. Bu sitelerin en güzel yanı ücretsiz olması. Örnek olarak 258KB’lık bir fotoğrafı compressor.io ile dönüştürdüm ve aldığım sonuç oldukça iyiydi. %53 oranında fotoğrafı sıkıştırdı ve fotoğrafda çok az bir değişim meydana geldi. Bu da zaten normal ziyaretçi tarafından fark edilmeyecek bir şeydir.



Siz de sanırım aradaki farkı anlayamamışsınızdır.
Örnek olarak websitenizde 300x300 piksellik bir alan mevcut ve siz oraya bir resim eklediniz bu resimin boyutunu da öyle bir ayarlamanız gerekiyor ki 300x300 pikselden daha büyük olmamalı ve CSS ile resimin değeri ile oynamamalısınız.
Yukarıdaki gösterdiğim yöntemi sitenizde ne kadar resim olursa olsun farketmez yaptığınız takdirde çok iyi sonuçlar elde edeceğinizi garanti ederim.
2. Adım: CSS ve JS dosyaları sıkıştıralım
Aynı şeyi CSS ve JS içinde yapmamız gerekmektedir.

Görüyorsunuz pagespeed test aracında CSS’yi küçültün diye uyarı verdi.
CSS ve JS’de küçültme işlemi gereksiz boşlukları, karakterleri ve yorumları kaldırarak dosyanızın boyutunu küçültür. Programcılar genellikle kodlama sırasında boşluk ve yorum bırakırlar. Böyle şeyler bile CSS ve Javascript dosyalarınızın boyutunun iki katına çıkmasına sebep olan şeylerdir.
Wordpress kullandığınızı düşünüyorum ve bu durumda sizin için gerekli olan eklentinin adı Autoptimize’dır.
Bu eklentiyi Wordpress sitenize kurup aktifleştirin.
Yönetici panelinde Ayarlar altında Autoptimize menüsüne girip. Aşağıdaki söylediğim başlıklara tik koyun ve kaydedin.
HTML kodunu optimize et
JavaScript kodunu optimize et
CSS kodunu optimize et
Bu işlemi yaptıktan sonra aşağıdaki fotoğrafta gördüğünüz gibi başarılı bir şekilde HTM,Javascript ve CSS kodlarımızı küçülttük.

Bu işlemi yaptıktan sonra Pagespeed test aracında aldığım değer 68 / 84 ile değişti.
Şunu da söylemeden geçmeyeyim eğer bir CDN kullanırsanız siteniz için çok iyi olur ancak daha çok yeni bir siteniz varsa CDN kullanmak sizin için pek mantıklı bir şey olmayabilir.
Bunlar bittikten sonra pagespeed test aracı şöyle bir hata gösterdi bana.

İşte burada yapmanız gereken şeyleri söyleyim kısaca.
Örnek olarak temanızda Javascript dosyaları farklı sunucularda barınıyorsa bunları kendi hostunuza yükleyin. Ve tüm JS dosyalarını tek bir javascript dosyası içinde toplayın.
Autoptimize eklenti ayarlarına geri gidin ve üstte bulunan Gelişmiş Ayarları Göster butonuna tıklayın.
- Javascript seçenekleri altında bulunan JavaScript’i zorla <head>’de yüklet tikini kaldırın.
- Autoptimize’dan hariç tutulacak script’ler: alanındaki herşeyi silin.
- CSS seçenekleri altında bulunan Tüm CSS’i “inline” olarak düzenle kısmına tik atın.
Bu işlemleri de yaptıktan sonra sitenizde fontawesome veya google font gibi dosyalar varsa bunları </head> altına alın.
Bunları yaptıktan sonra aldığım değerler eskiye göre çok daha iyiydi.


Son olarak .htaccess dosyanızın en altına aşağıdaki kodu yapıştırın ve kaydedin.
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>İşte herşey bu kadar. Siteniz için en iyi değerleri elde etmiş olmalısınız. Eğer bunları yaptığınız halde yine de pagespeed değerleriniz düşük çıkıyorsa hostunuz yavaşlığından kaynaklanıyordur.
Bir sonraki yazımda görüşmek üzere…
