Teks javascript async src dimuat. Pemuatan JavaScript asinkron - mempercepat pemuatan halaman. Menambahkan atribut defer atau async di WordPress
29.06.2020
Halo teman teman! Tahukah Anda bahwa pemuatan JavaScript adalah salah satu hambatan terbesar dalam kinerja situs web? Hari ini tugas utama saya adalah menjelaskan apa itu skrip dan bagaimana skrip memengaruhi kecepatan dan kinerja situs.
Browser yang memuat tag skrip berhenti merender halaman hingga skrip dimuat dan dijalankan. Halaman diblokir dan browser tidak merespons tindakan pengguna selama beberapa detik. Waktu tunda tergantung pada beberapa faktor:
konfigurasi,
kecepatan koneksi internet,
ukuran file dan lain-lain ...
Untuk alasan ini, Google PageSpeed Insights menyarankan Anda menghapus JavaScript yang memblokir tampilan dari bagian atas halaman Anda. Ini adalah praktik yang baik untuk menempatkan skrip di bagian bawah situs, misalnya, sebelum tag penutup.
atau menyiapkan pemuatan asinkron.
Jika kode skrip memengaruhi tampilan bagian atas situs, jangan letakkan di file terpisah, tetapi tanamkan langsung ke HTML.
JS dapat mengubah konten situs dan bahkan mengarahkan ulang ke url yang berbeda. Dalam hal ini, menghubungkan skrip di akhir dokumen akan menyebabkan efek "berkedut" halaman, memuat baru atau mengubah elemen yang ada di bagian atas.
Menerapkan atribut async dan defer ke tag skrip
Mari kita lihat apa fungsi JavaScript asinkron dan ditangguhkan dan apa perbedaan mendasar antara atribut async dan defer. Tapi pertama-tama, mari kita lihat urutan pemrosesan dokumen dengan koneksi tag skrip yang biasa.
< src = "contoh.js">
Sebagai contoh ilustrasi, saya akan menggunakan konvensi berikut:
Jadi, urutan pemrosesannya adalah sebagai berikut:
Penguraian kode HTML terputus saat skrip dimuat dan dijalankan, lalu dilanjutkan. Ada penundaan dalam menampilkan halaman web.
Tunda atribut
Atribut defer memungkinkan browser untuk mulai memuat file js secara paralel tanpa menghentikan pemrosesan halaman lebih lanjut. Mereka dieksekusi setelah penguraian penuh Model Objek Dokumen (disingkat DOM), sementara browser menjamin konsistensi berdasarkan urutan file yang terhubung.
< defer src = "contoh.js">
Atribut asinkron
Dukungan untuk atribut async muncul di HTML5, memungkinkan browser untuk memuat file js secara paralel dan mengeksekusi segera setelah memuat, tanpa menunggu sisa halaman diproses.
< async src = "contoh.js">
Diagram urutan pemrosesan:
Ini adalah unduhan asinkron. Atribut ini direkomendasikan untuk skrip yang tidak secara signifikan mempengaruhi tampilan dokumen. Ini termasuk penghitung pengumpulan statistik (Google Analytics, Yandex Metrica), kode jaringan iklan (Jaringan Periklanan Yandex, Google AdSense), tombol media sosial, dan sebagainya.
Kecepatan memuat situs web adalah salah satu faktor peringkat di Google.
Konektivitas JavaScript asinkron mengurangi waktu pemuatan halaman dengan menghilangkan latensi. Bersamaan dengan ini, saya sarankan mengompresi dan menggabungkan file js menjadi satu, misalnya menggunakan perpustakaan. Pengguna menyukai situs cepat
Async and Defer - Strategi pemuatan JavaScript
JavaScript adalah bagian penting dari setiap aplikasi web modern, dan strategi yang kami pilih untuk digunakan untuk memuat secara langsung memengaruhi kinerja aplikasi itu sendiri. Dalam artikel ini, kami akan mencoba memahami perbedaan penting antara setiap pendekatan, pro dan kontra bersama dengan implikasi kinerja, dan cara mengoptimalkan interaksi halaman dan waktu muat.
Untuk demonstrasi, saya akan membuat situs web yang terdiri dari dependensi eksternal berikut. Berikan perhatian khusus pada ukuran file masing-masing, karena waktu pengunduhan file berbanding lurus dengan ini.
HTML - halaman ~ 1 MB. Berisi markup/konten aktual untuk menampilkan beberapa keluaran dinamis dari JavaScript.
Gambar - gambar1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB adalah inti (file utama) javascript dan tergantung pada penguraian HTML. Diperlukan untuk menampilkan beberapa konten dinamis atau untuk memasang komponen reaksi / sudut pada halaman.
JavaScript - file2.js ~ 460B adalah file javascript independen kecil yang berinteraksi dengan dom.
JavaScript - file3.js ~ 1,5 MB adalah file js sekunder dan bergantung pada file1.js untuk mengeksekusi beberapa kode dengan prioritas lebih rendah. Kode ini tidak diperlukan segera untuk rendering halaman dan interaksi pengguna; itu menunjukkan ikon media sosial, komentar, bantuan online, meluncurkan beberapa tugas analitik, dll.
Sekarang saatnya untuk menganalisis pendekatan yang berbeda
Pendekatan-1 [skrip di bagian kepala]
Dalam kasus pertama, kami akan memuat semua tag skrip ke bagian kepala HTML kami. Di bawah ini adalah tangkapan layar analisis tab jaringan halaman chrome, siap untuk interaksi pengguna.
Kelebihan:
Urutan eksekusi kode dari berbagai file JS akan disimpan dalam urutan di mana file dimasukkan dalam HTML. Dalam contoh saat ini, bahkan jika file2 dan file3 dimuat sebelum file1, urutan eksekusi akan benar.
Minus:
Dalam skenario ini, penguraian HTML akan dijeda sampai semua 3 skrip di bagian kepala telah dimuat, diuraikan, dan dieksekusi. Layar putih kosong akan ditampilkan kepada pengguna meskipun file HTML telah dimuat [tetapi tidak diuraikan]. Ini jelas tidak baik untuk kegunaan.
Tak satu pun dari skrip di atas akan dapat mengakses/memanipulasi halaman HTML karena DOM belum siap. Salah satu solusi yang mungkin untuk menangani masalah ini adalah dengan mendengarkan acara DOMContentLoaded dan kemudian mengeksekusi kode setelah itu. DOMContentLoaded Acara ini dipicu ketika dokumen HTML asli telah dimuat dan diuraikan sepenuhnya tanpa menunggu stylesheet dan gambar selesai dimuat.
Pendekatan-2 [skrip di akhir]
Untuk mengatasi 2 masalah yang kita hadapi pada pendekatan pertama, mari muat semua 3 skrip di bagian bawah tag body.
Kelebihan: HTML diuraikan sebelum skrip dimuat, sehingga pengguna akan dapat melihat konten yang sebenarnya segera alih-alih menunggu skrip.
Karena semua skrip dieksekusi setelah HTML diuraikan, mereka semua dapat mengakses DOM untuk segala jenis manipulasi. Urutan eksekusi skrip dipertahankan.
Minus:
Tidak ada peningkatan kinerja seperti itu.
Pendekatan-3 [menggunakan atribut Async]
HTML5 memperkenalkan atribut skrip asinkron, yang membantu memuat file skrip yang sesuai secara paralel di aliran lain tanpa memengaruhi penguraian HTML.
Namun, skrip yang sesuai akan diuraikan dan dieksekusi segera setelah selesai memuat, terlepas dari apakah penguraian HTML selesai atau tidak, dan akan mereferensikan elemen DOM hingga titik tertentu.
Di sini Anda dapat dengan jelas melihat bahwa file2.js dimuat sebelum file HTML. Namun, saat browser memuat file2, itu tidak menjeda penguraian HTML dan karena itu, pada saat dijalankan, ia memiliki tautan ke placeholder html untuk menyuntikkan konten dinamis.
Kelebihan: Karena skrip dimuat pada utas yang berbeda, penguraian HTML tidak akan dijeda dan pengguna akan dapat melihat konten langsung alih-alih layar putih kosong. Peningkatan kinerja utama, yaitu waktu DOMContentLoaded telah berkurang dari 47,68 detik menjadi hanya 21,12 detik dan ~ 55% dari perolehan.
Minus:
Urutan eksekusi JS tidak dipertahankan. Itu dieksekusi dalam urutan pemuatan yang tepat, bukan urutan skrip yang disertakan dalam HTML. Dukungan Browser - Tidak didukung pada browser web lama yaitu IE 9 dan di bawahnya.
Apa yang terjadi jika JS dimuat sebelum elemen DOM tersedia? Kesalahan akan terjadi.
Catatan: Menempatkan skrip dengan atribut async di bagian bawah tubuh tidak akan berguna dan setara dengan Pendekatan-2.
Pendekatan-4 [menggunakan atribut Tunda]
Atribut Defer akan menyebabkan skrip dieksekusi hanya setelah penguraian HTML selesai. Satu hal yang sangat penting untuk diingat di sini adalah bahwa Chrome belum mendukung penangguhan dan tidak berpengaruh pada durasi DOMContentLoaded. Namun, itu mengeksekusi skrip di akhir penguraian HTML.
Kelebihan:
Urutan mengimpor skrip dipertahankan. Jadi file3.js hanya dijalankan setelah unduhan selesai dan file1 dieksekusi, meskipun file3 telah dimuat sebelumnya.
Dukungan browser - memiliki dukungan browser yang lebih baik dibandingkan dengan atribut async, yaitu didukung sebagian di IE v6-9
Skrip dapat mengakses DOM karena hanya dijalankan setelah HTML lengkap diuraikan.
Minus:
Saya awalnya berpikir penangguhan akan menjadi pilihan yang lebih baik daripada async, tetapi kemudian menemukan bahwa Chrome belum mendukungnya [versi 71.0.3578.98] dan tidak berpengaruh pada durasi DOMContentLoaded.
Namun, ini berfungsi seperti yang diharapkan di Firefox dengan peningkatan kinerja yang signifikan.
kesimpulan
Lebih baik menempatkan tag skrip di bagian kepala dengan atribut async untuk pustaka pihak ketiga yang bergantung pada Google Analytics, Google reCAPTCHA, atau apa pun yang tidak memerlukan akses DOM, karena skrip yang sesuai dimuat secara paralel tetapi segera dieksekusi .
Gunakan penangguhan untuk semua skrip lain yang dimuat di bagian kepala karena mereka juga akan dimuat secara paralel, tetapi hanya akan dieksekusi setelah HTML selesai diurai dan DOM siap diakses / dimanipulasi.
Anda juga dapat menggunakan kombinasi pendengar DOMContentLoaded di dalam skrip asinkron untuk menjalankan fungsionalitas nanti. Silakan tinggalkan pendapat dan kesimpulan Anda di komentar, dan saya akan dengan senang hati mendiskusikannya dengan Anda.
Penulis materi ini adalah I - Yuri Pakholkov. Saya menyediakan layanan untuk menulis program di Java, C ++, C # (serta konsultasi tentang mereka) dan membuat situs web. Saya bekerja dengan situs di CMS OpenCart, WordPress, ModX dan tulisan sendiri. Selain itu, saya bekerja langsung dengan JavaScript, PHP, CSS, HTML - yaitu, saya dapat memodifikasi situs Anda atau membantu pemrograman web.
Skrip plugin (JavaScript) memblokir pemuatan kode HTML. Saat browser (parser) mencapai tag
Dan contoh berikut menunjukkan cara meletakkan skrip (sebaris) di dalam
Penggantian modul
Browser yang mendukung nilai modul untuk atribut type mengabaikan skrip apa pun dengan atribut nomodule. Itu memungkinkan Anda untuk menggunakan skrip modul sambil juga menyediakan skrip fallback bertanda nomodule untuk browser yang tidak mendukung.
Ada kepercayaan luas bahwa tidak mungkin menghasilkan uang secara online tanpa situs web Anda sendiri atau menginvestasikan dana pribadi. Ini tidak benar. Ada berton-ton...
Seringkali ada kerusakan, masalah atau keinginan sederhana untuk mengubah firmware. Hingga waktu tertentu, perangkat di bawah garansi resmi dapat diperbarui ...
Mempertahankan grup Vkontakte adalah proses yang agak rumit dan dengan pendekatan yang salah, Anda dapat mengacaukan semua pekerjaan. Pada artikel kali ini saya akan membahas tentang hal-hal penting ...
Cheat teman di VKontakte gratis
Cara menghasilkan uang di Internet tanpa investasi untuk pemula Cara nyata menghasilkan uang di Internet tanpa investasi
Faktor perilaku dalam promosi dan metode kerja untuk meningkatkannya
Cara mengetahui dan meningkatkan lalu lintas ke halaman VKontakte
Menerapkan Pengisian Cepat pada Ponsel Honor