Dipublikasikan: 17 Agustus 2018
Panduan ini memeriksa aturan PageSpeed Insights dalam konteks: hal-hal yang perlu diperhatikan saat mengoptimalkan jalur rendering penting, dan alasannya.
Menghapus JavaScript dan CSS yang memblokir rendering
Untuk memberikan waktu tercepat untuk rendering pertama, minimalkan dan (jika memungkinkan) hapus jumlah resource penting di halaman, minimalkan jumlah byte penting yang didownload, dan optimalkan panjang jalur kritis.
Mengoptimalkan penggunaan JavaScript
Resource JavaScript diblokir oleh parser secara default, kecuali jika ditandai sebagai async atau ditambahkan menggunakan cuplikan JavaScript khusus. Parser yang memblokir JavaScript memaksa browser menunggu CSSOM dan menjeda pembuatan DOM, yang pada akhirnya dapat menunda waktu render pertama secara signifikan.
Memilih resource JavaScript asinkron
Resource asinkron akan membatalkan pemblokiran parser dokumen dan memungkinkan browser menghindari pemblokiran di CSSOM sebelum mengeksekusi skrip. Sering kali, jika skrip dapat menggunakan atribut async, hal ini juga berarti skrip tersebut tidak penting untuk rendering pertama. Pertimbangkan untuk memuat skrip secara asinkron setelah rendering awal.
Menghindari panggilan server sinkron
Gunakan metode navigator.sendBeacon() untuk membatasi data yang dikirim oleh XMLHttpRequest di
pengendali unload. Karena banyak browser mewajibkan 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 streaming. Artinya, 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 jumlah pekerjaan yang harus dilakukan browser untuk merender halaman, tunda skrip non-esensial yang tidak penting untuk membuat konten yang terlihat untuk rendering awal.
Menghindari JavaScript yang berjalan lama
JavaScript yang berjalan lama akan memblokir browser agar tidak membuat DOM, CSSOM, dan merender halaman, jadi tunda logika inisialisasi yang tidak penting untuk rendering pertama hingga nanti. Jika urutan inisialisasi yang panjang perlu dijalankan, pertimbangkan untuk membaginya menjadi beberapa tahap agar browser dapat memproses peristiwa lain di antaranya.
Mengoptimalkan Penggunaan CSS
CSS diperlukan untuk membuat hierarki render dan JavaScript sering kali memblokir CSS selama konstruksi awal halaman. Pastikan CSS yang tidak penting ditandai sebagai tidak penting (misalnya, cetak dan kueri media lainnya), dan jumlah CSS penting serta waktu untuk mengirimkannya sekecil mungkin.
Letakkan CSS di kepala dokumen
Tentukan semua resource CSS sedini mungkin dalam dokumen HTML sehingga browser dapat menemukan tag <link> dan mengirim permintaan untuk CSS sesegera mungkin.
Menghindari impor CSS
Perintah impor CSS (@import) memungkinkan satu style sheet mengimpor aturan dari file style sheet lain. Namun, hindari perintah ini karena akan menyebabkan perjalanan bolak-balik tambahan ke jalur kritis: resource CSS yang diimpor hanya ditemukan setelah sheet gaya CSS dengan aturan @import itu sendiri diterima dan diuraikan.
Jadikan sebaris CSS yang memblokir render
Untuk performa terbaik, sebaiknya pertimbangkan untuk menyisipkan CSS penting langsung ke dalam dokumen HTML. Hal ini akan menghilangkan roundtrip tambahan di jalur kritis dan jika dilakukan dengan benar, dapat memberikan panjang jalur kritis "satu roundtrip" dengan hanya HTML yang merupakan resource pemblokir.