Analisis Kinerja dengan WebPageTest

Situs web yang cepat sekarang menjadi keharusan mutlak. Di era mobile dan, dengan konsumen rawat inap, situs web yang lambat bisa menjadi perbedaan antara bisnis Anda berkembang atau gagal. Jadi, bagaimana tepatnya Anda menguji kecepatan situs web Anda dan, bagaimana Anda bisa mengidentifikasi masalah apa pun yang mungkin memperlambatnya?

Pada artikel ini kita akan melihat alat populer yang disebut WebPageTest. Alat pengukuran ini menyediakan sejumlah statistik dan data terperinci yang dapat digunakan untuk menunjukkan area situs Anda yang dapat ditingkatkan dari perspektif kinerja. Namun, volume informasi yang diberikan bisa sedikit berlebihan. Jangan khawatir… kita akan merinci cara menggunakan WebPageTest langkah demi langkah sehingga menjadi jelas bagaimana memanfaatkan alat gratis ini sebaik-baiknya.

Memulai dengan WebPageTest

Hal pertama yang pertama, buka halaman webtest.org untuk memulai. Tata letaknya sangat jelas dan Anda akan segera melihat kotak tempat Anda dapat memasukkan url situs web Anda.

Anda memiliki pilihan untuk dibuat di awal ... apakah Anda menggunakan tab 'Pengujian Lanjutan' default atau menuju ke tab 'Pengujian Sederhana'? Nah, fitur Pengujian Sederhana sangat bagus untuk ikhtisar singkat situs Anda, tetapi untuk artikel ini kita akan melihat tab Pengujian Lanjutan.

Pengaturan Pengujian Lanjut

Gulir ke bawah halaman dan Anda akan melihat menu tarik-turun Lokasi Uji. Ini cukup jelas. Lokasi yang ingin Anda pilih adalah yang paling dekat dengan lokasi audiens target Anda. Jika mereka berbasis di Australia, maka pengujian dari London, Inggris tidak masuk akal. Tujuan dari latihan ini adalah untuk mengetahui bagaimana kinerja situs web kami bagi pengguna kami.

Ada banyak lokasi tetapi beberapa lokasi menawarkan lebih banyak opsi pengujian daripada yang lain dalam bentuk browser yang digunakan untuk pengujian. Sekali lagi, Anda ingin mencoba dan memilih salah satu yang kemungkinan besar akan digunakan oleh audiens target Anda. Untuk melihat beberapa statistik dari browser mana situs web Anda dikunjungi, Anda dapat menggunakan alat seperti Google Analytics.

Pengaturan keren lainnya yang dapat Anda pilih adalah hal-hal seperti koneksi. Jadi, beginilah cara perangkat pengguna akhir terhubung ke internet. Klik menu tarik-turun di samping 'Koneksi' dan Anda akan melihat opsi yang menyertakan koneksi 3G (lambat atau cepat). Itu benar-benar rapi karena memberi Anda nuansa dunia nyata tentang bagaimana audiens Anda akan mengalami situs Anda.

Pengaturan lain yang cukup berguna adalah opsi 'Ulangi Tampilan'. Opsi ini ketika diaktifkan berarti situs akan diuji ulang setelah pemuatan pertama yang membantu menunjukkan dampak dari setiap caching yang telah Anda aktifkan di situs Anda.

Ada banyak opsi lanjutan lebih lanjut yang mungkin ingin Anda jelajahi. Bagi kebanyakan dari kita, kecuali Anda benar-benar mendalami pengujian situs Anda, pengaturan yang diuraikan di atas sudah cukup. Bagi mereka yang ingin mengetahui lebih lanjut tentang pengaturan seluk beluk nyata yang tersedia, lihat dokumen WebPageTest.

Catat salah satu pengaturan yang telah Anda ubah. Penting bahwa selama fase pengujian dan kemudian mengoptimalkan bahwa Anda terus menguji ulang menggunakan pengaturan yang sama jika tidak, Anda akan mengubah hasil yang Anda dapatkan. Setelah Anda siap, tekan tombol 'Mulai Tes' lalu duduk dan tunggu hasilnya (biasanya membutuhkan waktu sekitar satu menit).

Layar Pertama

Dalam contoh ini kami telah menggunakan situs web Apple (apple.com) dan mengujinya melalui koneksi 3G yang cepat dari London, Inggris. Hasil awal ditunjukkan di bawah ini:

Lihat di kanan atas dan Anda akan melihat 7 kotak berwarna yang memberikan gambaran awal tentang bagaimana kinerja halaman tersebut. Mari kita periksa apa itu masing-masing.

Kotak 1 – Skor Keamanan

Ini adalah fitur terbaru yang disediakan oleh WebPageTest yang sebenarnya merupakan integrasi dengan Snyk dan memberikan wawasan tentang keamanan situs web. Jika Anda mengklik kotak berwarna, Anda akan dibawa ke situs web synk.io yang berisi analisis terperinci dari situs web tersebut dari sudut pandang keamanan. Catatan khusus adalah Header Keamanan HTTP yang dipertukarkan antara klien dan server untuk menentukan detail keamanan komunikasi. Yang paling penting adalah Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Host situs web Anda dengan Pressidium

GARANSI UANG KEMBALI 60 HARI

LIHAT RENCANA KAMI

Jika ada tajuk Keamanan penting yang hilang dari situs Anda, Anda akan diberi tahu tentang ini di situs web Sync.

Kotak 2 – Waktu Byte Pertama

Kotak kedua menyediakan First Byte Time (atau dikenal sebagai Time to First Byte atau TTFB). Ini adalah waktu yang dibutuhkan sampai server merespon dengan byte pertama data kembali ke permintaan klien. Idealnya Anda menargetkan angka di bawah 300 ms. Nilai ini lebih terkait server dan tidak relevan dengan waktu yang digunakan untuk merender file situs web Anda. Ini dapat dipengaruhi oleh server DNS yang lambat misalnya atau caching yang tidak mencukupi.

Pada titik ini penting untuk dicatat bahwa jika Anda mengaktifkan cache, Anda harus menjalankan kembali pengujian halaman web Anda sehingga konten yang di-cache akan diukur. Bahkan, Anda disarankan untuk menjalankan pengujian setidaknya 3 kali untuk memastikan bahwa hasilnya sepenuhnya mencerminkan konten yang di-cache di situs Anda.

Waktu Byte Pertama adalah jumlah dari tiga nilai: Waktu yang diperlukan untuk mengirim permintaan HTTP, waktu untuk diproses oleh server, dan waktu yang dibutuhkan server untuk mengirim kembali byte pertama ke klien. Anda dapat mengetahui detail lebih lanjut tentang ini dengan mengklik kotak:

Seperti yang bisa kita lihat, situs web Apple tidak melakukannya dengan baik di bagian tes ini.

Setelah koneksi ini dibuat, sumber daya dapat mulai dikirimkan. Alasan paling umum untuk TTFB yang lambat adalah masalah jaringan, konfigurasi server web, kemungkinan I/O disk server, dan masalah RAM.

Kotak 3 – Tetap Hidup

Kotak 'Keep-alive Enabled' menunjukkan status header HTTP keep-alive. Saat header ini diaktifkan, data akan ditransfer menggunakan koneksi yang sama, jika tidak, koneksi baru harus dibuat untuk setiap file yang perlu ditransfer. Keep-alive diaktifkan secara default dalam banyak kasus dan umumnya merupakan pengaturan sisi server. jika Anda perlu mengaktifkannya sendiri, Anda dapat mengedit file .htaccess Anda dan memasukkan kode di bawah ini

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Kotak 4 – Transfer Kompres

Nilai Compress Transfer mewakili status kompresi Gzip. Ini adalah teknik yang digunakan untuk mengompresi dan kemudian mendekompresi file statis Anda secara real time. Dengan cara ini waktu transfer berkurang karena ukuran file berkurang. Jika penyedia server Anda tidak menerapkan teknologi ini secara default, Anda dapat melakukannya sendiri dengan menentukan aturan yang sesuai untuk setiap jenis file seperti ini:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Sekali lagi, mengklik kotak berwarna yang relevan akan membawa Anda ke bagian tinjauan rinci sehingga Anda dapat melihat apa yang sebenarnya terjadi di situs web Anda.

Kotak 5 – Kompres Gambar

Kotak Gambar Kompres cukup jelas. Klik di atasnya dan itu akan menunjukkan kepada Anda gambar apa yang bisa dikompres dengan lebih baik.

Dalam hal ini, WebPageTest telah mengidentifikasi tiga gambar yang menurutnya dapat berhasil dikompresi lebih lanjut sehingga menghemat 54kb dalam data yang tidak harus ditransfer. Ini mungkin tidak terdengar banyak tetapi pada ponsel setiap kb yang dapat Anda simpan memang membuat perbedaan.

Gambar adalah aspek yang paling memakan ruang dari konten statis Anda. Mengompresi mereka adalah keharusan mutlak. Analisis WebPageTest memudahkan untuk mengidentifikasi gambar mana yang mungkin memperlambat situs Anda dan karenanya memerlukan perhatian.

Kotak 6 – Cache konten statis

Jika Anda menekan kotak 'Cache static content', Anda akan dibawa ke bagian rinci yang disebut 'Leverage browser caching of static assets'.

Cache browser dapat dimanfaatkan oleh pengembang atau administrator Anda dengan menginstruksikan browser web kapan harus men-cache sumber daya, kapan tidak, dan untuk berapa lama dengan penggunaan header HTTP yang benar. Anda dapat menemukan beberapa informasi lebih rinci tentang cache browser di artikel kami 'Bagaimana cara kerja cache browser?'. Anda juga dapat mengetahui bagaimana Pressidium mengimplementasikan cache browser di sini.

Kotak 7 – Penggunaan CDN yang efektif

CDN (atau Jaringan Pengiriman Konten) layak digunakan jika Anda memiliki basis pengguna yang tersebar secara geografis. Jika, misalnya, semua pelanggan Anda berbasis di London dan server host Anda juga berlokasi di London, maka mungkin tidak banyak gunanya menggunakan CDN. Namun, jika pengguna Anda lebih beragam secara geografis maka CDN dapat membuat perbedaan besar dalam kinerja situs Anda bagi pengguna tersebut dengan menempatkan salinan situs web Anda di server yang terletak lebih dekat dengan mereka.

Jika Anda menggunakan CDN maka WebPageTest akan melihat seberapa efektif ini bekerja.

Hasil Kinerja

Mari kita buka dan lihat beberapa data lagi yang dimulai dengan Hasil Kinerja yang akan Anda lihat di bagian atas Tab Ringkasan.

Dalam hasil kinerja, kita dapat melihat ikhtisar terpenting untuk hal-hal seperti Waktu Byte Pertama, Indeks Kecepatan yang merupakan waktu rata-rata di mana bagian halaman yang terlihat ditampilkan, Pergeseran Tata Letak Kumulatif (CLS) untuk mengukur stabilitas visual, waktu yang digunakan sampai Dokumen dimuat penuh dan lebih banyak lagi.

Pemandangan Air Terjun

Tepat di bawah Hasil Performa kita bisa melihat tampilan air terjun untuk setiap lari Anda. Jika Anda mengklik salah satunya, Anda akan diarahkan ke halaman yang berisi detail lengkap dari lari dalam format air terjun.

Anda akan diberikan semua statistik kinerja untuk setiap aset individu situs web Anda. Ini berbeda warna sehingga lebih mudah untuk membedakan antara mereka. Jika Anda mengklik salah satu dari ini, sebuah popup akan terbuka yang memberikan lebih banyak detail.

Tampilan Air Terjun adalah representasi visual halaman dan bagaimana komponen jangkauan dimuat. Ini memungkinkan kami untuk dengan mudah mengidentifikasi komponen apa pun yang dapat memperlambat segalanya. Sangat membantu untuk dapat melihat di mana hambatannya dan berarti kami dapat memperbaiki masalah dengan akurasi yang tepat daripada harus menebak-nebak.

Tampilan Koneksi

Papan Tampilan Sambungan juga merupakan fitur yang sangat berguna karena memungkinkan Anda mengidentifikasi masalah kinerja web dengan sangat mudah dengan meringkas secara visual langkah-langkah untuk koneksi antara browser dan server.

Anda dapat melihat status koneksi langsung dari DNS, Koneksi awal, negosiasi SSL hingga hal-hal seperti sumber daya video. Di bawah ini, ada juga grafik yang menggambarkan penggunaan CPU pada perangkat yang memuat situs web. Ada juga indikator bandwidth yang menunjukkan level yang digunakan selama rendering data.

Detail Permintaan

Terakhir, di bawah Connection View, Anda akan diberikan dua papan analisis lagi – Request Details dan Request Header.

Papan Detail Permintaan sangat membantu dan mencantumkan setiap sumber daya yang diminta bersama dengan data yang relevan dengan permintaan itu seperti jenis konten, waktu mulai permintaan, jumlah byte yang diunduh, dan banyak lagi. Tabel ini sebenarnya dapat diurutkan… cukup klik pada tajuk kolom untuk mengurutkan berdasarkan kolom tersebut.

Papan Header Permintaan menyediakan (ya, Anda dapat menebaknya) daftar sumber daya permintaan bersama dengan informasi header. Klik masing-masing untuk detail lengkapnya.

Kesimpulan

Jika Anda memerlukan analisis mendalam tentang aktivitas situs web Anda, WebPageTest adalah alat yang fantastis untuk digunakan. Bahkan jika Anda tidak mendalami informasi yang diberikannya, Anda dapat dengan cepat merasakan apakah situs Anda berfungsi dengan baik atau tidak dan apakah perlu melihat lebih dekat bagaimana kinerjanya. Dan yang terbaik dari semuanya, gratis!