Pemuatan asinkron untuk file css dan javascript

Question

Perlu diingat bahwa CSS memblokir perenderan. Dari segi kinerja, ini adalah masalah karena browser mengunduh CSS, berhenti mengecat halaman

Table of Contents Show

Apa itu Pemuatan Asinkron?
Mengonfigurasi ulang CSS Untuk Kecepatan
Masukkan Asynchronous CSS
Penggantian No-JavaScript
Tingkatkan Prioritas Pemuatan
Kondisi Media
Tanpa JavaScript
Async CSS Untuk Google Font
Bagaimana Anda memuat file CSS dan JS secara dinamis?
Bisakah browser mengunduh file CSS dan JS secara paralel?
Bagaimana cara memuat CSS dan JavaScript?
Mana yang pertama memuat CSS atau JavaScript?

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

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

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 Hasil

Apa 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 (<10 KB diperkecil & dikompresi) sesuai untuk gaya penting yang diterapkan pada bagian halaman yang awalnya terlihat atau paruh atas sehingga pengguna tidak melihatnya . Namun untuk CSS non-kritis yang hanya berlaku untuk konten paro bawah, efek pemblokiran render berdampak negatif pada kecepatan halaman

Optimalkan proses pemuatan dengan pendekatan progresif

Masukkan Asynchronous CSS

Alih-alih menghentikan proses pemuatan dengan referensi CSS pemblokiran render konvensional, CSS asinkron memuat di latar belakang. HTML dapat terus dianalisis oleh browser, sumber daya lain yang lebih penting dapat terus dimuat dan laman dapat dirender dan muncul di layar secepat mungkin

CSS asinkron menggunakan kombinasi sederhana dari atribut

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

1 dan sedikit JavaScript untuk menarik switcheroo lama setelah file dimuat

HTML

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

(Ini adalah fungsi inti dari CSS asinkron -. )

Menghancurkannya

Teknik ini mendapat manfaat dari fakta bahwa browser masih mengunduh referensi file dengan kondisi media yang tidak cocok, tetapi melakukannya di latar belakang dengan prioritas rendah tanpa memblokir perenderan halaman

Seperti referensi

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

_0 lainnya yang ditemui browser, file mulai diunduh, tetapi karena atribut

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

1 tidak cocok dengan kondisi saat ini, file tidak memblokir render

Setelah file dimuat, cuplikan JavaScript

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

_4 memperbarui atribut

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

1 ke nilai yang cocok - atau dengan menghapusnya sepenuhnya, seperti di atas dengan

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

6 - sehingga

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

0 dan CSS non-kritis sekarang berlaku untuk halaman

(

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

8 menghindari panggilan

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

4 lagi di beberapa browser. )

HTML yang sah

Terkadang teknik atribut

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

_1 terlihat dengan nilai seperti "tidak ada", yang bukan merupakan HTML yang valid. (Dan siapa yang butuh itu?) Nilai seperti

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

1 atau bahkan

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

2 atau serupa tidak akan cocok dengan kondisi layar pengguna apa pun sambil tetap memiliki kode yang valid

Penggantian No-JavaScript

Karena bergantung pada JavaScript, referensi

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

0 konvensional yang dibungkus dengan

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

4 adalah fallback yang mudah

HTML

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

Tingkatkan Prioritas Pemuatan

Untuk halaman yang dioptimalkan dengan baik tanpa banyak sumber daya lain yang bersaing, prioritas CSS yang dimuat secara asinkron dapat ditingkatkan secara opsional dengan menambahkan petunjuk sumber daya

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

5

HTML

<link rel="preload" as="style" href="non-critical.css" as="style">

Perhatikan atribut

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

_6 yang ditambahkan. Pelajari semua tentang petunjuk sumber daya dan atribut mana yang diperlukan dan mana yang opsional

Tidak Begitu Cepat

Mengapa tidak menyederhanakan dan menggabungkan referensi async

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

_0 dengan

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

5?

Sayangnya dukungan browser untuk nilai

<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

_9 tidak universal, jadi menggabungkan keduanya akan memerlukan fallback JavaScript. Menggunakan

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

0s terpisah memiliki efek yang sama dan menghindari kebutuhan JavaScript tambahan

Kondisi Media

Bersamaan dengan memisahkan CSS kritis dari non-kritis, strategi lain yang bermanfaat adalah mengatur file CSS berdasarkan kondisi media

Kueri media dapat secara selektif memprioritaskan sumber daya penting berdasarkan kondisi seperti ukuran layar. Semua file akan diunduh, tetapi dengan prioritas yang sesuai, dan hanya file dengan kondisi media yang cocok yang akan memblokir rendering

HTML

<link rel="stylesheet" href="critical-general.css">
<link rel="stylesheet" media="(min-width:60em)" href="critical-large.css">

Tanpa JavaScript

Teknik atribut

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

1 adalah pilihan terbaik untuk sebagian besar kasus, tetapi bagaimana jika Anda perlu mendapatkan efek serupa tanpa menggunakan JavaScript?

Menempatkan referensi CSS yang tidak penting di akhir halaman, sebelum tag

<link rel="preload" as="style" href="non-critical.css" as="style">

2 penutup memiliki efek yang serupa

HTML

<!-- other <head> stuff -->

<link rel="stylesheet" href="critical.css">
</head>

<body>
    <!-- page content -->

<link rel="stylesheet" href="non-critical.css">
</body>

Bergantung pada jumlah dan kerumitan konten halaman dan sumber daya lainnya, kelemahan dari metode ini adalah file mungkin tidak mulai dimuat segera setelah file dirujuk di bagian

<link rel="preload" as="style" href="non-critical.css" as="style">

3, meningkatkan potensi flash konten tanpa gaya

Bersama

Menyatukan semua elemen ini menghasilkan metode yang sederhana dan efektif untuk pemuatan CSS asinkron dan kecepatan halaman yang lebih cepat

HTML

<!-- other <head> stuff like critical CSS -->

<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="non-critical.css">

<!-- core asynchronous functionality -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

<!-- no-JS fallback -->
<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

</head>

Async CSS Untuk Google Font

Seiring dengan peningkatan efisiensi pemuatan sumber daya CSS umum, pemuatan asinkron adalah teknik yang bagus untuk menghilangkan efek pemblokiran render dari Google Fonts

Bagaimana Anda memuat file CSS dan JS secara dinamis?

Muat file CSS dan JS secara dinamis. Kami membuat elemen skrip untuk file JS dan elemen tautan untuk file CSS sesuai kebutuhan menggunakan DOM, menetapkan atribut yang sesuai untuknya, lalu menambahkan elemen ke lokasi yang diinginkan dalam pohon dokumen menggunakan elemen. menambahkan() metode

Bisakah browser mengunduh file CSS dan JS secara paralel?

Dampak Rendering CSS dan JavaScript . the browser can download and process many of them in parallel, without worrying about how they'll interact with each other or with the rest of the page.

Bagaimana cara memuat CSS dan JavaScript?

JavaScript juga dapat digunakan untuk memuat file CSS dalam dokumen HTML. .

Gunakan dokumen. metode getElementsByTagName() untuk mendapatkan elemen kepala HTML

Buat elemen tautan baru menggunakan metode createElement('link').

Inisialisasi atribut elemen tautan

Tambahkan elemen tautan ke kepala

Mana yang pertama memuat CSS atau JavaScript?

Dalam hal mengurutkan CSS dan JavaScript, Anda ingin CSS Anda didahulukan . Alasannya adalah utas rendering memiliki semua informasi gaya yang diperlukan untuk merender halaman. Jika menyertakan JavaScript yang didahulukan, mesin JavaScript harus mengurai semuanya sebelum melanjutkan ke kumpulan sumber daya berikutnya.

kode javascript