GTMetrix Alat Analisis Situs Web

GTMetrix yang beralamat di sini mempunyai slogan “The web should be fast”. Alat GTMetrix membantu meningkatkan kecepatan loading, lebih efisien, dan meningkatkan performa situs web sehingga pengunjung situs web tentu akan senang. Aturan penilaian dan peningkatan performa yang digunakan memadukan aturan Google Page Speed dan Yahoo! YSlow. Setiap bagian yang kurang dijelaskan kekurangannya dan rekomendasi menurut Google Page Speed dan Yahoo! Yslow. Tentu saja dengan tautan artikel terkait yang merekomendasi penyelesaian masalah.

Karena kecepatan situs web ditentukan oleh banyak faktor, tidak hanya desain tetapi performa server letak desain ditempatkan juga sangat berpengaruh. Dengan demikian skor 100 tidak menjamin kecepatan lebih tinggi dibanding situs lain yang mendapat skor rendah. Namun alat GTMetrix patut dipertimbangkan oleh para pengembang dalam merancang situs web.

GTMetrix memberikan skor secara terpisah secara ringkas dan terinci untuk komponen Page Speed Grade dan YSlow Grade Page dengan rincian load time, total page size, dan total number of requests. Dari ringkasan tersebut dapat dilihat berapa lama waktu loading, ukuran laman, dan total permintaan ke server. Dengan demikian apabila ingin meningkatkan performa dengan mengurangi waktu loading, mengurangi ukuran laman, dan mengurangi permintaan dapat dilihat pada rincian, bagian-bagian yang perlu dioptimalkan.

Masing-masing kriteria menurut GTMetrix dikelompokkan menurut prioritas yaitu: tinggi, sedang, dan rendah. Prioritas tinggi lebih berpengaruh terhadap kecepatan situs, sehingga jika semua komponen pada bagian tersebut tuntas (skor 100), maka skor tersebut akan berpengaruh lebih tinggi pula pada total skor. Dengan demikian yang diprioritaskan adalah pada bagian prioritas tinggi, sedangkan pada bagian prioritas rendah dapat dioptimasi menyesuaikan kebutuhan.

Aturan menurut Google Page Speed berikut ini:

1. Avoid a character set in the meta tag
2. Avoid bad requests
3. Avoid CSS @import
4. Combine images using CSS sprites
5. Defer parsing of JavaScript
6. Enable gzip compression
7. Enable Keep-Alive
8. Inline small CSS
9. Inline small JavaScript
10. Leverage browser caching
11. Make landing page redirects cacheable
12. Minify CSS
13. Minify HTML
14. Minify JavaScript
15. Minimize redirects
16. Minimize request size
17. Optimize images
18. Optimize the order of styles and scripts
19. Prefer asynchronous resources
20. Put CSS in the document head
21. Remove query strings from static resources
22. Remove unused CSS
23. Serve resources from a consistent URL
24. Serve scaled images
25. Specify a cache validator
26. Specify a Vary: Accept-Encoding header
27. Specify a character set early
28. Specify image dimensions
29. Use efficient CSS selectors

Sedangkan aturan menurut Yahoo! YSlow terdiri dari:

1. Add Expires headers
2. Avoid AlphaImageLoader filter
3. Avoid CSS expressions
4. Avoid empty src or href
5. Avoid HTTP 404 (Not Found) error
6. Avoid URL redirects
7. Compress components with gzip
8. Configure entity tags (ETags)
9. Do not scale images in HTML
10. Make AJAX cacheable
11. Make favicon small and cacheable
12. Make fewer HTTP requests
13. Make JavaScript and CSS external
14. Minify JavaScript and CSS
15. Put CSS at the top
16. Put JavaScript at bottom
17. Reduce DNS lookups
18. Reduce cookie size
19. Reduce the number of DOM elements
20. Remove duplicate JavaScript and CSS
21. Use GET for AJAX requests
22. Use a Content Delivery Network (CDN)

Tips Optimasi meningkatkan skor GTMetrix.

Pada blog ini menggunakan plugin Contact form 7 untuk mengirim pesan dari kontak (contact). Kemudahan memasang plugin, hanya dengan memakai mouse, klik, klik, next maka akan terpasang.  Kemudahan pemasangan, fungsinya yang baik, dan sifatnya yang gratis, sangat menggoda untuk memasang plugin sebanyak-banyaknya atau kecanduan plugin. Padahal CSS dan javascript Contact form 7 ini sangat agresif di-load pada semua halaman yang sebenarnya tidak perlu. Karena kebutuhan CSS dan javascript hanya pada halaman contact saja.

Dampaknya plugin Contact form 7 menurut PageSpeed, “Remove unused CSS” dan YSlow merekomendasikan Use cookie-free domains – “components that are not cookie-free”.  CSS dan javascript dapat dinonaktifkan (deregister) dari halaman beranda dan aktif pada halaman contact saja. Cara optimasi plugin Contact form 7 dengan menambahkan kode berikut ini pada functions.php akan mengatasi dua masalah sekaligus. Jangan lupa di-backup dulu file functions.php sebelum menambahkan kode ini.

// Hanya di Beranda Optimasi Contact Form 7
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() {
   if ( ! is_page( 'contact' ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}
add_action( 'wp_print_styles', 'deregister_ct7_styles', 100 );

Ganti/sesuaikan (‘contact’) dengan nama halaman (page) blog. Setelah kode ditambahkan pada functions.php, untuk mengetahui pengaruhnya hapus cache pada browser maupun cache yang ada di dashboard WordPress Anda. Buka beranda blog, refresh, dan test lagi dengan GTMetrix. Peringatan!

Semoga bermanfaat.