, Archive for Agustus 2016

Render javascript yang Memblockir

by Bambang Hermawanto 03.08 0 komentar


Apa yang dimaksud render yang memblokir?
  • Render artinya loading, jadi sesuatu yang memblokir render maksudnya bahwa javascript yang menghalangi halaman dari loading cepat. 
Catatan: Artikel ini adalah tentang hal yang membuat blokir javascript, tidak menjadikan memblokir css (yang merupakan hal yang sama sekali berbeda). cara mengeliminasi css pemblokir render.

Javascript yang memblokir loading/render

Google merekomendasikan 1 untuk menghapus atau menunda javascript yang mengganggu dalam loading konten paruh atas halaman web Anda. Google merekomendasikan 1 untuk dihapus atau menunda javascript yang mengganggu konten paruh atas pada halaman web anda.                                                                                
above and below the fold

Praktik ini telah lama digunakan oleh orang-orang yang menjadi pagespeed, tetapi baru bagi sebagian besar webmaster dan desainer yang sedikit dapat membingungkan, dan bahkan  mungkin tampak mustahil untuk dilakukan. Hal ini tidak hanya mungkin tapi juga diperlukan untuk menjadi warga negara web yang baik dan bahkan jika Anda tidak peduli tentang pengguna melalui koneksi yang lambat,  berarti anda peduli tentang peringkat  di Google. Peringkat Anda di Google akan beresiko jika tidak mengoptimalkan web Anda. Secara khusus, jika Google melihat bahwa halaman web anda tidak memuat dengan baik diperangkat tertentu (ponsel, ipad,  dll) mereka tidak akan menyertakan anda dalam hasil karena Google tidak ingin mengirim pengguna untuk halaman yang lambat atau halaman yang menyebabkan pengguna terlalu lama menunggu konten dimuat.   

Bagaimana untuk mengenali javascript yang  memblokir render

Anda perlu tahu apa halaman anda sedang loading. Ada beberapa cara untuk mengatasi hal ini. Saran saya anda harus lihat apa halaman anda sedang memuat dengan menggunakan alat Pagespeed tool  untuk mereview isu-isu yang ada pada halaman anda secara spesifik file-file yang berlaku dalam perenderan, dapat menggunakan alat
Google pagespeed insights tool. Alat ini akan menceritakan dwngan tepat tetntang file-file yang memblokir halaman Anda.

Cara menghapus javascript yang memblokir render

Pelakunya paling umum adalah javasrip, dan contoh yang benar-benar hebat untuk ini adalah jQuery yang merupakan file javascript yang digunakan pada sebagian besar halaman web. Hal ini sangat mungkin anda menggunakanya ( mengetahui alat). File javascript ini agak besar, sebenarnya mungkin itu sangat baik menjadi file terbesar pada halaman web anda yang sedang loading untuk membuat halaman anda. jQuery adalah file javasceipt populer,yang sering digunakan untuk melakukan hal-hal yang sangat kecij, seperti fade in atau gambar yang keluar misalnya. Tidak biasanya ada alasan untuk  memuat jQuery sebelum anda memuat halaman web anda namun sebagian besar dari halaman  melakukannya. Jika anda menggunakan jQuery untuk merender di paruh bawah maka tidak ada alasan untuk memuatnya sebelum di perlukan.Jika anda  memuat sebelumnya, maka anda tidak mengikuti pedoman Page speed ini dan anda membuat pengguna menunggu.
Untuk memperbaiki ini anda harua mengubah mana panggilan untuk yang jQuery lakukan. Hal ini dilakukan  dalam html halaman web anda. Cara yang sering website saat memanggil jQuery adalah pada dokumen jead seperti yang ditunjukan dibawah ini. 
.
<head>
<meta name=description content="description here."/>
<title>title here</title>
<style>
styles here
</style>
<script src="jquery.js">
</script>
</head>
Atas flip berarti apa yang pengguna melihat pada layar. Layar dekstop atau apapun, layar ponsel, ipad,komputer dekstop atau apapun yang pengguna lihat halaman web anda. 

Panggilan untuk jQuery (file agak besar) dibuat dan harus di-download oleh browser sebelum hal lain ditampilkan pada halaman. Ini buruk. Ini benar-benar benar-benar buruk jika hal yang Anda gunakan jQuery bahkan tidak diperlukan untuk konten paruh atas seperti yang ditunjukkan pada gambar di atas.

Sebuah parsial sering digunakan untuk solusi parsial 

Sering panggilan untuk jQuery akan dihapus dari dokumen head dan pindah ke tempat lain di bagian bawah halaman, karena tidak diperlukan sampai saat itu. Sayangnya hal ini tidak cukup.
<!-- the things you don't need jquery for (most of your page) is here -->
<script src="jquery.js">
</script>
<!-- the thing you need jQuery for is here -->

Solusi Nyata 

Untuk menghapus javascript dari jalur render akan ditunda sampai setelah beban halaman. 

Untuk mengikuti arahan ini anda perlu tahu baik, apa halaman anda memuat dan mengapa memuatnya

Apa pun yang memanggil (call page web anda ,biaya pengguna anda lebih banyak waktu menunggu mereka. Jika Anda tidak tahu apa yang meminta halaman web anda perbuat, Anda harus mulai mengetahui. JQuery adalah contoh yang baik karena sangat umum dan seperti file besar (sekitar 100kb). Skenario umum semua adalah bahwa halaman web kecil yang hanya 10kb memanggil file besar seperti jQuery (yang 10 kali lebih besar dari halaman web itu sendiri) untuk melakukan beberapa tugas biasa seperti fade dalam beberapa kata di halaman. Anda mungkin berpikir "hey kelihatan keren!" ketika Anda melihatnya, tetapi apakah itu cukup tenang untuk membuat pengguna anda menunggu 10 kali lebih banyak waktu untuk melihat halaman anda? efek yang sama persis bisa terjadi dengan css atau javascript yang lebih kecil. Menggunakan jQuery sebagai contoh, tapi bukan berarti itu jelek. Hal yang sama bisa dikatakan bahkan javascript  biasa seperti Google analystic, atau javascript pihak ketiga yang menunjukan widget sosial atau bahkan tombol-tombol facebook, Twitter, yang banyak disukai orang.       

 Mengetahui apa yang halaman Anda gunakan? dan keputusan apa yang layak membuat pengunjung anda menunggu.

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Cara Menunda Loading Jvascript

by Bambang Hermawanto 08.41 0 komentar

Bagaimana Cara menunda loading javascript?

Benar-benar menunda javascript berarti pemuatan atau parsing javascript itu hanya dimulai setelah isi halaman telah dimuat (Berarti itu tidak akan mempengaruhi PageSpeed ​​atau jalur render kritis).

  1. Menggunakan "onload" event kita memanggil sebuah external javascript.
  2. External javascript tidak akan loading sebelum konten sudah dimuat.
  3. Kemudian External javascript akan berjalan dan mengisi halaman.
webpage and javascript file

Penjelasan

Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda sakit kepala yang mencoba menemukan solusinya.   
Banyak orang mengatakan "hanya menggunakan defer" atau "hanya menggunakan async" atau yang lain mengatakan "hanya menempatkan javascript di bawah halaman" namun tidak satupun dari mereka memecahkan masalah sebenarnya yang memungkinkan  halaman web sepenuhnya memuat dan kemudian (dan kemudian hanya) memuat javascript eksternal. Mereka juga akan membuat masa lalu bagi anda  dengan " defer  loading javascript". Peringatan yang anda dapatkan dari Google speedpage. Solusi ini akan.

Script untuk memanggil file javascript eksternal.  

Kode ini ditempatkan di html sebelum kode </body> untuk menyoroti file javascript eksternal. 
   
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Apa yang bekerja disini? 

Kode ini mengatakan tunggu dokumen selesai memuat kemudian  memuat file javascript "defer.js".

Intruksi sepesifiknya:

1. Copy kode diatas.
2. Paste code ke HTML Anda sebelum  </body> tag (dekat file HTML bagian bawah).
3. Ganti "defer.js" Dengan nama file javascript eksternal milik Anda.
4. Pastikan path ke file Anda dengan benar.
Contoh:
jika Anda hanya menempatkan "defer.js", maka file "defer.js" harus dalam folder yang sama dengan file HTML Anda.

Apa yang dapat Anda gunakan kode ini (dan apa yang tidak bisa) 

Kode ini tidak akan memuat file javascript eksternal secara spesifik hingga dikonten lengkap termuat. Oleh sebab itu, tidak harus menempatkan setiap javascript disana, yang diperlukan untuk memuat halaman dengan benar. Anda harus memisahkan javascript menjadi dua kelompok, satu kelompok js yang perlu memuat dan js yang melakukan hal-hal setelah beban halaman (seperti mencari peristiwa klik). Javascript yang bisa menunggu sampai setelah beban halaman harus masuk  ke dalam satu file eksternal call yang di atas. 
Sebagai contoh: Pada halaman ini file yang digunakan untuk menunda google analystic viglink, dan google manambah lencana tambahan di footer. Tidak ada alasan untuk memuat file-file ini untuk membuka halaman awal karena tidak satupun dari mereka yang di perlukan untuk memuat konten paruh atas. Anda mungkin memiliki jenis yang sama dari apa yang ada pada halaman web anda. Halaman anda itu bagaimana, dan Apakah anda membuat pengguna menunggu untuk memuat halaman web anda sebelum menunjukkan konten?    
. 

Mengapa metode lain tidak bisa bekerja?
Metode membuat inline, menempatkan secript dihalaman bawah, menggunakan "defer" atau menggunakan "async" semua tidak mencapai tujuan dengan membiarkan beban halaman pertama kemudian memuat JS dan mereka pasti tidak bekerja secara universal dari lintas browser.    

Ada apa dengan itu semua?

Itu penting karena Google menilai kecepatan halaman sebagai faktor peringkat dan  karena pengguna ingin halaman web loading cepat. Hal ini penting juga untuk seo mobile Anda. Google mengukur halaman sebuah web dari speedfrom pada saat itu disebut, ketika webpage awalnya dimuat. Berarti kita memprioritaskan untuk sebuah acara tentang kecepatan halaman web ketika diklik. Bahwa penilaian Google pada awal buka halaman anda (dan jangan lupa pengguna menunggu saat membuka awal webpage untuk memuat). Google secara aktif mempromosikan dan merekomendasikan juga memprioritaskan konten paruh atas sehingga mendapatkan sumber (js, css, gambar, dll) dari jalur render kritis yang diusahakan betul. Jika itu membuat bahagia, dan itu membuat google bahagia, mungkin harus melakukanya.   panduan optimasi seluler.          

Point Dari Kunci
Prioritas besar harus ditempatkan pada pemberian konten ke pengguna sesegera mungkin. Kami belum melakukan itu dengan cara kita memperlakukan javascript kami. Seorang pengguna tidak perlu menunggu untuk melihat konten mereka karena beberapa script yang cenderung melakukan sesuatu untuk di bawah konten berlipat-lipat. Tidak peduli seberapa dingin footer Anda, benar-benar ada alasan bagi pengguna yang mungkin tidak pernah meggulir ke bawah untuk footer Anda agar memuat javascript yang membuat footer Anda keren.


Anda bisa menggunakan javascript usage tool untuk mengetes sejauh mana javascript anda bekerja di halaman web.

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Langganan: Postingan (Atom)