Memilih Lokasi CDN jQuery - Artikel ini saya buat karena saya tidak bisa mengakses salah satu blog sahabat. Permasalahan yang timbul adalah lamanya proses pemanggilan code jQuery, sampai 5 menit saya tunggu tidak kunjung terbuka.jquery

Dari permasalahan di atas, tentunya sobat harus pandai memilih lokasi penyimpanan jQuery. Ada beberapa CDN jQuery yang bisa sobat gunakan saat ini (ketika artikel ini dibuat, jQuery terbaru adalah versi 2.0.2), diantaranya :

1. Google (Sangat baik / stabil)
https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js
2. Microsoft (Baik)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js
3. CDNJS (Sedang)
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js
4. jQuery (Kurang)
http://code.jquery.com/jquery.latest.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js
5. Yandex (Sangat Kurang)
http://yandex.st/jquery/2.0.2/jquery.js
http://yandex.st/jquery/2.0.2/jquery.min.js

Dari ke lima lokasi CDN tersebut, lokasi yang sering digunakan oleh sahabat adalah Google dan jQuery. Saya pribadi merekomendasikan untuk menggunakan Lokasi CDN Google, karena lebih stabil.

Ada sahabat yang menyatakan lebih baik menggunakan http://code.jquery.com/jquery.latest.js karena tidak usah update script dan otomatis update. Saya setuju dengan pendapat tersebut, namun saat ini jquery sering down, akhirnya blog tidak bisa dibuka. Bagi sahabat yang lebih suka menggunakan http://code.jquery.com/jquery.latest.js, saya sarankan membuat jQuery CDN Failover.

jQuery CDN Failover

CDN Failover adalah metode pengalihan lokasi framework jQuery dari satu host menuju ke host alternatif (cadangan). Metode failover sangat bermanfaat ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah. Jika kita tidak menggunakan metode pengalihan (failover) ketika host utama mengalami kendala maka hal tersebut akan mempengaruhi kondisi situs yang kita kelola, apalagi jika situs tersebut menggunakan jQuery Ajax, jelas situs akan down total atau tidak bisa diakses. Hal ini sangat merugikan dan akan mempengaruhi kenyamanan pengunjung situs, ujung-ujungnya para pengunjung enggan kembali lagi untuk menulusuri situs. Mencegah hal tersebut maka kita perlu menyediakan cadangan framework agar masalah down host utama bisa teratasi. CDN Failover adalah cara terbaik untuk mengatasi masalah diatas.

CDN Failover Metode 1
Script dibawah ini merupakan yang metode failover yang paling sederhana. Script akan melakukan pemeriksaan ketersediaan framework, jika ternyata framework tidak berhasil di-load, maka lokasi framework dialihkan.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript"> 
if (jQuery) {  
 // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
 // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
}
</script>

CDN Failover Metode 2
Metode ke-2 ini hampir mirip dengan metode ke-1, perbedaannya hanya pada statement pemeriksaan keadaan. Script hanya akan melakukan pengalihan jika keadaan halaman tidak mampu me-load framework, jika berhasil maka script tidak akan menjalankan perintah pengalihan lokasi framework.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') {  
    // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>'); 
} else {
    // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>

CDN Failover Metode 3
Metode ke-3 ini merupakan metode yang banyak digunakan oleh situs-situs jejaring sosial media dalam memanggil framework-nya. Metode ini sebenarnya merupakan pengembangan dari CDN Failover metode ke-2.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript">  
 if (typeof jQuery === 'undefined') {  
    var e = document.createElement('script');  
    e.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js';  
    e.type='text/javascript';  
    document.getElementsByTagName("head")[0].appendChild(e);  
 }
</script>

Semoga bermanfaat....

Resource : http://modification-blog.blogspot.com/2012/07/jquery-cdn-failover.html

65 komentar

wah thanks ya kang buat infonya :)

Balas

Hihih pernah liat dulu :D

Balas

gak ngerti jquery kang,,,ngikut aja :P

Balas

ternyata ngaruh juga ya lokasi penyimpanan JQuery. Pantesan aja blog saya terasa lola. Saya pakai versi ini, kira-kira JQuery ini diganti http://code.jquery.com/jquery.latest.js dengan JQuery lain, enaknya pake yang mana + cocok buat blog saya ?

Balas

Gak tau mas ... :D Belum paham juga saya , :)

Balas

jquery latest artinya jquery yang terbaru, jadi saat jquery update Versi lagi maka otomatis script jquery.latest akan update kode juga, dan jquery versi baru tentunya kodenya lebih banyak makanya blog makin lambat,

Kita hanya perlu memilih salah satu versi jquery aja mulai dari 1.3.2 sampe yang terbaru,

Balas

wah kalo saya tinggal pake nih kang :d
tapi alhamdulillah nambah ilmu lagi kang...

Balas

googleapis memang terkenal paling kenceng kecepatan akses nya. Itu sebabnya lebih sering digunakan oleh website berdomain berbayar, bahkan forum & website social network yang sudah punya nama pun masih pakai CDN jquery Google ini.

Balas

Aku buka blog yang ada code.jquery blablablabla kok gak bisa kebuka ya mas ... padahal buka blog saya dan yang lain lancar ... masalahnya dimananya yah mas kira2 ??

Oiya maf mas sedikit OOT, mau tanya penjelasan dari padding dan margin pada CSS itu apa yah mas ?? atau kalau ada yang bisa kasi tau mohon dijawab ya ..

Terimakasih .. :)

Balas

Akhirnya dijelaskan juga...hehehe...makasih kang ilmunya...

Balas

nyimak, dan ternyata banyak juga yah, sayamah copy weh tinu sanes, hatur nuhun infona.

Balas

kompakan sama yang diatas ya :)

Balas

itu di templatenya ada.. :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>

Balas

ga akan terlalu berpengaruh sama loading blog ko, walaupun jquery terbaru.. masalahnya kan udah di jelasin diatas :)

Balas

kan udah dijelasin di atas... kenapa saya menulis artikel ini, karena permasalahan tadi sob.. coba baca dan fahami dari atas.. intinya ini :ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah.

Margin=jarak dari objek ke objek lain... padding=jarak dari objek luar ke objek dalam, coba lihat gambar di bawah :

[img]http://1.bp.blogspot.com/-3v3qi17Chb8/UcJciwxkFZI/AAAAAAAAEgA/gIV1nyOWm4E/s1600/margin-padding.png[/img]

Balas

semoga bermanfaat sob..

Balas

betul sob... setujuuuuuuu.. google emang paling handal

Balas

hehehee... ngeri si akang ini kemana arah tulisan saya :)

Balas

kumaha we carana mah kang... supados langkung faham

Balas

jangan disimak aja... difahami juga =D

Balas

owh gitu toh kang siplah saya jadi lebih faham

Balas

ya.. begitulah kira2nya =D

Balas

tapi jika kodenya update maka browser akan meLoad ulang jquerynya, kecuali tidak pernah diupdate maka browser akan membaca secara cepat jquerynya

Balas

kalau itu masalah cache sob... kan yang saya bahas kestabilan server @@,

Balas

Wah begitu yah kang :) baru faham setelah baca bolak balik :D


btw kalo jquery yang ini boleh nggak di ganti ? ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min,js

Balas

kalau mau diganti, tinggal versinya aja paling sob... tapi versi 2.0.2 blom suppor IE 6,7&8. kalau mau support kode itu aja, ga usah diganti

Balas

trmksih bnyk akang infonya sangat bermanfaat jga bisa di cba,ni kang

Balas

Ouh begitu yah Kang, makasih nih disini sudah dijelasin detail + gambar .. :D Jadi paham aku Kang ... Makasih yaa

Balas

saya nyimak saja ya, makasih kang ilmunya... :D

Balas

nah maka dari itu bang, mas saeful kan nanya kenapa lemot ya mungkin aja jquerynya update lagi

Balas

ga bakalan ngaruh jadi lemot sob... kecuali down servernya

Balas

coba cek ini... ada pengunjung di forum, saya belum bisa buka webnya irwanefendi.com

Balas

kunjungan perdana kang, kebetulan template blog saya hampir mirip dengan blog kang ismet :D

Balas

kalau server google emang tidak perlu diragukan lagi kang, dijamin top pokoknya. untuk nitip-nitip file mantap dah daya aksesnya...

Balas

betul sob.. google emang top bgt :)

Balas

kira" Lighbox evolution saya jalan ga ya kalau pake v2.0.2..
soalnya waktu pake 1.8.3 ga jalan tuh...
G@l@u

Balas

sekarang pake versi brp sob? kalau menurut saya 2.0.2 blum banyak support... saya lebih enjoy 1.7.1 atau 1.8.3

Balas

ane pake 1.7.2 sob... aman" aja.. nunggu versi lengksapnya aja ah... kali aja ada..

Balas

bagi yang koneksinya cepet sih memang gak kerasa, tapi koneksiku lemot, jadi ngleoad JS tu agak lama, kecuali dah punya chace agak ringan

Balas

jadi letak permasalahannya bukan hanya terletak pda jQuery tapi lebih pada servernya yang lagi down. Mungkin penyebab lainnya banyaknya kode CSS, Widget dan lainnya yang ada pada blog saya.

Maaf, saya kurang teliti dalam memahaminya. :P

Balas

kirain udah beres ngebahas chace :P

Balas

Nambah pengetahuan baru nih... bisanya hanya pake aja n nggak mau belajar lebih detail sabab musababnya hehehe... thanks pencerahannya kang...

Balas

susah kalau sama orang SOTOY :P

Balas

sekarang jadi tau kan sob :)

Balas

wah ini ilmu baru buat saya Kang,haturnuhun untuk info yang satu ini Kang

Balas

makasih info nya kang, kalau saya sendiri kebetulan pengguna jQuery bukan dari google...
btw, saya ikutan follow ya kang, kalau bersedia di follback, hehehehe...|o|

Balas

darimana saja juga bisa ko... asal pertimbangkan juga kestabilan server :)

Balas

Jadi yang paling bagus pilih metode yg mana ya gan?

Balas

yang punya google aja gan...

Balas

quote : " susah kalau sama orang SOTOY :P "

wkwkwkwk

Balas

padding mah upami bibir na ageung nyak ? :D *oh Jeding* hilap :p wkwwk

Balas

padding mah nu pake Fla nya.... mantap cuci mulut :)

Balas

Yang ini komentar serius !!!

hadeuh , tos wengi ieuu .. pusing abi kaang hoyong bobo , cik punten pisan kaaang ... tulungaan abdi , rekomendasi kedah dikumahakeun ieu >> view-source:http://blog.riandesign.web.id/

seu'eur CDN jquery nu asal include ! :(

sharing kripik na di pej ieu nyak :D ---> http://blog.riandesign.web.id/p/kritik-saran.html

hatur dan nuhun , hatur nuhun .. :)

Balas

kang saya menanyakan metode CDN Failover Metode 1 atau 2 atau 3, metode tersebut bisa di pakai ga buat javascript atau css ???, kalo di artikelnya kan digunakan untuk jquery :(, kalo bisa ehmmm struktur kodenya kaya gimana ???
kalo kaya gini bisa ga ???
<script type="text/javascript" src="ramdani-blog.js"></script>
<script type="text/javascript">
if (javascript) {
// jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
// jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
document.write('script type="text/javascript" src="ramdani-blog.js"><\/script>');
}
</script>

Balas
Komentar ini telah dihapus oleh pengarang.

Poskan Komentar


×
Chat