Cara Mengoptimalkan Kecepatan Emoji pada WordPress (Self-Hosted) dengan CDN Statically

Halo, sob, saya akan memposting artikel tentang menggunakan CDN Staticaly pada Emoji WordPress. Sebelum ke intinya, saya mau tanya, sekarang kamu masih mengaktifkan/menggunakan Emoji pada Blog/Web WordPress Anda?

Dan, kamu merasa kesal dengan nilai (score) GTMetrix kamu yang tidak menaik, karena Emoji yang di muat itu terkadang ada yang tidak memiliki fitur Kompresi GZip? Terutama, bagi orang yang ingin mendapatkan nilai GTMetrix yang sempurna, pasti merasa kesal dengan hal tersebut.

Atau, Anda ingin mempercepat blog Anda dengan mengoptimalkan Emoji, tanpa menonaktifkan nya, atau justru Anda ingin menggunakan CDN Statically pada Emoji hanya karena ingin menggunakan Multi CDN nya saja?

Jika demikian, maka artikel ini cocok bagi Anda, dan tampaknya kamu perlu menggunakan CDN Statically untuk Emoji pada Web/Blog WordPress Anda, yang memiliki Fitur Kompresi Brotli/GZip dan juga menggunakan Infrastruktur Multi CDN, yang (mungkin) akan menaikkan sedikit nilai GTMetrix.

Tapi, sebelum membahas point nya, saya akan menjelaskan apa itu Emoji, biar pada paham. Silahkan lanjut baca artikel, kalau ingin mengoptimalkan Emoji pada Blog/Web anda :)

Lisensi Artikel:

Artikel ini saya Lisensi kan dengan CC BY-SA 4.0 (Creative Common Atribusi-BerbagiSerupa 4.0 Internasional. Atau, bahasa Inggrisnya: Attribution-ShareAlike 4.0 International). Artinya, sebelum Anda menggunakan Artikel ini, baik mengcopas nya, atau membuat Artikel Turunan dari ini, untuk tujuan dan keperluan apapun, termasuk untuk kepentingan komersial sekalipun, Anda harus membaca, pelajari dan pahami Lisensi ini terlebih dahulu.

Saya melisensikan nya hanya untuk Artikel (Teks) ini saja, bukan untuk/tidak dengan Media Gambar/Cuplikan Layar yang ada di Artikel ini.

Untuk membaca dan memahami Lisensi nya, silahkan kunjungi Web Page nya di sini.

Terima kasih ^_^


Apa itu Emoji?

Emoji merupakan sebuah tulisan yang mewakili berbagai hal, seperti perasaan, ekspresi wajah, makanan, hewan, buah-buahan, benda, dll, yang akan dirubah secara otomatis kedalam bentuk gambar.

Hampir sama dengan Emoticon, hanya saja Emoticon dalam bentuk Ikon, dan diciptakan dengan berbasis teks dasar, sedangkan Emoji dalam bentuk gambar, dan di ciptakan dari basis karakter seperti Unicode.

Jadi, Emoticon dan Emoji itu tidak sama, yah :)

Untuk contoh nya, bisa Anda lihat di sini.


Apa itu Statically?

Logo Statically
Logo Statically, yang bisa kamu dapatkan disini.

Daritadi ngomongin “Statically”, Statically itu apa, sih? Statically (yang sebelum nya bernama Staticaly) adalah sebuah Layanan Public CDN pertama di Indonesia, yang di gagas oleh mas Frans Allen. Statically ini juga merupakan bagian dari Proyek Marsble, yang merupakan sebuah forum komunitas yang di buat juga oleh mas Frans Allen.

Proyek tersebut berasal dari Sleman, Yogyakarta. Cara kerja Statically ini mirip seperti RawGit. Jika Anda merupakan pengguna RawGit, pasti Anda tidak akan asing dengan Statically ini, karena cara kerja nya yang sama.

Namun, bedanya adalah, Statically menggunakan Infrastruktur Multi-CDN dari beberapa Penyedia CDN di dunia, seperti Cloudflare, Fastly, BunnyCDN dan CDN77. Selain bisa menyajikan konten dengan cepat, Statically juga dapat meminimalisir Downtime untuk setiap server dari Penyedia CDN.

Hal ini berkat Cedexis yang mampu mendeteksi CDN ter “sehat” dan tercepat bagi pengguna, berdasarkan waktu pemuatan nya (load time). Di bandingkan dengan RawGit yang hanya memiliki 1 Penyedia CDN saja, dan mereka tidak dapat meminimalisir Downtime sama sekali.

Selain itu, RawGit juga ingin di tutup pada bulan Oktober tahun 2019 ini nanti. Jadi, jika Anda masih menggunakan RawGit, segeralah untuk migrasi dari RawGit!

Situs Web Resmi: https://statically.io


Tujuan

s.w.org/images/core/emoji -> cdn.statically.io/gh/twitter/twemoji

Note: Cara ini di peruntukkan bagi pengguna WordPress.org (Self Hosted), bukan pengguna WordPress.com, harap Anda untuk memahami nya.

Tujuan Anda disini adalah mengubah URL bawaan yang meng-host kan Emoji pada WordPress menjadi URL CDN Statically yang menghantarkan berkas gambar Emoji yang berada di dalam Repo GitHub Twitter Twemoji. Kenapa Twemoji? Karena WordPress sendiri menggunakan Twitter Twemoji sebagai Emoji Bawaan untuk Blog/Web WordPress Anda sejak WordPress versi 4.2.

Sebelum mengikuti tutorial ini, sebaiknya kamu buatkan Child Theme terlebih dahulu dari tema yang kamu pakai sekarang jika belum dibuat. Atau, aktifkan Child Theme nya jika sudah di buat dan tidak kamu gunakan di dalam Blog/Web kamu.


Cara Mempercepat Emoji WordPress

Cara mengoptimalkan Emoji WordPress memang cukup mudah, Anda tinggal menambahkan barisan kode berikut di bawah ini di dalam file functions.php pada Child Theme Anda:

function emoji_svg_cdn_url()
{
  return $default_url = "https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/svg/";
}
add_filter('emoji_svg_url', 'emoji_svg_cdn_url');

function emoji_png_cdn_url()
{
  return $default_url = "https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/72x72/";
}
add_filter('emoji_url', 'emoji_png_cdn_url');

Atau, kalo mau lebih pendek, Anda tinggal ubah saja nilai dari variabel $default_url, yang semulanya dari URL https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/svg/ menjadi https://cdn.statically.io/libs/twemoji/12.0.4/2/.

Maka, barisan kode nya akan menjadi seperti di bawah ini:

function emoji_svg_cdn_url()
{
  return $default_url = "https://cdn.statically.io/libs/twemoji/12.0.4/2/svg/";
}
add_filter('emoji_svg_url', 'emoji_svg_cdn_url');

function emoji_png_cdn_url()
{
  return $default_url = "https://cdn.statically.io/libs/twemoji/12.0.4/2/72x72/";
}
add_filter('emoji_url', 'emoji_png_cdn_url');

Anda bisa menggantikan 12.0.4 pada baris yang di tunjukkan (Baris 3 dan 9) dengan versi Twemoji yang tersedia. Untuk mengetahui nya, silahkan klik disini.

Sesudah itu, simpan perubahan pada file tersebut, lalu lakukan “Purge/Flush All Cache” baik dari Plugin dan Cloudflare (terutama jika Anda menggunakan fitur “Cache Everything”).

Setelah itu, pastikan bahwa Emoji pada Blog WordPress kamu di load menggunakan CDN dari Statically. Bisa Anda mengujinya dengan menggunakan Fitur Inspeksi Elemen pada Web Browser, GTMetrix, dll. Dan, pastikan Emoji di load menggunakan Domain cdn.statically.io, bukan s.w.org.

Bagi yang menggunakan GTMetrix: Buka GTMetrix-> Masukkan Alamat Blog kamu -> Klik “Analyze” -> Tunggu sampai selesai -> Jika selesai, akan tampil nilai kecepatan blog kamu -> Klik pada tab “Waterfall” -> Lihatlah domain apa yang di gunakan saat memuat Emoji di dalam Blog kamu, apakah cdn.statically.io atau s.w.org?

Bagi yang menggunakan Fitur Inspeksi Elemen: Pada Browser, buka fitur “Inspeksi Elemen” -> Klik pada tab “Network” atau “Jaringan” -> Bukalah Blog kamu (di tab Web Browser yang sekarang, jangan di tab baru) -> Lihatlah domain apa yang di gunakan saat memuat Emoji di dalam Blog kamu pada “Network” atau “Jaringan”, apakah cdn.statically.io atau s.w.org?

Maaf, saya tidak bisa kasih Cuplikan Layarnya terlebih dahulu, soalnya yang di saya belum ada update, terlebih Duosia sendiri gak pake Emoji. Yah, jadi gak ada Cuplikan Layar untuk sementara ini. Tapi, kalo udah ada, nanti saya perbarui lagi :)


Kesimpulan

Dengan Mengoptimalkan Emoji WordPress kamu menggunakan CDN Statically, maka Anda akan meningkatkan sedikit nilai dari GTMetrix, mengurangi durasi pemuatan, meningkatkan ketersediaan Emoji dan juga kehandalan nya, karena Infrastruktur Multi-CDN nya yang dapat meminimalisir Downtime bila di bandingkan dengan menggunakan RawGit atau Server WordPress.

Selain itu, Anda juga bisa menggantikan versi nya, bahkan Emoji nya dengan sesuka Anda, karena sifatnya yang sangat fleksibel.


Penutup

Terima kasih bagi Anda yang membaca Artikel ini. Mohon maaf jika ada kesalahan pada artikel ini, di mulai dari salah ketik, gak jelas/ngawur, sampai membuat Anda tersinggung. Saya tidak ada maksud untuk menyinggung Anda secara pribadi, saya hanya membagikan solusi bagi yang ingin mengoptimalkan Emoji pada Blog/Web WordPress nya dengan menggunakan CDN Statically.

Jika Anda memiliki kritik dan saran, ada pertanyaan bahkan sekedar mau bilang “Hi” dan “Nyimak”, bisa anda lakukan itu di kolom komentar. Anda tinggal ikuti saja aturan sebelum berkomentar, lalu komentar Anda akan di terima dengan baik.

Sudah sekian untuk artikel yang saya bagikan ini, dan semoga bermanfaat untuk anda. Terima Kasih ^_^

Farrel Franqois

Saya adalah Mahasiswa dan juga seorang Penulis di Duosia, saya memang seorang pengguna Windows dan GNU/Linux. Namun, saya akan lebih sering menulis berbagai Hal tentang Web dan GNU/Linux dalam bentuk Tutorial, Review dan Opini, daripada Windows, karena saya malas menggunakan Windows :-P

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pin It on Pinterest

Adblock Terdeteksi

Tolong Hargai Kami yang sudah susah payah untuk menulis artikel dengan mematikan Adblock anda, Terimakasih