CDN adalah jaringan server yang saling berhubungan dan mempercepat pemuatan halaman web untuk aplikasi yang membutuhkan banyak data. CDN merupakan singkatan dari Content Delivery Network (Jaringan Pengiriman Konten) atau Content Distribution Network (Jaringan Distribusi Konten).
Dan saat pengguna mengunjungi situs web, data dari server situs web tersebut harus melintasi internet untuk mencapai komputer pengguna. Kemudian, jika lokasi pengguna jauh dari server tersebut, maka pemuatan file besar (seperti video atau gambar) akan memakan waktu yang lama, .
Sebaliknya, konten situs web disimpan di server CDN yang secara geografis lebih dekat ke pengguna. Efeknya, konten sebuah website akhirnya mencapai komputer pengguna dengan lebih cepat. Hal ini sebagaimana dilansir dari laman Amazon Web Services (AWS).
Sehingga pemanfaatan CDN ini sangat menguntungkan baik bagi pengembang maupun pengguna. Apalagi dituntut untuk mengembangkan proyek web dengan cepat dan dengan pengguna yang kebanyakan menggunakan perangkat mobile.
Oleh karena itu, berikut ini kami susun daftar CDN untuk Bootstrap. Tujuannya adalah agar memiliki pilihan dari sekian layanan yang ada karena hidup adalah pilihan.
Daftar Content Delivery Network (CDN) untuk Bootstrap
Nama jsDeliver terasa familiar jika kita melihat dokumentasi resmi yang dikeluarkan oleh Bootstrap 5. Iya, pada saat install Bootstrap via CDN di sana tertulis tutorial menggunakan jsDelivr. Pertanyaannya:"Apakah hanya CDN ini sajakah yang menyediakan Bootstrap?" Simak bahasan lengkapnya tentang daftar CDN untuk Bootstrap berikut ini.
1. Microsoft Ajax CDN
Layanan CDN pun disediakan Mirosoft Ajax CDN yang memudahkan penambahan pustaka jQuery dan ASP.NET. Perusahaan yang terkenal dengan OS Windows ini juga menyediakan CDN untuk Bootstrap.
Bahkan, layanan dari Microsoft Ajax CDN termasuk bagus karena memiliki server cache yang tersebar di seluruh dunia. Keunggulan ini membuat situs web yang dikunjungi akan mengakses konten statis sesuai lokasi server terdekat dengan pengguna.
Microsoft AJAX CDN membuatnya sangat mudah untuk menambahkan pustaka yang dibutuhkan ke dalam situs web dan membuatnya disajikan secara otomatis dari salah satu dari ribuan server cache mereka di seluruh dunia.
Dan berikut ini link Bootstrap yang disediakan oleh Microsoft Ajax CDN. Misalnya dengan versi terbaru; Bootstrap CSS 5.2.3 yang diletakan diantara tag <head> dan </head>.
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/5.2.3/css/bootstrap.css" rel="stylesheet"/>
Dan Bootstrap JS 5.2.3 yang diletakan sebelum tag </body>.
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/5.2.3/bootstrap.js"></script>
Dan bagi teman-teman yang ingin download template blogger dengan Bootstrap dari Microsoft Ajax CDN bisa klik di sini.
2. jsDelivr
jsDelivr adalah free CDN untuk proyek perangkat lunak open source yang dikembangkan oleh Dimitriy Akulov. Software yang didukung termasuk framework CSS: Bootstrap didalamnya. Bahkan sejak 14 Oktober 2020 jsDelivr menjadi CDN resmi Bootstrap. Dan ini terlihat pada laman dokumentasi getbootstrap.com. Lihat juga laman bootstrapcdn.com; Official CDN of Bootstrap and Font Awesome.
Melansir dari wikipedia, jsDelivr terutama digunakan untuk memuat kode dan sumber daya lainnya dari repositori di GitHub, npm, dan direktori tema dan plugin untuk WordPress. Dan Dimitriy Akulov merupakan satu-satunya orang atau entitas dengan akses penuh ke semua layanan dan server yang diperlukan untuk mengoperasikan jsDelivr.
Selain itu, jsDelivr disponsori oleh Cloudflare, Fastly, NS1, DigitalOcean dan perusahaan lainnya.
Dan berikut ini link CDN Bootstrap yang disediakan oleh jsDelivr. Ingat, untuk link Bootstrap CSS ditempatkan diantara tag <head> dan </head>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
Sedangkan link Bootstrap JS di bawah ini ditempatkan sebelum </body> pada theme blogger Anda.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Adapun template blogger yang sudah disertai dengan Bootstrap dari jsDelivr bisa klik di sini.
3. Cloudflare
Hari ini siapa yang tidak kenal dengan Cloudflare? Awalnya merupakan aplikasi sederhana yang berfungsi untuk menemukan sumber email spam. Dari sana kemudian berkembang menjadi layanan yang melindungi situs web dari segala jenis serangan sekaligus mengoptimalkan performa atau kinerja sebuah situs web.
Dan melalui cdnjs.com, Cloudflare menyediakan free CDN dan open source untuk memudahkan seorang developer agar hidup lebih mudah dan menyenangkan.
Melansir dari laman tersebut di atas, cdnjs mengatakan telah menangani lebih dari 200 miliar permintaan per bulan dan mendukung HTTP/3, HTTP/2, QUIC, dan SPDY, dengan HSTS diaktifkan untuk memastikan koneksi yang aman dan menggunakan Brotli 11 untuk mengompres file.
Adapun terkait layanan CDN Bootstrap, berikut ini contoh tag link Bootstrap CSS misalnya versi 5.2.3. Baris kode ini letakan diantara tag <head> dan </head>.pada theme blogger Anda.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />Sedangkan link Bootstrap JS di bawah ini tempatkan sebelum </body> pada theme blogger Anda.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha512-i9cEfJwUwViEPFKdC1enz4ZRGBj8YQo6QByFTF92YXHi7waCqyexvRD75S5NVTsSiTv7rKWqG9Y5eFxmRsOn0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Lalu bagaimana dengan contoh penerapan pada theme blogger? Silahkan klik di sini ya untuk download.
4. PageCDN
PageCDN adalah layanan web yang fokus pada akselerasi tata letak sebuah situs web. PageCDN melakukan pekerjaan dengan cara yang inovatif untuk memastikan halaman web dimuat dalam waktu sesingkat mungkin.
Untuk membuat situs web lebih cepat dari sebelumnya tersebut. PageCDN melakukan beberapa pengoptimalan yang dikategorikan sebagai:
- Content optimizations (Pengoptimalan konten)
- Delivery optimizations (Pengoptimalan pengiriman)
- Cache optimizations (Pengoptimalan cache)
Adapun pustaka yang tersedia yaitu: jQuery, Angular JS, React, Vue, Tailwind dan banyak lagi. Tidak terkecuali dengan Bootstrap yang sedang kita bahas kali ini. Terkait dengan hal ini, berikut adalah tag link Bootstrap CSS yang harus ditempatkan diantara tag <head> dan </head>.pada theme blogger Anda. Versi yang digunakan pada contoh di bawah ini yaitu; 5.2.0.
<link href="https://pagecdn.io/lib/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha256-7ZWbZUAi97rkirk4DcEp4GWDPkWpRMcNaEyXGsNXjLg="/>Dan link Bootstrap JS di bawah ini tempatkan sebelum </body> pada theme blogger Anda.
<script src="https://pagecdn.io/lib/bootstrap/5.2.0/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha256-wMCQIK229gKxbUg3QWa544ypI4OoFlC2qQl8Q8xD8x8=" ></script>Adapun contoh penerapan pada theme blogger bisa diunduh melalui link di sini.
5. UseBootstrap
UseBootstrap adalah salah satu penyedia theme dan template gratis berdasarkan React, Jeckyll, Vue hingga Bootstrap. Theme yang tersedia bukan hanya untuk antarmuka (user interface) saja. Bahkan template untuk admin juga tersedia di sana.
Selain itu, usebootstrap juga mempunyai layanan CDN untuk Bootstrap. Layanan ini sepertinya adalah project dari London Web Development Company. Sebuah perusahaan Inggris yang bergerak di bidang desain & pengembangan web, aplikasi seluler dan pengembangan perangkat lunak serta pemasaran digital (digital marketing/internet marketing).
Berikut ini contoh tag link untuk Bootstrap CSS yang harus ditempatkan sebelum tag </head>.pada theme blogger Anda.
<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/latest/css/bootstrap.min.css"/>Dan tag link Bootstrap JS di bawah ini tempatkan sebelum </body> pada theme blogger Anda.
<script src="https://cdn.usebootstrap.com/bootstrap/latest/js/bootstrap.min.js"></script>Kesimpulan
Layanan CDN mengacu pada server yang didistribusikan secara geografis. Server tersebut tidak hanya satu dan terpusat di satu tempat. Melainkan tersebar di seluruh dunia namun satu kesatuan dalam sebuah grup. Semuanya kemudian bekerja sama menyediakan pengiriman konten web secara cepat.
Konten web tersebut yang termasuk didalamnya yaitu: halaman HTML, file JavaScript, stylesheet (CSS), gambar dan video. Oleh karena itu, tidak heran jika popularitas layanan CDN terus meningkat. Bahkan sebagian besar lalu lintas web saat ini dilayani melalui CDN.
Dan di atas telah kita terangkan layanan free CDN yang menyediakan library Bootstrap. Meskipun CDN tidak sempurna untuk setiap kesempatan akan tetapi teknologi ini patut untuk dicoba.
Selamat belajar.
Tidak ada komentar:
Posting Komentar