Mengoptimalkan Konten Website Agar Lebih Cepat

Website dengan waktu loading yang singkat akan membuat penggunanya merasa nyaman. Website yang memiliki banyak artikel menarik membuat penggunanya menelusuri halaman lain dalam website Anda. Sehingga kalau kebetulan semua informasi yang dicari ditemukan di website Anda, mereka tidak perlu mencari informasi di website lainnya. Dengan frekuensi update yang sering, tentu saja pengguna akan kembali lagi untuk membaca artikel terbaru di website Anda. Disini saya akan membahas soal mengoptimalkan konten website, terutama untuk konten statis seperti gambar, foto, video, ataupun berupa script.

Sebuah website akan mendapatkan posisi ranking yang tinggi apabila ketiga faktor tadi bisa dipenuhi. Namun ada kalanya tidak semua faktor tersebut bisa kita penuhi. Karena mungkin ada hal lain yang membatasi Anda untuk mencapai kondisi tersebut. Kecepatan loading website akan bergantung sekali pada:

  1. Performa Server
  2. Bagaimana pun usaha Anda untuk mengoptimalkan konten website dari sisi lainnya. Performa server yang buruk tentunya membuat pengguna harus menunggu lebih lama hingga halaman website bisa ditampilkan dengan sempurna. Pengunjung akan langsung meninggalkan website Anda untuk mencari informasi yang dibutuhkannya di website lain. Ini merupakan salah satu penyebab tingginya bounce rate.

  3. Lokasi Fisik Server
  4. Lokasi fisik server Anda juga sangat menentukan kecepatan loading dari halaman website. Pemilihan lokasi server juga merupakan hal yang penting. Semakin dekat lokasi server Anda dengan pengunjung, maka semakin cepat pula halaman website Anda bisa ditampilkan oleh browser yang digunakan oleh pengunjungnya.

    Sebagai contohnya adalah apabila konten di website Anda menggunakan bahasa Indonesia, sudah pasti bahwa Anda menargetkan pengunjung yang berasal dari Indonesia. Oleh karena itu sebaiknya Anda menggunakan server yang lokasinya di Indonesia. Server yang berlokasi di Singapura juga bisa Anda jadikan alternatif.

  5. Pemilihan CMS
  6. Saat ini kebanyakan website dinamis dibangun menggunakan CMS (Content Management System). Karena konten website Anda dapat dikelola dengan lebih mudah dan lebih fleksibel. Anda juga tidak perlu memiliki keterampilan teknis dalam pengoperasiannya, misalnya coding atau programming. Tapi ini bukan berarti Anda tidak memiliki pengetahuan apapun tentang website sama sekali. Setidaknya Anda juga perlu mengetahui dasar-dasar tentang pengkodean html dan pengoperasian CMS yang akan digunakan.

    Adalah sebuah kebohongan besar apabila ada yang mengatakan bahwa Anda bisa membangun sebuah website sendiri tanpa perlu mengetahui apapun tentang html. Sebab tanpa memiliki pengetahuan apapun tentang html, maka Anda harus menggunakan pihak ketiga untuk mendesain website hingga menuliskan artikel di website Anda. Tentu saja ini bukan biaya yang murah.

  7. Pemilihan Template atau Tema
  8. Sebuah halaman website biasanya memiliki elemen utama berupa teks. Elemen lainnya seperti gambar, audio ataupun video biasanya digunakan sebagai pendukung informasi yang hendak disampaikan. Biasanya sebuah website juga memiliki themes atau templete tertentu untuk mempercantik halaman yang akan ditampilkan.

    Pemilihan theme atau template untuk CMS yang Anda gunakan juga harus masuk dalam pertimbangan Anda. Pilihlah themes yang sesuai dengan kebutuhan, jangan hanya memilihnya karena themes tersebut memiliki segudang fungsi dan fitur yang tidak Anda butuhkan. Karena hal itu hanya akan memberatkan server Anda, sehingga akan menurunkan performa server website Anda.

Kembali lagi ke soal mengoptimalkan konten website. Disini yang akan kita optimalkan adalah konten yang ditampilkan secara statis oleh server website Anda. Adapun konten statis pada artikel di website umumnya berupa gambar atau foto. Sedangkan pada tema atau template yang digunakan untuk mempercantik website Anda, biasanya adalah berupa file grafis, icon, font, ataupun script.

Namun sebelum kita melanjutkan bagaimana cara mengoptimalkan konten website dinamis yang memiliki elemen berupa file statis, ada baiknya Anda perlu mengetahui jenis elemen atau file apa saja yang termasuk kedalam konten statis.

Jenis dan Format File Statis pada Website Anda

  • Gambar atau foto
  • File gambar atau foto yang biasanya disisipkan dalam postingan artkel Anda umumnya memiliki format jpeg, gif, atau png. Sebab semua browser dapat menampilkan ketiga gambar yang memiliki format tersebut. Begitupula dengan icon pada themes atau template website Anda, umumnya menggunakan salah satu format diatas.

  • Font
  • Font atau typeface adalah bentuk tulisan yang nantinya akan ditampilkan pada website Anda. Font merupakan salah satu elemen pada themes website. Adapun jenis font yang umumnya digunakan pada website memiliki format woff, woff2, ttf, otf, eot dan svg. Tiap browser memiliki dukungan yang berbeda terhadap jenis font, sehingga sebaiknya Anda menyediakan fungsi fallback untuk font yang digunakan pada website Anda.

  • Icon
  • Icon adalah sebuah tampilan grafis berupa gambar, hanya saja ukurannya lebih kecil. Pada tema website, icon digunakan sebagai simbol untuk mewakili sebuah objek tulisan. Icon juga berfungsi untuk membuat tampilan website Anda lebih menarik. Icon pada website biasanya memiliki format jpeg, gif, atau png.

    Namun saat ini ada font khusus yang juga dapat difungsikan sebagai icon, salah satunya yang banyak digunakan yaitu font awesome.

  • Script
  • Sebuah website dinamis juga biasanya memiliki elemen script berupa file statis. File tersebut umumnya berupa kode css dan javascript. File berupa script tersebut bisa berfungsi untuk mengatur posisi dari elemen di website Anda. Script juga dapat membuat sebuah halaman website lebih interaktif dan dinamis.

    Kedua jenis file tersebut umumnya sama seperti file teks biasa, sehingga Anda bisa membukanya di notepad. Oleh karena itu untuk membedakannya, diberikan ekstensi khusus. Javascript menggunakan ekstensi .js sedangkan css menggunakan ekstensi .css.

Lho terus kapan nih bahas soal mengoptimalkan konten websitenya? Kalau saya langsung menuliskan to the point, maka orang yang masih awam tentang elemen-elemen website akan kebingungan harus memulainya darimana. Sebab seringkali ketika seorang bertanya, dan saya langsung to the point memberikan jawabannya, mereka malah bertanya kembali apa maksudnya ini dan itu.

Oke selanjutnya saya akan membahas bagaimana cara mengoptimalkan konten website, terutama untuk elemen atau file statis yang menjadi pendukung website tersebut. Masih ada yang bingung apa itu website atau konten dinamis dan apapula itu konten statis?

Mengoptimalkan Konten Website Berupa File Statis

Mengoptimalkan konten website bertujuan agar loading halaman website bisa lebih cepat. Ada banyak cara untuk mengoptimalkan konten dinamis maupun konten statis pada website Anda. Diantaranya adalah menggunakan CDN (content delivery network), menggunakan teknik kompresi maupun mengatur cache control. Teknik kompresi dan cache control memiliki tujuan akhir untuk menghemat penggunaan bandwidth.

Ingat lho, menghemat bandwidth bukan hanya ditujukan pada server Anda saja. Sekalipun Anda memiliki server dengan unmetered bandwidth, bukan berarti Anda tidak perlu mengoptimalkan ukuran tiap halaman website Anda. Anda juga perlu memikirkannya dari sisi pengunjung website Anda. Mengoptimalkan konten website juga berarti Anda membantu pengunjung website agar bisa me-loading website lebih cepat dan menghemat penggunaan bandwidth internet mereka. Terlebih untuk pengunjung yang koneksi internetnya masih menggunakan kuota.

Mengoptimalkan konten website pun ada batasannya, terlebih lagi apabila website tersebut adalah dinamis. Antara proses dengan hasilnya harus berimbang. Jangan sampai proses optimasi itu malah memberatkan proses yang terjadi di dalam server. Ada beberapa elemen website baik itu berupa konten dinamis maupun konten statis berupa file yang worth it untuk dioptimalkan, dan adapula yang yang tidak.

  • Mengatur Cache Control Header
  • Cara pertama mengoptimalkan konten website adalah dengan mengatur cache control header pada web server Anda. Dengan demikian file statis di server Anda bisa lebih lama tersimpan di browser milik pengunjung. Sehingga setiap kali pengunjung mengkases kembali website Anda, hanya elemen atau konten dinamis saja yang akan diunduh oleh browser. Misalkan saja 30% konten statik di website Anda bisa tercache di browser pengujung. Maka website Anda akan bisa diakses hingga 30% lebih cepat dan sekaligus bisa menghemat penggunaan bandwidth pengunjung Anda.

    Cara mengatur cache control header di Apache dan Nginx. Lamanya cache bisa diatur sesuai dengan jenis file yang akan di cache oleh browser pengunjung Anda, hingga cache tersebut menjadi expired.

    Berapa lama baiknya setingan cache hingga expired? Apabila Anda sudah jarang melakukan perubahan atau modifikasi script seperti css, javascript, font, maka Anda bisa mengaturnya expired cache lebih lama, misal 30 hari. Setelah 30 hari, maka browser pengunjung akan merefresh kembali file statik dengan mengunduhnya kembali dari webste Anda.

    Jenis file apa saja yang bisa dicache oleh browser pelanggan? Semua konten statis pada website Anda bisa disetting agar dapat di cache oleh browser Anda. Oleh karena itu sebaiknya Anda menghapus query string file css dan js di webste Anda.

    Apa itu query string? Query string digunakan untuk menyimpan sesuatu nilai variable pada URL. Misalnya apabila Anda melihat page source pada halaman website:

    <link rel='stylesheet' id='style-css' href='http://bloganda.com/static-css/style-theme.css?ver=4.5.3' type='text/css' media='all' />
    <script type='text/javascript' src='http://bloganda.com/static-js/jquery-migrate.min.js?ver=1.4.1'></script>
  • Mengaktifkan Kompresi GZIP di Web Server
  • Cara kedua untuk mengoptimalkan konten website adalah dengan mengaktifkan kompresi GZIP pada web server Anda. Cara ini bertujuan untuk memperkecil ukuran file yang akan ditransfer ke browser pengunjung website Anda. Dengan demikian waktu loading yang dibutuhkan oleh pengunjung website Anda juga lebih singkat.

    Berarti ada tambahan proses yang terjadi di sisi server? Iya betul sekali, oleh karena itu Anda juga bisa mengatur elemen apa saja yang harus dikompresi dan elemen mana yang tidak perlu dikompresi. Selain itu Anda juga bisa mengatur berapa tingkat kompresinya. Sebab tidak semua file atau elemen pada website menjadi lebih kecil ketika dilakukan kompresi. Begitu juga halnya dengan tingkat kompresinya, tidak selalu kompresi dengan level yang tinggi memberikan ukuran yang semakin kecil

    Apa saja elemen yang bisa dikompresi? Yang pertama adalah output dari interpreter (server-side scripting) yang digunakan pada website Anda. Misalnya apabila website Anda menggunakan script php, maka kita bisa mengkompresi outputnya sebelum ditampilkan menjadi halaman berbentuk html. Yang kedua adalah file statis seperti css, javascript, xml, csv, txt, dan beberapa jenis font seperti ttf dan svg.

    File apa yang sebaiknya tidak perlu dikompresi? Jenis file statis yang tidak perlu dikompresi diantaranya adalah gambar seperti jpeg, png, dan gif. Kemudian font yang menggunakan format eot, woff, dan woff2. Mengapa tidak perlu? Karena file-file dengan format tersebut sudah dalam keadaan terkompresi.

    Berapa nilai kompresi GZIP yang optimal? Pada GZIP, tingkat kompresi bisa diatur dari 1 hingga 9, namun optimalnya tingkat kompresi adalah sekitar 4 hingga 6. Tingkat kompresi yang terlalu tinggi menimbulkan efek samping terhadap beban cpu pada server Anda.

    Jenis web server apa saja yang mendukung kompresi GZIP on the fly? Semua web server modern mendukung kompresi secara langsung. Apache, Nginx, IIS, dan Litespeed adalah web server yang paling umum digunakan oleh kebanyakan orang.

  • Menggunakan CDN
  • Cara ketiga untuk mengoptimalkan konten website adalah menggunakan CDN. CDN atau conten delivery network merupakan sebuah sistem jaringan untuk mendistribusikan konten dalam sebuah server website ke berbagai server lain di berbagai lokasi dari berbagai belahan dunia. Server CDN berisi salinan data dari server utama, sehingga ketika pengunjung mengakses website tersebut, maka data yang diminta oleh browser akan diterima dari server yang posisinya paling dekat dengan pengunjung tersebut.

    Namun layanan CDN pada umumnya adalah berbayar, walaupun mungkin ada juga yang menyediakan versi gratisannya, misalnya saja Cloudflare. Namun tentu saja ada batasan yang bisa dilayani. Ketika trafik pengunjung website Anda sudah bertambah besar dan Anda masih mengandalkan layanan CDN gratis ini. Mungkin suatu saat Anda menemukan bahwa trafik pengunjung Anda bukannya semakin bertambah tapi malah sebaliknya.

    Apabila trafik website Anda sudah cukup tinggi, Anda pun sebenarnya bisa membuat “server CDN” sendiri untuk mengoptimalkan konten website yang berupa file statis. Walaupun mungkin server utama Anda berada di luar negeri, Anda bisa mendistribusikan konten dari server utama ke dalam server CDN buatan Anda sendiri.

  • Pemilihan format gambar yang akan ditampilkan pada halam website
  • Seperti yang sudah dijelaskan sebelumnya, bahwa gambar dengan format jpeg, gif, dan png tidak perlu dikompresi melalui web server Anda. Untuk mengoptimalkannya, Anda hanya bisa menentukan jenis format gambar yang sesuai dengan kegunaannya. Gambar dengan format jpg paling baik digunakan pada halaman website Anda apabila gambar tersebut merupakan hasil olahan perangkat fotografi.

    Gambar dengan format png lebih cocok digunakan untuk menampilkan hasil olahan grafis dari komputer. Misalnya icon dan logo website Anda ataupun ilustrasi yang berupa gambar animasi diam. Format png juga mendukung kedalaman warna 8-bit dan 24-bit, serta dapat merepresentasikan latar transparan.

    Gambar dengan format gif lebih cocok digunakan untuk menampilkan hasil olahan grafis dari komputer yang berupa animasi bergerak. Format gif hanya mendukung kedalaman warna 8-bit, namun juga dapat merepresentasikan latar transparan.

  • Penyesuaian dimensi gambar
  • Ketika Anda hendak mengupload gambar untuk disisipkan pada halaman website, Anda harus menyamakan ukuran lebar dan tinggi dari gambar yang akan diupload dengan ukuran lebar dan tinggi gambar yang akan ditampilkan pada halaman website. Hal ini dimaksudkan agar browser pengunjung website Anda tidak perlu memproses resizing.

    Re-sizing gambar yang dilakukan di sisi client (browser pengujung) dari ukuran aslinya di website Anda ke ukuran yang lebih kecil hanya akan membuang-buang banwidth. Begitupula dengan re-sizing gambar ke ukuran yang lebih besar, maka tampilan gambar akan terlihat pecah.

 

3 Comments

  1. Febryan Valdo 30 Nov 2016 21:51
    • Venantius Venantius 30 Nov 2016 22:47
      • Febryan Valdo 01 Dec 2016 09:43

Leave a Reply