Faydalı Bilgiler

Google PageSpeed Puanı Nasıl Yükseltilir?

  • 0 Comment
  • 28 Ağustos 2017
About Hakan Demirel

Özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Social Links

Google PageSpeed Tools, web sitenizin sayfa hızını ölçmeye yarayan online bir araçtır. Bu araç sayesinde sitenizin açılış hızını test edebilir, 100 üzerinden puanlandırma yapabilirsiniz. Ayrıca puanı düşük çıkan web sitenizin hızını yükseltmek içinde neler yapmanız gerektiğine dair önerileri de görebilirsiniz. Puanınızın yükselmesi demek web sitenizin iyi optimize edilmesi demektir.

Google PageSpeed Puanı Kaç Olmalıdır?

0–64 arasında kırmızı (web site hızınız çok yavaş/yavaş)
65–84 arasında turuncu (web site hızınız ortalama) 
85–100 arasında yeşil (web site hızınız iyi)

Google PageSpeed Puanı Nasıl Yükseltilir?

Öncelikle Google PageSpeed sayfasına giriş yaptıktan sonra test etmek istediğiniz web sitesinin adresini girerek Analiz Et butonuna basmanız gerekiyor. Yükleme barı dolduktan sonra sonuçları hemen alt kısımda alabilirsiniz.

1- Sıkıştırmayı etkinleştirin

Bu uyarıyı alıyorsanız sunucunuz üzerinde Gzip etkin değil yada web siteniz için kullanılmıyor demektir. Hızlı bir şekilde etkinleştirmek için .htaccess dosyasını ve komutlarını kullanabilirsiniz.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

.htaccess ile Gzip modunu aktif hale getirmek:

Apache web sunucuları için Gzip modunu aktif hale getirmek:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

NGINX web sunucuları için Gzip modunu aktif hale getirmek:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

2- JavaScript’i küçültün

Web sitenizde kullanmış olduğunuz JavaScript kodlarını ve JavaScript kütüphanelerini küçültmeniz, web sitenizin hızını da etkileyecektir. Herhangi bir yerden JavaScript indirirken yada web sitenize çekerken .min.js olmasına dikkat etmelisiniz. Burada ki min ifadesi Minify’dan geliyor yani sıkıştırılmış minimize edilmiş JavaScript kütüphanesi olduğunu söylüyor.

Eğer kodları kendiniz yazdıysanız sıkıştırmak için https://jscompress.com/ adresinden faydalanabilirsiniz

3- HTML’nizi küçültün

Bu sorunu çözmek için HTML kodlarınızdaki gereksiz girdileri ve boşlukları temizlemeniz hatta yapabiliyorsanız tek satır haline getirmeni işe yarayacaktır. Bazı hazır sistemlerdeki Cache (önbellek) sistemleri bu küçültmeyi otomatik olarak yapıyor. Eğer web siteniz WordPress ise her açılışta oluşan sorguları azaltmak ve hızlı bir açılış sayfasına sahip olmak için Wp-Cache eklentisini kurabilirsiniz.

4- Görünür içeriğe öncelik verin

Web sitesinin açılışında sadece açılışta ekrana gelecek verilere öncelik verin, yani sayfa açıldıktan sonra oluşacak içerikleri daha sonraki satırlara kaydırın.

5- CSS’yi küçültün

2. maddede JavaScript için anlattığım durum CSS dosyaları içinde geçerli. CSS dosyalarınızı küçültmek için https://cssminifier.com/ adresinden faydalanabilirsiniz.

6- Tarayıcı önbellekleme özelliğinden yararlanın

Statik dosyaları kullanıcıların tarayıcılarında önbelleğe alınmasını sağlayarak, aynı kullanıcının her ziyaretinde bu dosyaları tekrar tekrar indirmesini engelleyebilir, bu sayede web sitenizin hızlı bir şekilde açılmasını sağlayabilirsiniz.

Not: Bu komutlar dışardan çektiğiniz JS dosyalarında işe yaramayabilir. Örneğin; Analytics, Google API vb.

Bunun için sunucularda bulunan Expires özelliğinden yararlanabilirsiniz.

 <IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</IfModule>

7- Resimleri optimize edin

Web sitenizde kullandığınız resimler göründüğünden daha büyük boyuta sahip olabilir. Fotoğrafları optimize etmek için bir çok araç bulunuyor. Benim önerim online olarak çalışan ve tek seferde 20 görsele kadar ücretsiz bir şekilde optimize eden TinyPng: https://tinypng.com/

8- Sunucu yanıt süresini kısaltın

Bu madde %90 sunucu alt yapınızdan kaynaklı diyebilirim, yani hızlı bir sunucu firmasından hosting almak bu sorunu çözecektir.

9- Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

Site içeriğiniz oluştururken araya giren CSS, JavaScript vb kodları sitenizin kodlarının en altına ekleyerek içeriğin önce açılmasını sağlayabilirsiniz. Bu da hızı oldukça arttıracaktır.

Leave a Comment