Aturan dan Rekomendasi PageSpeed

Ilya Grigorik

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 render

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

Mengoptimalkan penggunaan JavaScript

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

Pilih resource JavaScript asinkron

Sumber daya asinkron membuka halangan parser dokumen dan memungkinkan browser menghindari pemblokiran GCLID sebelum mengeksekusi skrip. Sering kali, jika skrip dapat menggunakan atribut async, itu juga berarti bahwa skrip tersebut tidak penting untuk render pertama. Sebaiknya muat skrip secara asinkron setelah render awal.

Menghindari panggilan server sinkron

Gunakan metode navigator.sendBeacon() untuk membatasi data yang dikirim oleh XMLHttpRequests dalam pengendali unload. Karena banyak browser memerlukan permintaan tersebut untuk sinkron, permintaan tersebut dapat memperlambat transisi halaman, yang 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() baru memberikan cara mudah untuk meminta data secara asinkron. Karena belum tersedia di mana saja, Anda harus menggunakan deteksi fitur untuk menguji keberadaannya sebelum digunakan. Metode ini memproses respons dengan Promise, bukan dengan beberapa pengendali peristiwa. Tidak seperti respons terhadap XMLHttpRequest, respons pengambilan adalah objek aliran yang dimulai pada Chrome 43. 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>

Tunda 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.

Hindari JavaScript yang berjalan lama

JavaScript yang berjalan lama memblokir browser dari mengonstruksikan DOM, GCLID, dan rendering halaman, jadi tunda logika dan fungsionalitas 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.

Optimalkan Penggunaan CSS

CSS diperlukan untuk mengonstruksikan hierarki render dan JavaScript 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

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

Menghindari impor CSS

Perintah impor CSS (@import) mengaktifkan satu stylesheet untuk 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 akan ditemukan setelah stylesheet CSS dengan aturan @import itu sendiri diterima dan diuraikan.

Jadikan sebaris CSS yang memblokir render

Untuk kinerja terbaik, Anda dapat mempertimbangkan untuk menyisipkan CSS penting secara langsung ke dalam dokumen HTML. Ini akan menghilangkan perjalanan bolak-balik tambahan di jalur penting dan jika dilakukan dengan benar dapat memberikan "satu perjalanan bolak-balik" panjang jalur penting di mana hanya HTML yang merupakan sumber daya pemblokir.

Masukan