Gtmetrix ve Pagespeed Hatalarını Düzeltmek

By | 13 Temmuz 2019
Gtmetrix ve Pagespeed
Gtmetrix ve Pagespeed

Gtmetrix ve Pagespeed hataları nasıl düzeltilir? Evet arkadaşlar bu gün sizlere genelde sitemizi test ettiğimiz Gtmetrix, Pagespeed veya Pingdom gibi araçların verdiği uyarıları nasıl düzeltiriz veya nasıl minimize edebiliriz dilimin döndüğünce anlatmaya çalışacağım. Genelde bu üç servisin bize verdiği uyarılar hemen hemen birbiriyle örtüşmektedir. Önce Gtmetrix servisinin verdiği uyarılara hep birlikte göz atalım. Bize ne uyarılar veriyor, ne yapmamızı istiyor, sitemizi test edelim ve aşağıdaki resmi inceleyelim.

Gtmetrix
Gtmetrix

Gördüğünüz üzere değerler oldukça can sıkıcı PageSpeed Scor %54, Yslow Skor %49, hemen sağındaki değerler bize şunu söylüyor, sayfa 4 dakika 9 saniyede yüklendi, Sayfanın toplam boyutu 1.33 MB ve sayfanızda toplam 83 tane istek var. Biraz kafası çalışan ve uyarılara kulak asanlar için bu değerleri asgariye indirmek işten bile değil, hep beraber alttaki uyarılarda ne yapmamız isteniyor, nasıl düzeltebiliriz bakalım inşallah.

Enable Gzip Compression

Türkçe meali Gzip Sıkıştırmasını Aç diyor, o sekmeyi tıkladığımızda bize sıkıştırmamız gereken dosyaların isimlerini ve yollarını gösteriyor, bir de diyor ki bu dosyayı sıkıştırmanız şu kadar tasarruf sağlar. Hiç üşenmiyoruz arkadaşlar isimleri verilen dosyaları tek tek masa üstüne indiriyoruz, bunlar zaten Css ve Js dosyalarıdır, google arama motoruna “Online Css, Js Sıkıştırma” yazdığınızda zaten bir sürü bu konuda hizmet veren site çıkıyor, bu servislerde dosyalarımızı sıkıştırıp, sıkıştırılmış hallerini alıp kaydediyoruz ve sitemize yüklüyoruz. Tabi bununla da bitmiyor, sitenin genelinde bir gzip sıkıştırması uygulamak için .htaccess dosyasına eklenmesi gereken bir kod betiği var. Sitenizde bulunan tüm html, css, js, text ve XML dosyalarını sıkıştırmak için aşağıdaki kodu .htaccess dosyasına ekliyoruz.

<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascript</IfModule>

Gtmetrix ve Pagespeed Bir Eklenti Kullanmalı mıyım?

Değerli arkadaşlar google sayfalarında site optimizasyonu ile ilgili verilen bilgilerin çoğu WordPress sistem üzerine anlatılmış ve şu eklentiyi kullanın, bu eklentiyi kullanın diye bir çok tavsiyede bulunulmuş, unutmayın her eklenti beraberinde bir sürü Javascript ve Css dosyasını da beraberinde getirir ve sunucuya aşırı yük sağlar, ben eklenti kullanama taraftarıyım, ne kadar az eklenti kullanırsak sitemiz o kadar hafif ve hızlı çalışır, işlerimizi kod parçaları ile halletmeye çalışalım. Şimdi yukarıda belirtilen js ve css dosyalarını tek tek sıkıştırdığınızı ve .htaccess dosyasına verdiğim kodu eklediğinizi varsayarak hemen sitemizde gzip etkin olmuş mu bunu kontrol etmek için https://varvy.com/tools/gzip/ aracına gidiyoruz ve testimizi yapıyoruz. Aşağıdaki gibi bir görüntü çıkmışsa gzip etkin olmuştur ve çayınızdan rahatça bir yudum daha çekebilirsiniz.

Gzip
Gzip

Leverage Browser Caching

İkinci maddeye geldik burada mealen diyor ki “Tarayıcı Önbelleğini Etkinleştir” daha da açıklayıcı olması bakımından “Sitende bir sürü jpg, png, css veya Js dosyası var bunların önbelleğe alma ömrü belirtilmemiş, ne yapalım patron” diye soruyor, hemen .htaccess dosyamızı açıyoruz ve aşağıdaki kod betiğini ekliyoruz. Unutmadan söyleyeyim arkadaşlar .htaccess dosyası çok önemli bir dosyadır, değişiklik yapmadan önce hem .htaccess dosyasının hem de sitenizin yedeği mutlaka elinizde olsun.

## EXPIRES CACHING ##
<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>
## EXPIRES CACHING ##

burada farklı uzantılı dosyaların ne kadar süre ile önbelleğe alınması gerektiği belirtilmiş, örneğin jpg ve png uzantılı dosyaların önbellek süresi 1 yıl iken, text veya Javascript dosyaları 1 ay olarak belirtilmiş, verilen uyarılara göre bu süreleri uzatmak veya kısaltmak mümkündür.

Minify Javascript ve Minify Css

Ben iki maddeyi birlikte yazdım, burada mealen diyor ki; “Javascript ve Css Dosyalarınızı Küçültün” Gtmetrix aracının en güzel özelliklerinden biri de Javascript ve Css dosyalarının küçültülmüş ve optimize edilmiş halini bize vermesidir. Zaten birinci madde de bunu halletmiştik

Defer Parsing Of Javascript

Burada mealen diyor ki “Javascript Ayrıştırmasını Ertele” eklenti kullanmadan devam ediyoruz ve belirtilen javascript koduna “defer” özelliği ekliyoruz. <script src=”javascript-dosyasinin-yolu.js” defer=”defer”></script> böylece Javascript dosyalarının yüklenmesini erteliyor ve geciktiriyoruz. Ayrıca önemli uyarı tüm Javascript dosyalarını footere taşıyın </body> yani kapanma etiketinin hemen üzerine ekleyin. Site açılma hızınızda önemli bir etken, kulağınıza küpe olsun.

Inline Small Javascript

Burada şunu demek istiyor, “Küçük, minicik bir Javascript dosyan var, neden bunu HTML’de satır içerisinde göstermiyor sun?” Uyarı verilen Javascript dosyasını <script> document.getElementById(“demo”).innerHTML = “Örnek JavaScript!”; </script> bu şekilde göstermen lazım.

Optimize the order of styles and scripts

Burada mealen diyor ki “Stillerin ve Komut Dosyalarının Sırasını Optimize Edin” Arkadaşlar bir site açıldığında ilk önce Css dosyaları, ondan sonra Javascript dosyaları yüklenir. Eğer böyle bir uyarı görüyorsanız, harici CSS dosyaları, harici bir Javascript dosyasından sonra yüklenmiştir. Hemen kontrolünüzü yapıyorsunuz ve sıralamayı değiştiriyorsunuz, unutmayın önce CSS sonra Javascript.

Avoid Bad Request

“Kötü İsteklerden Kaçının” diyor, yani sitende olmayan ve 404 döndüren bir bağlantıyı işaret ediyor, örnek vermek gerekecek olursak sen HTML dosyanda favicon yolu göstermişsin, fakat herhangi bir favicon dosyan yok diyor.

Minify Html

Html dosyanı küçült diyor, yani html dosyanı notepaad benzeri bir araçla aç, satırlar arasındaki beyaz boşlukları kaldır.

Specify a cache validator

“Bir Önbellek Doğrulayıcısı Belirtin” Bu uyarı genelde dışarıdan çağrılan Javascript dosyalarıyla ilgilidir, dışarıdan çağrılan dosyalara müdahale edemiyoruz.

Optimize İmages

“Görüntüleri Optimize Edin” diyor, önemli bir konu arkadaşlar eğer sitenizde bolca resim kullanıyorsanız, resmi sitenize yüklemeden önce mutlaka sıkıştırma sitelerinde sıkıştırıp sonra sunucunuza yükleyin.

Evet arkadaşlar bir makalenin daha sonuna gelmiş bulunmaktayız, kafanıza takılan hususlar olursa konu altından yorum şeklinde sorabilirsiniz. Gtmetrix ve Pagespeed hatalarını düzeltmeyi öğrenmiş olduk.