Kurangi ukuran konten paro atas

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa diperlukan perjalanan jaringan tambahan untuk merender konten paro atas laman.

Ikhtisar

Jika jumlah data yang diperlukan melebihi jendela kongesti awal, akan diperlukan perjalanan tambahan 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 laman.

Saran

Agar laman dimuat lebih cepat, batasi ukuran data (markup HTML, gambar, CSS, JavaScript) yang dibutuhkan untuk merender konten paro atas laman. Ada beberapa cara untuk melakukan hal ini:

Susun HTML agar memuat konten paro atas dan penting terlebih dahulu

Muat konten utama laman Anda terlebih dahulu. Susun laman agar respons awal dari server Anda mengirimkan data yang dibutuhkan untuk segera merender bagian penting laman dan menunda sisanya. Ini dapat berarti bahwa Anda perlu membagi CSS ke dalam dua bagian: bagian sebaris yang bertanggung jawab mengatur gaya porsi ATF konten, dan bagian yang dapat ditunda.

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 dua kolom dengan bilah sisi navigasi dan artikel, namun HTML Anda memuat bilah sisi sebelum artikel, pertimbangkan untuk memuat artikel terlebih dahulu.

Kurangi jumlah data yang digunakan oleh sumber daya 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 laman Anda:
  • Kurangi sumber daya: 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 sumber daya Anda.
  • Pertimbangkan menggunakan CSS bukan gambar jika mungkin.
  • Aktifkan Kompresi