WordPress ile Google PageSpeed Insights’ta 100 / 100 Puan Alma Yöntemi

WordPress ile Google PageSpeed Insights’ta 100/100 puan nasıl alınır? Aslına bakaranız WordPress oldukça yaygın bir İçerik Yönetici Sistemi (CMS) olmasına rağmen performans ve kodlama açısından oldukça başarısız bir yazılımdır. Çok fazla CPU tüketimi bir çok Webmasterıda adeta bezdirmiş durumdadır. Ücretsiz olması ve kolay kullanılabilmesi nedeni ile pek çok kişinin ilk tercihi olmayı başarmıştır. Ancak artık internetin Masaüstü ve Laptoplardan Mobile kayması ile Hızlı açılış çok büyük öneme sahip oldu. Bu nedenle Google site sahiplerinin web sitelerinin hızlarını kontrol edebilmeleri için Google PageSpeed Insights aracını çıkartmıştır. Bu araç site hızını test edip bize eksileri söylüyor.

Google PageSpeed Insights Nedir

Google arama motorunun bu ücretsiz hizmeti kullanıcılara sitelerinin hızını etkileyen faktörleri görmenizi sağlıyor. Hatta size önerilerde bulunuyor. Yani düzeltmeniz gerekenleri size gösterip nasıl düzeltebileceğiniz hakkında bilgiler veriyor. Optimizasyon hakkında fazla bilginiz yoksa bile fikir sahibi olabiliyorsunuz. Sistem Web sitenizi Masaüstü ve Mobil cihazlar şeklinde iki farklı test yapılıyor. WordPress sitenizde kullandığınız tema ve eklentilerle puanınızı yükseltebilirsiniz. Ancak burada asıl amacınız sayfanızın açılış süresi olmalıdır.

Sunucu Yanıt Süresini Kısaltın

Server Response Time (sunucu yanıt süresi) web sunucusuna belirli bir istek gönderen bir web tarayıcısı ile gönderilen isteği yanıtlayan sunucu arasındaki süreyi ifade eder. Bu sorunun temel nedeni sitenizin barındırmakta olduğu hosting paketidir. Bu paketler iyi bir sunucudan oluşsa bile sunucunun optimize edilmesi de gerekmektedir. Sunucu yanıt süresini kısaltmanın en iyi yolu sıkıştırmayı açmak ve cache eklentisi kullanmaktır.

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

Google Gzip sıkıştırmaya büyük önem vermektedir. Eğer paylaşımlı bir hosting kullanıyorsanız bu işlemi hosting firmanızdan yapmasını isteyin. Bu diğer kullanıcılarında işine gelecektir. Eğer Hostin yönetimi elinizdeyse yapmanız gerekenler şu şekilde;

Apache Sunuclarda Gzip Etkinleştirme

Eğer Apache sunucu kullanıyorsanız .htaccess dosyasına şu kodları eklemeniz gerekiyor.

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

Nginx Sunuclarda Gzip Etkinleştirme

Eğer Nginx sunucu kullanıyorsanız nginx.conf dosyasına eklemeniz gereken kodlar şunlar.

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;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

Resimleri Optimize Etme

Webmasterları en çok sorun yaşadığı problemlerden biride resimlerdir. Web siteniz içerisinde yer alan görseller sitenizin yüklenme ve açılış süresine doğrudan etki etmektedir. Bunun için Optimus (WordPress Image Optimizer) eklentisini kullanacağız. Bu eklenti resimlerinizi optimize ederek yani olması gereken boyutta ayrı bir kayıt alarak açılış süresinin hızlandırmanızı sağlar.

Optimus WordPress Image Optimizer Eklentisinin Kullanımı

Eklentiyi kurduktan sonra ayarlar bölümünde düzenleme yapmanız gerekenler şu şekilde;

Original Images: Optimus eklentisi normalde sadece ön izleme (thumbnail) olarak kullandığınız resimleri optimize eder. Eğer bu seçeneği işaretlerseniz kaynak resimler de optimize edilir.

Image Metadata: Resimler için oluşturulan meta verilerini siler. Resimler EXIF, telif hakkı ve fotoğraf oluşturma bilgilerini tutar.

WebP Files: Resimler için WebP dosyaları oluşturur.

HTTPS Connection: TLS şifreleme kullanarak resimlerin transferini gerçekleştirir.

Optimize During Upload: Yükleme esnasında resimlerin optimize işlemini başlatır.

Oluşturmayı Engelleyici JavaScript ve CSS Kodlarını Kaldırın

Web siteniz tarayıcınız üzerinden ziyaret edildiği zaman sitenizin düzgün görünmesi için CSS ve JavaScript dosyaların yüklenmesi gerekmektedir. Bu dosyaları kaldırmak işinizi görmez çünkü tasarımınız bozulur. Bunun için en iyi yol Cache eklentisi kullanmak yada manuel olarak bu satırları footer’a taşımaktır. Bunun için kullanmanız gereken kodlar şu şekilde;

Kodları temanızın functions.php dosyasının içine ekleyeceksiniz;

function sdt_remove_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'sdt_remove_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999 );

function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

[stextbox id=’alert’ caption=’Uyarı’]NOT: Bazı fonksiyonlarınız çalışmayabilir. Bu nedenle Test yapmayı unutmayınız.[/stextbox]

Javascript ve CSS Dosyalarını Küçültme

Bu işlem için Cache Enabler – WordPress Cache eklentisini kullanacağız. Önbellek etkinleştirici eklenti sayesinde statik HTML dosyaları oluşturur ve bunları sunucular diskinde saklar. Web sunucusu statik HTML dosyasını teslim edecek ve kaynak yoğunluğunu arka uç işlemlerini önleyecektir. Bu WordPress önbellek motoru web sitenizin performansını artıracaktır.