Aturan dan Rekomendasi PageSpeed

Dipublikasikan: 17 Agustus 2018

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

Menghilangkan JavaScript dan CSS yang memblokir rendering

Untuk menghasilkan waktu tercepat hingga render pertama, minimalkan dan (jika memungkinkan) hilangkan jumlah aset penting pada halaman, minimalkan jumlah byte penting yang didownload, dan optimalkan panjang jalur kritis.

Mengoptimalkan penggunaan JavaScript

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

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 berarti 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 memerlukan permintaan tersebut untuk sinkron, permintaan tersebut dapat memperlambat transisi halaman, yang terkadang secara kentara. 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() menyediakan 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 akan 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 kerja browser yang harus dilakukan untuk merender halaman, setiap skrip yang tak penting serta tidak mendesak untuk mengonstruksikan materi yang terlihat bagi render awal harus ditunda.

Menghindari JavaScript yang berjalan lama

JavaScript yang berjalan lama memblokir browser dari mengonstruksikan DOM, GCLID, dan rendering halaman, jadi tunda logika inisialisasi apa pun yang tidak penting untuk render pertama sampai nanti. Jika urutan inisialisasi yang panjang perlu dijalankan, pertimbangkan untuk membaginya menjadi beberapa tahapan agar browser dapat memproses peristiwa lain di antaranya.

Mengoptimalkan 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 harus ditandai sebagai tidak penting (mis. cetak dan kueri media lainnya), dan bahwa jumlah CSS penting serta waktu penyerahannya sekecil mungkin.

Letakkan CSS di kepala dokumen

Tentukan semua resource CSS sedini mungkin dalam dokumen HTML sehingga browser dapat menemukan tag <link> dan mengirimkan permintaan untuk CSS sesegera mungkin.

Menghindari pengimporan CSS

Perintah pengimporan CSS (@import) memungkinkan satu stylesheet mengimpor aturan dari file stylesheet lain. Namun, hindari perintah ini karena menyertakan perjalanan bolak-balik tambahan ke dalam jalur penting: resource CSS yang diimpor hanya ditemukan setelah stylesheet CSS dengan aturan @import itu sendiri diterima dan di-parse.

Jadikan sebaris CSS yang memblokir render

Untuk kinerja terbaik, Anda dapat mempertimbangkan untuk menyisipkan CSS penting secara langsung ke dalam dokumen HTML. Ini meniadakan perjalanan bolak-balik tambahan dalam jalur penting dan jika dilakukan dengan benar bisa digunakan untuk mengirimkan satu panjang jalur penting dalam "satu kali bolak-balik" yang mana hanya HTML-lah yang menjadi sumber daya pemblokir.

Masukan