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.

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.

2 gagasan untuk “GTMetrix Alat Analisis Situs Web

  1. aneh tapi nyata

    Penjabaran yang lengkap sekali, saya baru tau kalau google page speed mempunyai kriteria tersendiri dan berbeda urutannya dari Gmetrix, Saya bingung harus mengacu kemana, pada akhirnya saya mesetting situs saya dengan kedua tool tersebut. udah mentok ga tau mesti set apa lagi biar bisa naik. mungkin ada saran dari pak Isnan

    My answer: Ikuti rekomendasi dari GTMetrix dan Google PageSpeed saja Gan. Situs Agan sudah cepat loadingnya, tidak harus skor GTMetrix dan Google PageSpeed yang tinggi. Rincian yang ukuran file dan request, lihat dengan http://tools.pingdom.com/

    Balas

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *