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.

Theme Preview

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 :

.kota{
padding:3px 0 0 0;
border:1px solid blue;
}

Akan lebih efisien bila

.kota{padding:3px 0 0 0;border:1px solid blue;}

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

# BEGIN Compress text files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>
# END Compress text files

# BEGIN Expire headers
<ifModule mod_expires.c>
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"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

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 :

<img src="gambar.gif" width="100" height="100" />

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

/**
 * 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 );

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.

About the author

Related Post

23 Comments

  1. Hadie Danker

    Dahsyat suhu….. langsung maknyus nyus nyus nyussssss speednya. 😉

  2. Aru Martino

    keren mastah….ijin belajar disini ya? :-)

  3. aditiya

    mantap… yang contact form itu yang mesti binggung ngatasi nya mastah…

    91 91 :)

  4. blogwawan

    keren mastah,ane langsung praktekin 😀
    thanks suhu

  5. amdhas

    Themes asli wp di derectory ga bakalan ada yang di atas 85 apalagi 90..karena standart pensubmitan css tidak boleh di minify, harus standart kode wordpress, sumber ga boleh static, style harus di enquque, harus berfungsi lebih.

    WordPress menginginkan theme yang maksimal terlebih dahulu karena untuk optimasi itu tergantung pengguna..nah klo yang di optimasi dengan script apalagi hack di functions seperti di atas itu sampai lumutan ga akan masuk directory.

    Klo saya membuat theme ga memikirkan optimasi karena itu urusan user bukan urusan saya..yang musti di perhatikan adalah standart wp, tidak ada hack dan berfungsi dengan baik di versi terbaru. Semakin banyak fitur theme semakin berat tapi semakin user friendly di backend..

    Nah urusan optimasi biar user dan plugin..lagian ngapain ada plugin..biarlah mereka yang bertugas bukan pembuat theme. OTTO and matt mullen said..

    wp tak menginginkan minify..terkecuali pakai bootstrap..

  6. alimustikasari

    wah mantab benar…sip…tidak menyesal main kesini.. 😉

  7. Abi

    WOW, ilmu tingkat tinggi 😀
    mesti banyak2 mampir di blog ini

  8. Nitta

    menyimak….. ; supaya penjualan makin lancar…. thanks ilmunya Mbak.. 😆

  9. arsipen

    kalo pakai rss compressor, kode :
    .kota{padding:3px 0 0 0;border:1px solid blue;}

    akan jadi:
    .kota{padding:3px 0 0;border:1px solid blue}

    jd, khusus utk css, mendingan pakai service2 css kompresor yg sudah banyak bertebara.

    Kalo mau lebih maknyus lagi,
    coba file2 js ditaruh di body dibawah sendiri (reff: yahoo).

    just hints..

  10. alynuzz

    thanks….sangat membantu sekali infonya

  11. bhamdani

    Supeeeeer sekaliiii kalau kata pak mario tipsnya… makasih banget, setelah digunakan web ane jadi lebih kenceng kebukanya. tq

  12. Obat Herbal

    Pakai w3 total cache aja, udah ada caching + minify jss + minify css. Sisanya bisa ditambah CDN kalau ada dana, jadi lebih cepet deh.

  13. awan

    Mantaph langsung Josssssssssssssssssssssss makasih ya 😀

  14. notebook

    banyak yang harus diperhatikan dan semua terserah ama mbah google 😛

  15. Anjrah Susanto

    keren kupasannya 😯 .. tidak kepikiran sampai oprek sejauh itu 😛

    Maaf, OOT dikit,,Cara menuliskan kode PHP dipostingan, pripun caranya ? 😉

    • Mara Mei

      Pakai syntax hilighter bos

  16. harison-kia

    wahh pantesan sedikit lemot euy saya punya
    jadi dengan bantuan si om nih bisa yah ane mempercepat my wp xi…xii…thanx om 

  17. Muhammad Andri

    Oh begitu caranya ya suhu, siap meluncur buat nyoba. thank 4 your post.

  18. Muhammad Andri

    maksudnya ‘cukup download yang optimized version’ itu apa dan dimana downloadnya ? thanks

  19. Ilham Risalo

    menangani “Leverage browser caching” perpanjang kadaluarsa diblog gmn bos. koding diatas htaccess itu ditaro dimn n bagaimn langkahnya?
    SAYA MENGGUNAKAN BLOGGER, pass tes kecepatan disarankan perbaiki kadaluarsa itu.

Leave a comment

Your email address will not be published. Required fields are marked *