Mengurangi ukuran konten paruh atas

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.

Rekomendasi

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 melakukannya:

Susun HTML agar memuat konten paruh atas dan penting terlebih dahulu

Muat konten utama halaman Anda terlebih dahulu. Susun struktur halaman Anda agar respons awal dari server mengirimkan data yang diperlukan untuk segera merender bagian penting halaman dan menunda sisanya. Artinya, Anda harus membagi CSS menjadi dua bagian: bagian inline yang bertanggung jawab untuk menata gaya bagian 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 didesain ulang agar berfungsi dengan baik di beberapa perangkat dan memuat konten penting terlebih dahulu, gunakan teknik berikut untuk mengurangi jumlah data yang diperlukan untuk merender halaman:
  • 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

Masukan

Apakah halaman ini membantu?