2 Cara Menggunakan CDN Statically di Blogger AMP dan Non-AMP
Cara Menggunakan CDN Statically di Blogger AMP dan Non-AMP - Statically merupakan layanan CDN gratis yang sudah sering digunakan di Wordpress.
Statically dapat membantu kita mengoptimalkan speed blog khususnya untuk file-file yang berupa gambar.
Sayangnya CDN Statically sejauh ini baru mendukung untuk CMS Wordpress.org yang biasanya bisa di setting melalui plugin, baik plugin cache yang terintegrasi dengan CDN Statically ataupun plugin khusus dari Statically.
Lalu bisakah kita menggunakan CDN ini untuk gambar di blogger?
Cara Menggunakan CDN Statically di Blogger
CDN ini memang pada dasarnya lebih support untuk Wordpress, tapi bukan berarti kita tidak bisa menggunakannya di Blogger.
Kita bisa menggunakan CDN Statically di Blogger, tapi tentunya tanpa menggunakan Plugin seperti di Wordpress.
Nah, langsung saja, berikut ini cara setting cdn statically di blogger :
1. Cara Menggunakan CDN Statically di Blogger Non-AMP
Untuk pengguna template Non-AMP atau HTML5 mempunyai kemudahan bila ingin menggunakan CDN ini, karena kalian cukup menggunakan satu script yang di pasang ke template.
Dan nantinya semua gambar di blog anda akan terintegrasi dengan Statically secara otomatis, termasuk saat anda mengupload gambar baru, nantinya akan terhubung dengan Statically secara otomatis.
Berikut ini Cara Memasang CDN Statically di Blogger HTML5 :
- Buka Blogger.com
- Sign In dengan Akun Gmail anda
- Masuk ke Blog
- Pilih menu Tema
- Klik Edit Tema
- Lalu cari kode </body>
- Silhakan Copy kode berikut ini :
<script>
//<![CDATA[
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace(/.*?:\/\//g , "https://cdn.statically.io/img/");
};
//]]>
</script>
- Dan Paste kan tepat di atas </body>
- Setelah itu klik Save
Sampai di sini anda sudah berhasil memasang CDN Statically di Blogger Non-AMP.
2. Cara Menggunakan CDN Statically di Blogger AMP
Sayangnya untuk template yang sudah mendukung AMP, belum bisa menggunakan JavaScript, sehingga tidak bisa menggunakan script seperti pada tutorial yang pertama.
Nah, jika anda menggunakan template AMP, maka anda harus merubah URL gambar secara manual agar gambar tersebut terintegrasi dengan CDN Statically.
Caranya dengan merubah https:// menjadi https://cdn.statically.io/img/Misal anda Upload gambar ke blogger, nanti URL atau Link gambar tersebut kurang lebih seperti ini :
Spoiler:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG_5UFZJurGUPN6aUpTKlJ7VpRB9ajUm5xX812kC6XU2JCsr-osb6vVI5ocwUfi1Am3GLzolxUcVsLZKBp5kj2qCAYmU78jXQVj3mRVtv2SKXcxW4ha04MbXCmS2T305fdrjiBe2_wRnVW/s1280/cara-menggunakan-cdn-statically-di-blogger-amp-dan-non-amp.png
Setelah anda rubah URL dengan menambahkan CDN Statically, nanti akan menjadi seperti ini :
Spoiler:
https://cdn.statically.io/img/1.bp.blogspot.com/-djLBdKGaDLo/YN-uuyB33LI/AAAAAAAAKuQ/Dl5F4TbD75EVv0pS5DotmmTjkckvlpD5ACLcBGAsYHQ/s1280/cara-menggunakan-cdn-statically-di-blogger-amp-dan-non-amp.png
Cukup mudah bukan? anda hanya perlu merubah https:// dengan https://cdn.statically.io/img/
Hanya saja akan terasa melelahkan, karena anda harus merubah url gambar satu persatu, tidak bisa menggunakan script otomatis seperti pada tutorial sebelumnya.
Selain itu, CDN Statically untuk versi AMP bisa digunakan untuk gambar di bagian mana saja kecuali di Thumbnail, entah kenapa untuk thumbnail nanti menjadi tidak tampil bila menggunakan CDN.
Manfaat Optimasi Gambar Blogger dengan CDN Statically
Pasti diantara kalian masih banyak yang penasaran apa aja sih Manfaat Optimasi
Loading Gambar Menggunakan CDN Statically di Blogger,
1. Meningkatkan Pagspeed
Pertama yang paling terasa tentunya meningkatnya loading blog saat diakses, dan cara optimasi gambar blog dengan cdn statically ini memang bisa menjadi pengganti lazyload gambar,
Yang fungsinya sama-sama untuk membantu meringankan gambar di blogger, namun
saat ini saya lebih suka dengan penggunaan CDN.
2. Mengkompres Gambar
Manfaat Optimasi Gambar Blog dengan CDN Statically selanjutnya adalah membantu compress gambar akan menjadi lebih ringan lagi.
Beberapa orang menganggap bahwa size gambar untuk blog diusakan dibawah 100kb,
sehingga selalu berusaha untuk mengompres gambar sebelum diupload ke blogger,
agar sizenya dapat dibawah 100kb.
Tapi terkadang kita sudah berusaha untuk mengurangi sizenya, entah melalui situs compress gambar ataupun fitur compress di aplikasi edit foto seperti photoshop.
Nah, ternyata saat kita Optimasi Gambar Blogger dengan CDN Statically, akan membantu gambar kita agar di compress lebih ringan lagi.
Silahkan anda download kedua gambar berikut :
Spoiler:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUq2ENZ32ambeG9iNHbP0SqTzzggYtQiUI2G5mhei317vVgnHafFV888QEJMwK8BA7MMf8u86eS4LZWi76AMAEDKQLENSKScKIP2YyaHbdOTPQIfa-jigIakruacimsW9hJ2TTlU62HqVu/s1280/template-blog-dirga-id-kompflexible-amp.png
Spoiler:
https://cdn.statically.io/img/1.bp.blogspot.com/-WzKYDLroZZo/YNFRQTmUGnI/AAAAAAAAKfA/6E6FJWuIPogwqNPWrYRPGjdjFp_x3Qy5wCLcBGAsYHQ/s1280/template-blog-dirga-id-kompflexible-amp.png
Silahkan anda download dan save dengan nama yang berbeda.
Keduanya merupakan gambar yang sama, bedanya yang satu masih menggunakan URL Asli saat diupload ke Blogger, sementara yang kedua sudah menggunakan CDN Statically,
Lalu anda cek size kedua gambar tersebut, pasti ada perubahan size signifikan.
Saat saya cek terakhir kali, Gambar Pertama memiliki size 195kb sementara Gambar Kedua memiliki size 33,3kb.
3. Membantu Menerapkan Gambar Webp di Blogger
Tahukah kalian bahwa Blogger saat ini sudah support untuk mengubah gambar menjadi berformat Webp, dimana hal ini dapat membantu kalian menambah ringan pagespeed blog.
Bahkan kabarnya, Google lebih menyukai situs dengan gambar berformat Webp sehingga peluang tampil di hasil pencarian teratas semakin besar.
Jika kalian tertarik untuk menerapkan Gambar Webp, silahkan kunjungi artikel
dari KompiAjaib berikut ini =>
https://www.kompiajaib.com/2019/12/gambar-blogger-support-webp-dengan-auto.html
Penutup
Itulah tutorial cara memasang CDN Statically di Blogger AMP dan Non-AMP, selamat mencoba dan semoga anda berhasil meringankan loading blog dengan cara ini, sehingga pengunjung merasa lebih nyaman saat mengunjungi situs anda.
Tentunya Optimasi Gambar Menggunakan CDN Statically Untuk Mempercepat Loading
Blog akan semakin membuat situs anda mudah bersaing di hasil pencarian teratas
Google.