Percepat Loading Website dengan Data URI Scheme

Diperbarui   /   Terbit di Server   /   Komentar

Data URI scheme adalah skema URI (Uniform Resource Identifier) yang menyediakan cara untuk memasukkan data secara in-line di sebuah halaman web layaknya sumber daya eksternal.

Teknik ini memungkinkan resource yang terpisah seperti gambar ataupun css diambil dalam satu permintaan HTTP yang tentu saja akan menjadi lebih efisien.

Encoding yang digunakan adalah base64, sebuah skema binary-to-text encoding yang mewakili data biner dalam format string ASCII.

Penggunaan paling umum dari teknik ini adalah untuk ikon, saya ambilkan contoh di blog ini:

Twitter

Saya mengimplementasikan fitur ini di HTMLy, tersedia fungsi sebagai berikut:

// Use base64 encode image to speed up page load time.
function base64_encode_image($filename=string, $filetype=string) {
    if ($filename) {
        $imgbinary = fread(fopen($filename, "r"), filesize($filename));
        return 'data:image/' . $filetype . ';base64,' . base64_encode($imgbinary);
    }
}

Untuk mengkonversi ikon ke format base64 cukup melakukan perintah semacam ini lewat template:

<img src="<?php echo base64_encode_image('themes/default/img/twitter.png', 'png')?>"/>

Untuk penggunaan misal di Blogger, gunakan tool online yang sudah banyak tersedia, contohnya yaitu Websemantics, saya sudah mengimplementasikannya di Danlogs untuk social icon (sidebar) serta logo (header).