, MEMAHAMI DAN OPTIMASI WEB - SEO speed MEMAHAMI DAN OPTIMASI WEB: SEO speed - All Post
Tampilkan postingan dengan label SEO speed. Tampilkan semua postingan

Render javascript yang Memblockir


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.

Cara Menunda Loading Jvascript

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.

Menghindari CSS @import



Apa CSS @impor itu?

Ini adalah metode mengimpor satu file css dari dalam file css lain. Sepertinya ini ...

@import url ("style.css")

Mengapa tidak menggunakannya?

Metode @import mengambil file CSS yamg menciptakan beberapa masalah yang mempengaruhi kecepatan halaman Anda. Masalah terbesarnya adalah bahwa hal itu menyebabkan file untuk memuat berurutan (satu harus menunggu untuk yang lain) bukan secara paralel (pada waktu yang sama). Ini termasuk limbah dan perjalananya berputar-putar dan membuat beban halaman web Anda lebih lambat.

Bagaimana menghindari css @ impor?

Lihat di file HTML dan CSS Anda dan cari panggilan @ impor. Anda juga dapat menggunakan alat pengiriman CSS secara online yang akan mendeteksi mereka.
Sekali lagi, mereka terlihat seperti ini dan biasanya akan menjadi dekat bagian atas file.

@import url ("style.css")

Daripada memanggil file css dengan menggunakan metode impor lebih baik untuk  tambahan menjaga css saja, tambahan hanya dalam satu file (copy dan paste css diimpor ke dalam file css asli). Jika Anda tidak dapat melakukan itu untuk beberapa alasan, termasuk file-file css dari file html menggunakan kode berikut ...

<Link rel="style.css" href = "style.css" type =text/css">

Pastikan untuk mengganti "style.css" dengan lokasi dan nama file CSS Anda.

Periksa semua file CSS Anda

Tip: Gunakan alat CSS untuk mengetahui apakah Anda memiliki @imports pada halaman Anda

Banyak situs memiliki beberapa file CSS (Anda harus mencoba untuk menggabungkan file-file CSS). Jika Anda memiliki lebih dari satu file CSS, memeriksa setiap file untuk impor.

Jika file CSS panggilan melalui metode @ impor, sangat buruk untuk kecepatan halaman. Hal ini menambah langkah-langkah tambahan untuk browser dalam memuat halaman web Anda, menyebabkan browser untuk men-download, mengurai, dan kemudian pergi keluar dan mendapatkan file CSS berikutnya sebelum mulai menampilkan halaman Anda.
Hal ini dapat dihindari dengan menggunakan metode link di atas.

Cara terbaik adalah jika tidak ada @imports digunakan sama sekali.

Lihat: cara optimalkan css 

Cara Memanfaatkan Cache-Control di blog

Apa yang dimaksud dengan Cache-Control?
  • Cache-control adalah  header HTTP yang mendefinisikan sejumlah waktu dengan menambahkan cara cache file yang disimpan.


Artikel ini akan membahas bagaimana menggunakan cache-control value, dan bagaimana mendapatkannya supaya benar-benar bekerja di website.

 Kebanyakan situs web modern loading cwpat dengan mengguna kan cache-control untuk memanfaatkan browser caching mereka. 

 Menggunakan Cache-Control

Isi dari panduan ini : 

 • Cache-Control basic 
• Defining time (max-age) 
• Mendefinisikan cache (public, private,                  dll). 
• Memilih tipe berkas.
• Menambahkan head. 
• .htaccess
• Apache confiq
• Nginx
• Litepeed

 Dasar-dasar Cache-Control

Header cache-control basic mendefinisikan jumlah waktu yang di cache bahwa cara caching harus dilakukan dengan. 
Cache-Control: max-age=2592000, public
Ketika sebuah file diakses oleh browser header HTTP juga diambil. Cache-Control disertakan browser dan akan menghormati nilai-nilai yang ditemukan disana. Jika browser melihat bahwa file harus di cache selama lima menit  itu akan tertinggal di cache browser selama 5 menit dan file yang tidak perlu diambil jika hal itu disebut lagi. 


a cached file being used



 Sebagai contoh mungkin gambar logo Anda. Jika pengunjung datang ke salah stu halaman web Anda, itu akan mendownload gambar logo. Kemudian jika pengguna pergi ke halaman web lain disitus Anda, maka gambar logo tidak akan didownload lagi. Sebaliknya versi cache akan digunakan disini. 

Apa itu max-age?

 • "Max-age" mendefinisikan sejumlah file waktu yang harus ada di cache.
• "max-age" respon directive  menunjukan bahwa respon tersebut akan dianggap basi setelah umurnya melewati dari batas yang ditentukan (dengan detik). 

 • Max age pengguna 

 Bagian max-age header terlihat seperti ini: 

max-age=2592000
Max-age dinyatakan dalam detik. Umunya nilai max-age adalah:

* Satu menit: max-age=60
* Satu jam: max-age=3600
* Satu hari: 86400
* Satu bulan: max-age=2628000
* Satu tahun: max-age=31536000

 Bila menggunakan max-age untuk menentukan cache sering kali orang harus mempertimbangkan jenis file dan bagaimana ia digunakan. Kami akan membahas ini secara lebih rinci nanti dalam artikel ini.

 Caching secara langsung (direct caching)

 Bagian direct disimpan di cache header diatas terlihat seperti:
public
Header cache-control atas menyatakan "publik". Ini berarti bahwa file cache ini dapat terbuka (berbeda dengan file yang private).  Secara default, banyak hal yang disimpan (di cache) tapi ada memang saat-saat ketika perilaku ini tidak akan dianjurkan untuk dokumentasi yang sensitif sifatnya, keamanan, pengguna konten tertentu, dll.

 Posting disini kami akan mencakup tiga arahan utama yang ditawarkan oleh cache-control:
~public
~private
~no-store

 Public

 "Public" pada dasarnya secara langsung mengatakan bahwa siapapun bisa di cache disini dari tingkat manapun. 
Spesifikasi resmi mendefinisikan sebagai berikut:

"PubliC" respon direktif yang menunjukkan bahwa cache setiap kemungkinan menyimpan respon, bahkan jika respon biasanya akan non-saved di cache atau disimpan di cache hanya dalam cache pribadi.
Pada dasarnya, jika Anda ingin sesuatu cache untuk alasan kecepatan halaman, dan itu tidak pribadi atau sensitif maka anda harus menggunakan direktif waktu publik.

 private

 Direktif private itu berarti khusus untuk satu orang. Sebuah contoh akan menjadi halaman Twitter. Ketika Anda pergi ke Twitter Anda melihat satu hal dan orang lain pergi ke url yang sama melihat sesuatu yang lain. Meskipun informasi pada halaman yang umum dan tidak sensitif, itu adalah khusus untuk satu orang. (Catatan: Twitter hanyalah sebuah contoh konseptual, saya tidak tahu apa yang mereka gunakan atau bagaimana mereka menggunakannya)

 Spesifikasi resmi mendefinisikan sebagai ...


"Private" respon direktif menunjukkan bahwa pesan respon dimaksudkan untuk satu pengguna dan TIDAK HARUS disimpan oleh shared cache. Cache pribadi MUNGKIN menyimpan respon dan menggunakannya kembali untuk permintaan di kemudian, bahkan jika biasanya akan merespon
Jadi jika saya masuk ke twitter.com dan kemudian refresh hit beberapa hal akan di cache untuk saya pribadi bukan Anda. Jika Anda pergi ke twitter.com dan klik refresh beberapa hal yang akan di-cache untuk Anda tetapi tidak bagi saya.

 No-store

 no-store directive adalah indikasi kuat bahwa sesuatu seharusnya tidak disimpan dalam mekanisme caching apapun.

 Spesifikasi resmi mendefinisikan sebagai berikut: 

"No-store" respon direktif menunjukkan bahwa cache TIDAK HARUS menyimpan bagian apapun baik permintaan langsung atau respon. direktif ini berlaku untuk kedua cache pribadi dan bersama.

Sekali lagi harus saya catat bahwa ini tidak benar-benar mengamankan apapun.

 File types 
Dua pertanyaan bagi webmaster yang harus ditanyakan adalah:

 •Apa jenis file yang harus saya cache?
•Berapa lama saya harus mencache  untuk file itu?

 Apa jenis file yang harus di-cache?

 Sebagai panduan yang sangat luas dan umum, akan ditunjukan jenis file-file sebagai berikut:

 ~Gambar: (png, jpg, gift, dll)
   gambarbtidak benar-benar berubah 
   sehingga mereka dapar memiliki          jangka waktu cache yang lama (1        tahun).
~CSS:  file css cenderung berubah          lebih sering daripada file lainya,    
   jangka waktu yang lebih pendek,          mungkin diperlukan (1 minggu atau   1 bulan ).
~ico (favicon) - jarang berubah               (setahun)
~ js - sebagian besar javascript tidak       sering berubah sehingga waktu            cache lagi biasanya satu bulan              (mungkin).

 Hal yang perlu diperhatikan

 Hanya anda yang dapat menentukan apa yang terbaik untuk situs anda dan sumber daya situs anda. Satu hal yang saya akan sebutkan bahwa jika akan menyebutkan bahwa jika Anda mengubah sesuatu (seperti file CSS) dan file yang di-cache, Anda harus mempertimbangkan untuk mengubah nama file CSS yang diperbaarui itu dilihat oleh semua pengguna. 

 Ini disebut URL fingerprintIng
     
Untuk mendapatkan (no cache) dari file sumber daya yang segar mungkin dengan memiliki nama yang unik. Sebuah contoh jika file  css akan kita  beri nama "main.css" kita beri nama sebagai gantinya. Kain kali kita mengubahnya dengan "main_2.css". Hal ini berguna untuk file yang terkadang berubah.
Bagaimana menambahkan Cache-Control untuk situs Anda.

 Cara untuk menambahkan Cache-Control untuk file Anda adalah cara yang sama Anda menambahkan header apapun ke server Anda. Segala sesuatu yang telah kita bicarakan di halaman ini adalah tentang Cache control header. 
Jadi bagaimana cara menambahkannya? 
Hal itu tergantung pada server web Anda. Kami akan menjalankan skenario yang paling umum berikut ini:
File  .htaccess
Kebanyakan orang membaca file ini memungkinkan untuk menggunakan file  .htaccess dengan menambahkan  ke header.
Contoh kode untuk file .htaccess:
Kode yang paling mendasar untuk menetapkan header cache-control melalui file .htaccess yaitu:
Header set Cache-Control "max-age=2628000, public"
Namun kode diatas tidak memberikan kemampuan apapun untuk memberikan petunjuk caching yang berbeda untuk jenis file yang beda juga. 
Untuk menerapkan cache-control header untuk jenis file yang berbeda kita akan menggunakan... 

# One month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
Kode diatas oada dasarnya mengatakan...

 "Jika jenis file css, jpeg, jpg, png, gif, js atau ico kemudian menerapkan itu ke header" 

 Sekarang katakanlah kita ingin membuat cache-gambar selama satu tahun, tapi tetap file css dan js di cache selama satu bulan.

 Kemudian kami akan menempatkan berikut ini ke dalam file .htaccess :

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

 Di atas kita memiliki dua blok kode, satu untuk gambar dan satu untuk file css dan js. Ini hanya untuk menggambarkan bahwa Anda dapat memiliki beberapa blok dalam file  .htaccess. 

 Apache config http.conf

 Jika Anda memiliki akses dan tahu apa yang Anda lakukan, pengaturan header Anda melului file konfigurasi yang cepat dan direkomendasikan.
Contoh kode diatas seperti bagaimana .htaccess itu bekerja.

 Gunakan filesMatch dan mengatur header untuk menciptakan petunjuk khusus untuk jenis file Anda (sekali lagi, contoh kode  .htaccess diatas harus bekerja dengan baik).

 NGINX

 Menggunakan expires directive Anda dapat menambahkan instruksi cache server atau lokasi blok. 

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
Kode diatas adalah untuk setiap jenis file yang tercantum di baris pertama. Jenis berkas ini di tambahkan atau dihapus. Ada juga beberapa blog yang bisa untuk fine tuning jenis file yang berbeda.

 Litespeed

 Jika Anda memilki lisensi multi cpu,maka anda akan mempunyai akses ke cache directive lebih lanjut melalui konfigurasi online.
Jika Anda memiliki lisensi multi cpu maka Anda perlu menggunakan file  .htaccess untuk Cache-control. Petunjuk di atas untuk bekerja  .htaccess untuk server Litespeed.

 Terkait:
3 Langkah cepat untuk membantu anda dalam pemasaran.

Membuat perpustakaan external javascript

Membuat  dan referensi perpustakaan external java script 

Kebanyakan "mainstream" bahasa pemrograman seperti C atau Java dukungan "library code", di mana seorang programmer dapat menyimpan sepotong kode umum yang digunakan sebagai file library dan referensi dari program utama. Nah, JavaScript mendukung perpustakaan eksternal juga, dalam bentuk file Js.


 Sintax Untuk Membuat Perpustakaan Javascript.

 Semua perpustakaan JavaScript terdiri dari dua bagian:

 √ JavaScript eksternal itu sendiri, yang hanya mengandung file teks dengan kode JavaScript yang, disimpan sebagai file js.

 √ Sebuah <script> tag referensi file JavaScript eksternal dan didefinisikan di halaman (s) yang menggunakan perpustakaan.

 Mari kita berpura-pura bahwa kita baru saja membuat kode hebat yang tertulis keluar pada tanggal hari ini:
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function todaydate(){
    var today_date= new Date()
    var myyear=today_date.getYear()
    var mymonth=today_date.getMonth()+1
    var mytoday=today_date.getDate()
    document.write(myyear+"/"+mymonth+"/"+mytoday)
}
</script>

Menggunakan kode di atas, memungkinkan untuk membuat perpustakaan dari itu, sehingga beberapa halaman semua dapat menampilkan tanggal bagus tanpa harus secara fisik menyertakan kode di atas pada halaman tersebut.

 Langkah 1: 
Buka editor teks Anda (seperti notepad), ketik kode di atas, dan simpan sebagai file individu dengan js extension (yaitu: displaydate.js). Sebuah perpustakaan eksternal harus mencakup seluruh script, minus tag skrip sekitarnya.

 Langkah 2: 
Pada semua halaman yang menggunakan perpustakaan di atas, membuat referensi untuk menggunakan kode di bawah ini. Ini terdiri dari tag <script> dengan properti src opsional termasuk didalam:

 Syntax untuk membuat perpustakaan javascript 

Diisi semua dari kedua perpustakaan javascript itu:l
  • "external JavaScript" itu sendiri,yang terdiri dari text simpel dari kode, yang disimpan sebagai file .js 
  • Sebua <script> tag referensikan file external javascript dan diterapkan pada halaman (s) yang menggunakan perpustakaan.
Demi diskusi kita, mari kita berpura-pura bahwa kita baru saja membuat kode hebat yang tertulis keluar pada tanggal hari ini:
1
2
<script src="displaydate.js" type="text/javascript">
</script>
Dengan memasukan referensi di atas, browser Anda sekarang akan men-download kode yang tersimpan di dalam displaydate.js, dan menjalankannya sebagai js jika kode itu secara fisik diketik ke halaman. Maka file library tidak harus disimpan di direktori yang sama dengan halaman menggunakannya. Bahkan, kita dapat referensi perpustakaan yang ada di domain!
1
2
<script src="http://www.yahoo.com/displaydate.js">
</script>
Sementara alasan terbesar untuk menggunakan perpustakaan JavaScript jelas (memungkinkan Anda untuk dengan mudah mendistribusikan satu kode untuk digunakan pada banyak halaman), alasan sekunder. Sebuah perpustakaan JavaScript, bila digunakan pada beberapa halaman, sebenarnya lebih efisien daripada langsung menanamkan kode di dalam perpustakaan pada setiap halaman. Setelah browser bertemu dengan perpustakaan pertama kali, maka menghemat kode yang berisi dalam cache. permintaan berikutnya untuk perpustakaan di halaman lain akan menghasilkan perpustakaan yang dimuat dari cache, atau kecepatan tinggi!

 Lihat juga
Cara memanfaatkan cache control di-blog.
Langganan: Postingan (Atom)