Cara Pramuat Permintaan Kunci untuk Data Web Inti yang Lebih Baik

Tidak semua sumber daya situs Anda sama pentingnya.

Ya, semuanya diperlukan agar situs web Anda terlihat dan beroperasi dengan sempurna, tetapi jika menyangkut kinerjanya, beberapa harus memiliki prioritas lebih tinggi.

Jika tidak, Anda berisiko memiliki halaman yang dimuat dengan lambat dan daftar peringatan yang panjang dalam laporan PageSpeed ​​Insights (PSI).

Salah satunya adalah –Pramuat permintaan kunci.

Di baris berikut, Anda akan mempelajari apa itu permintaan kunci, mengapa penting untuk memperbaiki peringatan "Permintaan kunci pramuat", dan yang tak kalah pentingnya – bagaimana melakukannya.

• Apa yang dimaksud dengan Pramuat permintaan kunci
• Bagaimana pramuat aset penting akan meningkatkan kecepatan situs Anda
• Cara mengidentifikasi permintaan kunci yang harus Anda muat sebelumnya
• Cara memperbaiki peringatan Permintaan kunci pramuat
• Pramuat permintaan kunci secara otomatis

Baca terus.

Apa yang dimaksud dengan Pramuat permintaan kunci?

Dengan melakukan pramuat permintaan kunci, Anda memberi tahu browser aset mana yang paling penting untuk diunduh terlebih dahulu. Ini memungkinkan file yang paling penting dimuat lebih cepat, terutama jika file tersebut akan ditemukan dan diunduh nanti dalam proses.

Tapi ini menimbulkan pertanyaan:

Apa yang membuat permintaan kritis?

Permintaan kritis adalah sumber daya yang ditampilkan di viewport awal halaman (atau paro atas sebagaimana kami menyebutnya di pasar).

Misalnya, inilah yang saya lihat ketika saya memuat beranda NitroPack di laptop saya:

Semua sumber daya yang dimuat di paro atas dianggap penting. Oleh karena itu, mereka harus diunduh dan dirender dengan prioritas lebih tinggi oleh browser untuk memberikan pengalaman pemuatan instan kepada pengguna.

Secara umum, algoritme browser cukup bagus dalam memprioritaskan sumber daya paling penting untuk sebuah halaman. Faktanya, saat browser mengunduh sumber daya, ia menetapkannya sebagai prioritas:

• Paling tinggi
• Tinggi
• Sedang
• Rendah
• Terendah

Namun, sebagai pemilik/pengembang situs web, Anda memiliki wawasan berharga tentang sumber daya mana yang lebih penting daripada yang lain. Oleh karena itu, dengan memuatnya terlebih dahulu, Anda tidak hanya akan melewati peringatan PSI tetapi juga meningkatkan kinerja dan pengalaman pengguna Anda secara keseluruhan.

Begini caranya…

Bagaimana penerapan perbaikan Permintaan kunci pramuat akan meningkatkan kinerja Anda

Yang benar adalah:

Memperbaiki peringatan "Permintaan kunci pramuat" hanya untuk memindahkan peringatan lain ke dalam kategori "lulus" tidak sepadan.

Namun, pramuat sumber daya paling penting dari laman web Anda akan berdampak signifikan pada:

• Data Web Inti
• Skor kinerja
• Kinerja yang dirasakan

Mari kita lihat bagaimana itu mungkin.

Preloading dan Contentful Paint (LCP) Terbesar

Largest Contentful Paint mengukur waktu yang dibutuhkan elemen paro atas terbesar untuk dimuat di halaman.

Jenis sumber daya yang paling sering dianggap sebagai elemen LCP meliputi:

• Gambar-gambar;
• Tag gambar;
• Gambar mini video;
• Gambar latar belakang dengan CSS;
• Elemen teks.

Semuanya adalah kandidat yang bagus untuk pramuat.

Dan mengirimkannya lebih cepat akan membantu Anda meningkatkan situs web metrik Core Web Vitals yang paling kesulitan.

Selain itu, LCP menyumbang 25% dari keseluruhan skor kinerja Anda. Jadi meningkatkannya pasti akan menyebabkan skor Anda berpindah dari merah ke hijau.

Dapatkan skor LCP Anda dari merah ke hijau dengan satu klik tombol. Instal NitroPack hari ini →

Preloading dan First Contentful Paint (FCP)

First Contentful Paint (FCP) mengukur waktu yang diperlukan browser untuk memvisualisasikan bagian pertama konten DOM (mis., gambar, SVG, elemen kanvas non-kosong) pada sebuah halaman.

Meskipun pramuat animasi pemuatan atau logo halaman Anda (ini juga dapat memicu FCP) mungkin tampak tidak signifikan, ini penting untuk pengalaman pengguna.

Ketika browser segera memuat elemen FCP, ia mengirimkan respons langsung ke pengguna, masukan mereka sedang diproses dan situs sedang dimuat.

Jika halaman tetap kosong selama beberapa detik sebelum dimuat, pengguna tidak tahu apakah ada sesuatu yang terjadi. Dan Anda bisa menebak apa langkah mereka selanjutnya:

Melambung!

Dengan kata lain, pramuat elemen FCP sangat penting untuk membuat pengunjung Anda senang dan, yang paling penting – di situs web Anda.

Selain itu, FCP menyumbang 10% dari skor kinerja Anda, jadi Anda juga akan mendapatkan peningkatan dalam aspek tersebut.

Preloading dan kinerja yang dirasakan

Kami telah menyebutkan kinerja yang dirasakan beberapa kali. Jika Anda bertanya-tanya apa artinya, inilah definisinya:

“Perceived performance adalah ukuran subyektif dari kinerja, daya tanggap, dan keandalan situs web. Dengan kata lain, seberapa cepat sebuah situs web tampak bagi pengguna. Lebih sulit untuk mengukur dan mengukur daripada kecepatan operasi yang sebenarnya, tetapi mungkin bahkan lebih penting.”

Dalam beberapa kasus, persepsi tentang seberapa cepat dan lancar halaman memuat dan merespons interaksi pengguna bahkan lebih penting daripada waktu sebenarnya yang diperlukan untuk mengambil sumber daya.

Dengan melakukan pramuat sumber daya utama, Anda memberikan persepsi ini kepada pengguna tentang halaman yang memuat lebih cepat. Konten tampaknya dimuat dengan cepat dan lancar, menciptakan pengalaman menjelajah yang lebih lancar. Pengguna dapat berinteraksi dengan halaman lebih cepat tanpa menunggu sumber daya penting diambil dan dimuat.

Peningkatan kinerja yang dirasakan ini dapat menyebabkan

• keterlibatan pengguna yang lebih tinggi
• tingkat bouncing berkurang
• kepuasan keseluruhan dengan situs web

Cara mengidentifikasi permintaan paling penting yang harus Anda muat sebelumnya

Wawasan PageSpeed ​​Google adalah cara termudah dan paling efisien untuk mengidentifikasi permintaan utama untuk dimuat sebelumnya.

Saat Anda menguji kinerja URL Anda, pastikan untuk memeriksa bagian Peluang untuk rekomendasi. Cari secara khusus saran yang berlabel "Pramuat permintaan kunci", mirip dengan contoh yang ditampilkan:

Alternatifnya, Anda dapat menjalankan beberapa pengujian menggunakan Chrome DevTools. Untuk memulai proses, muat halaman yang ingin Anda uji dan klik Inspect > Lighthouse.

Kemudian, pilih apakah Anda ingin menguji versi seluler atau desktop halaman Anda dan klik “Analisis” pemuatan halaman:

Setelah pengujian selesai, gulir ke bawah dan cari peringatan "Permintaan kunci pramuat".

Catatan: Karena Google PageSpeed ​​Insights menggunakan Lighthouse, menguji halaman Anda melalui PSI atau Chrome DevTools akan memberikan hasil yang sama. Terserah Anda cara mana yang Anda sukai.

Untuk memahami bagaimana tepatnya Lighthouse menentukan sumber daya mana yang cocok untuk preloading, mari kita lihat contoh berikut.

Rantai permintaan penting halaman Anda terlihat seperti ini:

> index.html

>> aplikasi.js

>>> style_custom.css

>>>> ui_custom.js

Di file index.html , Anda menyertakan tag skrip src="app.js" . Saat file app.js dijalankan, ini memicu panggilan fetch() untuk mengunduh styles_custom.css dan ui_custom.js . Halaman tidak akan ditampilkan sepenuhnya hingga kedua sumber ini diunduh, diuraikan, dan dieksekusi. File semacam itu dianggap sebagai sumber daya pemblokiran render.

Karenanya, styles_custom.css dan ui_custom.js akan diidentifikasi oleh Lighthouse sebagai sumber daya yang relevan.

Masalahnya adalah browser mengetahui dua file terakhir hanya setelah mengunduh, mem-parsing, dan menjalankan app.js . Namun, Anda tahu bahwa sumber daya ini disertakan di bagian paruh atas laman Anda dan Anda harus mengunduhnya sesegera mungkin.

Untuk memberikan prioritas yang lebih tinggi, Anda dapat menggunakan link rel="preload" .

Cara memperbaiki peringatan "Permintaan kunci pramuat".

Untuk memperbaiki peringatan tersebut, terapkan atribut link rel=preload ke resource penting yang ditandai oleh PSI.

Sederhananya, perintah link rel=preload menginstruksikan browser untuk mengambil sumber daya yang signifikan lebih awal dari yang biasanya mereka temukan.

Preload bersifat deklaratif, tidak seperti petunjuk sumber daya lainnya, sepertiprefetchdanpreconnectyang memberikan saran. Ini berarti browser harus mengambil sumber daya spesifik yang Anda anggap penting untuk pengalaman halaman.

Anda dapat melakukan pramuat sumber daya dengan menambahkan tag link rel=preload ke kepala dokumen HTML Anda.

Misalnya, berikut cara cuplikan kode mencari logo yang dimuat sebelumnya:

Anda mungkin memperhatikan bahwa selain pramuat dan sumber daya, ada atribut ketiga - sebagai .

Atribut as menunjukkan jenis konten sumber daya. Dengan tidak menambahkan “ sebagai ” yang valid saat menentukan apa yang akan dimuat sebelumnya, Anda berisiko mengambil aset dua kali.

Selain itu, menyertakan atribut as membantu browser mengatur prioritas sumber daya yang diambil sebelumnya sesuai dengan jenisnya dan menentukan apakah sudah ada di cache.

Berikut daftar lengkap nilai as yang dapat Anda tentukan:

Penting: Peramban web modern pandai memprioritaskan sumber daya, sehingga penggunaan tautan rel=preload yang berlebihan dapat menyebabkan hasil negatif. Pastikan untuk menggunakannya dengan hemat dan hanya jika benar-benar dibutuhkan.

Pramuat permintaan kunci secara otomatis dengan NitroPack

Jika Anda mencari cara yang lebih mudah dan otomatis untuk melakukan pramuat sumber daya penting dan meningkatkan Data Web Inti situs Anda, skor kinerja, dan kinerja yang dirasakan, Anda harus mencoba NitroPack.

Salah satu alasan utama mengapa NitroPack memimpin dalam hasil Core Web Vitals untuk 180.000+ situs web adalah mekanisme pemuatan sumber daya milik kami.

NitroPack tidak mengandalkan teknik browser bawaan. Alih-alih, ini menggunakan pemuat sumber daya kami, yang mengatur ulang bagaimana sumber daya diumpankan ke thread utama dan memuat banyak aset sebelumnya. Ini memanfaatkan sifat multi-core CPU modern dengan memindahkan tugas dari utas utama.

Selain itu, layanan kami secara otomatis mengoptimalkan pengiriman CSS situs Anda dengan membuat CSS Penting untuk setiap halaman per tata letak. Ini menghasilkan kinerja yang dirasakan dan aktual yang lebih baik.

Tetapi bagian terbaiknya adalah – menggunakan NitroPack bebas risiko.

Bagaimana?

Pertama, Anda dapat menguji NitroPack tanpa mengeluarkan uang sepeser pun untuk mendapatkan paket gratis kami.

Kedua, NitroPack bekerja pada salinan file situs Anda, menjaga aslinya 100% aman.

Sederhananya:

Anda dapat menyalip semua pesaing Anda dengan memiliki situs pemuatan tercepat di industri tanpa mengangkat jari dan mempertaruhkan apa pun.

Kedengarannya seperti kesepakatan yang cukup bagus untuk saya!