Cara Mengoptimalkan Kecepatan Loading Blog

Kenapa kecepatan loading blog menjadi sangat penting? Berdasarkan analisa para pakar, blog yang cepat akan memanjakan pengguna ketika berada di situs web, menghemat waktu dan data yang di habiskan pengguna untuk membuka halaman blog.

Itu dapat di buktikan dari data rasio pentalan (bounce rate) situs web, semakin cepat loading blog semakin kecil rasio pentalan, sebaliknya semakin berat loading situs web / blog semakin tinggi rasio pentalan blog tersebut.

Jika kamu pernah membuka situs-situs amp (accelerated mobile pages) yang kecepatan pemuatan halamannya di atas rata-rata, kamu mungkin ingat bagaimana reaksi mu ketika masuk ke situs yang sangat cepat? seperti membolak-balik halaman yang mungkin bukan tujuan awal masuk ke situs tersebut.

Jadi sekarang apakah kamu tertarik untuk meningkatkan kecepatan (speed) blog yang kamu kelola, hingga bisa bersaing dengan situs-situs cepat lainnya? Jika ya, ikuti panduan berikut ini untuk meningkatkan kecepatan blog.

Mengoptimalkan PageSpeed Blog

  1. Compress image ke ukuran file yang lebih kecil
  2. Kurangi penggunaan sumberdaya pihak ketiga (Third Party Resources)
  3. Hapus widget blog yang tidak terlalu dibutuhkan.
  4. Muat Gambar Dibelakang Layar
  5. Gunakan font web & ikon yang ringan
  6. Optimalkan perenderan halaman paruh atas situs web / blog.
  7. Tingkatkan durasi cache untuk mempercepat kunjungan berulang.
[ads id="ads1"] Selanjutnya mari kita lihat satu persatu, bagaimana 7 poin di atas bekerja (mempercepat halaman blog anda).

Compress image ke ukuran file yang lebih kecil

Apa maksudnya? Gambar atau image adalah file yang sangat besar di situs web. Semakin tinggi resolusi image semakin besar file size (dalam hitungan kb) pada gambar tersebut.
compress image
Itu artinya waktu dan data yang dihabiskan untuk membuka halaman blog juga semakin tinggi sehingga blog terasa sangat berat. Perhatikan contoh gambar di atas, gambar original 640x370 dengan file size 694kb, setelah di kompres ukuran gambar tetap 640x370 tetapi file size image berkurang menjadi 10.85kb

Maka dari itu, untuk mempercepat blog mengkompres gambar ke ukuran file yang lebih kecil harus dilakukan, Dengan begitu waktu dan data yang dibutuhkan untuk memuat gambar menjadi lebih sedikit.

Kurangi Penggunaan Sumberdaya Pihak Ketiga (Third Party Resources).

Ini bukan berarti situs web / blog harus lepas dari sumberdaya pihak ketiga atau third party resources, beberapa third party resources seperti CDN (Content Delivery Network) sebenarnya menguntungkan situs bahkan dapat meningkatkan kecepatan loading blog, yang saya maksud mengurangi penggunaan third party resources adalah mengurangi sumberdaya pihak ketiga yang sebenarnya tidak terlalu di blog anda.

Jadi kenali dengan baik blog anda dan pahami apa yang dibutuhkan dan apa yang tidak dibutuhkan disana.

Hapus Widget Blog Yang Tidak Terlalu Dibutuhkan.

Logika pada bagian ini masih sama dengan logika pada file size image. Yang membedakannya adalah widget pada halaman web (blog) mempengaruhi konstruksi situs web secara keseluruhan. Semakin banyak widget semakin tinggi Document Object Modul (DOM) pada blog tersebut.

Maka dari itu mendapatkan kecepatan pemuatan blog yang maksimal dokumen objek modul blog harus lebih kecil.

Rata-rata blog yang cepat memiliki DOM yang lebih kecil. Jika dokumen objek model lebih dari itu kecepatan blog tidak akan maksimal. Untuk mengetahui jumlah Document Object Model halaman blog anda gunakan PageSpeed Insights.

Selain itu coba fikirkan seberapa banyak file html, css, dan js/jequery untuk menampilkan satu widget. Ini mungkin bukan ilmu yang hebat, tetapi ini sangat logika dalam memecahkan masalah pemuatan halaman web.

Muat Gambar Dibelakang Layar

Apa maksudnya? Memuat gambar dibelakang layar adalah trik memanipulasi perenderan halaman web dengan menunda pemuatan gambar dan mendahulukan pemuatan bagian terpenting di situs web.

Dengan begitu pengguna tidak perlu menunggu semua file besar di situs web selesai dimuat untuk melihat halaman dan melakukan interaksi seperti scroll, tap dan lain-lain.

Untuk melakukan penundaan pemuatan gambar dibelakang layar ada dua cara bisa dilakukan yaitu:
  1. Menggunakan script lazyload image, atau
  2. Dengan memuat semua script dan css di situs web secara async.

Gunakan Font Web & Ikon Yang Ringan

Pada artikel sebelumnya saya juga sudah menjelaskan tentang font web, saya merekomendasikan font arial, sanserif untuk mempercepat loading blog.

Alasannya adalah, font arial, sanserif merupakan font yang paling umum dan saya rasa semua sistem sudah tersedia font tersebut.

Jika blog menggunakan font pihak ketiga seperti font google static, browser akan membutuhkan waktu untuk memuat font tersebut. Tetapi jika menggunakan font sistem seperti arial dan lainnya, browser tidak perlu memuat font dari sumber lai, akan ditampilkan dengan font sistem.

Ada beberapa kelebihan menggunakan font sistem diantaranya adalah:
  1. Mengurangi bloking time saat memuat halaman.
  2. Mengurangi penggunaan pihak ketiga
  3. Menghindari permasalahan web font load (FOIT).
  4. Mempercepat loading blog dan meningkatkan perenderan halaman paruh atas halaman web / blog.
Meskipun begitu arial bukan satu satunya font yang paling ringan (cepat), Masih banyak font web yang ringan bahkan tersedia di berbagai operating system yang dapat mengatasi permasalahan pemuatan font web dan meningkatkan kecepatan blog anda.

Optimalkan perenderan halaman paruh atas situs web / blog.

Jika semua tips, di atas sudah dilakukan dengan benar, maka pengoptimalan perenderan halaman paruh atas hanya tinggal sedikit lagi. Karena 4 poin yang saya jelaskan di atas sudah termasuk pengoptimalan perenderan halaman paruh atas.

Sebagai tambahan kamu bisa melakukan beberapa tips berikut untuk meningkatkan performa perenderan blog untuk halaman paruh atas.

Cara Mengoptimalkan Perenderan Halaman Paruh Atas

  1. Minify css dan js
  2. Remove Unused css
  3. Tempatkan css di area head blog, kemudian
  4. Pindahkan JavaScript ke area body
  5. Eliminate render-blocking resources
  6. Tempatkan gambar (image) di paruh bawah halaman.

Tingkatkan durasi cache untuk mempercepat kunjungan berulang.

Tips terakhir untuk mengoptimalkan kecepatan blog adalah meningkatkan durasi cache pada aset statis seperti image, script maupun css yang tetap (tidak berubah). Saya mungkin tidak ahli di bidang cache control, Tapi saya punya satu cara untuk meningkatkan durasi cache blog yaitu dengan memanfaatkan cache dari sumberdaya pihak ketiga seperti CDN.

Saya fikir dengan menyimpan gambar, script dan css atau file lainnya di CDN saya fikir itu akan meningkatkan durasi cache beberapa bagian dari blog anda, saya sendiri memang belum mencobanya karena penyedia CDN yang bagus tidak geratis.

Kesimpulan: Dalam mengoptimalkan kecepatan (speed) blog, setiap elemen yang ada pada blog harus menggunakan yang terbaik, gambar terbaik, font terbaik, ikon terbaik, library css dan js terbaik, bahkan teknik penempatan dan penerapan juga harus yang terbaik.

Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)