Perlu diingat bahwa CSS memblokir perenderan. Dari segi kinerja, ini adalah masalah karena browser mengunduh CSS, berhenti mengecat halaman
Oleh karena itu, setiap CSS yang tidak penting untuk konten paro atas adalah kandidat yang baik untuk dimuat secara asinkron. Juga, perlu diingat bahwa 14kb-ish adalah ukuran permintaan HTTP bolak-balik tunggal, jadi akan sangat bagus untuk menjaga CSS kritis di bawah ukuran ini
Bagaimana cara kerjanya?Nah, mengingat bahwa kita belum memiliki (belum) metode asli untuk memuat asinkron CSS, kita perlu menggunakan solusi di atas. Kami mengelabui browser bahwa jenis media tidak cocok dengan lingkungan saat ini, sehingga tidak akan memblokir perenderan. Setelah pemuatan selesai, kami menggunakan event onload javascript untuk memberi tahu browser agar benar-benar menggunakan CSS yang ditangguhkan
Anda dapat membacanya lebih lanjut di artikel awal yang ditulis oleh Scott Jehl ini
Mengapa saya dapat menggunakan atribut link preload untuk memuat async CSS?Ya, Anda bisa dan berhasil. Hanya saja tampaknya pendekatan media="print" akan memberikan hasil yang lebih baik. Seperti yang dijelaskan Scott Jehl
"Namun yang lebih penting, preload mengambil file sangat awal, pada prioritas tertinggi, berpotensi menurunkan prioritas unduhan penting lainnya, dan itu mungkin prioritas lebih tinggi daripada yang sebenarnya Anda perlukan untuk CSS non-kritis. "
Saya harap Anda menikmati artikel ini dan jika Anda ingin mendapatkan lebih banyak artikel tentang React dan pengembangan frontend, Anda selalu dapat mendaftar ke daftar email saya
Salah satu hal paling berpengaruh yang dapat kami lakukan untuk meningkatkan performa dan ketahanan halaman adalah memuat CSS dengan cara yang tidak menunda perenderan halaman. Itu karena secara default, browser akan memuat CSS eksternal secara bersamaan—menghentikan semua perenderan halaman saat CSS diunduh dan diuraikan—keduanya berpotensi menimbulkan penundaan
Jangan hanya bangun dan lakukan ini ke semua stylesheet Anda, jika tidak, Anda akan mendapatkan "Flash of Unstyled Content" (FOUC) yang cukup buruk saat halaman dimuat. Anda perlu memasangkan teknik dengan cara mengirim CSS kritis. Lakukan itu, dan seperti yang dikatakan kalimat pembuka Scott, itu cukup berdampak
Cerita sampingan yang menarik… di halaman Pen Editor kami di CodePen, kami mengalami masalah FOUC (peringatan, ada kilatan putih yang sangat cepat di video ini)
Ini telah melakukan ini selama (bertahun-tahun?) di CodePen di @firefox
We have a totally normal at the top of the page that is supposed to be render-blocking, yes?
Ingin sekali mengerti. foto. Indonesia. com/HGTHwpemiy
– Chris Coyier (@chriscoyier) 20 Juni 2019
Apa yang membuatnya aneh adalah kita memuat CSS kita di <link> tag di <head> sepenuhnya normal, yang seharusnya memblokir-rendering dan mencegah FOUC. Tetapi ada beberapa di tempat kerja. Untungnya kami menemukan solusi yang aneh, jadi sekarang kami memiliki tag <script> kosong di <head> yang entah bagaimana menyelesaikannya
Muat resource CSS non-kritis berprioritas rendah di latar belakang tanpa memengaruhi kecepatan halaman dengan teknik sederhana ini untuk pemuatan CSS asinkron
Langsung Ke HasilApa itu Pemuatan Asinkron?
Pemuatan asinkron atau asinkron mengacu pada pengunduhan dan penerapan sumber daya halaman di latar belakang, terlepas dari sumber daya lain dan tanpa memengaruhi proses pemuatan awal
Konfigurasi ini ideal untuk CSS yang tidak berlaku untuk elemen konten paruh pertama atau paro atas dan dapat ditambahkan ke halaman nanti dalam proses pemuatan. Juga disebut CSS non-kritis, memuat file CSS prioritas rendah secara asinkron adalah teknik umum untuk menghilangkan CSS pemblokiran render dan meningkatkan kecepatan situs web
Syarat & Teknik
Istilah lazy loading, on-demand, deferred, dan asynchronous semuanya terkait dengan berbagai metode untuk meminimalkan bobot halaman pemuatan awal dan menghilangkan sumber daya pemblokiran render. Meskipun sering digunakan secara bergantian, ada beberapa perbedaan utama
Lazy Loaded = Dimuat terlebih dahulu untuk mengantisipasi suatu kebutuhan
Misalnya, saat halaman di-scroll atau saat elemen konten tertentu ditampilkan. Pemuatan lambat gambar adalah penggunaan yang paling umum, tetapi juga bisa efektif untuk sumber daya lain seperti plugin CAPTCHA yang digunakan di bagian bawah halaman
On-Demand = Dimuat hanya saat dibutuhkan
Mirip dengan pemuatan lambat, tetapi biasanya sebagai respons terhadap tindakan yang lebih spesifik dan terarah seperti memuat video saat tombol putar diklik atau memuat sumber daya CAPTCHA saat pengguna mulai berinteraksi dengan formulir
Ditangguhkan = Dimuat atau diterapkan kemudian dalam proses pemuatan awal
Seperti penangguhan Google Analytics, atribut defer dapat ditambahkan ke referensi eksternal <script> untuk memuat di latar belakang dan mengeksekusi setelah perenderan awal halaman, tepat sebelum peristiwa DOMContentLoaded
Asinkron = Dimuat atau diterapkan secara independen dari sumber daya lain
Pemuatan asinkron adalah pilihan yang baik untuk file yang merupakan bagian dari pemuatan halaman umum, tetapi tidak boleh mengganggu sumber daya dengan prioritas lebih tinggi dalam proses pemuatan
Mengonfigurasi ulang CSS Untuk Kecepatan
Sumber daya CSS eksternal disertakan pada halaman dengan referensi <link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">0 ke file
HTML<!-- other <head> stuff --> <link rel="stylesheet" href="styles.css"> </head>_Referensi pemblokiran render konvensional seperti ini ke file CSS yang sangat kecil (