Kecepatan Situs dan Javascript Asinkron

asynchronous

Meskipun saya melakukan banyak pengembangan, saya tidak mengklasifikasikan diri saya sebagai pengembang sejati. Saya dapat memprogram dan memindahkan barang-barang di sekitar halaman dan membuatnya bekerja. Pengembang sejati memahami cara mengembangkan kode agar dapat diskalakan, tidak menghabiskan banyak sumber daya, memuat dengan cepat, mudah dimodifikasi nanti, dan tetap berfungsi.

Titik sulit yang ditempatkan pemasar adalah keduanya memiliki situs web yang sangat cepat dan tetap menggabungkan integrasi dan elemen sosial yang dapat membuat ketergantungan pada seberapa cepat situs Anda akan dimuat. Salah satu contohnya adalah tombol sosial. Di Martech, kami memiliki tombol sosial di setiap halaman situs. Jadi… jika suatu hari sumber daya Facebook dimuat lambat, itu memperlambat situs kami. Kemudian tambahkan Twitter, Pinterest, Buffer, dll. Ke situ dan peluang situs Anda untuk memuat dengan cepat berkurang menjadi hampir tidak ada.

Itu dikenal sebagai pemuatan sinkron. Anda harus menyelesaikan memuat satu elemen sebelum Anda memuat elemen berikutnya. Jika Anda dapat memuat item secara asinkron, Anda dapat memuat item tanpa ketergantungan satu sama lain. Anda dapat secara drastis meningkatkan kecepatan situs Anda dengan memuat elemen secara asinkron. Masalahnya adalah bahwa skrip out-of-the-box yang diberikan perusahaan ini kepada Anda hampir tidak pernah dioptimalkan untuk menjalankan asynchronous.
asynchronous

Anda dapat melihat apa yang memengaruhi kecepatan halaman Anda dengan menjalankan pengujian di Pingdom:
pemuatan halaman pingdom

Javascript asinkron memungkinkan Anda untuk menulis kode yang memberi tahu elemen untuk dimuat setelah halaman tersebut sepenuhnya dimuat. Tidak ada ketergantungan! Jadi, halaman Anda dimuat dan setelah selesai, skrip dimulai yang memuat elemen lain - dalam hal ini tombol sosial kita. Jika Anda seorang pengembang, Anda dapat membaca artikel yang bagus, Pemuatan Lambat Javascript Asinkron.

Berikut cuplikan cara melakukannya dengan benar dari Emil Stenström:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('load', async_load, false);}) ();

Hasilnya adalah jika integrasi pihak ketiga ini tidak aktif atau berjalan lambat, tidak akan pernah memengaruhi konten halaman inti Anda untuk muncul. Jika Anda melihat sumber halaman kami, Anda akan melihat bahwa saya memuat semua skrip sosial tambahan yang menggunakan teknik ini. Proses meningkatkan detik kecepatan situs kami - dan tidak tersedak selama pemuatan. Kami belum mengubah semua dependensi eksternal kami menjadi Javascript asinkron, tapi kami akan melakukannya.

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.