WordPress Gtmetrix PageSpeed Sorunları ve Çözümleri

SeLoReWebmaster 2 Yorum

Gtmetrix PageSpeed Sorunları ve Çözümleri

Page speed sorunlarının wordpresste çözümü için çeşitli eklentiler mevcut fakat siteyi hızlandıralım derken eklenti kurup yavaşlatmanın anlamı yok diye düşünüyorum. Bu yüzden çeşitli araştırmalar yapıp bu sorunları kodlar yardımı ile kendi sitem için çözdüm ve sizlerde yararlanın istediğim için paylaşıyorum. Bu anlattığım çözümler apache web serverde denenmiştir diğerlerinde çalışır mı bilemiyorum.

1.Enable gzip compression
Gzip sıkıştırma özelliğini kullanmak için sunucumuzda Deflate modülünün aktif olması gerekiyor. WHM'de bunu EasyApache ile apache derlemesi yaparken modül listesinden bulup aktif edebiliriz. gzip compression çözümü için .htaccess dosyamıza bu kodları ekliyoruz.

<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>

2.Leverage browser caching
Tarayıcı Önbelleğine Alma Özelliğinden Yararlanmayı aktif hale getirmek için .htaccess dosyamıza bu kodları ekliyoruz

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 year"

## EXPIRES CACHING ##

3.Enable Keep-Alive
Bu özellik Off olduğunda apache her request(istek) için yeni bir connection (bağlantı) kurar. Bu durum sayfa açılış hızımızı büyük ölçüde etkiler. KeepAlive On olarak değiştirildiğinde, ilk istekten sonra her istemci için bağlantı belirli bir süre açık kalır. Her yeni istekte yeni bir bağlantı açılmaz, bunun yerine var olan bağlantı kullanılır. Bu özelliği kullanabilmek için öncelikle WHM panelden aktif etmeliyiz. Bunun için Apache Configuration >> Global Configuration bölümünden ayarları şu şekilde değiştiriyoruz.
Keep-Alive  : On
Keep-Alive Timeout : 3
Max Keep-Alive Requests : 60

Daha sonra ise .htaccess dosyamıza bu kodları ekliyoruz

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

Keep-Alive özelliğinin aktif olup olmadığını bu siteden kontrol edebilirsiniz http://www.giftofspeed.com/check-keep-alive

4.Remove query strings from static resources
Bu sorunun çözümü için temanızın functions.php dosyasına bu kodları ekleyin.

/*Remove query strings*/
function ewp_remove_script_version( $src ){
return remove_query_arg( 'ver', $src );
}
add_filter( 'script_loader_src', 'ewp_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'ewp_remove_script_version', 15, 1 );
/*Remove query strings*/

5.Specify a Vary: Accept-Encoding header
Bu sorunun çözümü için .htaccess dosyasına bu kodları ekleyin.

<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

6.Defer parsing of JavaScript

Bu sorunun çözümü için temanızın functions.php dosyasına bu kodları ekleyin.

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Bu kodu eklediğiniz halde defer parsing of javascript altında eğer wp-includes/js/jquery/jquery.js dosyasında uyarı veriyorsa jquery kütüphanesinin daha hızlı yüklenmesi için google'dan çekmenizi istiyor demektir. bunun içinde temanızın functions.php dosyasına bu kodları ekleyin

//Making jQuery to load from Google Library
function replace_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'replace_jquery');

7.Specify image dimensions

Bu uyarının altında belirtilen resimleriniz var ise bu resimlerin görüntü boyutları belirlenmemiş anlamına gelmektedir.
Örnek olarak görüntü boyutları belirlenmemiş bir resim etiketi

<img src="image.jpg" />

Bu da görüntü boyutları belirlenmiş bir resim etiketi

<img src="image.jpg" width="200" height="200" />

Bunun kolay çözümü için grepWin uygulamasını kullanabilirsiniz. Kullandığınız temayı bilgisayarınıza indirdikten sonra klasöre sağ tıklayıp grepWin seçeneğine tıklayın. örneğin hatalı resmin ismi image.jpg olsun, search for kısmına image.jpg yazıp alttan search butonuna tıklayın. Bu temadan temaya farklılık gösterebilir,arama sonuçlarında content-featured.php veya content.php çıktı ise sırayla bunlara sağ tıklayıp notepad ile açıp yukarıda örnekte gösterdiğim gibi boyut belirleyin.

Yazar Hakkında

SeLoRe

Facebook Twitter

Herhangi bir konuda sorunuz varsa soru-cevap bölümünden sorabilirsiniz. İstek, şikayet ve önerilerinizi iletişim bölümünden yazabilirsiniz.

Abone Ol
Bildir
guest

2 Yorum
En Yeniler
Eskiler Beğenilenler
Inline Feedbacks
View all comments
Ahmet
5 yıl önce

Bilgiler için teşekkürler emeğinize sağlık. Gmetrix'te Defer parsing of JavaScript uyarısı için 6.maddede belirttiğiniz kodları functions.php de ?> den önce ekledim. Ancak dediğiniz gibi yine Gmetrix'te defer parsing of javascript altında wp-includes/js/jquery/jquery.js dosyasında uyarı veriyor. Google'dan çekmek için bu kodları

//Making jQuery to load from Google Library

function replace_jquery() {

if (!is_admin()) {

// comment out the next two lines to load the local copy of jQuery

wp_deregister_script('jquery');

wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2');

wp_enqueue_script('jquery');

}

}

add_action('init', 'replace_jquery');

functions.php de tam olarak nereye ekleyeceğiz hocam teşekkürler?

SeLoRe
Reply to  Ahmet
5 yıl önce

Fark etmez hocam diğer kodun altına ekleyebilirsin.