Aturan dan Rekomendasi PageSpeed

Ilya Grigorik

Dipublikasikan: 17 Agustus 2018

Panduan ini mempelajari aturan PageSpeed Insights dalam konteks: hal yang harus diperhatikan saat mengoptimalkan jalur rendering penting, dan alasannya.

Hilangkan JavaScript dan CSS yang memblokir perenderan

Untuk mencapai waktu tercepat hingga rendering pertama, meminimalkan dan (jika memungkinkan) meniadakan sejumlah sumber daya penting pada halaman, meminimalkan jumlah byte penting yang diunduh, dan mengoptimalkan panjang jalur penting.

Mengoptimalkan penggunaan JavaScript

Resource JavaScript merupakan parser pemblokir secara default kecuali ditandai sebagai async atau ditambahkan menggunakan cuplikan JavaScript khusus. Parser yang memblokir JavaScript akan memaksa browser menunggu RenderScript dan menjeda konstruksi DOM, yang selanjutnya dapat menunda waktu hingga render pertama secara signifikan.

Pilih resource JavaScript asinkron

Resource asinkron membuka halangan parser dokumen dan memungkinkan browser menghindari pemblokiran CSSOM sebelum skrip dieksekusi. Sering kali, jika skrip dapat menggunakan atribut async, itu juga berarti bahwa skrip tersebut tidak penting untuk render pertama. Pertimbangkan memuat skrip secara asinkron setelah render awal.

Menghindari panggilan server sinkron

Gunakan metode navigator.sendBeacon() untuk membatasi data yang dikirim oleh XMLHttpRequest dalam penangan unload. Karena banyak browser mengharuskan permintaan tersebut bersifat sinkron, permintaan tersebut dapat memperlambat transisi halaman, terkadang secara signifikan. Kode berikut menunjukkan cara menggunakan navigator.sendBeacon() untuk mengirim data ke server di pengendali pagehide, bukan di pengendali unload.

<script>
  function() {
    window.addEventListener('pagehide', logData, false);
    function logData() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
        'Sent by a beacon!');
    }
  }();
</script>

Metode fetch() memberikan cara yang lebih baik untuk meminta data secara asinkron. fetch() memproses respons menggunakan Promise, bukan beberapa pengendali peristiwa. Tidak seperti respons terhadap XMLHttpRequest, respons fetch() adalah objek aliran. Ini berarti bahwa panggilan ke json() juga menampilkan Promise.

<script>
  fetch('./api/some.json')
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +  response.status);
          return;
        }
        // Examine the text in the response
        response.json().then(function(data) {
          console.log(data);
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
</script>

Metode fetch() juga dapat menangani permintaan POST.

<script>
  fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  }).then(function() { // Additional code });
</script>

Menunda penguraian JavaScript

Untuk meminimalkan jumlah tugas yang harus dilakukan browser untuk merender halaman, tunda skrip yang tidak penting yang tidak penting untuk menyusun konten yang terlihat bagi render awal.

Menghindari JavaScript yang berjalan lama

Berjalannya JavaScript yang berkepanjangan memblokir browser dari mengonstruksikan DOM, CSSOM, dan merender halaman, jadi setiap logika inisialisasi yang tidak penting untuk render awal perlu ditunda. Jika urutan inisialisasi yang panjang perlu dijalankan, pertimbangkan untuk membaginya menjadi beberapa tahapan agar browser dapat memproses peristiwa lain di antaranya.

Optimalkan Penggunaan CSS

CSS diperlukan untuk mengonstruksikan hierarki render dan JavaScript akan sering kali memblokir CSS selama konstruksi awal halaman. Pastikan bahwa CSS yang tidak penting ditandai sebagai tidak penting (misalnya, cetak dan kueri media lainnya), dan bahwa jumlah CSS penting serta waktu untuk mengirimkannya sekecil mungkin.

Letakkan CSS di kepala dokumen

Sebutkan semua resource CSS seawal mungkin dalam dokumen HTML sedemikian hingga browser dapat menemukan tag <link> dan sesegera mungkin mengirimkan permintaan untuk CSS.

Menghindari impor CSS

Perintah pengimporan CSS (@import) memungkinkan satu stylesheet mengimpor aturan dari file stylesheet lain. Namun, hindari perintah ini karena menyertakan perjalanan dua arah tambahan ke jalur penting: resource CSS yang diimpor hanya akan ditemukan setelah style sheet CSS dengan aturan @import itu sendiri diterima dan diuraikan.

Jadikan sebaris CSS yang memblokir render

Untuk mendapatkan performa terbaik, Anda dapat mempertimbangkan penyisipan CSS penting secara langsung ke dalam dokumen HTML. Hal ini akan menghilangkan perjalanan bolak-balik tambahan di jalur kritis dan, jika dilakukan dengan tepat, dapat menghasilkan "satu perjalanan pulang pergi" panjang jalur kritis di mana hanya HTML yang merupakan sumber daya pemblokir.

Masukan