Mempercepat loading blog/web

Cara Mempercepat Loading Blog/Web Menggunakan Image Base64

Mempercepat loading blog/webPada jaman penggunaan smartphone seperti sekarang, google sebagai search engine terbesar telah menyatakan bahwa kecepatan loadig blog/web menjadi penentu peringkat serta prioritas google dalam menampilkan query penelusuran (khususnya versi mobile) mereka. Dalam berbagai petunjuk tak terkecuali beranda google adsense, google telah menyatakan hal tersebut dengan sebuah notifikasi.

Artikel Lain: Merubah Background Visual Studio Menjadi Hitam

Ada banyak cara yang dapat dilakukan untuk mempercepat loading blog/web, diantaranya adalah mengurangi penggunaan script-script yang tidak perlu, menginstall module pagespeed dari google, menginline penggunaan script seperti css, dan javascript, menggunakan javascript asynchronous, menggunakan CDN, web cache dan lain sebagainya.

Dari beberapa cara yang telah saya sebutkan tadi, ada satu cara sederhana yang tidak banyak diketahui blogger/webmaster, bahkan cara ini begitu disepelekan, yaitu penggunaan image base64 ke dalam blog/web. Cara ini memang sangat sederhana namun hasilnya begitu memuaskan dan terlihat nampak jelas kasat mata (sudah saya buktikan sendiri).

Sebenarnya apakah image base64 itu? Saya lebih suka menyebutkan seperti itu karena kodenya memiliki awal baris string base64, namun image base64 sebenarnya adalah data URI yang kita dapatkan dari mengencode sebuah file menjadi baris kode string, tidak terkecuali gambar, seperti yang sekarang kita bahas dan akan kita praktekkan.

Lalu apakah bedanya dengan file image biasa? Karena berbentuk kode string dan bukan file, jadi server dengan cepat bisa memanggil data secara cepat, beda dengan cara memanggil file gambar yang kita dapatkan dari sebuah URL (domain). Oleh karena itu server tidak akan banyak memanggil alamat/domain dari gambar normal, sehingga image base64 dapat membuat blog/web kita menjadi lebih cepat dan perubahan signifikan pada loading blog/web akan nampak, khususnya pada gambar image base64 ini.

Kelebihan lain adalah, saya pernah membacanya pada sebuah referensi, jika image base64 akan otomatis disimpan kedalam web browser yang telah membukanya. Sehingga saat seseorang membuka gambar yang sama untuk kedua kali maka browser tidak akan memanggilnya lagi, karena sudah disimpan otomatis pada cache mereka (web browser), dengan kata lain beban server dan bandwith kita bebannya akan menjadi berkurang.

Saya pernah membuktikannya bahkan dilaman ini. Anda lihat gambar icon android di sidebar kanan blog saya? Sejak awal icon itu telah menggunakan image base64, lalu lihatlah icon media sosial seperti facebook dan twitter diatasnya, dulu itu menggunakan URL file path biasa. Ketika saya membuka blog saya melalui smartphone alangkah kagetnya ketika gambar icon android yang notabene ada dibawah ternyata termuat dulu sebelum gambar icon media social selesai dimuat. Ini fakta yang membuktikan bahwa penggunaan image base64 sangatlah tepat dan direkomendasikan.

Bahkan ketika saya menginstall module pagespeed dari google untuk web server apache, saya mencoba menginstallnya di VPS yang berbasis linux debian, dan ternyata setelah saya lihat resources blog saya semua gambar iconnya menjadi image base64. Karena itulah saya menyimpulkan kalau google saja menggunakannya pasti ini adalah metode yang benar/tepat untuk mempercepat loading blog/web.

Namun saya sarankan penggunaan image base64 hanya untuk gambar yang ukurannya kurang dari 100kb (kilo bytes). Karena jika filenya terlalu besar maka kode dan berat filenyapun akan membebani kinerja server. Setelah sedikit paham dengan bahasa amburadul saya maka anda dapat melakukan penggantian gambar anda menggunakan image base64 untuk blog/web anda. Berikut adalah caranya.

1. Buka laman image base 64 generator.

2. Pilih file gambar anda yang ingin di encode ke base64. Klik browse dan pilih gambar yang ingin anda generate menjadi base64.

3. Setelah itu copy paste code hasil encode anda sebagai pengganti url file.

4. Masih bingung penggunaan dan apa maksudnya? Saya misalkan kalau biasanya anda memanggil gambar dengan kode HTML seperti ini <img src=”http://urlanda.com/gambaranda.png”>, anda cukup mengganti url: http://urlanda.com/gambaranda.png, dengan kode image base64 yang anda generate dari file gambar anda tadi. Begitu pula untuk CSS, anda hanya perlu menggantinya dari URL file path menjadi image base64.

5. Sekarang dijamin blog/web anda akan lebih cepat dari sebelumnya untuk dimuat dan googlepun akan lebih menyukai blog/web anda.

Seperti itulah tutorial cara mempercepat loading blog dengan mengubah gambar URL file path menjadi image base64. Jika masih ada pertanyaan ataupun anda kesulitan mengimplementasikannya anda dapat menghubungi kami melalui laman kontak, jangan segan untuk bertanya ataupun chat dengan kami bila ada keperluan. Untuk video tutorialnya sudah saya sertakan pada link dibawah.

Lihat Video Tutorial

3 thoughts on “Cara Mempercepat Loading Blog/Web Menggunakan Image Base64

  1. saya praktekkan dan saya pelajari dulu gan. Sangat bermanfaat informasinya untuk para newbie seperti saya ini gan…terima kasih buanyakkkk info nya master…

Leave a Reply

Your email address will not be published. Required fields are marked *