PageSpeed sekarang sudah masuk dalam salah satu faktor yang memepengaruhi SERP website kita di Google. PageSpeed di ukur lebih pada optimal tidak nya script, image, dan juga efisiensi penempatan script. Untuk WordPress sendiri score PageSpeed akan sangat tergantung pada theme yang di gunakan. Biasanya theme yang sudah agak jadul akan mempunyai score page speed yang rendah meskipun blog masih kosong. Hal ini karena theme tersebut biasanya belum memperhatikan msalah pengoptimalan image, CSS dan juga Javascript.
Sebelum lanjut ke cara meningkatkan score PageSpeed install dulu page speed untuk Firefox atau Chrome. Bagi yang males install silahkan kunjugni saja gtmetrix.com
Bagi yang mau membuat blog baru sebaiknya cek dulu theme yang akan di digunakan, karena ada theme yang score PageSpeednya terlalu rendah meskipun blog masih kosong (dibawah 60). Theme seperti ini biasanya akan sulit menaikkan score yang 90 meskipun sudah di optimalkan. Alahkah baiknya memilih theme dengan score PageSpeed di atas 80.
Lalu, pakah harus coba satu- satu dulu ?
Tidak. Untuk mengetes page speed theme buka preview theme di new tab.
Beikut ini merupakan faktor – faktor yang mempengaruhi score PageSpeed cara mengoptimalkannya untuk meningkatkan scroe PageSpeed.
Masukan dulu URL ke http://gtmetrix.com. Yang di bahas di bawh ini hanya beberapa faktor yang sering menjadi masalah.
1. Enable Keep-Alive
Ini berkaitan di server, tidak ada yng bisa kita lakukan jika tidak punya kases ke server.
2. Use efficient CSS selectors
Misal padding:2px 2px 4px 3px akan jauh lebih efisien dari pada harus menulis padding-top:2px; padding-right:2px; padding-bottom:4px; padding-left:3px; Urutannya adalah atas, kanan, bawah, kiri.
3. Minify CSS
Ini berkaitan dengan space pada CSS misal :
[sourcecode language=”css”]
.kota{
padding:3px 0 0 0;
border:1px solid blue;
}
[/sourcecode]
Akan lebih efisien bila
[sourcecode language=”css”]
.kota{padding:3px 0 0 0;border:1px solid blue;}
[/sourcecode]
Untuk mengoptimalkannya tidak perlu edit satu – satu, cukup download saja optimized version, kedian replace CSS lama. Ingat backup dulu.
4. Optimize images
Image yang di pakai di theme kadang masih di compress lagi ukurannya tanpa terlalu banyak mengurangi kualitas image. Sama seperti yang css tadi tinggal download optimized version saja.
5. Leverage browser caching
Sialhkan ganti .htaccess dengan kode di bawah ini
[sourcecode language=”js”]
# BEGIN Compress text files
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
# END Compress text files
# BEGIN Expire headers
ExpiresActive On
ExpiresDefault “access plus 5 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/javascript “access plus 604800 seconds”
ExpiresByType application/x-javascript “access plus 604800 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
# END Expire headers
# BEGIN Cache-Control Headers
Header set Cache-Control “public”
Header set Cache-Control “public”
Header set Cache-Control “private”
Header set Cache-Control “private, must-revalidate”
# END Cache-Control Headers
# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
[/sourcecode]
6. Serve scaled images
Hal ini terjadi karena image berukuran besar dipaksa di tampilkan dalam ukuran kecil, misal image utkuran 500×400 di tpakasa di tampilkan dalam width 50×40. Sebaiknya jika ingin menampilkan image sebagai thumbnail di buat ukuran masing – masing atau memakai thimbthumb.
7. Specify image dimensions
Setiap kali menampilkan image pasti width dan height di set, contoh :
[sourcecode language=”css”]
[/sourcecode]
Selain parameter – parameter di atas, pengoptimalan penempatan css dan Javascript juga di perlukan. Contoh plugin Contact Form 7. Plugin ini akan memanggil CSS Contact Form 7 dan Jquery jika di aktifkan. CSS dan Jquery ini seharusnya hanya di butuhkan saat halaman Contact di buka, tetapi kenyataannya di setiap halaman CSS dan Jquery dari Contact Form 7 ini diload di semua halaman. Nah hal seperti ini juga dapat mnegurangi PAge Speed karena menambah load script tetapi script tersebut tidak di butuhkan di halaman tersebut.
Mengoptimalkan Contact Form 7
Tambahkan kode ini di function.php
[sourcecode language=”php”]
/**
* Functions: Optimize and style Contact Form 7 – WPCF7
*
*/
function deregister_cf7_js() {
if ( !is_page(‘contact’) ) {
wp_deregister_script( ‘contact-form-7’ );
}
}
add_action( ‘wp_print_scripts’, ‘deregister_cf7_js’, 100 );
function deregister_ct7_styles() {
wp_deregister_style( ‘contact-form-7’ );
}
add_action( ‘wp_print_styles’, ‘deregister_ct7_styles’, 100 );
[/sourcecode]
Sedikit tambahan, kalau merasa blognya lemot coba cek pakai plugin P3 (Plugin Performance Profiler). Plugin ini berguna untuk mengetahui plugin apa aja yang memakan resource paling besar.
Semoga bermanfaat.
