Jangan melawan pemindai pramuat browser

Cari tahu apa itu pemindai pramuat browser, bagaimana hal ini membantu performa, dan cara agar tidak terganggu.

Jeremy Wagner

Salah satu aspek yang diabaikan dalam mengoptimalkan kecepatan halaman adalah mengetahui sedikit tentang internal browser. Browser melakukan pengoptimalan tertentu untuk meningkatkan performa dengan cara yang tidak dapat dilakukan oleh kami, tetapi hanya selama pengoptimalan tersebut tidak digagalkan secara tidak sengaja.

Satu pengoptimalan browser internal yang harus dipahami adalah pemindai pramuat browser. Postingan ini akan membahas cara kerja pemindai pramuat—dan yang lebih penting, bagaimana agar Anda tidak terganggu.

Apa yang dimaksud dengan pemindai pramuat?

Setiap browser memiliki parser HTML utama yang membuat token markup mentah dan memprosesnya menjadi model objek. Semua ini berjalan lancar sampai parser berhenti ketika menemukan resource pemblokir, seperti stylesheet yang dimuat dengan elemen <link>, atau skrip yang dimuat dengan elemen <script> tanpa atribut async atau defer.

Diagram parser HTML.
Gambar. 1: Diagram cara parser HTML utama browser dapat diblokir. Dalam hal ini, parser berjalan ke elemen <link> untuk file CSS eksternal, yang memblokir browser agar tidak mengurai bagian lain dokumen—atau bahkan merendernya—sampai CSS didownload dan diuraikan.

Untuk file CSS, rendering diblokir untuk mencegah flash of unstyled content (FOUC), yaitu saat versi halaman tanpa gaya dapat dilihat sebentar sebelum gaya diterapkan.

Halaman beranda web.dev dalam status tanpa gaya (kiri) dan status diberi gaya (kanan).
Gambar 2: Contoh simulasi FOUC. Di sebelah kiri adalah halaman depan web.dev tanpa gaya. Di sebelah kanan adalah halaman yang sama dengan gaya yang diterapkan. Status tanpa gaya dapat terjadi dalam sekejap jika browser tidak memblokir rendering saat stylesheet didownload dan diproses.

Browser juga memblokir penguraian dan rendering halaman saat menemukan elemen <script> tanpa atribut defer atau async.

Alasannya adalah karena browser tidak dapat mengetahui dengan pasti apakah skrip tertentu akan memodifikasi DOM saat parser HTML utama masih melakukan tugasnya. Inilah praktik umum untuk memuat JavaScript Anda di akhir dokumen sehingga efek dari penguraian dan rendering yang diblokir menjadi marginal.

Berikut adalah alasan bagus mengapa browser harus memblokir penguraian dan rendering. Namun, memblokir salah satu langkah penting ini tidak diinginkan, karena mereka dapat menunda pertunjukan dengan menunda penemuan sumber daya penting lainnya. Untungnya, browser melakukan yang terbaik untuk mengurangi masalah ini melalui parser HTML sekunder yang disebut pemindai pramuat.

Diagram parser HTML utama (kiri) dan pemindai pramuat (kanan), yang merupakan parser HTML sekunder.
Gambar. 3: Diagram yang menggambarkan cara kerja pemindai pramuat secara paralel dengan parser HTML utama untuk memuat aset secara spekulatif. Di sini, parser HTML utama diblokir saat memuat dan memproses CSS sebelum dapat mulai memproses markup gambar dalam elemen <body>, tetapi pemindai pramuat dapat melihat ke depan di markup mentah untuk menemukan resource gambar tersebut dan mulai memuatnya sebelum parser HTML utama dibatalkan pemblokirannya.

Peran pemindai pramuat bersifat spekulatif, yang berarti pemindai ini memeriksa markup mentah untuk menemukan resource yang akan diambil secara oportunistik sebelum parser HTML utama menemukannya.

Cara mengetahui saat pemindai pramuat berfungsi

Pemindai pramuat ada karena rendering dan penguraian yang diblokir. Jika kedua masalah kinerja ini tidak pernah ada, pemindai pramuat tidak akan terlalu berguna. Kunci untuk mencari tahu apakah halaman web mendapat manfaat dari pemindai pramuat bergantung pada fenomena pemblokiran ini. Untuk melakukannya, Anda dapat menerapkan penundaan buatan untuk permintaan guna mengetahui di mana pemindai pramuat berfungsi.

Gunakan halaman ini yang berisi teks dan gambar dasar dengan stylesheet sebagai contoh. Karena file CSS memblokir rendering dan penguraian, Anda memperkenalkan penundaan buatan selama dua detik untuk stylesheet melalui layanan proxy. Penundaan ini memudahkan untuk melihat di waterfall jaringan tempat pemindai pramuat berfungsi.

Diagram waterfall jaringan WebPageTest mengilustrasikan penundaan buatan selama 2 detik yang diberlakukan pada styleesheet.
Gambar. 4: WebPageTest Diagram waterfall jaringan halaman web berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Meskipun stylesheet tertunda melalui proxy selama dua detik sebelum mulai dimuat, gambar yang terletak nanti dalam payload markup ditemukan oleh pemindai pramuat.

Seperti yang dapat Anda lihat di waterfall, pemindai pramuat menemukan elemen <img> meskipun rendering dan penguraian dokumen diblokir. Tanpa pengoptimalan ini, browser tidak dapat mengambil sesuatu secara oportunistik selama periode pemblokiran, dan permintaan resource akan bertambah secara berturut-turut, bukan serentak.

Setelah melihat contoh mainan tersebut, mari kita lihat beberapa pola di dunia nyata yang menyebabkan pemindai pramuat tidak berfungsi, dan apa yang dapat dilakukan untuk memperbaikinya.

Memasukkan async skrip

Misalnya Anda memiliki HTML di <head> yang menyertakan beberapa JavaScript inline seperti ini:

<script>
  const scriptEl = document.createElement('script');
  scriptEl.src = '/yall.min.js';

  document.head.appendChild(scriptEl);
</script>

Skrip yang diinjeksikan adalah async secara default sehingga saat skrip ini dimasukkan, skrip akan berperilaku seolah-olah atribut async diterapkan ke skrip tersebut. Artinya, shader tersebut akan berjalan sesegera mungkin dan tidak memblokir rendering. Kedengarannya optimal, bukan? Namun, jika Anda menganggap <script> inline ini muncul setelah elemen <link> yang memuat file CSS eksternal, Anda akan mendapatkan hasil yang kurang optimal:

Diagram WebPageTest ini menunjukkan pemindaian pramuat yang gagal saat skrip dimasukkan.
Gambar 5: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Halaman ini berisi satu stylesheet dan skrip async yang dimasukkan. Pemindai pramuat tidak dapat menemukan skrip selama fase pemblokiran render karena diinjeksi pada klien.

Mari kita bahas apa yang terjadi di sini:

  1. Pada detik ke-0, dokumen utama akan diminta.
  2. Pada 1,4 detik, byte pertama permintaan navigasi tiba.
  3. Pada detik 2,0, CSS dan gambar akan diminta.
  4. Karena parser diblokir saat memuat stylesheet dan JavaScript inline yang memasukkan skrip async muncul setelah stylesheet tersebut pada waktu 2,6 detik, fungsi yang disediakan oleh skrip tidak tersedia sesegera mungkin.

Hal ini kurang optimal karena permintaan untuk skrip hanya terjadi setelah stylesheet selesai didownload. Tindakan ini akan menunda pengoperasian skrip. Sebaliknya, karena elemen <img> dapat ditemukan di markup yang disediakan server, elemen tersebut akan ditemukan oleh pemindai pramuat.

Jadi, apa yang terjadi jika Anda menggunakan tag <script> reguler dengan atribut async, bukan memasukkan skrip ke dalam DOM?

<script src="/yall.min.js" async></script>

Ini adalah hasilnya:

Waterfall jaringan WebPageTest menggambarkan bagaimana skrip asinkron yang dimuat dengan menggunakan elemen skrip HTML masih dapat ditemukan oleh pemindai pramuat browser, meskipun parser HTML utama browser diblokir saat mendownload dan memproses stylesheet.
Gambar. 6: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Halaman ini berisi satu stylesheet dan satu elemen async <script>. Pemindai pramuat menemukan skrip selama fase pemblokiran render, dan memuat skrip secara serentak dengan CSS.

Mungkin ada kecenderungan untuk menyarankan bahwa masalah ini dapat diatasi dengan menggunakan rel=preload. Cara ini pasti bekerja, tetapi mungkin ada beberapa efek samping. Lagi pula, mengapa menggunakan rel=preload untuk memperbaiki masalah yang dapat dihindari dengan tidak memasukkan elemen <script> ke DOM?

Waterfall WebPageTest menunjukkan cara petunjuk resource rel=pramuat digunakan untuk mempromosikan penemuan skrip yang diinjeksikan secara asinkron, meskipun dengan cara yang mungkin memiliki efek samping yang tidak diinginkan.
Gambar 7: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Halaman ini berisi satu stylesheet dan skrip async yang dimasukkan, tetapi skrip async dipramuat untuk memastikannya lebih cepat ditemukan.

Melakukan pramuat "perbaikan" masalahnya di sini, tetapi ini menimbulkan masalah baru: skrip async di dua demo pertama—meskipun dimuat dalam <head>—dimuat pada "Rendah" prioritas, sedangkan lembar gaya dimuat pada "Tertinggi" prioritas Anda. Dalam demo terakhir, tempat skrip async dipramuat, stylesheet tetap dimuat pada "Tertinggi" tetapi prioritas skrip telah dipromosikan menjadi "High".

Saat prioritas resource dinaikkan, browser akan mengalokasikan lebih banyak bandwidth ke resource tersebut. Artinya, meskipun stylesheet memiliki prioritas tertinggi—prioritas skrip yang dinaikkan dapat menyebabkan pertentangan bandwidth. Hal tersebut dapat menjadi faktor pada koneksi yang lambat, atau jika resource-nya cukup besar.

Jawabannya di sini mudah: jika skrip diperlukan selama startup, jangan kalahkan pemindai pramuat dengan memasukkannya ke DOM. Lakukan eksperimen sesuai kebutuhan dengan penempatan elemen <script>, serta dengan atribut seperti defer dan async.

Pemuatan lambat dengan JavaScript

Pemuatan lambat adalah metode yang bagus untuk menghemat data, yang sering diterapkan pada gambar. Namun, terkadang pemuatan lambat salah diterapkan pada gambar yang berada "paruh atas", boleh dikatakan demikian.

Hal ini menimbulkan potensi masalah terkait visibilitas resource yang terkait dengan pemindai pramuat, dan dapat menunda waktu yang diperlukan untuk menemukan referensi ke suatu gambar, mendownloadnya, mendekodenya, dan menyajikannya. Mari kita ambil markup gambar ini sebagai contoh:

<img data-src="/sand-wasp.jpg" alt="Sand Wasp" width="384" height="255">

Penggunaan awalan data- adalah pola umum dalam loader lambat yang didukung JavaScript. Saat gambar di-scroll ke area pandang, loader lambat akan menghapus awalan data-, yang berarti dalam contoh sebelumnya, data-src menjadi src. Update ini meminta browser untuk mengambil resource.

Pola ini tidak akan bermasalah hingga diterapkan ke gambar yang berada di area pandang selama startup. Karena pemindai pramuat tidak membaca atribut data-src dengan cara yang sama seperti atribut src (atau srcset), referensi gambar tidak ditemukan sebelumnya. Selain itu, pemuatan gambar tertunda hingga setelah JavaScript loader lambat mendownload, mengompilasi, dan dieksekusi.

Diagram waterfall jaringan WebPageTest yang menunjukkan bagaimana gambar yang dimuat secara lambat yang berada di area pandang selama startup harus tertunda karena pemindai pramuat browser tidak dapat menemukan resource gambar, dan hanya dimuat saat JavaScript yang diperlukan untuk lazy loading berfungsi. Gambar tersebut ditemukan jauh lebih lambat dari yang seharusnya.
Gambar 8: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Resource gambar terlalu lambat dimuat, meskipun terlihat di area pandang selama startup. Hal ini akan mengalahkan pemindai pramuat dan menyebabkan penundaan yang tidak perlu.

Bergantung pada ukuran gambar—yang mungkin bergantung pada ukuran area pandang—ini mungkin merupakan elemen kandidat untuk Largest Contentful Paint (LCP). Jika pemindai pramuat tidak dapat mengambil resource gambar secara spekulatif di awal—mungkin pada saat rendering blok stylesheet halaman mengalami LCP.

Solusinya adalah mengubah markup gambar:

<img src="/sand-wasp.jpg" alt="Sand Wasp" width="384" height="255">

Ini adalah pola optimal untuk gambar yang berada di area pandang selama startup, karena pemindai pramuat akan menemukan dan mengambil resource gambar dengan lebih cepat.

Diagram waterfall jaringan WebPageTest yang menggambarkan skenario pemuatan untuk gambar di area pandang selama startup. Gambar tidak dimuat dengan lambat, yang berarti tidak bergantung pada skrip untuk dimuat, yang berarti pemindai pramuat dapat menemukannya lebih cepat.
Gambar 9: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Pemindai pramuat menemukan resource gambar sebelum CSS dan JavaScript mulai dimuat, sehingga browser dapat memulai pemuatan lebih awal.

Hasil dalam contoh yang disederhanakan ini adalah peningkatan 100 milidetik dalam LCP pada koneksi yang lambat. Hal ini mungkin tidak terlihat seperti peningkatan yang signifikan, tetapi ketika Anda menganggap bahwa solusinya adalah perbaikan markup yang cepat, dan sebagian besar halaman web lebih kompleks daripada kumpulan contoh ini. Artinya, kandidat LCP mungkin harus bersaing untuk mendapatkan bandwidth dengan banyak resource lainnya, sehingga pengoptimalan seperti ini menjadi semakin penting.

Gambar latar CSS

Perlu diingat bahwa pemindai pramuat browser akan memindai markup. Alat ini tidak memindai jenis resource lain, seperti CSS yang mungkin melibatkan pengambilan gambar yang dirujuk oleh properti background-image.

Seperti HTML, browser memproses CSS ke dalam model objeknya sendiri, yang dikenal sebagai CSSOM. Jika resource eksternal ditemukan saat CSSOM dibuat, resource tersebut akan diminta pada saat penemuan, dan bukan oleh pemindai pramuat.

Misalnya, kandidat LCP halaman Anda adalah elemen dengan properti background-image CSS. Berikut yang akan terjadi saat resource dimuat:

Diagram waterfall jaringan WebPageTest yang menggambarkan halaman dengan kandidat LCP yang dimuat dari CSS menggunakan properti gambar latar belakang. Karena gambar kandidat LCP berada dalam jenis resource yang tidak dapat diperiksa oleh pemindai pramuat browser, pemuatan resource akan ditunda hingga CSS didownload dan diproses, sehingga menunda waktu penggambaran kandidat LCP.
Gambar. 10: Diagram waterfall jaringan WebPageTest dari halaman web berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Calon LCP halaman adalah elemen dengan properti background-image CSS (baris 3). Gambar yang diminta tidak akan mulai diambil hingga parser CSS menemukannya.

Dalam hal ini, pemindai pramuat tidak terpengaruh jika tidak terlibat. Meski begitu, jika kandidat LCP di halaman berasal dari properti CSS background-image, Anda sebaiknya melakukan pramuat gambar tersebut:

<!-- Make sure this is in the <head> below any
     stylesheets, so as not to block them from loading -->
<link rel="preload" as="image" href="lcp-image.jpg">

Petunjuk rel=preload tersebut memang kecil, tetapi membantu browser menemukan gambar lebih cepat daripada yang seharusnya:

Diagram waterfall jaringan WebPageTest yang menampilkan gambar latar CSS (yang merupakan kandidat LCP) dimuat jauh lebih cepat karena penggunaan petunjuk rel=preview. Waktu LCP meningkat sekitar 250 milidetik.
Gambar. 11: Diagram waterfall jaringan WebPageTest dari halaman web berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Kandidat LCP halaman adalah elemen dengan properti background-image CSS (baris 3). Petunjuk rel=preload membantu browser menemukan gambar sekitar 250 milidetik lebih cepat daripada tanpa petunjuk.

Dengan petunjuk rel=preload, kandidat LCP ditemukan lebih cepat, sehingga mengurangi waktu LCP. Meskipun petunjuk tersebut membantu memperbaiki masalah ini, opsi yang lebih baik mungkin adalah menilai apakah kandidat LCP gambar Anda harus dimuat dari CSS atau tidak. Dengan tag <img>, Anda akan memiliki kontrol yang lebih besar atas pemuatan gambar yang sesuai untuk area pandang sekaligus memungkinkan pemindai pramuat menemukannya.

Membuat terlalu banyak resource menjadi inline

Menyejajarkan adalah praktik yang menempatkan sumber daya di dalam HTML. Anda dapat membuat stylesheet inline dalam elemen <style>, skrip di elemen <script>, dan hampir semua resource lain menggunakan encoding base64.

Menyisipkan resource dapat lebih cepat daripada mendownloadnya karena permintaan terpisah tidak dikeluarkan untuk resource tersebut. Video tersebut ada di dokumen, dan dimuat secara instan. Namun, ada kelemahan yang signifikan:

  • Jika Anda tidak meng-cache HTML—dan Anda tidak bisa melakukannya jika respons HTML dinamis—resource inline tidak akan pernah di-cache. Hal ini memengaruhi performa karena resource inline tidak dapat digunakan kembali.
  • Meskipun Anda dapat meng-cache HTML, resource yang disisipkan tidak dibagikan antar-dokumen. Tindakan ini akan mengurangi efisiensi caching dibandingkan dengan file eksternal yang dapat di-cache dan digunakan kembali di seluruh origin.
  • Jika terlalu banyak inline, pemindai pramuat tidak akan dapat menemukan resource dalam dokumen karena mendownload konten tambahan dan inline tersebut akan memerlukan waktu lebih lama.

Lihat halaman ini sebagai contoh. Dalam kondisi tertentu, kandidat LCP adalah gambar di bagian atas halaman, dan CSS berada dalam file terpisah yang dimuat oleh elemen <link>. Halaman ini juga menggunakan empat font web yang diminta sebagai file terpisah dari resource CSS.

Diagram waterfall jaringan WebPageTest dari halaman dengan file CSS eksternal dengan empat font yang dirujuk di dalamnya. Gambar kandidat LCP ditemukan oleh pemindai pramuat pada waktunya.
Gambar. 12: Diagram waterfall jaringan WebPageTest dari halaman web yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Kandidat LCP halaman adalah gambar yang dimuat dari elemen <img>, tetapi ditemukan oleh pemindai pramuat karena CSS dan font yang diperlukan untuk memuat halaman di resource terpisah, yang tidak menunda pemindai pramuat melakukan tugasnya.

Sekarang, apa yang terjadi jika CSS dan semua font disisipkan sebagai resource base64?

Diagram waterfall jaringan WebPageTest dari halaman dengan file CSS eksternal dengan empat font yang dirujuk di dalamnya. Pemindai pramuat tertunda secara signifikan dari penemuan gambar LCP.
Gambar. 13: Diagram waterfall jaringan WebPageTest dari halaman web berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Kandidat LCP halaman adalah gambar yang dimuat dari elemen <img>, tetapi inline CSS dan keempat resource font-nya di `` akan menunda pemindai pramuat menemukan gambar hingga resource tersebut didownload sepenuhnya.

Dampak penyematan menghasilkan konsekuensi negatif untuk LCP dalam contoh ini—dan untuk performa secara umum. Versi halaman yang tidak menyisipkan apa pun akan merender gambar LCP dalam waktu sekitar 3,5 detik. Halaman yang menyisipkan semuanya tidak menampilkan gambar LCP hingga lebih dari 7 detik.

Ada banyak hal lain yang berperan di sini daripada pemindai pramuat. Menyisipkan font bukanlah strategi yang bagus karena base64 adalah format yang tidak efisien untuk resource biner. Faktor lain yang berperan adalah resource font eksternal tidak didownload kecuali jika ditentukan diperlukan oleh CSSOM. Jika font tersebut disisipkan sebagai base64, font tersebut akan didownload baik saat diperlukan untuk halaman saat ini maupun tidak.

Bisakah pramuat meningkatkan kualitas di sini? Oke. Anda dapat melakukan pramuat gambar LCP dan mengurangi waktu LCP, tetapi membengkak HTML Anda yang mungkin tidak dapat disimpan dalam cache dengan resource inline akan memiliki konsekuensi performa negatif lainnya. First Contentful Paint (FCP) juga terpengaruh oleh pola ini. Pada versi halaman di mana tidak ada yang disisipkan, FCP sekitar 2,7 detik. Dalam versi yang semuanya disisipkan, FCP kira-kira 5,8 detik.

Hati-hati saat menyisipkan item ke dalam HTML, terutama resource berenkode base64. Secara umum, tindakan ini tidak direkomendasikan, kecuali untuk resource yang sangat kecil. Sesedikit mungkin inline, karena terlalu banyak inline justru akan menimbulkan api.

Markup rendering dengan JavaScript sisi klien

Tidak diragukan lagi: JavaScript sangat memengaruhi kecepatan halaman. Developer tidak hanya mengandalkannya untuk menyediakan interaktivitas, tetapi juga terdapat kecenderungan untuk mengandalkannya untuk menayangkan konten itu sendiri. Hal ini akan memberikan pengalaman developer yang lebih baik dalam beberapa hal; tetapi manfaat bagi pengembang tidak selalu berarti manfaat bagi pengguna.

Salah satu pola yang dapat mengalahkan pemindai pramuat adalah merender markup dengan JavaScript sisi klien:

Waterfall jaringan WebPageTest yang menampilkan halaman dasar dengan gambar dan teks yang dirender sepenuhnya di klien dalam JavaScript. Karena markup dimuat dalam JavaScript, pemindai pramuat tidak dapat mendeteksi resource apa pun. Semua resource juga tertunda karena jaringan dan waktu pemrosesan tambahan yang diperlukan framework JavaScript.
Gambar 14: Diagram waterfall jaringan WebPageTest dari halaman web yang dirender klien yang berjalan di Chrome pada perangkat seluler melalui simulasi koneksi 3G. Karena konten dimuat dalam JavaScript dan bergantung pada framework untuk merender, resource gambar dalam markup yang dirender klien disembunyikan dari pemindai pramuat. Pengalaman yang dirender server yang setara digambarkan dalam Gambar 9.

Saat payload markup dimuat dan dirender sepenuhnya oleh JavaScript di browser, resource apa pun dalam markup tersebut secara efektif tidak terlihat oleh pemindai pramuat. Hal ini menunda penemuan resource penting, yang tentu saja memengaruhi LCP. Dalam kasus contoh ini, permintaan untuk gambar LCP sangat tertunda jika dibandingkan dengan pengalaman setara yang dirender oleh server yang tidak memerlukan JavaScript untuk muncul.

Hal ini sedikit menyimpang dari fokus artikel ini, tetapi efek rendering markup pada klien jauh lebih dari sekadar mengalahkan pemindai pramuat. Misalnya, memperkenalkan JavaScript untuk mendukung pengalaman yang tidak memerlukannya akan menyebabkan waktu pemrosesan yang tidak perlu yang dapat memengaruhi Interaction to Next Paint (INP). Merender markup dalam jumlah yang sangat besar pada klien lebih cenderung menghasilkan tugas yang panjang dibandingkan dengan jumlah markup yang dikirim oleh server dalam jumlah yang sama. Alasan untuk ini—selain pemrosesan tambahan yang melibatkan JavaScript—adalah bahwa browser melakukan streaming markup dari server dan memotong proses rendering sedemikian rupa sehingga cenderung membatasi tugas yang lama. Di sisi lain, markup yang dirender klien ditangani sebagai tugas monolitik tunggal, yang dapat memengaruhi INP halaman.

Solusi untuk skenario ini bergantung pada jawaban atas pertanyaan ini: Apakah ada alasan mengapa markup halaman Anda tidak dapat disediakan oleh server dibandingkan dengan dirender di klien? Jika jawabannya adalah "tidak", rendering sisi server (SSR) atau markup yang dihasilkan secara statis harus dipertimbangkan jika memungkinkan, karena akan membantu pemindai pramuat untuk menemukan dan mengambil resource penting secara oportunistik jauh-jauh hari.

Jika halaman Anda membutuhkan JavaScript untuk melampirkan fungsi ke beberapa bagian markup halaman, Anda masih dapat melakukannya dengan SSR, baik dengan vanilla JavaScript, maupun hidrasi untuk mendapatkan manfaat terbaik dari keduanya.

Membantu pemindai pramuat membantu Anda

Pemindai pramuat adalah pengoptimalan browser yang sangat efektif yang membantu halaman dimuat lebih cepat selama startup. Dengan menghindari pola yang mengalahkan kemampuannya untuk menemukan sumber daya penting sebelumnya, Anda tidak hanya menyederhanakan pengembangan untuk diri sendiri, Anda juga menciptakan pengalaman pengguna yang lebih baik yang akan memberikan hasil yang lebih baik dalam banyak metrik, termasuk beberapa data web.

Sebagai rangkuman, berikut hal-hal yang perlu Anda perhatikan dari postingan ini:

  • Pemindai pramuat browser adalah parser HTML sekunder yang memindai terlebih dahulu parser utama jika diblokir untuk menemukan resource secara oportunistik yang dapat diambil lebih cepat.
  • Resource yang tidak ada dalam markup yang disediakan oleh server pada permintaan navigasi awal tidak dapat ditemukan oleh pemindai pramuat. Cara mengatasi pemindai pramuat dapat meliputi (tetapi tidak terbatas pada):
    • Memasukkan resource ke dalam DOM dengan JavaScript, baik itu skrip, gambar, stylesheet, atau apa pun yang akan lebih baik dalam payload markup awal dari server.
    • Pemuatan lambat gambar paruh atas atau iframe menggunakan solusi JavaScript.
    • Markup rendering pada klien yang mungkin berisi referensi ke subresource dokumen menggunakan JavaScript.
  • Pemindai pramuat hanya memindai HTML. Laporan ini tidak memeriksa konten resource lain—terutama CSS—yang mungkin menyertakan referensi ke aset penting, termasuk kandidat LCP.

Jika, karena alasan apa pun, Anda tidak dapat menghindari pola yang memengaruhi kemampuan pemindai pramuat secara negatif untuk mempercepat performa pemuatan, pertimbangkan petunjuk resource rel=preload. Jika Anda menggunakan menggunakan rel=preload, uji di alat lab untuk memastikan bahwa alat tersebut memberi Anda efek yang diinginkan. Terakhir, jangan memuat ulang terlalu banyak resource, karena jika Anda memprioritaskan semuanya, tidak ada yang akan menjadi prioritas.

Resource

Banner besar dari Unsplash, oleh Mohammad Rahmani .