Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa diperlukan perjalanan jaringan tambahan untuk merender konten paruh atas halaman.
Ringkasan
Jika jumlah data yang diperlukan melebihi jendela kongesti awal (umumnya terkompres 14,6 KB), akan diperlukan roundtrip antara server Anda dan browser pengguna. Untuk pengguna pada jaringan dengan latensi yang tinggi seperti jaringan seluler, hal ini dapat menyebabkan penundaan yang signifikan pada pemuatan halaman.
Saran
Agar halaman dimuat lebih cepat, batasi ukuran data (markup HTML, gambar, CSS, JavaScript) yang dibutuhkan untuk merender konten paruh atas halaman. Ada beberapa cara untuk melakukan hal ini:- Susun HTML agar memuat konten paruh atas dan penting terlebih dahulu
- Kurangi jumlah data yang digunakan oleh resource Anda
Susun HTML agar memuat konten paruh atas dan penting terlebih dahulu
Muat konten utama halaman Anda terlebih dahulu. Susun halaman agar respons awal dari server Anda mengirimkan data yang dibutuhkan untuk segera merender bagian penting halaman dan menunda sisanya. Ini dapat berarti bahwa Anda perlu membagi CSS ke dalam 2 bagian: bagian inline yang bertanggung jawab mengatur gaya porsi ATF konten, dan bagian yang dapat ditangguhkan.
Pertimbangkan contoh berikut tentang cara situs dapat disusun ulang agar dapat memuat lebih cepat:
- Jika HTML Anda memuat widget pihak ketiga sebelum memuat konten utama, ubah urutannya agar memuat konten utama terlebih dahulu.
- Jika situs Anda menggunakan desain 2 kolom dengan bilah sisi navigasi dan artikel, namun HTML Anda memuat sidebar sebelum artikel, pertimbangkan untuk memuat artikel terlebih dahulu.
Kurangi jumlah data yang digunakan oleh resource Anda
Setelah situs Anda dirancang ulang agar dapat bekerja dengan baik pada banyak perangkat dan memuat konten penting terlebih dahulu, gunakan teknik berikut untuk mengurangi jumlah data yang dibutuhkan untuk merender halaman Anda:- Kurangi resource: HTML, CSS, dan JavaScript dapat dikurangi dengan menghapus whitespace dan komentar yang tidak diperlukan. Pengoptimalan lebih lanjut mungkin dapat dilakukan melalui penggunaan alat yang mengubah nama variabel pada resource Anda.
- Pertimbangkan menggunakan CSS bukan gambar jika memungkinkan.
- Aktifkan Kompresi