Cara Menghindari Merangkai Permintaan Kritis
Diterbitkan: 2023-08-03Apakah Anda mendapatkan peringatan "Hindari rangkaian permintaan kritis" setiap kali Anda menjalankan pengujian Wawasan PageSpeed?
Nah, ini berakhir hari ini.
Setelah membaca panduan ini, Anda akan mengetahui segalanya tentang permintaan kritis, bagaimana merantainya memengaruhi kinerja Anda, dan yang paling penting - cara memperbaiki peringatan "Hindari permintaan kritis berantai".
- Apa yang dianggap sebagai permintaan kritis?
- Apa yang dimaksud dengan "Hindari permintaan kritis berantai".
- Bagaimana rangkaian permintaan penting memengaruhi kinerja Anda
- Bagaimana menghindari chaining permintaan kritis di WordPress
- Bonus: Praktik terbaik lainnya untuk memperbaiki “Hindari permintaan kritis berantai”
Baca terus.
Apa yang dianggap sebagai permintaan kritis?
Permintaan kritis adalah sumber daya yang penting untuk merender tampilan awal halaman web. Dengan kata lain - semua yang dimuat di paro atas.
Misalnya, inilah yang saya lihat di laptop saya saat memuat halaman beranda NitroPack:
Semua elemen paro atas dianggap penting karena bergantung pada seberapa cepat elemen dimuat, pengguna dapat memperoleh pengalaman yang luar biasa atau langsung terpental.
Apa yang dimaksud dengan Menghindari Merangkai Permintaan Kritis?
Sederhananya, peringatan "Hindari permintaan kritis berantai" berarti bahwa sumber daya penting yang diperlukan untuk merender halaman Anda terlalu besar.
Dalam hal bagian rantai, rantai permintaan kritis adalah urutan permintaan yang bergantung satu sama lain, dan sangat penting untuk merender halaman. Urutan permintaan diuraikan dan dieksekusi ditentukan oleh Critical Rendering Path (CRP).
Jalur Rendering Penting mengacu pada urutan langkah-langkah yang diambil browser web untuk mengonversi kode HTML, CSS, dan JavaScript menjadi representasi visual di layar pengguna.
Saat browser mulai mengurai kode, browser memproses permintaan penting berdasarkan prioritas yang ditetapkan:
Sekarang setelah Anda mengetahui apa itu CRP dan bagaimana browser menetapkan prioritas, mari kita kembali ke definisi “rantai permintaan kritis”.
Karena ini adalah urutan permintaan yangbergantung satu sama lain , memuat permintaan penting yang besar dan tidak dioptimalkan pasti akan menghasilkan rantai penting yang lebih panjang, sehingga memperlambat pemuatan halaman Anda.
Untuk mengilustrasikan pernyataan ini, mari kita lihat contoh berikut:
Bayangkan sebuah halaman web sederhana yang menyertakan sumber daya berikut:
- index.html – file HTML utama yang mendefinisikan struktur halaman.
- styles.css – menentukan tampilan visual dan tata letak halaman.
- main.js – berisi skrip yang menambahkan interaktivitas dan fungsionalitas ke halaman web.
- logo.png (File gambar)
Pertimbangkan situasi di mana setiap sumber daya merupakan bagian dari rantai permintaan kritis yang panjang. Misalnya, bayangkan file HTML mereferensikan beberapa file CSS dan JavaScript, dan masing-masing file tersebut, pada gilirannya, mereferensikan sumber daya lain, yang mengarah ke rantai ketergantungan.
Dalam skenario seperti itu, penundaan dalam memuat salah satu sumber daya dalam rantai akan memiliki efek berjenjang pada latensi jalur kritis dan keseluruhan kinerja laman Anda.
Dan berbicara tentang kinerja web, mari kita lihat metrik mana yang akan mendapat pukulan terbesar dari rangkaian permintaan penting…
Bagaimana rangkaian permintaan penting memengaruhi kinerja Anda
Semakin panjang rantainya, semakin lama browser merender sumber daya yang diperlukan untuk menampilkan konten Anda.
Dalam hal metrik kinerja web, ini berarti First Contentful Paint (FCP) dan Largest Contentful Paint (LCP) yang buruk.
Gagal First Contentful Paint (FCP)
FCP mengukur berapa lama waktu yang diperlukan browser untuk memvisualisasikan bagian pertama konten DOM (misalnya, gambar, SVG, elemen kanvas yang tidak kosong) pada sebuah halaman.
Elemen-elemen ini mungkin tampak tidak signifikan, tetapi sangat penting bagi pengalaman pengguna situs Anda. Mereka memberi tahu pengunjung Anda bahwa 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 atau tidak.
Untuk menjamin bahwa browser dapat merender konten DOM pertama ini sesegera mungkin, rantai permintaan penting harus pendek dan ringan. Jika tidak, kemungkinan pengunjung Anda terpental karena layar kosong dan kegagalan FCP jauh LEBIHTINGGI.
Gagal Cat Konten Terbesar (LCP)
LCP mengukur berapa lama waktu yang diperlukan untuk memuat elemen paro atas terbesar di halaman.
Ini adalah salah satu dari tiga Core Web Vitals (CWV) yang merupakan kumpulan metrik pengguna-sentris yang mengukur waktu pemuatan situs Anda, stabilitas visual, dan interaktivitas. Mereka juga merupakan faktor peringkat Google .
Jadi, memiliki skor LCP yang buruk karena memuat rantai permintaan kritis yang panjang tidak hanya berarti Anda gagal dalam beberapametrik kinerja, tetapi Anda juga:
- Menurunkan peluang Anda untuk lulus CWV
- Menyakiti peringkat situs Anda
- Memberikan pengalaman pengguna yang buruk
Cara jitu untuk menghindari semua itu adalah mempersingkat jalur kritis dengan mengoptimalkan jumlah dan ukuran sumber daya Anda.
Dan inilah cara melakukannya…
Cara menghindari permintaan kritis berantai (di WordPress)
Jika ada satu strategi masuk untuk memperbaiki "Hindari permintaan kritis berantai," itu akan menghilangkan sumber daya pemblokiran render.
Render-blocking resource adalah file yang ketika browser menemukannya, ia harus mengunduh, mengurai, dan mengeksekusinya, sebelum melakukan hal lain, termasuk merender.
Penyebab utama yang paling sering ditandai sebagai "pemblokiran render" adalah file CSS dan JavaScript yang tidak dioptimalkan.
Teknik berikut akan membantu Anda berhasil menangani keduanya:
Hapus CSS yang Tidak Digunakan
Istilah CSS yang Tidak Digunakan mengacu pada aturan CSS yang tidak digunakan di halaman saat ini.
Aturan ini membuat file lebih besar dari yang diperlukan, membengkakkan kode Anda, dan membuat rantai permintaan kritis yang panjang. Akibatnya, file dan halaman Anda membutuhkan waktu lama untuk dimuat.
Jika Anda merasa nyaman menyempurnakan kode Anda, Anda dapat menggunakan alat online seperti PurifyCSS.
Masukkan URL halaman Anda dan alat tersebut secara otomatis menghapus kode yang tidak diperlukan. Kemudian, Anda dapat mengunduh CSS "murni" dan mengunggahnya di situs Anda:
Penting : Mengubah kode Anda menyembunyikan risiko merusak desain dan fungsi situs Anda.Jika Anda tidak memiliki pengalaman teknologi sebelumnya, hubungi pengembang web atau instal plugin yang akan melakukannya secara otomatis untuk Anda.
Hapus CSS yang tidak terpakai dengan satu klik tombol. Instal NitroPack dan optimalkan situs Anda secara otomatis →
Tunda JavaScript
Menunda file JavaScript memungkinkan Anda untuk memuatnya hanya jika diperlukan, sehingga browser dapat berfokus untuk menyajikan konten yang paling penting (paro atas) terlebih dahulu.
Anda dapat memuat file JS dengan malas menggunakanasync dan menunda atribut.
- asinkron
Pemuatan asinkron berarti bahwa skrip akan diambil di latar belakang sementara parsing dan rendering halaman HTML berlanjut.
Saat skrip diunduh, penguraian HTML akan dijeda, segera jalankan skrip, lalu lanjutkan penguraian. Akibatnya, urutan eksekusi skrip dengan atribut async tidak dapat diprediksi karena mungkin selesai dimuat pada waktu yang berbeda.
Atribut asyncsempurna untuk skrip pihak ketiga yang Anda tidak ingin memblokir pemuatan dan perenderan halaman Anda.
- menunda
Atribut defer , seperti async, juga memuat skrip secara asinkron, tetapi berbeda dalam cara eksekusinya.
Skrip dengan atribut defer akan diunduh di latar belakang saat parsing HTML berlanjut, tetapi eksekusi skrip akan ditangguhkan hingga parsing HTML selesai. Urutan eksekusi skrip dengan penangguhan dipertahankan sesuai urutan kemunculannya di HTML.
Gunakan atributdefersaat Anda ingin mempertahankan urutan eksekusi skrip seperti yang muncul di HTML.
Kompresi kode dan minifikasi
Lapisan lain dari pengoptimalan rantai permintaan penting adalah mengurangi ukuran keseluruhan sumber daya Anda karena ini akan membantu browser mengunduh, mengurai, dan merendernya lebih cepat.
Dan cara melakukannya adalah dengan mengompresi dan memperkecil file Anda.
Menerapkankompresi akan menulis ulang kode biner file Anda dan menyandikan informasi menggunakan bit yang lebih sedikit dari aslinya.
Alat kompresi yang paling populer adalah gzip. Gzipping bekerja dengan menemukan string berulang dan menggantinya dengan pointer ke string pertama. Manfaatnya adalah pointer menggunakan lebih sedikit ruang daripada teks.
Minifikasi , di sisi lain, menghapus elemen kode yang tidak perlu seperti komentar, jeda baris, atau spasi kosong:
Sumber:KeyCDN
Dengan memangkas kode, Anda dapat mempersingkat permintaan penting, yang mengarah ke peningkatan kecepatan untuk situs web Anda.
Ada banyak alat online gratis yang dapat membantu Anda mengoptimalkan ukuran kode Anda. Untuk menggunakannya, Anda harus memasukkan kode, lalu menyalin versi yang diperkecil/dikompresi dan menempelkannya kembali ke situs Anda. Berikut adalah beberapa saran:
- CSSNano
- Pengurang JavaScript Toptal
- Kode Mempercantik
Praktik terbaik lainnya untuk memperbaiki “Hindari permintaan kritis berantai”
Subset font
Setelah merawat sumber daya CSS dan JavaScript situs Anda, kandidat terbaik berikutnya untuk pengoptimalan adalah font web Anda.
Sebagian besar diabaikan, font web seringkali merupakan file besar yang membutuhkan waktu lama untuk dimuat dan bahkan dapat memblokir rendering teks.
Untuk menghindarinya, Anda perlu mengurangi ukurannya agar browser dapat segera memuatnya.
Masukkan subset font.
Subset font adalah teknik pengoptimalan yang menghilangkan mesin terbang (karakter) yang tidak digunakan dari font untuk mengurangi ukurannya secara besar-besaran.
Misalnya, pikirkan berapa banyak mesin terbang unik yang digunakan beranda Anda. Kami berani bertaruh mereka tidak lebih dari 100.
Singkatnya, Font Awesome, font kedua yang paling banyak digunakan (7% dari semua situs web menggunakannya),memiliki 26.107 karakter .
Sumber:Almanak Web
Bayangkan berapa banyak waktu yang dapat Anda hemat untuk browser dan pengunjung Anda dengan hanya memuat apa yang benar-benar diperlukan untuk halaman tertentu.
Ada beberapa alat online yang dapat membantu Anda menerapkan subset font. Anda perlu mengunggah file font Anda dan memilih mesin terbang yang ingin Anda hapus. Kemudian, kembali ke situs Anda dan unggah file subset.
Selain itu, Anda perlu memastikan bahwa Anda menjalani proses setiap kali memperbarui konten.
Penting : Subsetting file font Anda melalui alat online menyembunyikan risiko karakter yang hilang pada halaman Anda setelah pengoptimalan. Jika Anda belum pernah bekerja dengan font sebelumnya, kami sangat menyarankan untuk menghubungi spesialis kinerja web atau memasang plugin yang akan melakukannya secara otomatis untuk Anda.
Subset font Anda bebas risiko. Kurangi ukurannya hingga 70% dengan menginstal NitroPack →
Pramuat permintaan kunci
Menggunakan atribut link rel=preload untuk melakukan pramuat permintaan penting adalah strategi pengoptimalan lain yang akan meningkatkan FCP dan LCP Anda, serta mempersingkat jalur kritis.
Untuk mengidentifikasi permintaan Anda yang paling penting, jalankan situs Anda melalui Wawasan PageSpeed dan centang peringatan “Permintaan kunci pramuat”:
Lalu, buka kode Anda dan tambahkan tautan rel=preload tag ke sumber daya tertentu:
Jangan lupa untuk menyertakan atribut as agar browser dapat mengatur prioritas sumber daya yang diambil sebelumnya sesuai dengan jenisnya dan menentukan apakah sudah ada di cache.
Sumber daya tambahan: Periksa daftar lengkap sebagai nilai.
Bagaimana menghindari permintaan kritis berantai dengan NitroPack
Mengoptimalkan rantai permintaan penting Anda mungkin merupakan tugas yang membosankan jika Anda tidak dipersenjatai dengan alat yang tepat.
Seperti yang sudah Anda ketahui, ada beberapa kesempatan ketika menyempurnakan kode Anda dapat menjadi bumerang dan merusak fungsionalitas dan desain situs Anda.
Tetapi memperbaiki satu peringatan PSI seharusnya tidak terlalu memusingkan.
Atau setidaknya tidak dengan NitroPack.
NitroPack adalah alat pengoptimalan kecepatan all-in-one yang akan meningkatkan kinerja situs Anda dengan menerapkan:
- Hapus CSS yang Tidak Digunakan
- Tunda JavaScript
- Subset font
Dan 32+ teknik pengoptimalan lain yang telah terbukti untuk Anda.
Dengan NitroPack, tidak diperlukan pengkodean atau pengalaman teknologi sebelumnya untuk meningkatkan kinerja situs Anda.
Kedengarannya terlalu bagus untuk menjadi kenyataan?
Mari kita lihat salah satu situs web klien kami dengan dan tanpa NitroPack.
Inilah hasil mereka tanpa NitroPack:
41 Skor kinerja pada seluler, 47 rantai, dan latensi jalur kritis 3.781 md.
Tanpa NitroPack
Dan inilah hasilnya dengan NitroPack:
95 Skor kinerja, 1 rantai, latensi jalur kritis lebih dari 2x lebih pendek:
Dengan Nitro Pack
Anda dapat mengalami ini dan banyak peningkatan kinerja lainnya juga. Instal NitroPack hari ini dan biarkan kami menjaga kecepatan kilat situs Anda.