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.
