Cara mempercepat loading halaman web website dengan cara mengoptimasi file java script dan kode halaman html.

Javascript menghadirkan tantangan khusus bagi sumber daya modern. Mereka hanya kelebihan beban dan ini menyebabkan pemuatan lambat dan, akibatnya, kualitas tampilan buruk.

Jika koneksi Internet lambat, yang biasa terjadi pada komunikasi seluler dan pengguna jarak jauh, maka pemuatan akan melambat secara signifikan, sehingga menyebabkan gangguan yang dapat dibenarkan.

Saat browser membaca kode html, hasilnya akan ditampilkan secara berurutan. Itu. setiap baris mengikuti satu sama lain, tetapi di tempat javascript diinstal, terjadi penghentian - mereka yang menggunakan bahasa ini untuk menulis sumber daya pasti mengalami masalah ini.

Solusi untuk masalah ini adalah pemuatan asinkron. Letakkan saja javascript di akhir kode html halaman. Hal ini akan mengarah pada fakta bahwa pemuatan "java" akan tertunda tepat waktu, memastikan tampilan halaman yang benar dan permulaan yang cepat bagi pengguna sumber daya. Sebagian besar sumber daya serius beralih ke pemuatan asinkron, mencoba mempertahankan audiensnya dan memperkenalkan inovasi yang bermanfaat.

Mari kita lihat beberapa cara untuk mengoptimalkan pemuatan javascript.

File javascript ini dimuat sebagai berikut:

< script src= type= "text/javascript" >

HTML5 dengan hati-hati menangani masalah memuat halaman dengan "java". Ia memiliki kemampuan untuk mengatur pemuatan skrip yang tidak sinkron, yang meningkatkan kecepatan menampilkan sumber daya secara signifikan. Untuk melakukan ini, tambahkan parameter async atau defer ke kode html, seperti yang ditunjukkan di bawah ini:

< script async src= "//www.адрес_сайта/script.js" type= "text/javascript" >

< script defer src= "//www.адрес_сайта/script.js" type= "text/javascript" >

Apa perbedaan antara atribut async dan defer?

Kedua opsi berfungsi dengan pemuatan javascript asinkron. Perbedaannya terletak pada waktu tampilan dan awal eksekusi skrip.

Atribut async akan menjalankan skrip segera setelah dimuat penuh, tetapi akan melewati jendela pemuatan.

Saat Anda menyetel atribut defer di kode halaman, javascript akan mengantri di antara skrip lain tanpa mengganggu urutan eksekusinya. Ini akan mulai berfungsi hanya setelah halaman dimuat sepenuhnya, tetapi akan melewatkan acara DOMContentLoaded(objek dokumen).

Namun, atribut ini tidak berfungsi di beberapa browser modern. Misalnya, Internet Explorer tidak mendukung atribut async dan defer. Dan baris document.write tidak akan membantu apa pun di file script.js

Skrip khusus dari Google untuk pemuatan javascript asinkron

Google telah menjadi pemimpin dalam mengembangkan teknologi yang memungkinkan halaman situs web dimuat dalam waktu singkat. Selain itu, peringkat mesin pencari Google menurunkan situs dengan kinerja buruk, jadi perhatikan derit khusus dari webmaster Google, yang dirancang untuk memuat javascript secara asinkron.

Untuk menerapkan skrip ini, cukup ganti

pada

Kemudian kita sertakan file script extsrc.js

Kami mendapatkan kode berikut:

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

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

Metode ini cocok untuk semua browser tanpa kecuali dan bahkan berfungsi dengan document.write

Dalam kode html halaman kami membuat blok div kosong:

Dan di akhir kode html, sebelumnya, kita masukkan skrip untuk pemuatan asinkron:

Berikut adalah file atau skrip apa pun yang perlu dimuat.

// pindahkan ke posisi tampilan sebenarnya document.getElementById("script_block").appendChild(document.getElementById("script_ad"));

// tampilkan document.getElementById("script_ad").style.display = "block";

Harap dicatat bahwa dalam versi IE yang lebih rendah dari 6, unduhan ini tidak berfungsi. Namun saya tidak yakin pengguna seperti itu akan tetap ada - mereka adalah minoritas. Browser dan layanan lain menggunakan pengoptimalan javascript ini, yang lebih tercermin dalam kecepatan memuat sumber daya.
Dengan peningkatan kecepatan koneksi Internet dan peningkatan kekuatan tidak hanya desktop, tetapi juga perangkat seluler, halaman web menjadi lebih “berat”. Jumlah dan ukuran file yang terhubung bertambah: file JavaScript, file css, gambar, widget situs pihak ketiga, iframe. Saat ini, spesifikasi browser sedemikian rupa sehingga ketika memuat file js, rendering diblokir hingga skrip dijalankan. Browser modern akan mengurai dokumen di latar belakang dan mengunduh skrip dan gaya, namun rendering akan diblokir. Perbandingan pengaturan jaringan untuk berbagai browser dapat ditemukan di browserscope.org. Kami tidak dapat menghilangkan pemblokiran sepenuhnya, namun kami dapat mengoptimalkan bagian server dan klien aplikasi sehingga pemblokiran render memerlukan waktu sesingkat-singkatnya.
Solusi sisi server:
- Pindahkan file statis ke domain atau subdomain terpisah, sehingga meningkatkan jumlah koneksi browser secara bersamaan.
- Aktifkan kompresi file yang ditransfer (gzip)

Solusi untuk sisi klien:
- Kurangi jumlah permintaan.
- File cache di sisi klien menggunakan header Expires dan Etags.
- Gunakan CDN yang tersedia untuk umum (Google CDN, Yandex CDN). Jadi ada kemungkinan file dari CDN publik sudah tersimpan di cache browser.

Salah satu cara untuk mengoptimalkan kecepatan pemuatan situs adalah dengan memuat file secara asinkron, yang tidak menghalangi rendering.

Skrip pemuatan asinkron JavaScript:

(fungsi() ( var s = document.createElement("script"); s.type = "teks/javascript"; s.async = true; s.src = "URL File"; document.getElementsByTagName("head") .appendChild(skrip);

Jika JavaScript perlu dijalankan setelah seluruh halaman dimuat, termasuk konten, gambar, file gaya, dan skrip eksternal, maka event onload perlu ditambahkan ke loader.

If (window.addEventListener) ( window.addEventListener("load", async_load, false); ) else if (window.attachEvent) ( window.attachEvent("onload", async_load); )

Tapi ini adalah kasus yang terisolasi ketika mengunduh satu file diperlukan. Seringkali dalam praktiknya banyak file yang terhubung.

Namun ada kekurangan dalam implementasi ini - skrip akan dimuat dalam urutan acak dan, karenanya, akan dieksekusi secara acak pada waktunya. Skrip pemuatan asinkron ini ideal jika eksekusi file JavaScript tidak bergantung satu sama lain dan tidak bergantung pada DOM. Jika tidak, penggunaannya dapat menyebabkan kesalahan pada halaman atau hasil eksekusi yang tidak diharapkan. Untuk eksekusi berurutan, tetapi pengunduhan asinkron, Anda perlu menentukan async=false, maka file akan diunduh dalam urutan acak, tetapi dieksekusi secara bergantian.

Standar HTML 5 mendukung pemuatan JavaScript yang tidak sinkron. Hal ini dapat dilakukan dengan menambahkan kata kunci async atau defer. Misalnya:

Sebuah skrip yang terhubung dengan atribut defer akan dieksekusi tanpa mengganggu urutan eksekusi sehubungan dengan skrip lain dan eksekusinya akan terjadi setelah halaman dimuat dan diurai sepenuhnya, tetapi sebelum DOMContentLoaded dipanggil.

Script yang terhubung dengan atribut async akan dieksekusi sesegera mungkin setelah dimuat penuh, tetapi tidak menunggu hingga penguraian dokumen selesai dan sebelum objek jendela dimuat. Browser tidak menjamin bahwa skrip akan dieksekusi dalam urutan yang sama saat skrip tersebut terhubung.

RequireJS adalah modul pemuatan JavaScript. Dioptimalkan untuk browser, tetapi dapat digunakan di lingkungan lain seperti Node, Rhino.

Membutuhkan(["skrip"], fungsi(skrip) ( console.log("mulai setelah memuat skrip.js"); ));

extsrc.js adalah perpustakaan yang menjalankan skrip untuk dieksekusi setelah halaman dimuat dan ditampilkan kepada pengguna. Bekerja dengan benar dengan document.write.

yepnope.js - memungkinkan pemuatan file JavaScript dan CSS secara asinkron.

Yapnope([ "script.js", "style.css" ]);

Ternyata dalam praktiknya, mencapai pemuatan skrip JavaScript lintas-browser yang optimal yang tidak memblokir tampilan adalah hal yang sulit, dan terkadang tidak mungkin. Cara terbaik adalah menambahkannya ke akhir dokumen sebelum tag body penutup. Karena keterbatasan berbagai browser dan HTML itu sendiri, opsi pengunduhan yang tidak memblokir tampilan ini dapat dianggap yang paling sederhana.

Ada jalan keluarnya: letakkan baris Javascript di akhir dokumen html (oleh karena itu, baris tersebut akan dimuat setelah seluruh halaman digambar) dan hanya setelah itu konten blok akan ditampilkan di tempat yang tepat. Itu disebut. Semua proyek serius saat ini mencoba beralih ke teknologi pemuatan baru secepat mungkin. Apalagi caranya sangatlah mudah.

Ada beberapa pendekatan. Saya akan mulai secara berurutan.

skrip src= type= "teks/javascript" >

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

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

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

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 async akan dieksekusi sesegera mungkin setelah dimuat penuh, tetapi 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.

Sayangnya, mekanisme ini saat ini tidak berfungsi di semua browser (terutama IE). Juga tidak akan berfungsi jika ada baris document.write di file script.js.

Seperti yang diketahui semua ahli, Google memberikan perhatian khusus pada kecepatan memuat situs dan menurunkan situs yang lambat dalam hasil pencarian. 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" ) ) ;

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 pemuatan halaman web modern yang dipercepat.

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 semua jaringan periklanan menyediakan kemampuan untuk mengunduh 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 gunakan rekomendasi berikut. Ini pada dasarnya adalah pemuatan yang lambat. Karena panggilan sebenarnya ke skrip terjadi di bagian paling akhir halaman HTML, yaitu ketika semua konten halaman yang diperlukan sudah ada di layar.

Di tempat di halaman di mana Anda ingin menampilkan hasil JavaScript, 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 // memindahkannya ke posisi tampilan sebenarnya document.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 di browser yang sangat kuno seperti Internet Explorer 6. Yang untungnya, praktis tidak lagi ditemukan di komputer pengguna.

Sekarang saya akan memberi tahu Anda tentang metode menarik yang akan membantu Anda mempercepat situs WordPress Anda dengan memuat skrip secara paralel.

Untuk apa ini?

Ini sangat sederhana. Situs web modern adalah kumpulan berbagai macam skrip, tag, cuplikan, gaya, font, dan lainnya. Seperti yang Anda pahami, semakin banyak “barang”, semakin lama waktu yang dibutuhkan situs Anda untuk memuat. Sedangkan untuk JavaScript, itu masalah yang berbeda. Pernahkah Anda memperhatikan kusen seperti itu ketika halaman tampaknya telah dimuat, tetapi tab menunjukkan bahwa halaman tersebut masih dimuat? Ini terjadi ketika skrip tertentu belum dimuat sampai akhir. Tidak apa-apa, terkadang halaman benar-benar menganggur sampai skrip yang sama, yang tampaknya tidak terlalu penting, dimuat. Dan pengguna Anda mungkin tidak memiliki cukup kesabaran.

Konsep ini sangat berlawanan dengan pemuatan sinkron, yang merupakan skrip biasa seperti:

Panggilan skrip asinkron terlihat seperti ini:

Bagaimana cara mengotomatiskan prosesnya?

Jelas jika Anda menghubungkan skrip secara manual dan jumlahnya tidak banyak, maka Anda dapat melakukannya secara manual, cukup dengan menambahkan atribut yang sesuai ke kode panggilan. Tetapi bagaimana Anda bisa mengotomatiskannya jika, misalnya, Anda memiliki WordPress dengan banyak skrip yang juga dipanggil secara otomatis?

Temukan file function.php tema Anda yang sudah familiar dan masukkan kode berikut di sana (misalnya, di akhir):

Apa yang bisa saya tambahkan sebagai kesimpulan? Skrip ini mungkin tidak cocok untuk semua orang, karena siapa yang tahu skrip apa yang telah Anda sambungkan, jadi instal dan bereksperimen. Tidak ada kerugian dari skrip semacam itu, kecuali mungkin ketidakcocokan dengan situs tertentu karena spesifiknya. Ini adalah langkah kecil menuju optimalisasi besar situs web Anda.