Saya mencoba mengecualikan 2 berkas CSS yang memblokir rendering di situs saya - mereka muncul di Halaman Google Wawasan Kecepatan. saya terjebak metode yang berbeda, tidak ada satupun yang berhasil. Namun baru-baru ini saya menemukan postingan tentang Berpikir Async dan ketika saya menerapkan kode ini: itu memperbaiki masalahnya.

Namun, setelah dipublikasikan, halaman tersebut kehilangan gayanya. Saya tidak terlalu yakin apa yang terjadi karena kodenya berfungsi, tetapi gaya pasca-muatlah yang tidak berfungsi. Terima kasih atas bantuan Anda dalam hal ini. Berkat

4 jawaban

Trik untuk memuat gaya secara asinkron adalah dengan menggunakan elemen dan menyetel atribut media ke nilai yang tidak valid (saya menggunakan media="none" tetapi nilai apa pun bisa digunakan). Ketika kueri media bernilai false, browser akan tetap memuat stylesheet, namun tidak akan menunggu hingga konten tersedia sebelum merender halaman.

Setelah stylesheet selesai dimuat, atribut media harus disetel ke nilai yang valid sehingga aturan gaya akan diterapkan pada dokumen. Acara onload digunakan untuk mengaktifkan properti media pada segala hal:

Metode ini CSS dimuat akan mengirimkan konten yang bermanfaat pengunjung jauh lebih cepat daripada pendekatan standar. CSS kritis masih dapat digunakan dengan pendekatan pemblokiran normal (atau Anda dapat memasukkannya ke dalamnya kinerja maksimal), dan gaya non-kritis dapat dimuat secara bertahap dan diterapkan nanti dalam proses parsing/rendering.

Metode ini menggunakan JavaScript, tetapi Anda dapat melayani browser non-JavaScript dengan menggabungkan elemen pemblokiran yang setara dalam :

Anda dapat melihat pengoperasiannya di www.itcha.edu.sv

anda bisa mencoba mendapatkannya dengan beberapa cara:

1. Menggunakan media="bogus" dan a pada kaki

2. Menyertakan DOM dengan cara lama

3.jika Anda dapat mencoba plugin, Anda dapat mencoba loadCSS

// sertakan loadCSS di sini... fungsi loadCSS(href, sebelumnya, media)( ... ) // memuat file loadCSS("path/to/mystylesheet.css");

Masa depan tampaknya menjadi kata kunci pramuat untuk elemen tautan.

Browser terkenal yang belum mendukung fitur ini termasuk Edge dan iOS Safari.

loadCSS tampaknya menjadi solusi potensial yang memungkinkan Anda menggunakan preload saat ini (dengan fallback).

HTML dirancang sedemikian rupa sehingga halaman web dimuat secara berurutan baris demi baris, memuat secara bergantian semua elemen yang termasuk dalam kode html. Dan jika salah satunya tidak tersedia (misalnya, javaScript tidak dibaca dari situs eksternal), maka pemuatan situs selanjutnya akan berhenti.

Jika JS yang tidak terbaca berada di bagian atas halaman, pengunjung mungkin tidak melihat apa pun.

Oleh karena itu, saat Anda menggunakan JavaScript dari situs pihak ketiga di situs Anda, misalnya untuk menampilkan iklan, sangat disarankan untuk memuatnya secara asinkron. Dalam hal ini, JS pihak ketiga tidak akan menunda pemuatan dan tampilan situs Anda.

Sayangnya, tidak semuanya jaringan periklanan memberikan kemampuan untuk memuat skrip secara asinkron. Oleh karena itu, pada artikel kali ini saya akan memberi tahu Anda cara mengubah kode pemuatan sinkron menjadi asinkron. Jika pemilik skrip ini tidak menyediakan opsi ini.

Biasanya, pemanggilan skrip dari server eksternal terlihat seperti ini:

Saya mendapat ide dari Google/Adsense. Agar skrip dimuat secara asinkron dari kode HTML lainnya, Anda perlu menambahkan async ke kode panggilan.

Dan sekarang agar kode dimuat secara asinkron, panggilan skrip kita dari server eksternal akan terlihat seperti ini:

Seperti yang Anda lihat, semuanya sederhana. Benar, ini hanya akan berfungsi di browser yang mendukung standar HTML5. Pada saat artikel ini ditulis, terdapat sebagian besar browser semacam itu.

Opsi yang diusulkan tidak 100% universal. Banyak skrip berhenti berfungsi setelah melakukan perubahan ini. Menurut ulasan di Internet, metode ini tidak berfungsi jika elemen tersebut digunakan dalam skrip dokumen.tulis.

Jika opsi pertama yang disarankan tidak berhasil untuk Anda. Kemudian manfaatkan rekomendasi berikut. Ini pada dasarnya adalah pemuatan yang lambat. Karena panggilan skrip sebenarnya terjadi di bagian paling akhir halaman HTML, yaitu ketika semua konten halaman yang diperlukan sudah ada di layar.

Di tempat di halaman tempat Anda ingin menampilkan hasilnya JavaScript berfungsi Anda perlu membuat blok div kosong:

Kemudian di akhir halaman sebelum tag BODY penutup kita masukkan skrip untuk pemuatan asinkron:

// JavaScript yang perlu dimuat secara asinkron // pindahkan ke posisi sebenarnya tampilkan dokumen.getElementById("script_block_0").appendChild(document.getElementById("script_ad_0"));

// tampilkan document.getElementById("script_ad_0").style.display = "blok";

Jika ada beberapa blok iklan, maka untuk masing-masing blok tersebut Anda perlu mengulangi semuanya, membuat blok DIV individual yang unik. Jangan lupa untuk mengganti nama kelas dan ID DIV. Pada contoh saya cukup dengan mengganti angka nol, pada blok baru perlu diganti dengan 1, dan seterusnya. Opsi ini lebih rumit, tetapi berfungsi di mana saja kecuali untuk browser yang sangat kuno seperti Penjelajah Internet

6. Yang untungnya praktis tidak lagi ditemukan di komputer pengguna. Ada solusinya: letakkan string Java di akhir dokumen html (oleh karena itu, mereka akan dimuat setelah seluruh halaman digambar) dan hanya setelah itu isi blok akan ditampilkan di di tempat yang tepat . Itu disebut. Semua proyek yang serius Hari ini kami mencoba untuk beralih ke teknologi baru

unduhan. Apalagi caranya sangatlah mudah.

Ada beberapa pendekatan. Saya akan mulai secara berurutan.

Pemuatan skrip HTML5 secara asinkron

< script async src= "http://www.site.ru/script.js" type= "text/javascript" >

< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >

Standar HTML5 mendukung kemampuan memuat skrip secara asinkron, yang secara signifikan dapat mempercepat waktu pengambilan halaman secara keseluruhan. Cukup tambahkan async atau defer .

Apa perbedaan antara atribut async dan defer? Dalam kedua kasus tersebut, kami mendapatkan pemuatan skrip yang tidak sinkron. Satu-satunya perbedaan adalah saat skrip mulai dijalankan. Skrip dengan atribut asinkron akan dieksekusi sesegera mungkin setelahnya beban penuh

, tapi sebelum objek window dimuat. Jika atribut defer digunakan, skrip tidak akan melanggar urutan eksekusi sehubungan dengan skrip lain dan eksekusinya akan terjadi setelah halaman dimuat dan diurai sepenuhnya, tetapi sebelum peristiwa DOMContentLoaded dari objek dokumen.

dari Google Seperti yang diketahui semua ahli, Google membayar perhatian khusus kecepatan memuat situs, dan mengurangi situs yang lambat. Untuk membantu, Google telah mengembangkan skrip khusus yang dapat digunakan untuk melakukan pemuatan javascript asinkron.

Untuk menggunakannya, cukup ganti

pada

Dan sambungkan file skrip extsrc.js

Ini akan menjadi seperti ini:

< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Sayangnya, cara ini juga tidak berfungsi untuk file dengan document.write

Metode universal untuk semua browser. Bahkan bekerja dengan document.write

Di tempat di halaman di mana kita perlu menampilkan elemen kita, buat blok div kosong:

< div id= "script_block" class = "script_block" >

Di bagian paling akhir halaman, sebelum kita memasukkan skrip untuk memuat file secara asinkron:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Berikut adalah file atau skrip apa pun yang perlu dimuat.< script type= "text/javascript" >// memindahkannya ke dokumen posisi tampilan sebenarnya. getElementById("script_block" ) . appendChild(document.getElementById("script_ad" ) ) ;

// tampilkan dokumen. getElementById("script_ad" ) . gaya. tampilan = "blok" ; Sayangnya, pada versi IE tertua (6 ke bawah), pemuatan asinkron tidak berfungsi, tetapi praktis tidak ada lagi pengguna seperti itu. Semua browser dan layanan lain berhasil menggunakan yang modern pemuatan yang dipercepat