Panduan GTMetrix untuk Analisa Kecepatan Website

Panduan GTMetrix untuk Analisa Kecepatan Website

Bagi pemilik website, kecepatan website adalah salah satu hal yang harus diperhatikan. Untuk melakukan pengecekan kecepatan website, kamu bisa memilih dari beberapa tools untuk mengecek kecepatan website, sala satunya adalah GTmetrix.

GTMetrix menggunakan sistem penilaian dan memberi kamu peringatan apabile terjadi kesalahan pada website. Terkadang mereka bisa terlihat membingungkan dan kamu butuh waktu untuk mengerti memahami setiap error message yang diberikan oleh GTMetrix.

Jika kamu mengerti maksud faktor dan nilai tersebut, GTMetrix dapat membantu untuk meningkatkan performa website kamu.

Mengenal GTMetrix

GTMetrix-Homepage-768x385

GTMetrix adalah sebuah tool yang dikembangkan oleh GT.net, sebuah perusahaan asal Kanada. Tool ini bertujuan untuk membantu customer web 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 developer tool lainnya, GTMetrix cukup mudah digunakan, bahkan untuk pemula. GTMetrix menggunakan kombinasi Google PageSpeed Insights dan YSlow untuk menghasilkan nilai dan rekomendasinya.

Kamu dapat menggunakan GTMetrix versi basic secara gratis dan berbayar. Tetapi untuk artikel ini, kami akan membahas versi gratis dari GTMetrix.

Baca Juga: 5 Penyebab Website Down, Apa Saja Ya?

Cara Kerja dan Lokasi Server GTMetrix

Kamu dapat menggunakan GTMetrix tanpa akun, tetapi kami rekomendasikan untuk mendaftar akun karena kamu akan mendapatkan beberapa fitur tambahan.

Pertama, kamu bisa memilih lokasi pengecekan kecepatan website. Pemilihan lokasi ini sangat penting karena kecepatan website adalah salah satu faktor penting dalam penilaian mesin pencari.

Jadi, pastikan kamu memilih lokasi pengecekan kecepatan yang sesuai dengan target audiens website kamu.

Beberapa lokasi yang tersedia adalah:

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

Kamu dapat menggunakan semua browser untuk menggunakan alat ini. Untuk menggunakan versi mobile, kamu harus berlangganan premium plan GTMetrix.

GTMetrix juga memfasilitasi kamu untuk mengubah pengaturan kecepatan internet, sehingga kamu dapat mensimulasikan berbagai jenis koneksi untuk melihat bagaimana mereka mempengaruhi loading time website kamu.

GTMetrix-Analysis-768x376

Seperti yang terlihat di gambar di atas, GTMetrix juga memberi opsi untuk membuat sebuah video. Opsi ini dapat membantu kamu melakukan debugging pada website kamu.

Opsi lain yang mungkin ingin kamu coba adalah Adblock Plus. Jika kamu menjalankan jaringan iklan pihak ketiga seperti Google AdSense, kamu dapat mengaktifkan opsi ini untuk melihat dampak penuh iklan pada loading time situs kamu.

Pilihan tambahan lainnya termasuk menghentikan onload test, kemampuan untuk mengirim cookie dengan request kamu, menggunakan otentikasi HTTP, dan kemampuan untuk memasukkan URL whitelist dan blacklist.

Baca Juga: A/B Testing: Metode Akurat Meningkatkan Traffic dan Konversi Website

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 akan ditampilkan lihat di layar browser. Biasanya, semakin banyak permintaan yang dikirim, semakin lambat loading time website kamu.

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

Perlu diingat bahwa yang paling penting adalah bagaimana hasil speed test ini dapat membantu meningkatkan kecepatan website kamu, bukan nilai yang diberikan oleh GTMetrix

Sebelum membaca kategori analisa GTMetrix speed test, kamu dapat menonton video panduan GTMetrix ini untuk membantu kamu memahami GTMetrix dengan lebih baik.

GTMetrix Summary (Nilai performa dan rinciannya)

Setelah kamu memasukkan dan menganalisa URL website kamu ke kolom yang disediakan GTMetrix, kamu akan mendapatkan laporan performa, termasuk PageSpeed Score, Yslow Score, Fully Loaded Time, Total Page Size, dan banyaknya permintaan yang didapatkan oleh website kamu.

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 ini memiliki cara yang berbeda untuk menghitung loading time website. Dalam memilih tool penghitung kecepatan website, kamu sebaiknya konsisten dalam penggunaan alat tersebut.

Sejak Februari 2017, GTMetrix Speed Test 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 kamu berhenti mentransfer data sebelum menyelesaikan pengujian, sehingga menghasilkan waktu load page yang lebih konsisten.

Baca Juga: 15 Tips dan Trik .htaccess Untuk Website WordPress

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 kamu. Rating yang bisa kamu dapatkan adalah antara 0 sampai 100 (F sampai A). Kamu juga akan mendapatkan lebih dari 25 rekomendasi.

Kami akan membahas beberapa rekomendasi yang populer dan sering didapatkan oleh pemilik website. Jika kamu mengikuti rekomendasi yang diberikan oleh GTMetrix, kamu akan melihat peningkatan dalam loading time website.

GTMetrix

Serve Scaled Images

Jika kamu mengunggah gambar ke website, usahakan untuk mengunggah gambar dengan ukuran yang tepat yang tidak dapat diubah oleh CSS. Jika kamu membiarkan CSS mengubah ukurannya, kamu akan mendapat rekomendasi serve scaled image .

Bagi pengguna WordPress, secara default, mereka terkadang mengubah ukuran gambar kamu ketika kamu mengunggah gambar ke media library. Kamu dapat mengubah pengaturannya di Settings > Media.

Dengan cara ini CSS tidak akan mencoba mengubah ukuran gambar kamu agar sesuai dengan lebar situs kamu. Kamu juga dapat secara otomatis mengubah ukurannya dengan plugin optimasi gambar.

Inline Small CSS

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

Inline Small JavaScript

Sama dengan inlining small CSS, hal yang sama juga berlaku untuk inlining small JavaScript. Biasanya, kamu juga tidak disarankan untuk melakukan karena ini akan meningkatkan ukuran download keseluruhan permintaan halaman kamu. Namun, langkah ini juga dapat meningkatkan performa website kamu jika situsmu berukuran kecil. Kamu juga dapat melakukannya menggunakan plugin 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 web server kamu. Kamu hanya bisa memperbaiki ini jika kamu memiliki kontrol atas resource di website kamu. Contohnya, jika kamu melihat masalah ini di jaringan iklan pihak ketiga, kamu tidak bisa melakukan apa-apa.

Serve Resources From a Consistent URL

Jika kamu melihat serve resources from a consistent URL di laporan GTMetrix, kemungkinan besar kamu memiliki berbagai resources yang disebarkan 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 diunduh dan diproses oleh browser. Defer atrribute memberitahu browser untuk menunda pengunduhan resource sampai penguraian HTML selesai. Beberapa cara untuk memperbaiki masalah ini adalah dengan menggunakan plugin Autoptimize atau Async JavaScript.

Minify CSS and JavaScript dan Minify HTML

Minifikasi adalah proses penghilangan semua karakter yang tidak diperlukan dalam sebuah source code tanpa mempengaruhi kegunaannya. Karakter yang dimaksud 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 kamu dapat menggunakan plugin seperti WP Fastest Cache .

Optimize Images

Menurut HTTP Archive , mulai dari April 2017, gambar menyumbang 66% dari total laoding time sebuah halaman web. Jadi, jika kamu berniat untuk mengoptimasi situs WordPress kamu, ukuran gambar adalah hal pertama yang harus kamu perhatikan.

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 kamu adalah dengan menginstal plugin optimasi gambar.

Plugin ini akan membantu kamu untuk mengompress gambar secara otomatis, mengubah ukuran jika diperlukan, dan memastikan bahwa mereka tidak berukuran terlalu besar.

Enable Gzip Compression

Gzip adalah format file dan sebuah aplikasi 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 kamu lakukan jika kamu menggunakan WordPress.

Minimize Redirects

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

Specify a Cache Validator

Rekomendasi 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 kamu.

Memanfaatkan caching header memastikan bahwa permintaan berikutnya tidak perlu dimuat dari server, sehingga menghemat bandwidth dan meningkatkan performa website kamu.

Perlu juga diingat bahwa kamu tidak dapat memperbaikinya jika masalah ini muncul dari resource pihak ketiga.

Specify Image Dimensions

Kamu sebaiknya memberi detail dimensi gambar yang kamu upload secara spesifik. Ini berarti memasukkan lebar dan tinggi gambar kamu 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 kamu biasanya memiliki versi file di akhir URL mereka, misalnya contohdomain.com/style.css?ver=4.6. Beberapa server dan proxy server biasanya tidak bisa meng-cache query strings, bahkan jika cache-control:public header ada.

Jadi dengan menghapusnya, kamu terkadang bisa memperbaiki caching di websitemu. 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.

Baca Juga: Pengaruh Lokasi Server untuk Website dan Cara Memilihnya

YSlow

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

YSlow-768x578

Make Fewer HTTP Requests

Seperti yang mungkin kamu sudah ketahui, semua yang dimuat pada website kamu seperti plugin, gambar, dan fonts melakukan permintaan HTTP.

Ini adalah salah satu alasan mengapa kamu 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 kamu butuhkan. Namun, tidak ada salahnya jika kamu memiliki keduanya, tapi ingat hanya satu yang akan digunakan.

Expires Header menggunakan tanggal yang sebenarnya, sedangkan header Cache-Control memungkinkan kamu untuk menentukan jumlah waktu sebelum kadaluarsa.

Use a Content Delivery Network (CDN)

CDN menyimpan salinan konten yang sudah di-cache di POPs yang terletak lebih dekat dengan pengunjung, sehingga akan mempercepat loading time dengan mengurangi latency. Cloudflare adalah salah satu penyedia CDN yang sangat disarankan yang dapat kamu gunakan dengan mudah dengan pada situs WordPress.

Use Cookie-Free Domains

Secara umum, saat kamu menyajikan konten seperti gambar, JavaScript dan CSS, tidak ada alasan 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 kamu cari menghasilkan pencarian DNS pertama kali sampai di-cache. Jadi misalnya, katakanlah kamu memuat 10 aset dari CDN, 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 kamu mulai menambahkan layanan eksternal. Salah satu contoh cara untuk mengurangi hal ini adalah dengan meng-host font Google di CDN kamu 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 website kamu dan muncul di kolom alamat browser (atau saat kamu menyetelnya sebagai bookmark). Meski favicon sangat kecil, kamu 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 kamu menjalankan Apache 2.4 atau lebih baru, header ETag sudah ditambahkan secara otomatis menggunakan direktif FileETag. Dan jika kamu menggunakan NGINX, sejak 2016 header ETag diaktifkan secara default.

Jika kamu melihat peringatan ini, sebaiknya hubungi provider hosting untuk memeriksa cloud hosting kamu.

Baca Juga: 7 Alasan Website Mudah di Hack

GTMetrix Waterfall Chart

GTMetrix Waterfall Chart menampilkan semua request di halamanmu. Kamu dapat menganalisa setiap request untuk melihat apa saja yang menyebabkan kelambatan dan isu performa di website kamu. Mereka akan muncul dalam bentuk warna garis. Berikut adalah penjelasan untuk setiap warna garis yang muncul dalam laporan.

Blocking (Coklat)

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

DNS Lookup (Teal)

DNS Lookup adalah kumpulan server disebut Domain Name Servers yang menyimpan semua informasi tentang website kamu dan ke IP address mana traffic website kamu akan diarahkan.

Saat pertama kali memasukkan URL website untuk dianalisa oleh GTMetrix, mereka akan melakukan lookup baru. Karena mereka butuh meminta DNS untuk mendapatkan informasi alamat IP, maka hal ini memerlukan waktu lookup yang lebih lama.

Connecting (Hijau)

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 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, angka di bawah 100 ms adalah TTFB yang cukup bagus. Jika waiting time website kamu berada di 300-400 ms, mungkin ada kesalahan konfigurasi di server kamu atau mungkin saatnya untuk melakukan upgrade.

Receiving (Abu-Abu)

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

Event Timings

Setiap kali kamu memuat halaman web, server 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 dimuat.
  • Fully Loaded (Purple Line): Titik setelah event onload menyala dan tidak ada aktivitas jaringan selama 2 detik.

HTTP Response Headers

Kamu juga dapat mengeklik permintaan individual untuk HTTP response headers.

Di pilihan ini kamu dapat melihat hal-hal seperti GZIP diaktifkan di server web, web berjalan di 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, kamu dapat melihat semua tes kecepatan yang pernah dilakukan. Untuk akun gratis, ada limit untuk jumlah URL tersimpan. Kamu juga dapat menyimpan URL yang ingin dipantau untuk melihat perubahan performa web tersebut.

Baca Juga: CSS Framework untuk Membantu Proses Desain Website

Simpulan

Mengetahui bagaimana alat uji kecepatan GTmetrix bekerja sedikit lebih baik dan apa arti semua grafik dapat membantu kamu membuat keputusan berdasarkan data dalam hal memperbaiki performa website.

Salah satu fitur GTMetrix yang sangat membantu adalah waterfall analysis, karena kamu dapat mengetahui bagaimana aset individual kamu dimuat. Ingat, gunakanlah satu alat saja untuk memastikan konsistensi hasil tes dan mengambil langkah yang tepat.