Daftar Periksa HTML Kecepatan Halaman
Tempel HTML halaman untuk menemukan skrip yang memblokir render, gambar tanpa ukuran atau lazy loading, viewport yang hilang, @import, document.write, dan lainnya.
Buka halaman, pilih "Lihat sumber halaman" (Ctrl+U), salin semuanya, lalu tempel di sini.
Tambahkan defer (atau async untuk skrip yang berdiri sendiri) agar browser bisa merender halaman sebelum skrip selesai diunduh.
<script src="https://cdn.example.com/analytics.js">
Atur width dan height (atau CSS aspect-ratio) agar browser menyiapkan ruang dan tata letak tidak bergeser (CLS).
<img src="/hero.jpg" alt="Hero">
Tambahkan loading="lazy" pada gambar yang tidak terlihat di layar pertama.
<img src="/b.png" alt="B" width="300" height="200">
Sajikan WebP atau AVIF (mis. dengan <picture>) – biasanya 25–50% lebih kecil dengan kualitas sama.
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
Tambahkan loading="lazy" pada embed seperti video dan peta.
<iframe src="https://www.youtube.com/embed/xyz">
Tambahkan <meta name="viewport" content="width=device-width, initial-scale=1"> agar tampil benar di ponsel.
<meta name="viewport">
Tambahkan <meta charset="UTF-8"> sebagai elemen pertama di <head>.
<meta charset="UTF-8">
Tambahkan <link rel="preconnect"> untuk origin pihak ketiga yang penting agar koneksi dibuka lebih awal.
cdn.example.com
Pemeriksaan yang lolos (8)
- ✓ Sedikit stylesheet pemblokir render
- ✓ Tidak ada CSS @import
- ✓ Aturan @font-face inline sudah memakai font-display
- ✓ Gambar pertama tidak di-lazy-load
- ✓ Tidak ada document.write()
- ✓ Kode inline berukuran kecil
- ✓ Ukuran DOM wajar
- ✓ Ukuran HTML wajar
Apa itu Daftar Periksa Kecepatan Halaman?
Alat ini meninjau kode sumber HTML sebuah halaman terhadap daftar periksa masalah performa front-end yang umum dan menjelaskan cara memperbaiki masing-masing: skrip dan stylesheet yang memblokir render, CSS @import, @font-face tanpa font-display, gambar tanpa dimensi atau lazy loading, gambar hero yang di-lazy-load, format gambar lama, iframe tanpa lazy loading, viewport atau charset yang hilang, document.write, kode inline yang besar, preconnect yang hilang, serta DOM atau HTML yang terlalu besar.
Cara menggunakan Daftar Periksa Kecepatan Halaman
- Buka halaman Anda, gunakan Lihat sumber halaman (Ctrl+U), lalu salin semuanya.
- Tempel HTML-nya lalu tekan Analisis.
- Tinjau temuan yang diurutkan berdasarkan dampak, dengan tag bermasalah ditampilkan sebagai contoh.
- Buka "Pemeriksaan yang lolos" untuk melihat apa saja yang sudah baik.
Contoh
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
Kapan menggunakan Daftar Periksa Kecepatan Halaman
Gunakan untuk tinjauan statis cepat atas template atau halaman, atau ketika Anda tidak bisa menjalankan Lighthouse. Alat ini tidak mengukur waktu muat sebenarnya atau Core Web Vitals dan tidak bisa melihat sumber daya yang ditambahkan JavaScript; gunakan Lighthouse atau PageSpeed Insights untuk data lab dan lapangan.
Cara kerja Daftar Periksa Kecepatan Halaman
HTML dipindai di browser Anda dengan parser tag ringan setelah komentar dihapus. Setiap aturan memeriksa tag dan atribut tertentu – misalnya tag <script> eksternal di <head> tanpa async, defer, atau type=module, <img> tanpa width dan height sekaligus, gambar setelah dua gambar pertama tanpa loading="lazy", atau total lebih dari 1.500 elemen. Origin pihak ketiga dari skrip dan stylesheet dibandingkan dengan tautan preconnect dan dns-prefetch. Tidak ada halaman yang dimuat dan tidak ada JavaScript yang dijalankan.
Kasus Penggunaan Umum
- Menemukan skrip yang memblokir render di header sebuah tema.
- Menemukan gambar yang menyebabkan pergeseran tata letak karena tidak memiliki width dan height.
- Memeriksa bahwa gambar hero tidak di-lazy-load (buruk untuk LCP).
- Meninjau template email HTML atau landing page sebelum diluncurkan.
Pertanyaan Umum
Apakah ini sama dengan Google PageSpeed Insights?
Tidak. PageSpeed Insights memuat halaman dan mengukurnya. Alat ini hanya membaca HTML yang Anda tempel, sehingga instan dan privat tetapi tidak bisa mengukur kecepatan.
Mengapa gambar pertama sebaiknya tidak di-lazy-load?
Gambar terbesar di paruh atas biasanya merupakan elemen Largest Contentful Paint. Lazy loading menundanya sampai tata letak selesai, sehingga memperburuk LCP.
Apakah setiap skrip sebaiknya memakai defer?
Skrip yang membutuhkan DOM dan berjalan berurutan sebaiknya memakai defer; skrip independen seperti analitik bisa memakai async. Kode inline yang kritis sebaiknya tetap kecil.