15 Tool Alat Uji Kecepatan Web Blog

Kecepatan situs web dapat menjadi faktor penting untuk keberhasilannya. Situs web yang loadingnya lebih cepat dapat memperoleh manfaat dari peringkat SEO yang lebih tinggi, rasio konversi yang lebih tinggi, rasio pentalan yang lebih rendah, durasi pengunjung yang lebih lama di situs, pengalaman pengguna yang lebih baik secara keseluruhan, dan keterlibatan. Itulah mengapa penting untuk memanfaatkan banyak alat uji kecepatan situs web gratis yang tersedia di luar sana sehingga Anda dapat mencapai kinerja yang optimal .

Apa Yang Dapat Dilakukan Tes Kecepatan Situs Web Membantu Anda Menganalisis?

Berikut ini beberapa cara umum alat uji kecepatan situs web digunakan:

Menentukan skrip, font, dan plugin yang menyebabkan masalah waktu buka (HTML, Javascript, CSS)
Memeriksa minifikasi skrip Anda
Menemukan gambar besar menghasilkan kemacetan
Menentukan apakah Anda memiliki JavaScript atau CSS yang memblokir perenderan
Menguji Waktu ke Byte Pertama (TTFB)
Menganalisis waktu muat total, ukuran halaman, dan # permintaan
Memeriksa kinerja dari lokasi geografis yang berbeda
Memeriksa kecepatan render di berbagai browser
Menganalisis Header HTTP
Mengukur kinerja Jaringan Pengiriman Konten Anda
Memverifikasi bahwa aset dimuat dengan benar dari CDN Anda

Konsep Kecepatan Situs Web

Sebelum menjalankan uji kecepatan situs web, penting untuk memahami beberapa konsep di balik cara kerja alat ini sehingga Anda dapat menganalisis data dengan lebih baik dan kemudian mengoptimalkan situs Anda dengan sesuai. Anda tidak hanya dapat menguji kecepatan host web Anda, tetapi Anda juga dapat mengukur kinerja CDN Anda .

Waktu untuk Byte Pertama (TTFB)

Waktu untuk byte pertama (TTFB) adalah pengukuran respons dari server web . Pada dasarnya inilah saatnya browser Anda mulai menerima informasi setelah meminta dari server. Dengan menggunakan CDN Anda dapat secara dramatis mengurangi dampak dari beban pada server asal Anda, yang pada gilirannya akan membantu menurunkan TTFB Anda.

Render-Memblokir Javascript & CSS

Render-blocking mengacu pada Javascript dan CSS yang menjaga halaman Anda dari loading secepat mungkin.

Javascript

Google menyarankan untuk menghapus atau menunda javascript yang mengganggu pemuatan konten paruh atas atas halaman web Anda. Berikut ini tutorial hebat tentang cara menunda pemuatan javascript dengan benar .

Contoh penundaan javascript dengan menempatkannya tepat sebelum </body>tag Anda .

function downloadJSAtOnload () {
var element = document.createElement ("script");
element.src = " defer.js ";
document.body.appendChild (elemen);
}
if (window.addEventListener)
window.addEventListener ("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent ("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

CSS

Anda kemudian juga ingin mengoptimalkan pengiriman CSS agar tidak menyebabkan penundaan pemuatan halaman. Berikut beberapa cara untuk memperbaiki ini:

Benar memanggil file CSS Anda
Kurangi jumlah file CSS
Gunakan lebih sedikit CSS secara keseluruhan

Berikut ini artikel bagus tentang CSS pencekalan render oleh Ilya Grigorik, seorang insinyur kinerja web di Google.

CSS adalah sumber daya pemblokiran perenderan, segera berikan kepada klien dan sesegera mungkin untuk mengoptimalkan waktu untuk render pertama!

Minimalkan Sumber Daya

Meminimalkan sumber berarti menghilangkan karakter yang tidak perlu dari HTML, Javascript, dan CSS yang tidak perlu dimuat, seperti:

Karakter spasi putih
Karakter baris baru
Komentar
Blok pembatas

Ini mempercepat waktu muat Anda karena mengurangi jumlah kode yang harus diminta dari server. Anda dapat menggunakan alat seperti Dan's CSS dan Javascript Minify untuk menghapus semua karakter yang tidak perlu. Atau jika Anda menggunakan WordPress, Anda dapat menggunakan plugin seperti Autoptimize yang akan meminimalkan semua HTML, Javascript, dan CSS untuk Anda.

Permintaan HTTP

Ketika browser Anda mengambil data dari server, ia melakukannya menggunakan HTTP (Hypertext Transfer Protocol). Ini adalah permintaan / tanggapan antara klien dan tuan rumah. Secara umum semakin banyak permintaan HTTP halaman web Anda membuat lebih lambat akan memuat .

Ada banyak cara Anda dapat mengurangi jumlah permintaan seperti:

Menggabungkan file CSS dan Javascript Anda
Sejalan Javascript Anda (hanya jika sangat kecil)
Menggunakan Sprite CSS
Mengurangi aset seperti plugin pihak ketiga yang membuat banyak permintaan eksternal

Daftar Alat Uji Kecepatan Situs Web

Sekarang setelah Anda memiliki pemahaman dasar tentang konsep kinerja web di atas, lihat 15 alat gratis di bawah ini untuk menguji kecepatan situs web Anda. Masing-masing dari mereka menawarkan fitur unik mereka sendiri, pelaporan, dan berbagai cara untuk membedah hasil Anda.

Catatan: Penting juga untuk menyadari ketika menjalankan alat seperti ini bahwa pencarian DNS 1 kali biasanya akan lebih lambat . Jika Anda membandingkan waktu muat total, terkadang lebih baik menjalankan pengujian beberapa kali dan mengambil rata-rata hasil.

Indeks Alat

1. Tes Kecepatan Situs Web KeyCDN

KeyCDN membangun alat uji kecepatan situs web yang cepat dan ringan yang dapat Anda gunakan untuk mendapatkan wawasan mendetail tentang kinerja situs web Anda. Jika menawarkan 14 lokasi untuk dipilih dari seluruh dunia, dan Anda memiliki pilihan untuk membuat hasil tes Anda menjadi pribadi atau publik. Tes ini mencakup perincian air terjun dan pratinjau situs web visual di bagian bawah. Anda dapat dengan cepat melihat berapa banyak permintaan HTTP yang dibuat, ukuran penuh dari halaman yang diminta, dan waktu buka .

Ini juga merupakan satu-satunya alat selain PageSpeed yang responsif dan berfungsi dengan baik di perangkat seluler.

2. Google PageSpeed Insights

Google PageSpeed Insights adalah alat uji kecepatan situs web yang memberi nilai pada situs web Anda dalam skala 1 - 100. Semakin tinggi angkanya, semakin baik situs Anda dioptimalkan. Apa pun di atas 85 menunjukkan bahwa situs web Anda berkinerja baik. PageSpeed memberi Anda laporan untuk versi desktop dan seluler situs Anda. Anda dapat melihat rekomendasi untuk peningkatan seperti Anda perlu mengecilkan CSS atau mengoptimalkan gambar Anda .

Wawasan PageSpeed mengukur bagaimana laman dapat meningkatkan kinerjanya pada:

waktu untuk beban di atas-lipat: Waktu yang berlalu dari saat pengguna meminta halaman baru dan saat konten di paruh atas dirender oleh browser.
waktu untuk pemuatan halaman penuh: Waktu yang berlalu dari saat pengguna meminta halaman baru ke saat halaman sepenuhnya diberikan oleh browser.

Laporan seluler mencakup kategori ekstra yang disebut "Pengalaman Pengguna" yang termasuk dalam penilaian situs Anda. Ini termasuk memeriksa konfigurasi viewport Anda, ukuran target ketuk Anda (tombol dan tautan), dan juga ukuran font yang memenuhi syarat.

Tim Wawasan PageSpeed juga baru-baru ini meluncurkan alat uji kecepatan situs web baru tentang " berpikir dengan Google " yang mungkin ingin Anda periksa. Salah satu fitur bagus adalah laporan indah yang dihasilkannya. Bisa sangat bagus untuk mengirim ke klien.

3. Uji Kecepatan Pingdom

Pingdom mungkin adalah salah satu alat uji kecepatan situs web yang lebih terkenal. Laporan mereka dibagi menjadi empat bagian berbeda yang mencakup perincian air terjun, nilai kinerja, analisis halaman, dan sejarah.

Analisis halaman menawarkan ikhtisar besar dengan informasi tambahan seperti analisis ukuran, ukuran per domain (Anda dapat dengan mudah membandingkan ukuran aset CDN Anda vs domain Anda ), jumlah permintaan per domain, dan jenis konten apa yang memiliki permintaan terbanyak.

Alat uji kecepatan Pingdom juga memungkinkan Anda untuk menguji kecepatan situs web Anda dari empat lokasi utama termasuk:

Dallas, Texas, AS,
Melbourne, Australia
San Jose, Kalifornia, AS
Stockholm, Swedia

Hasil tes kecepatan Pingdom memberi Anda wawasan kinerja, mirip dengan Google PagesSpeed Insights, yang menguraikan di mana Anda dapat melakukan perbaikan. Hasilnya juga menguraikan ukuran halaman berdasarkan tipe konten, ukuran halaman berdasarkan domain, permintaan berdasarkan tipe konten, dan permintaan berdasarkan domain.

4. GTmetrix

GTmetrix masuk ke detail besar karena memeriksa metrik PageSpeed dan YSlow , menetapkan peringkat situs Anda dari F ke A. Laporannya dibagi menjadi lima bagian yang berbeda termasuk PageSpeed, YSlow, perincian waterfall, video, dan sejarah.

Dengan pendaftaran gratis, Anda dapat menguji dari tujuh lokasi yang berbeda. Mereka juga membiarkan Anda memilih browser, Chrome vs Firefox. Anda dapat menguji dan membandingkan kinerja situs web dengan berbagai jenis koneksi (seperti Kabel vs dial-up) untuk melihat pengaruhnya terhadap beban halaman Anda. Fitur lanjutan lainnya termasuk pemutaran video untuk menganalisis kemana kemacetan Anda terjadi dan juga kemampuan untuk menjalankan Adblock plus. Dengan iklan yang dinonaktifkan Anda dapat melihat pengaruhnya terhadap pemuatan situs Anda.

Catatan: Disarankan untuk membuat akun gratis karena Anda akan mendapatkan opsi tambahan, seperti yang disebutkan di atas.

5. WebPageTest

WebPageTest sangat mirip dengan beberapa alat sebelumnya yang disebutkan tetapi memiliki lebih dari 40 lokasi untuk dipilih dan lebih dari 25 browser (termasuk ponsel). Ini memberikan Anda nilai dari F ke A berdasarkan tes kinerja yang berbeda seperti FTTB, kompresi, cache, penggunaan efektif dari CDN, dll. Laporan ini dibagi menjadi enam bagian yang mencakup ringkasan, perincian, peninjauan kinerja, perincian konten, dan cuplikan layar.

Ini juga menawarkan pendekatan unik pada tes. Ini menjalankan apa yang mereka sebut pandangan pertama dan tampilan berulang . Ini membantu untuk mendiagnosis apa yang mungkin menjadi penundaan pencarian DNS waktu 1 seperti yang disebutkan sebelumnya. WebPageTest memiliki fitur yang lebih canggih juga seperti pengambilan video, menonaktifkan Javascript, mengabaikan sertifikat SSL, dan spoofing string agen pengguna.

6. Optimasi Varve Pagespeed

Varvy Pagespeed Optimization adalah alat yang dikembangkan dan dipelihara oleh Patrick Sexton, yang juga membuat GetListed.org, yang sekarang dikenal sebagai Moz Local.

Laporan dipecah menjadi 5 bagian yang berbeda termasuk diagram sumber daya, pengiriman css, penggunaan javascript, masalah kecepatan halaman ditemukan, dan layanan yang digunakan. Alat ini menggunakan lebih dari representasi grafis dari apa yang bisa diperbaiki di situs Anda, seperti membuat memblokir .

Patrick melakukan pekerjaan yang hebat juga termasuk dokumentasi tentang cara lebih mengoptimalkan situs Anda dengan tutorial di jalur render kritis, memanfaatkan caching browser, menunda memuat javascript, dan banyak lagi.

7. Uptrends

Uptrend cukup mendasar tetapi mereka menawarkan lebih dari 35 lokasi untuk dipilih ketika menjalankan tes kecepatan Anda. Laporan mereka dipecah menjadi dua bagian, perincian air terjun dan kelompok domain. Grup domain menawarkan perspektif yang unik karena mengategorikan sumber daya ke berbagai sumber : pihak pertama, statistik, CDN, sosial, iklan, keseluruhan pihak pertama, dan pihak ketiga secara keseluruhan.

8. dotcom-monitor

dotcom-monitor menawarkan 23 lokasi yang berbeda dan tujuh browser yang berbeda di mana Anda dapat menjalankan tes kecepatan situs web Anda. Fitur unik mereka adalah Anda dapat menjalankan semua tes geografis secara bersamaan . Ini dapat menghemat banyak waktu, karena setiap alat lainnya Anda harus menjalankannya secara individual per lokasi. Anda kemudian dapat mengklik setiap laporan individual dan atau perincian waterfall.

Laporan mereka dibagi menjadi lima bagian yang berbeda yang mencakup ringkasan, kinerja, waterfall chart (rincian), host, dan kesalahan.

9. PageScoring

PageScoring adalah tentang menawarkan laporan kinerja yang sederhana dan mudah dimengerti dengan desain minimalis . Mereka menunjukkan waktu buka keseluruhan Anda dan kemudian potongan informasi berikut:

Pencarian domain
Waktu koneksi
Waktu pengalihan
Ukuran halaman
Unduh Waktu

Anda kemudian dapat melihat aset Anda dan berapa lama waktu yang diperlukan untuk memuat. Jika Anda mencari alat uji kecepatan situs web cepat dan mudah, ini bekerja cukup baik.

10. Alat Lab Kuning

Yellow Lab Tools adalah alat kinerja web dan pengujian kualitas front-end yang lebih baru yang dikembangkan oleh Gaël Métais . Alat ini memberi Anda banyak informasi dan beberapa fitur unik yang tidak terlihat di alat lain seperti tampilan ketika interaksi JavaScript dengan DOM selama pemuatan laman dan masalah validasi kode lainnya. Dapatkan skor global berdasarkan kualifikasi berikut.

Berat halaman
Permintaan
DOM
Javascript Buruk
CSS Buruk
Konfigurasi Server

Garis waktu JavaScript menunjukkan dengan tepat bagaimana DOM berinteraksi selama pemuatan halaman.

alat laboratorium kuning javascript waktu

11. Google Chrome DevTools

Dan tentu saja kita tidak bisa melupakan Google Chrome DevTools . Ini adalah alat yang sangat mudah digunakan (dengan fitur-fitur canggih) dan Anda dapat dengan cepat meluncurkannya kapan saja di broswer Chrome Anda menggunakan tombol pintas berikut.

Windows: F12 atau jugaCtrl + Shift + I
Mac: Cmd + Opt + I

Dengan pembaruan alat pengembang terbaru , mereka telah menambahkan panel detail teragregasi ke dalam garis waktu air terjun. Hal ini memungkinkan Anda untuk lebih mudah melihat apa yang paling menghabiskan biaya Anda, dan Anda kemudian dapat memecahnya berdasarkan domain, sub-domain, dll. Untuk menjalankan klik ini ke panel "Timeline" dan tekan Ctrl + R( Cmd + R) untuk menyegarkan halaman. Anda kemudian dapat mengklik panel "Ringkasan" dan panel rincian "Gabungan".

Kami juga memiliki pos yang bagus tentang apa yang memblokir DOM dan cara memperbaikinya. Dalam alat pengembang, Anda dapat melihat dengan tepat waktu DOMContentLoaded dan total waktu muat. Untuk menjalankan klik ini ke panel "Jaringan", klik opsi "Tampilkan Ringkasan" dan tekan Ctrl + R( Cmd + R) untuk menyegarkan halaman. Garis biru akan muncul untuk DOMContentLoaded dan garis merah untuk waktu buka total. Biasanya semua yang tersisa atau menyentuh garis biru adalah aset yang memblokir DOM, atau juga disebut sebagai render blocking resources.

12. Sucuri Load Time Tester

The Sucuri Load Time Tester menyediakan cara cepat dan mudah untuk menguji kinerja situs Anda dari seluruh dunia. Ini akan memberi Anda nilai kinerja global, dari A ke F. Tes mengukur berapa lama waktu yang dibutuhkan untuk terhubung ke situs Anda dan untuk satu halaman untuk memuat sepenuhnya. Nilai yang sangat penting untuk diperhatikan adalah "waktu untuk byte pertama" , yang memberi Anda berapa lama waktu yang diperlukan agar konten dikirim kembali ke browser untuk mulai memproses halaman.

13. Pagelocity

Alat Pagelocity menawarkan pendekatan unik lain ketika datang ke tes kecepatan situs web. Ini memberi Anda skor total dari 100, yang terdiri dari faktor-faktor seperti sosial, SEO, sumber daya, dan kode. Alat ini juga menawarkan kemampuan untuk melacak pesaing Anda. Anda dapat mendaftar untuk mendapatkan akun gratis untuk mendapatkan manfaat dari fitur tambahan. Tampilan kode sangat unik karena akan menunjukkan kepada Anda jika situs Anda berjalan di atas HTTPS, apa TTFB Anda, dan antarmuka grafis elemen DOM Anda dengan bagan batang.

Tampilan sumber daya juga cukup menarik karena Anda dapat dengan cepat melihat aset mana yang menambah berat total halaman Anda. Seperti yang Anda lihat dalam gambar uji kami, lebih dari 4x skrip eksternal kami.

14. YSlow

YSlow adalah proyek open source dan alat yang menganalisa halaman web dan membantu Anda mencari tahu mengapa mereka lambat berdasarkan aturan Yahoo! Untuk situs web berkinerja tinggi. Saat ini dikelola oleh Marcel Duran, yang juga terlibat dalam proyek WebPageTest. YSlow beroperasi dalam tiga langkah untuk mendapatkan hasil tes kinerjanya:

YSlow merangkak DOM untuk menemukan semua komponen (gambar, skrip, dll.).
YSlow mendapat informasi tentang setiap ukuran komponen (gzip, tajuk kedaluwarsa, dll.)
YSlow mengambil data dan menghasilkan nilai untuk setiap aturan, yang pada gilirannya memberi Anda nilai keseluruhan.

YSlow memiliki 23 aturan berbeda yang menjalankan situs web Anda terhadap untuk menilai itu, seperti yang terlihat pada contoh tes di bawah ini. Anda dapat menggunakan ekstensi chrome YSlow gratis atau mendapatkan hasil YSlow dari GTMetrix. Pastikan untuk melihat tutorial mendalam kami tentang cara meningkatkan skor YSlow Anda .

15. PerfTool

PerfTool adalah proyek alat kinerja sisi klien sumber terbuka, yang dihosting di Github. Ini mengumpulkan berbagai informasi tentang situs web Anda dan menampilkannya dengan cara yang mudah dicerna pada halaman laporan. Ini menggabungkan tiga sumber data dalam satu, PageSpeed Insights, devperf, dan W3CJS. Secara total ini memberi Anda lebih dari 200 indikator kinerja yang berbeda.

Satu keuntungan besar dengan PerfTool adalah Anda dapat menjalankan beberapa pengujian halaman pada saat yang sama untuk laporan Google PageSpeed Insights. Kemudian, bandingkan hasil kinerja situs web dari pengujian sebelumnya, tetapkan ambang batas skor, dan dapatkan laporan terperinci tentang pengujian Anda. Ini benar-benar dapat menghemat banyak waktu jika Anda membandingkan seluruh kinerja situs web Anda, karena Anda tidak perlu menguji halaman Anda satu per satu.

Tes Kecepatan Situs Web Dengan Ekstensi Chrome

Ada beberapa ekstensi Chrome gratis di mana Anda dapat menganalisis kecepatan situs web. Berikut beberapa dari mereka. Anda dapat dengan mudah meluncurkannya dari dalam browser Anda.

Waktu Muat Laman
app.telemetry Page Speed Monitor
Performance-Analyzer
Pengujian Beban LoadFocus

Tes Kecepatan Situs Web Seluler

Jika Anda perlu menjalankan uji coba situs web seluler, beberapa alat yang kami sebutkan di atas harus menyertakan ini:

WebPageTest
GTMetrix
dotcom-monitor

Cara lain untuk mensimulasikan uji kecepatan pada perangkat seluler adalah menggunakan alat pengembang Chrome dalam mode perangkat . Untuk masuk ke mode perangkat, klik ikon telepon kecil di Chrome DevTools atau Anda dapat menekan Ctrl + Shift + M( Cmd + Shift + M). Anda kemudian dapat memilih perangkat apa yang ingin Anda tiru, orientasi, dan bahkan resolusi. Anda juga dapat mengubah pelambatan jaringan untuk melihat bagaimana situs web Anda benar-benar akan membuat pada mengatakan koneksi 2G atau 4G biasa.

Anda kemudian dapat menggunakan tab "Jaringan" dan perincian waterfall untuk menjalankan tes kecepatan.

Ringkasan

Seperti yang Anda lihat, ada sejumlah alat uji kecepatan situs web yang dapat Anda pilih. Masing-masing memiliki fitur unik mereka sendiri seperti yang disorot di atas. Merupakan ide yang baik untuk secara teratur menguji situs Anda dan menetapkan patokan sehingga lama kelamaan Anda dapat melakukan peningkatan.

Setelah Anda tahu kemacetan di mana Anda bisa mulai memperbaikinya. Hampir semua alat di atas mencantumkan rekomendasi. Beberapa perbaikan yang paling umum termasuk:

Mengompresi gambar dan file Anda
Memilih hosting web yang cepat
Mengoptimalkan kode dan skrip Anda
Menggunakan Jaringan Pengiriman Konten
Caching
Mengurangi jumlah permintaan HTTP

Minggu, 28 Oktober 2018

15 Tool Alat Uji Kecepatan Web Blog

Apa Yang Dapat Dilakukan Tes Kecepatan Situs Web Membantu Anda Menganalisis?