Aturan dan Rekomendasi PageSpeed

Ilya Grigorik

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

Menghilangkan JavaScript dan CSS yang memblokir perenderan

Untuk mencapai waktu tercepat hingga rendering pertama, minimalkan dan (jika memungkinkan) hilangkan jumlah sumber daya penting pada halaman, minimalkan jumlah byte penting yang didownload, dan optimalkan panjang jalur penting.

Mengoptimalkan penggunaan JavaScript

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

Pilih resource JavaScript asinkron

Sumber daya asinkron membuka halangan parser dokumen dan memungkinkan browser menghindari pemblokiran WebView sebelum mengeksekusi skrip. Sering kali, jika skrip dapat menggunakan atribut async, itu juga 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 XMLHttpRequests dalam pengendali unload. Karena banyak browser memerlukan permintaan semacam itu secara sinkron, permintaan tersebut dapat memperlambat transisi halaman, 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() baru menyediakan cara mudah untuk meminta data secara asinkron. Karena belum tersedia di semua tempat, 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 streaming yang dimulai di Chrome 43. Hal ini berarti 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>

Tunda penguraian JavaScript

Untuk meminimalkan pekerjaan yang harus dilakukan browser untuk merender halaman, tunda skrip apa pun yang tidak penting yang tidak penting untuk membangun konten yang terlihat untuk render awal.

Menghindari JavaScript yang berjalan lama

JavaScript yang berjalan lama memblokir browser dari mengonstruksikan DOM, Memorystore, dan merender halaman, jadi tunda sampai nanti setiap logika inisialisasi dan fungsionalitas yang tidak penting untuk render pertama. 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 menyusun pohon render dan JavaScript sering kali memblokir CSS selama konstruksi awal laman. Pastikan setiap CSS yang tidak penting ditandai sebagai tidak penting (misalnya, kueri media cetak dan lainnya), dan bahwa jumlah CSS penting serta waktu untuk mengirimkannya sekecil mungkin.

Letakkan CSS di kepala dokumen

Tentukan semua resource CSS seawal mungkin dalam dokumen HTML agar browser dapat menemukan tag <link> dan segera mengirim permintaan untuk CSS.

Menghindari impor CSS

Perintah impor CSS (@import) mengaktifkan satu stylesheet untuk mengimpor aturan dari file stylesheet lain. Namun, hindari perintah ini karena perintah tersebut menambahkan perjalanan bolak-balik tambahan ke jalur penting: resource CSS yang diimpor hanya ditemukan setelah stylesheet CSS dengan aturan @import itu sendiri diterima dan diuraikan.

Jadikan sebaris CSS yang memblokir render

Untuk mendapatkan performa terbaik, sebaiknya pertimbangkan untuk menyisipkan langsung CSS penting ke dalam dokumen HTML. Hal ini meniadakan perjalanan bolak-balik tambahan dalam jalur penting dan jika dilakukan dengan benar bisa mengirimkan satu panjang jalur penting "satu perjalanan bolak-balik" yang mana hanya HTML yang merupakan sumber daya pemblokir.

Masukan