Panduan GTMetrix Untuk Analisa Kecepatan Website

Panduan GTMetrix untuk Analisa Kecepatan Website

Bagi Anda yang memiliki sebuah website, kecepatan website adalah salah satu hal yang harus diperhatikan. Untuk melakukan pengecekan kecepatan website, Anda bisa memilih dari beberapa tools untuk mengecek kecepatan website .

Salah satu tools yang bisa Anda gunakan adalah GTmetrix . Tool yang satu ini menggunakan sistem penilaian dan memberi Anda peringatan jika ada sesuatu yang salah dengan website Anda. Terkadang mereka bisa terlihat membingungkan dan Anda butuh waktu untuk benar-benar bisa mengerti apa yang dimaksud. Jika Anda mengerti faktor-faktor apa saja yang mereka nilai dan apa maksud dari nilai-nilai ini, mereka bisa membantu untuk meningkatkan performa website Anda.

GTMetrix

gtmetrix

GTMetrix adalah sebuah tool yang dikembangkan oleh GT.net, sebuah perusahaan Kanada, yang bertujuan untuk membantu customer hosting mereka untuk melihat performa website mereka dengan mudah. GTMetrix adalah salah satu tool untuk mengecek kecepatan website yang paling terkenal dan paling banyak digunakan selain Pingdom . Dibandingkan dengan tool developer lainnya, GTMetrix cukup mudah digunakan dan pemula juga bisa dengan mudah mempelajarinya. Mereka menggunakan kombinasi antara Google PageSpeed Insights dan YSlow untuk menghasilkan nilai dan rekomendasinya.

Anda dapat menggunakan GTMetrix versi basic secara gratis dan Anda bisa mendapat akses ke beberapa opsi dengan membuat sebuah akun. Mereka juga menyediakan plan premium. Tetapi untuk artikel ini, kami akan membahas versi gratis dari GTMetrix.

Jika Anda memiliki sebuah akun, Anda bisa menggunakan beberapa opsi khusus tambahan. Pertama, Anda bisa memilih lokasi dimana Anda ingin mengecek kecepatan website Anda. Lokasi yang Anda pilih bisa dibilang sangat penting karena ini berhubungan dengan dimana website Anda dihosting. Semakin sedikit latensi, semakin cepat waktu muat Anda.

Beberapa lokasi yang tersedia adalah:

  • Dallas, USA
  • Hong Kong
  • London, UK
  • Mumbai, India
  • Sydney, Australia
  • Sao Paulo, Brazil
  • Vancouver, Canada

Anda bisa menggunakan browser apapun untuk mengeceknya; Anda bisa menggunakan Chrome dan Firefox. Untuk menggunakan versi mobile, Anda perlu memiliki plan premium. Mereka juga memperbolehkan Anda untuk mengubahkan kecepatan koneksi, yang berarti Anda dapat mensimulasikan berbagai jenis koneksi untuk melihat bagaimana mereka mempengaruhi waktu loading page Anda.

gtmetrix analysis

Seperti yang Anda bisa lihat, mereka juga memberi opsi untuk membuat sebuah video (create a video) . Opsi ini dapat membantu Anda men-debug masalah karena Anda dapat melihat bagaimana halaman itu muncul.

Opsi lain yang mungkin ingin Anda coba adalah Adblock Plus . Jika Anda menjalankan jaringan iklan pihak ketiga seperti Google AdSense, Anda dapat mengaktifkan opsi ini untuk melihat dampak penuh iklan pada waktu loading situs Anda. Ini adalah contoh laporan perbandingan di situs Smashing Magazine dan hasilnya menunjukkan bahwa halaman yang memiliki iklan loading 2.3 detik lebih lambat.

Pilihan tambahan lainnya termasuk menghentikan onload test, kemampuan untuk mengirim cookie dengan request Anda, menggunakan otentikasi HTTP, dan kemampuan untuk memasukkan URL daftar putih dan daftar hitam (whitelist and blacklist).

Analisis menggunakan GTMetrix Speed Test Tool

Sebuah halaman web terdiri dari asset yang berbeda seperti HTML, JavaScript, CSS, dan berbagai gambar. Setiap faktor ini membuat permintaan untuk menunjukkan apa yang Anda lihat di layar browser Anda. Biasanya, semakin banyak permintaan yang Anda kirim, semakin lambat waktu loading website Anda. Memang tidak selalu seperti itu, tetapi itu yang sering terjadi.

Di bagian ini, kami akan membahas setiap bagian dari GTMetrix dan menjelaskan tentang apa arti dari informasi yang mereka berikan mengenai performa situs Anda dan apa yang bisa Anda lakukan berdasarkan rekomendasi yang mereka berikan.

Perlu diingat bahwa yang paling penting adalah bagaimana hasil speed test ini dapat membantu meningkatkan kecepatan website Anda . Jangan terlalu terpaku dengan nilai yang diberikan oleh GTMetrix.

GTMetrix Summary (Nilai performa dan rinciannya)

Setelah Anda memasukkan URL situs Anda ke kolom yang disediakan GTMetrix untuk dianalisa, Anda akan mendapatkan laporan performa, termasuk PageSpeed Score, Yslow Score, Fully Loaded Time, Total Page Size, dan banyaknya permintaan yang Anda dapat di website Anda.

Perlu diperhatikan bahwa hasil setiap tes kecepatan website bisa berbeda-beda. Kami mencoba memasukkan alamat yang sama ke Pingdom dan mendapat hasil yang lebih cepat.

Hasil ini tidak bisa dibilang salah karena tools-tools ini memiliki cara yang berbeda untuk menghitung kecepatan waktu loading website mereka. Dalam memilih website penghitung kecepatan website, Anda sebaiknya memilih salah satu yang Anda suka dan tetap menggunakannya.

Sejak Februari 2017, GTMetrix menggunakan metode yang mereka sebut fully loaded time . Menurut mereka, fully loaded time adalah titik setelah Onload events dan tidak ada aktivitas jaringan selama 2 detik. Sederhananya, sekarang mereka akan menunggu sampai halaman Anda berhenti mentransfer data sebelum menyelesaikan pengujian, sehingga menghasilkan waktu load page yang lebih konsisten. Sebelumnya mereka menggunakan waktu onload yang dalam beberapa kasus tidak menghasilkan beberapa hal di laporan performa, seperti iklan yang dimuat secara asinkron atau screenshots yang tidak muncul.

Page Speed

GTMetrix menggunakan peraturan yang sama dengan Google PageSpeed Insight dalam memberi nilai untuk situs Anda. Rating yang bisa Anda dapatkan adalah antara 0 sampai 100 (F sampai A). Anda juga akan mendapatkan lebih dari 25 rekomendasi. Kami akan membahas beberapa rekomendasi yang populer dan sering didapatkan oleh pemilik website. Jika Anda mengikuti rekomendasi yang diberikan oleh GTMetrix, Anda akan melihat peningkatan dalam waktu loading website Anda.

Serve Scaled Images

Jika Anda mengupload gambar ke situs Anda, usahakan untuk mengupload gambar dengan ukuran yang tepat dan jangan biarkan CSS mengubah ukurannya. Jika Anda membiarkan CSS mengubah ukurannya, Anda akan mendapat rekomendasi serve scaled image . Bagi Anda pengguna WordPress, secara default, mereka terkadang mengubah ukuran gambar Anda ketika Anda mengupload gambar ke media library. Anda bisa mengaturnya di Settings > Media. Anda ingin memastikan bahwa lebar maksimal mendekati lebar situs Anda. Dengan cara ini CSS tidak akan mencoba mengubah ukuran gambar Anda agar sesuai dengan lebar situs Anda. Anda juga dapat secara otomatis mengubah ukurannya dengan plugin pengoptimalan gambar.

Inline Small CSS

Inlining CSS Anda biasanya tidak disarankan karena akan meningkatkan ukuran download keseluruhan permintaan halaman Anda. Namun, jika situs Anda kecil, dengan permintaan minimal, langkah ini bisa meningkatkan performa situs Anda. Untuk melakukan inlining dengan mudah, Anda bisa menggunakan plugin gratis seperti Autoptimize .

Inline Small JavaScript

Sama dengan inlining small CSS, hal yang sama juga berlaku untuk inlining small JavaScript. Biasanya, Anda juga tidak disarankan untuk melakukan karena ini akan meningkatkan ukuran download keseluruhan permintaan halaman Anda. Namun, jika situs Anda kecil, dengan permintaan minimal, langkah ini juga bisa meningkatkan performa website Anda. Untuk melakukan ini, Anda bisa menggunakan plugin gratis seperti Autoptimize.

Leverage Browser Caching

Leverage browser caching adalah salah satu rekomendasi yang sering didapatkan banyak orang. Ini biasa terjadi karena ada kesalahan HTTP cache headers di server web Anda. Anda hanya bisa memperbaiki ini jika Anda memiliki kontrol atas resourcesnya. Contohnya, jika Anda melihat masalah ini di jaringan iklan pihak ketiga, Anda tidak bisa melakukan apa-apa.

Serve Resources From a Consistent URL

Jika Anda melihat serve resources from a consistent URL di laporan Anda, kemungkinan besar Anda memiliki resources yang sama diserve dari URL yang sama. Biasanya hal ini bisa terjadi bila ada query string yang terlibat. Begitu masalah ini hilang, seharusnya mereka tidak lagi loading dua kali.

Defer Parsing of JavaScript

JavaScript dan CSS adalah default membuat pemblokiran. Ini berarti mereka dapat mencegah agar halaman web tidak ditampilkan sampai didownload dan diproses oleh browser. Defer atrribute memberitahu browser untuk menunda mendownload resource sampai penguraian HTML selesai. Bebeapa cara untuk memperbaiki masalah ini adalah dengan menggunakan plugin Autoptimize atau Async JavaScript.

Minify CSS and JavaScript dan Minify HTML

Minifikasi pada intinya adalah menghilangkan semua karakter yang tidak diperlukan dalam sebuah source code tanpa mempengaruhi kegunaannya. Karakter-karakter yang dimaksud disini adalah line breaks, empty space, indents, dan sebagainya. Melakukan minifikasi dapat membantu memperkecil size sebuah data dan mempercepat proses download, penguraian, dan eksekusi. Untuk melakukan minifikasi CSS, JavaScript, dan HTML Anda bisa menggunakan plugin seperti WP Fastest Cache .

Optimize Images

Menurut HTTP Archive , mulai dari April 2017, gambar bertanggung jawab atas rata-rata 66% dari total berat sebuah halaman web. Jadi, jika Anda berniat untuk mengoptimasi situs WordPress Anda, gambar adalah hal pertama yang harus Anda perhatikan. Ini lebih penting daripada scripts dan fonts.

Secara ideal, setiap gambar harus dikompres dan dioptimasi sebelum diupload ke WordPress. Tetapi sayangnya, terkadang orang-orang lupa untuk melakukan ini. Salah satu cara untuk membantu Anda adalah dengan menginstal plugin optimasi gambar. Plugin ini akan membantu Anda untuk mengkompres gambar secara otomatis, mengubah ukuran jika diperlukan, dan memastikan bahwa mereka tidak berukuran besar dan website Anda akan loading dengan cepat.

Enable Gzip Compression

Gzip adalah formate file dan sebuah aplikasi software yang digunakan untuk compression dan decompression sebuah file. Kompresi GZIP diaktikan di sisi server dan memungkinkan pengurangan ukuran lebih lanjut untuk file HTML, stylesheets, dan JavaScript.

GZIP tidak akan bekerja untuk gambar karena mereka sudah dikompres dengan cara yang berbeda. Beberapa orang sudah melihat 70% pengurangan ukuran data setelah kompresi. Ini mungkin adalah salah satu optimasi paling mudah yang bisa Anda lakukan jika Anda menggunakan WordPress.

Minimize Redirects

Meminimalkan redirects HTTP dari satu URL ke URL lainnya mengurangi tambahan RTT dan waktu tunggu bagi para pengguna. Bagi Anda yang menggunakan redirect WordPress, mereka melambatkan waktu loading website Anda. Maka itu, ada baiknya Anda menyediakan waktu untuk meminimalkan jumlah redirect pengunjung Anda.

Specify a Cache Validator

Rekomendari specify a cache validator akan muncul jika ada HTTP caching headers yang hilang. Ini harus disertakan pada setiap respons server asal, karena keduanya memvalidasi dan mengatur panjang cache. Jika header tidak ditemukan, maka akan menghasilkan permintaan baru untuk resource setiap saat, yang meningkatkan beban pada server Anda. Memanfaatkan caching header memastikan bahwa permintaan berikutnya tidak perlu dimuat dari server, sehingga menghemat bandwidth dan meningkatkan performa website Anda. Perlu juga diingat bahwa Anda tidak dapat memperbaikinya jika masalah ini muncul dari resource pihak ketiga.

Specify Image Dimensions

Anda sebaiknya memberi detail dimensi gambar yang Anda upload secara spesifik. Ini berarti memasukkan lebar dan tinggi gambar Anda di kode HTML.

Contoh yang salah

<img src=”https://domain.com/images/image1.png”>

Contoh yang benar:

<img src=”https://domain.com/images/image1.png” width=”200″ height=”100″>

Remove Query Strings from Static Resources

File JavaScript dan CSS Anda biasanya memiliki versi file di akhir URL mereka, misalnya contohdomain.com/style.css?ver=4.6. Beberapa server dan proxy server biasanya tidak bisa mengcache query strings, bahkan jika cache-control:public header ada.

Jadi dengan menghapusnya, Anda terkadang bisa memperbaiki caching Anda. Ini bisa dengan mudah dilakukan dengan kode atau plugin WordPress gratis.

Specify a Vary: Accept-Encoding Header

Ini adalah header HTTP dan harus disertakan pada setiap respons server asal, karena memberitahukan browser apakah klien dapat menangani versi konten yang dikompres atau tidak. Biasanya, saat kompresi GZIP diaktifkan, ini juga diperbaiki.

YSlow

GTMetrix juga menggunakan YSlow untuk memberi website Anda nilai. Di bagian ini ada lebih dari 15 rekomendasi yang mungkin Anda dapatkan. Sama dengan rekomendari yang ada di Page Speed, jika Anda mengikuti rekomendasi-rekomendasi ini, Anda akan melihat peningkatan dalam waktu loading website Anda.

yslow gmetrix

Make Fewer HTTP Requests

Seperti yang mungkin Anda sudah ketahui, semua yang diloading di website Anda seperti plugin, gambar, fonts, dan sebagainya, melakukan permintaan HTTP. Ini adalah salah satu alasan mengapa Anda tidak disarankan untuk menginstal 100 plugin di saat yang bersamaan karena mereka kemungkinan akan melakukan permintaan CSS script dan JavaScript yang tentunya akan mengumpulkan ratusan permintaan HTTP.

Add Expires Headers

HTTP Caching: Cache-Control header didefinisikan sebagai bagian dari spesifikasi HTTP / 1.1 dan menggantikan header sebelumnya digunakan untuk menentukan kebijakan caching tanggapan. Semua browser modern mendukung Cache-Control, maka hanya itu yang Anda butuhkan. Namun, tidak ada salahnya jika Anda memiliki keduanya, tapi ingat hanya satu yang akan digunakan. Expires Header menggunakan tanggal yang sebenarnya, sedangkan header Cache-Control memungkinkan Anda menentukan jumlah waktu sebelum kadaluarsa.

Use a Content Delivery Network (CDN)

CDN menyimpan salinan konten yang sudah dicache milik Anda di POPs yang terletak lebih dekat dengan pengunjung, yang akan mempercepat waktu loading bagi mereka dengan mengurangi latensi. Cloudflare adalah salah satu penyedia CDN yang sangat disarankan yang dapat Anda gunakan dengan mudah dengan situs WordPress Anda.

Use Cookie-Free Domains

Secara umum, saat Anda menyajikan konten seperti gambar, JavaScript dan CSS, tidak ada alaskan untuk HTTP cookie untuk mengikutinya, karena itu akan menambahkan overhead. Setelah server menetapkan cookie untuk domain tertentu, semua permintaan HTTP berikutnya untuk domain tersebut harus menyertakan cookie. Peringatan ini biasanya terlihat di situs dengan jumlah permintaan yang cukup besar. Beberapa cara untuk memperbaikinya termasuk menggunakan penyedia CDN yang menghapus cookies atau membuat domain dan subdomain terpisah untuk melayani cookies.

Reduce DNS Lookups

Setiap domain yang Anda cari menghasilkan pencarian DNS pertama kali sampai di-cache. Jadi misalnya, katakanlah Anda memuat 10 aset dari CDN Anda, 2 dari font web Google, dan 5 dari pengiklan pihak ketiga. Ini akan menghasilkan 3 pencarian DNS karena masing-masing kelompok tersebut melakukan query dalam satu domain. Pencarian DNS dapat dengan cepat lepas kendali saat Anda mulai menambahkan layanan eksternal. Salah satu contoh cara untuk mengurangi hal ini adalah dengan meng-host font Google di CDN Anda sendiri, yang akan menyingkirkan pencarian DNS ke Google.

Make Favicon Small and Cacheable

Favicon, atau favicon.ico, adalah file ikon gambar kecil yang dikaitkan dengan situs web Anda dan muncul di kolom alamat browser Anda (atau saat Anda menyetelnya sebagai bookmark). Meski favicon sangat kecil, Anda harus selalu mengoptimalkannya.

Configure Entity Tags (ETags)

Header ETag sangat mirip dengan header yang terakhir diubah. Hal ini juga digunakan untuk memvalidasi cache file. Jika Anda menjalankan Apache 2.4 atau lebih tinggi, header ETag sudah ditambahkan secara otomatis menggunakan direktif FileETag. Dan jika Anda menggunakan NGINX, sejak 2016 header ETag diaktifkan secara default. Jika Anda melihat peringatan ini, sebaiknya hubungi penyedia hosting Anda.

GTMetrix Waterfall Chart

GTMetrix Waterfall Chart menampilkan semua request individual di halaman Anda. Anda kemudian bisa menganalisa setiap request untuk melihat apa saja yang menyebabkan kelambatan dan isu performa di situs Anda. Mereka akan muncul dalam rupa warna garis. Berikut adalah penjelasan untuk setiap warna garis yang muncul dalam laporan.

Blocking (Coklat)

Ketika sebuah browser meloading sebuah website, resource JavaScript dan CSS biasanya menghalangi halaman web untuk disajikan sampai mereka benar-benar selesai didownload dan diproses oleh browser. Waktu tunggu ini disebut dengan istilah blocking oleh GTMetrix Waterfall Chart.

DNS Lookup (Teal)

DNS Lookup bisa dibilang bekerja seperti buku telepon. Mereka adalah servers yang disebut Domain Name Servers, yang menyimpan semua informasi tentang website Anda dan IP mana sebaiknya mereka ditujukan. Ketika Anda pertama kali memasukkan URL website Anda untuk dianalisa oleh GTMetrix, mereka akan melakukan lookup baru dan karena mereka butuh meminta DNS untuk mendapatkan informasi alamat IP, ini akan menyebabkan waktu lookup tambahan.

Connecting (Hijau)

Yang dimaksud dengan waktu connecting di GTMetrix adalah waktu yang dibutuhkan untuk membuat koneksi TCP. Intinya, ini adalah sebuah metode komunikasi antara host atau client dengan server yang harus berjalan.

Sending (Merah)

Waktu sending adalah waktu yang dibutuhkan untuk mengirim data dari browser Anda ke server.

Waiting (Ungu)

Waktu menunggu atau waiting pada GTMetrix adalah waktu untuk byte pertama, juga dikenal dengan nama TTFB di beberapa tools. TTFB adalah pengukuran yang digunakan sebagai indikasi responsivitas server web atau sumber jaringan lainnya. Umumnya, apapun yang di bawah 100 ms dapat diterima dan dinilai sebagi TTFB yang bagus. Jika Anda mendekati kisaran 300-400 ms Anda mungkin memiliki sesuatu yang salah dikonfigurasi di server Anda atau mungkin saatnya untuk melakukan upgrade.

Receiving (Abu-Abu)

Waktu receiving adalah waktu yang dibutuhkan browser Anda untuk menerima data dari server.

Event Timings

Setiap kali Anda meminta suatu halaman web, mereka memerlukan waktu untuk menyajikan halaman tersebut.

First Paint (Garis Hijau): Titik pertama di mana browser melakukan rendering pada halaman, seperti menampilkan warna latar belakang.

DOM Loaded (Blue Line): Titik di mana DOM (Document Object Model) sudah siap.

Onload (Jalur Merah): Saat pemrosesan halaman selesai dan semua sumber di halaman (gambar, CSS, dll.) telah selesai didownload.

Fully Loaded (Purple Line): Titik setelah event Onload menyala dan tidak ada aktivitas jaringan selama 2 detik.

HTTP Response Headers

Anda juga dapat mengeklik permintaan individual melihat apa yang mereka sebut HTTP response headers. Ini memberikan informasi yang berharga. Di pilihan ini kita bisa langsung melihat hal-hal seperti gzip diaktifkan di server web, web berjalan di atas HHVM, web dilayani dari cache, cache-control headers, arsitektur server (ini tidak selalu terlihat), expires headers, browser user-agent dan banyak lagi.

History

Di tab history Anda bisa melihat semua test kecepatan yang pernah Anda lakukan. Untuk akun gratis, ada limit untuk jumlah URL yang bisa tersimpan. Anda juga bisa menyimpan URL yang ingin Anda monitor untuk melihat perubahan performa web tersebut.

Simpulan

Seperti yang Anda lihat, mengetahui bagaimana alat uji kecepatan GTmetrix bekerja sedikit lebih baik dan apa arti semua grafik dapat membantu Anda membuat keputusan yang berdasarkan data dalam hal performa website Anda.

Salah satu fitur GTMetrix yang bisa sangat membantu Anda adalah waterfall analysis karen kita dapat mengetahui bagaimana aset individual Anda dimuat. Dan ingat, ketika harus membandingkannya dengan tools untuk mengecek kecepatan website lainnya, mereka adalah alat yang berbeda dan lebih baik menggunakan tools yang sama terus menerus.

Adakah dari Anda yang sudah mencoba menggunakan GTMetrix sebelumnya? Apakah tool ini membantu Anda meningkatkan performa situs Anda? Ayo, tinggalkan komen di bawah artikel ini!