Sebelumnya kita telah membahas 04. Penerapan dan Implementasi Bootstrap pada Html, maka kali ini kita akan membahas tentang implementasi cdn pada Bootstrap. Namun Alangkah lebih baiknya kita mengetahui cdn Bootstrap itu terlebih dahulu.
Apa itu Cdn?
Mungkin bagi yang awan masih banyak yang belum mengenal cdn, jadi CDN adalah Content Delivery Network, kumpulan dari server global yang terletak di beberapa data center yang tersebar di berbagai negara yang kegunaanya adalah untuk mempercepat loading sebuah website, fungsinya memastikan pengiriman konten statis dari gambar, css, javascript, video, dll dari lokal server terdekat pengguna yang mengakses website kamu. Hal tersebut dapat meningkatkan kecepatan respon suatu website ketika diakses. CDN juga ditujukan bagi sebuah website berskala besar dengan banyak konten meskipun demikian sebenarnya semua website juga dapat menggunakan cdn untuk meningkatkan performa.
Implementasi Pada Bootstrap
Silahkan copy code dibawah ini :
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Kemudian save dengan nama file index.html, lalu tambahkan link css seperti dibawah ini pada tag <head>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>
Silahkan Copy kembali code JS dibawah ini untuk diletakkan pada tag <body>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>
Maka pastikan Script lengkapnya adalah seperti dibawah ini, dan silahkan jalankan di browser setelah menyimpannya.
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>
</body>
</html>
Tentunya, Bootstrap memberikan penjelasan mudah dalam penggunaan CDn yang dapat dilihat di website nya langsung
Keuntungan dan Manfaat Menggunakan Cdn
- Cdn adalah solusi yang tepat untuk website yang memiliki banyak visitor
- Memastikan website dapat diakses secara global
- Cdn cukup aktif dan efektif mengurangi penggunaan resource misalnya diskspace atau bandwich
- Cdn meningkatkan kecepatan loading pada situs web, terutama jika visitor terdekat dengan server cdn itu sendiri
- Cdn dapat meningkatkan peringkat lebih baik di Search Engine
- Cdn mendukung semua tipe Website dan Hosting
Layanan CDN Gratis
1. ImageKit
Layanan Cdn yang satunya ini biasanya dipakai untuk website atau blog yang berisi lebih banyak gambar dan foto, karena sesuai dengan namanya ImageKit berfungsi untuk memaksimalkan olahan gambar atau foto menjadi lebih cepat.
Kunjungi ImageKit
2. Cloudinary
Yang selanjutnya adalah cloudinary.com, layanan cdn gratis ini memiliki kesamaan dengan imagekit namun kelebihannya adalah cdn yang satu ingin mengadakan fitur yang dapat mengedit, memotong gambar dari besar ke ukuran kecil, server ini menyediakan penyimpanan gambar dan bandwith hingga 25 giga dengan gratis.
Penggunaan Cloudinary ini lebih mudah daripada Cdn yang lain, karena baik bagi seorang pemula sekalipun, Cdn ini dapat digunakan dengan mudah dan tidak akan membuat pusing.
3. Bunny Net
Meski tidak gratis, namun cdn yang satu ini tergolong murah dan tentunya tidak akan menurunkan performa dan juga minat para pengguna web dikarenakan banyaknya user percaya akan kinerja dcn bunny sebagai server web total. Namun jika ingin mencoba secara Gratis kamu bisa pilih layanan Trial selama 14 hari kok, Namun untuk harga perlayanan biasanya akan disesuaikan dengan letak negara.
4. Quic Cloud
Layanan CDN gratis yang selanjutnya adalah QuicCloud yang bekerja total diseluruh bagian negara. Cdn yang satu ini sangat direkomendasikan karena tidak hanya berguna untuk memantau kecepatan dalam memuat halaman namun juga dapat memberi keamanan pada web dari adanya serangan hacker, Adapun kelebihan QuicCloud yaitu:
- Menjaga keamanan web
- dapat di setting dengan plugin lain
- adanya sinkronasi data secara otomatis
- web dapat diakses secara global menggunakan cdn ini
- konten tersimpan seperti java, css
5. CloudFlare
Cdn gratis yang terakhir adalah CloudFlare, cdn yang terbilang cukup lengkap untuk semua keperluan hosting mulai dari adanya penyaring dari konten berbahaya dan juga menambah kecepatan memuat halaman web, adapaun kelebihan dari CloudFlare yaitu:
- Adanya Layanan blokir dalam memblokir sebuah website untuk masuk ke web kamu
- Menjaga keamanan dari serangan DDos dengan mengubah sandi situs
- Membantu web untuk menampilkan konten walau saat server down
- Mampu menyembunyikan IP yang asli
Jadi, itulah beberapa hal yang perlu diketahui terkait CDN dan juga penerapannya dalam Bootstrap.