Bagaimana Menangguhkan Memuatkan Fail CSS Besar untuk Prestasi Halaman Yang Diperbaiki?

Mengoptimumkan penghantaran CSS: Memahami Menangguhkan Pemuatan CSS

Apabila mengoptimumkan penghantaran CSS, menangguhkan pemuatan fail CSS yang besar selepas halaman dimuatkan boleh meningkatkan prestasi halaman dengan ketara. Walaupun contoh yang disediakan oleh pembangun Google menunjukkan menyelaraskan fail CSS kecil untuk penggayaan kritikal, ia membuka persoalan tentang cara menangguhkan fail CSS yang lebih besar.

Mengakses Fail CSS Asal Selepas Muatkan

Untuk menangguhkan pemuatan fail CSS yang besar sehingga selepas halaman dimuatkan, kami boleh menggunakan coretan kod jQuery berikut:

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

Fungsi ini mencipta teg pautan secara dinamik dalam kepala HTML dan menetapkan atribut href kepada fail CSS yang dikehendaki. Untuk mengaktifkan helaian gaya, cuma panggil fungsi dalam pengendali acara $(document).ready() atau window.onload.

Mengesahkan Keputusan Menangguhkan

Untuk mengesahkan jika fail CSS benar-benar dimuatkan selepas halaman dimuatkan, anda boleh melumpuhkan JavaScript dalam penyemak imbas anda. Jika fail CSS tidak muncul pada halaman, ia mengesahkan bahawa ia dimuatkan secara dinamik. Selain itu, adalah disyorkan untuk menguji peningkatan prestasi menggunakan alat seperti Google PageSpeed ​​Insights untuk mengukur kesan pada masa pemuatan halaman.

Dengan menggunakan teknik ini, kami boleh mengoptimumkan penghantaran CSS dan meningkatkan prestasi keseluruhan web kami muka surat. Menangguhkan pemuatan fail CSS yang besar membolehkan halaman dipaparkan dengan cepat dan memberikan pengalaman pengguna yang lebih lancar.

Atas ialah kandungan terperinci Bagaimana Menangguhkan Memuatkan Fail CSS Besar untuk Prestasi Halaman Yang Diperbaiki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!