Google PageSpeed Insights puanlarını yükseltmek

Merhaba arkadaşlar,

Google’ın PageSpeed aracında artık yeşil puanları görmek biraz zorlaştı, bunun sebebi yapacağımız işlemlerin çeşitli alanlarda olması.

 

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

(bkz: google oluşturmayı önleyen JavaScript…)
Burada google

1 ) .css ve .js dosyalarımızı </html> kapanış tagı altına koymamızı istiyor. (Css dosyasını html tagnın altına koyduğumuzda önce komple html yükleniyor ve sonra style alıyor // Berbat bir durum)

2 ) .js dosyalarımıza async tagını eklememizi istiyor.

3 ) Tüm css’leri tek css’de, tüm js dosyalarını tek js dosyasında toplamamızı istiyor.

Örnek :

|Kaynakları Küçültme (HTML, CSS ve JavaScript)

(bkz: google kaynakları küçültme)

Burada HTML, CSS ve Javascript dosyalarını sıkıştırıp küçülteceğiz.

CSS‘i küçültürken csscompressor.com sitesini kulladım (küçültme oranını veriyor).

JS‘i küçültürken jscompress.com sitesini kullandım (küçültme oranını veriyor).

HTML küçültürken ise PHP script’imdeki kodların başına (şükür teknoloji gelişti) stackoverflow‘daki aşağıdaki kodu ekledim.

|Resimleri optimize edin

(bkz: google resimleri optimize edin)

Ben resim optimizelerin de daima tinypng.com‘u kullanırım

|Sıkıştırmayı Etkinleştirme

(bkz: google sıkıştırmayı etkinleştirin)

En cafcaflı kısmı ve en çok sevdiğim kısmı bu oldu. Linux bilgimi biraz tazelemiş oldum 🙂

Eğer apache kullanıyorsanız mod_deflate modülünü aktifleştirmeniz gerekmektedir. Yabancı kaynakları anlamata zorluk çekiyorsanız Doğan Ergezer konuyu burada anlatmış  bkz :   Apache Hızlandırma mod_deflate Gzip Kullanımı

Bu kurumulu yaptım ama şöyle bir uyarı aldım

Bu hatayı araştırırken tekrar stackoverflow’dan bu çözümü buldum ama yapamadım ve Servis sağlayıcım Data TR hızlıca çözüme ulaştırdı sağolsun varolsunlar 🙂

Mod_deflate modülü kuruldumu diye bu adresden kontrol ettim  “aycan.net is Compressed” uyarısını görünce sununcu tarafı tamamdır.

img

Bu işlem bittikten sonra hemen sıkıştırılacak dosyaları .htaccess ‘de belirtiyoruz yapıyoruz.

Aşağıdaki kodları .htaccess dosyanızın en altına yapıştırıyoruz

Bu şekilde 329Kb ‘lık css dosyası Chrome -> Network sekmesinden 50Kb olarak, 107KB’lık JS dosyası 37.9KB olarak download oluyor. // Canvar birşey

gzip

Tarayıcı Önbelleğine Alma Özelliğinden Yararlanma

Son işlemimizide .htaccess dosyasından yapacağız. .htaccess dosyasının en altına aşağıdaki kodları ekliyoruz.

Ve işlemimiz tamamlandı.

google-speed

Bu yazının altına sizlerden yeşili yeşilli googlespeed ekran görüntüleri bekliyorum.

 

Kalın sağlıcakla..

 

 

 

 

 

 

 

 

“Google PageSpeed Insights puanlarını yükseltmek” üzerine 10 yorum

  1. Bu güzel anlatım için teşekkür ederim. Çalışmalara Pandalina sitemizde başladık. Yararını göreceğimden eminim. 🙂

  2. Hocam birçoğunu webaudiocutter.com web sitemde uyguladım ancak bazı sıkıntılar oluyor.

    Birincisi adsense reklamları dolayısıyla tarayıcı önbellemekleme uyarısı kalıyor aslında dediğinizi yaptım bunun çözümü var mı?
    İkincisi html li küçültün uyarısı çıktı aslında css ve js dosyalarını küçültmüştüm.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir