Cara Meraih Skor Kecepatan > 90 dan Melejitkan Waktu Muat Website < 2 Detik

[nextpage title=”Inilah …”]

30+ Cara Ampuh Untuk Meningkatkan Kecepatan Website WordPress

30+ Cara Ampuh Untuk Meningkatkan Kecepatan Website WordPress

 

WordPress terbukti merupakan platform yang paling banyak dipergunakan karena kemudahan dan keluwesannya dalam membuat website. Di sisi lain, WordPress memiliki kelemahan dikarenakan proses loading yang relatif lambat dan juga keamanannya yang kurang kuat.

Tanpa penanganan yang tepat, Anda akan menemui masalah dengan website WordPress yang lamban. Di artikel ini Anda akan mengetahui cara terbaik untuk meningkatkan kecepatan website berbasis WordPress.

Mengapa Website Anda Perlu Cepat ?

Apakah Anda pernah berpikir untuk lebih mengutamakan tampilan website yang menawan dibandingkan dengan membuat website yang lebih cepat ?

Coba pikirkanlah lagi …

Sebagus apapun website Anda, namun jika website Anda muncul terlalu lama, maka kebanyakan pengunjung akan pergi bahkan sebelum mengetahui isi website Anda. Jika website Anda lambat, pengunjung cenderung untuk mengklik tombol “back” dan kembali ke mesin pencari. Pengunjung – terutama yang menggunakan perangkat mobile – memutuskan untuk tetap atau meninggalkan website hanya dalam hitungan detik.

Berdasarkan hasil dari berbagai riset, diketahui bahwa adanya penundaan 1 detik akan mempengaruhi :

Dan menurut penelitian Akamai pada pengunjung toko online :

  • 47% calon pembeli menginginkan website tampil dalam 2 detik atau kurang.
  • 40% pengunjung online shop akan meninggalkan website jika lebih dari 3 detik belum muncul.
  • 52% orang yang sering belanja online mengatakan kecepatan halaman penting agar mereka bisa tetap loyal.

Perusahaan besar juga mendukung perlunya peningkatan kecepatan website :

  • Amazon melaporkan adanya peningkatan penghasilan 1% untuk setiap perbaikan 100 milidetik pada kecepatan websitenya.
  • Walmart raksasa ritel di Amerika mengalami peningkatan 2% untuk setiap perbaikan kecepatan 1 detik.
  • Bing mesin pencari dari Microsoft : penundaan 2 detik akan mengurangi kepuasan pengunjung sebesar 3.8%, serta potensi hilangnya penghasilan 4.3%.

[nextpage title=”Seberapa Cepatkah Cepat Itu ?”]

Sebelum mengukur kecepatan website, sebetulnya seberapa cepat agar suatu website dikatakan cepat ?

Mengoptimalkan halaman web untuk meraih kecepatan tertinggi sebetulnya merupakan suatu proses yang tidak mudah dan boleh dibilang cukup melelahkan. Seiring dengan berkembangnya website Anda, selalu akan ada celah yang perlu ditingkatkan.

Untuk bisa dikatakan cepat, Google menyarankan agar website Anda memiliki waktu respon kurang dari 2 detik (2 ms). Jadi sekalipun skor website Anda di Google Pagespeed Insight belum mencapai skor tertinggi, namun jika waktu respon sudah dibawah 2 detik, website Anda sudah dikategorikan cepat oleh Google. Jadi tidak perlu terpaku untuk mengejar skor tertinggi di Google PageSpeed Insight. Skor bukanlah segalanya, utamakanlah kepuasan pengunjung diatas skor website Anda.

Sebagai acuan, berikut nilai kecepatan berdasarkan waktu responnya :

  • < 1 detik = sangat cepat
  • 1-3 detik = cepat
  • 4-7 detik = sedang
  • 8-10 detik = lambat
  • > 10 detik = sangat lambat

Acuan nilai kecepatan ini berdasarkan pada penelitian yang memperlihatkan bahwa pengguna Internet mengharapkan halaman web muncul tidak lebih dari dua detik, terutama sekali mereka yang menjelajah Internet dengan menggunakan perangkat mobile

Kecepatan Website Meningkatkan Peringkat Website Anda di Mesin Pencari

Google sekarang menjadikan kecepatan website sebagai salah satu penentu peringkat di mesin pencari. Google lebih mempertimbangkan kecepatan website dibandingkan dengan tampilan website. Website yang cepat akan dipromosikan oleh Google di hasil pencariannya. Ini berarti, kecepatan website merupakan salah satu faktor penting dari SEO (Search Engine Optimization).

Jika website Anda lambat, bukan hanya pengunjung yang akan kehilangan kesabarannya tetapi mesin pencari (baik Google ataupun Bing) juga tidak menyukai website Anda dan cenderung akan menurunkan peringkat website Anda. Jadi, sangatlah penting untuk memiliki website yang cepat.

Berikut ini Anda akan mengetahui cara mempercepat waktu muat website < 2 detik dan mencapai skor kecepatan > 90.


[nextpage title=”MENGEJAR SKOR KECEPATAN 90+ dan WAKTU MUAT < 2 DETIK”]

PLACESIANA.com membuat 2 uji coba kecepatan halaman, yaitu di halaman depan dan di halaman artikel yang sedang Anda baca ini. Adapun hasil tangkapan layar saat pengujian ini dibuat bisa dilihat disini (untuk halaman depan) dan disini (untuk artikel ini).

Perangkat yang dipergunakan untuk melakukan pengujian adalah :

Dan berikut ini hasil pengujian kecepatan yang diperoleh dari masing-masing tangkapan layar tersebut :

  • Halaman Depan :
    PageSpeed : Desktop 95, Mobile 85
    GTMetrix : PageSpeed 99%, YSlow 94%, Load Time 1.9s
    Pingdom : Skor 80, Load time 2.36s
    Placesiana-PSI-desktop-95wPlacesiana-GTMetrix-1.9sA99wPlacesiana-Pingdom-2.36w
  • Artikel Ini :
    PageSpeed : Desktop 95, Mobile 85
    GTMetrix : PageSpeed 99%, YSlow 94%, Load Time 1.4s
    Pingdom : Skor 83, Load Time 1.48s
    Placesiana-30Cara-PSI-Desktop-95wPlacesiana-30Cara-GTMetrix-1.4sA99wPlacesiana-30Cara-Pingdom-1.48w

Apakah hasil ini sudah maksimal dan tidak bisa ditingkatkan lagi ??? Tentu saja, belum.
Ada beberapa faktor yang masih bisa dioptimalkan untuk meraih skor yang lebih baik di ketiga perangkat pengujian ini.

Di artikel ini Anda akan mengetahui semua faktor yang bisa Anda optimalkan untuk meraih skor tertinggi dan waktu muat tercepat.

[nextpage title=”30+ Cara Meningkatkan Kecepatan Website WordPress”]

Ada 2 faktor utama yang menentukan kecepatan website Anda, yaitu faktor eksternal dan faktor internal. Faktor eksternal adalah faktor yang ada di luar jangkauan Anda sehingga Anda tidak mempunyai banyak kemampuan untuk mengubahnya.

Salah satu contoh faktor eksternal adalah gambar ataupun kode script yang Anda dapatkan dari website lain, misalkan dari Facebook, Twitter, Google atau yang lainnya. Anda hanya bisa menggunakannya tetapi tidak akan pernah bisa mengubah ataupun mengoptimalkannya karena gambar atau kode ini tersimpan di server mereka.

Sebaliknya, faktor internal adalah faktor yang berada dalam jangkauan Anda sehingga Anda bisa mengubah dan memperbaikinya setiap saat diperlukan. Beberapa contoh faktor internal adalah konfigurasi website di server, theme dan plugin WordPress, gambar web, CSS, Javascript dan juga HTML.

Ada lebih dari 30 hal yang bisa Anda lakukan untuk meningkatkan kecepatan website WordPress Anda. Mari sekarang kita pelajari satu per satu cara untuk memperbaiki website yang lamban ini.

30-cara-meningkatkan-kecepatan-website-wordpress

[nextpage title=”Pilih Web Hosting yang Cepat”]

    1. Web hosting murah tidak selamanya menguntungkan
      Web hosting murah itu menarik dan menyenangkan, betul … ???
      Web hosting yang memberikan harga sangat murah dengan kapasitas dan bandwidth tanpa batas biasanya dipergunakan ramai-ramai oleh banyak pengguna (dikenal dengan istilah shared hosting). Efek negatifnya, akan terjadi antrian atau tumpukan pemakai, terutama sekali jika ada website lain di server tersebut yang banyak pengunjungnya.Ini tidak berbeda banyak dengan jika Anda menyewa rumah beramai-ramai dan hanya tersedia 1 kamar mandi. Apa yang terjadi jika pada saat yang sama semua penghuni ingin menggunakan kamar mandi ? Apa yang terjadi jika ada penghuni yang mandi amat sangat lama ? Antrian panjang akan terjadi dan waktu menunggu menjadi lebih lama.Demikian pula dengan dengan website yang berada di web hosting padat. Jika di web hosting sedang terjadi antrian pemakaian sumber daya, maka pengunjung website Anda akan menunggu cukup lama untuk melihat website Anda. Bahkan pada saat-saat sibuk seperti ini, server web hosting mungkin saja menjadi down.
    2. Utamakan teknologi tinggi & terkini
      Pemain web hosting lama yang sudah sangat dikenal ternyata banyak yang tidak menggunakan teknologi tinggi dan terkini. Padahal teknologi sudah berubah dengan amat sangat cepat. Bisa dimaklumi mengapa mereka tidak selalu mengikuti perkembangan teknologi. Klien yang sudah amat banyak membuat jalan mereka menjadi lebih lamban sehingga sulit untuk memperbaharui teknologinya.Apa saja teknologi yang perlu dipertimbangkan dalam memilih web hosting ???

        • Cloud Hosting
          Berbagi sumber daya sebuah mesin web server merupakan salah satu penyebab utama lambannya website. Web hosting tradisional biasanya menggunakan sistem shared hosting seperti ini. Saat ini sudah ada alternatif teknologi baru yang lebih baik, lebih aman dan tentu saja lebih cepat yaitu sistem cloud hosting.Dengan sistem ini, website diletakkan pada serangkaian server-server yang saling berhubungan satu sama lain dan berfungsi sebagai satu kesatuan. Jika salah satu server rusak, mesin server lainnya akan segera mengambil alih dengan waktu yang sangat singkat sehingga masa kegagalan server (server downtime) menjadi amat minimal.Website mendapatkan alokasi sumber daya (CPU, RAM dan kapasitas disk) khusus yang tidak yang tidak dibagi-pakai dengan pengguna lainnya. Jika salah satu website melebihi batas penggunaan sumber daya yang sudah dialokasikan untuknya, maka hanya website itu saja yang akan mengalami penurunan performa. Pengguna-pengguna lainnya beserta website-website lainnya tidak akan terpengaruh sama sekali.
        • Hard disk
          Kebanyakan web hosting konvensional menggunakan hard disk mekanik yang lambat karena tergantung pada pergerakan fisik hard disk sewaktu mengakses data. Untuk mengatasi hal ini, pilihlah web hosting yang telah menggunakan hard disk SSD (Solid State Drives) yang memungkinkan untuk membaca dan menulis data secara bersamaan sehingga hard disk SSD bisa sekitar 20 kali lebih cepat daripada hard disk mekanik.
        • Web Server
          LiteSpeed adalah software web server tercanggih dan tercepat saat ini yang terbukti 40 kali lebih cepat dari software Apache dalam melayani website dinamis yang menggunakan script PHP. Apache merupakan salah satu penyebab lambatnya loading website. Saat ini, hampir sebagian besar penyedia web hosting masih menggunakan Apache webserver yang sudah ketinggalan dan lambat.
        • Database Server
          Website yang dibangun diatas WordPress mempergunakan database sebagai basisnya. Pemilihan database server yang cepat akan membantu website Anda bisa diakses secara lebih cepat. Sejak awal munculnya WordPress, database yang banyak dipergunakan oleh web hosting adalah MySQL.Kabar baiknya – sejak MySQL diambil alih oleh Oracle – telah muncul alternatif database server MariaDB yang juga dikembangkan oleh pendiri MySQL- Michael “Monty” Widenius – dengan dukungan sekitar 50.000 pengembang MySQL yang tergabung dalam proyek open source bernama Monty Program. MariaDB memiliki lebih banyak keunggulan dibandingkan MySQL dengan performa yang lebih baik, stabilitas lebih baik, dan yang terpenting adalah proyeknya dikelola dengan lebih baik.
        • Web Accelerator
          Teknologi CDN (Content Delivery Network) merupakan salah satu terobosan untuk mempercepat akses suatu website dimana website Anda disimpan di kumpulan jaringan server yang saling terhubung di berbagai penjuru dunia. Dengan cara ini, setiap pengunjung – dimanapun dia berada – akan bisa mengakses website Anda dari server yang paling dekat.Sayangnya CDN hanya bisa menyimpan sekitar 65% dari suatu website. Sebagian 35% lainnya tidak dapat di-cache karena biasanya dihasilkan secara dinamis ataupun ditandai sebagai ‘do not cache‘. Dan 35% bagian ini kebanyakan merupakan bagian awal HTML yang harus diunduh sebelum bagian lainnya.Untuk memecahkan masalah ini, CloudFlare (salah satu penyedia jasa layanan CDN yang bisa dipergunakan secara gratis) menghadirkan teknologi Railgun yang mampu memberikan rasio kompresi sampai 99.6% pada obyek web yang sebelumnya tidak bisa di-cache. Ini menghasilkan tambahan peningkatan performa 200% sehingga website bisa diakses secara jauh lebih cepat.
REKOMENDASI WEB HOSTING MURAH dan TERBAIK :
  • Dewa Web merupakan penyedia layanan SSD Cloud Hosting murah dan terbaik di Indonesia. Dewa Web menggunakan teknologi terkini seperti, harddisk SSD, web server LiteSpeed versi Enterprise Multi-CPU (Unlimited), database MariaDB dan juga menyediakan web akselerator CloudFlare Railgun secara GRATIS (wow, Anda bisa hemat sampai $200/bulan … SUPER MANTAP !!!
  • A2 Hosting adalah penyedia jasa web hosting yang sangat cocok sekali Anda pergunakan jika mempunyai target market Internasional. A2 Hosting, selain telah menggunakan harddisk SSD yang super cepat juga menerapkan teknologi SwiftServer yang memiliki kecepatan 20x lebih cepat dari web hosting biasa.

[nextpage title=”Gunakan Theme WordPress yang Cepat”]
Web hosting yang tercepat sekalipun tidak akan membuat website Anda otomatis menjadi cepat. Masih ada banyak faktor lain yang menentukan kecepatan loading website Anda. Setelah web hosting, salah satu faktor penting yang perlu Anda pertimbangkan adalah memilih theme wordpress yang tercepat.

Banyak theme WordPress populer dan memiliki tampilan indah serta fitur yang menawan tetapi sayangnya dibuat tanpa mempertimbangkan sisi kecepatan. PLACESIANA.com sudah membuat perbandingan kecepatan ratusan theme WordPress dari 15 pengembang ternama dan Anda bisa melihat hasil selengkapnya di 200 Theme WordPress Tercepat 2015.

REKOMENDASI THEME WORDPRESS TERCEPAT :

[nextpage title=”Optimalkan Plugin WordPress”]

  • Temukan plugin yang memperlambat website
    Terkadang, website WordPress berjalan sangat lambat dikarenakan adanya plugin yang dikembangkan tanpa mempertimbangkan performa.P3 (Performance Profile Plugin) merupakan salah satu plugin yang bisa dipergunakan untuk mendiagnosa performa plugin-plugin dengan memperlihatkan dampak dari plugin terhadap waktu muat halaman website. Ini mempermudah dalam mengetahui plugin mana yang membuat lambat website.Setelah Anda mengetahui plugin yang memperlambat website, Anda bisa memutuskan untuk tetap menggunakannya, mengganti dengan plugin alternatif ataupun menghapusnya.

  • Kurangi jumlah plugin yang dipergunakan
    Semakin banyak plugin, semakin besar sumber daya yang dipergunakan. Secara otomatis, ini akan juga mempengaruhi performa website Anda, terutama sekali jika plugin tersebut dibuat secara tidak optimal.Untuk mengatasi hal ini, cobalah menggunakan plugin yang mempunyai fungsi lengkap sehingga bisa menggantikan fungsi dari beberapa plugin sekaligus.Selain itu, Anda juga bisa mengurangi penggunaan plugin yang mempunyai fungsi atau kegunaan hampir sama. Sebagai contoh, di artikel ini Anda akan menemukan banyak plugin WordPress yang dipergunakan untuk memperbaiki kecepatan website. Beberapa plugin ini mempunyai fungsi yang mirip atau bahkan tumpang tindih. Tentu saja Anda bisa memilih untuk menggunakan beberapa plugin dengan fungsi khusus. Atau bisa juga dengan menggunakan satu plugin saja namun dengan fungsi yang mewakili beberapa plugin sekaligus.Ada plugin yang mempunyai sifat banyak fungsi sehingga bisa menggantikan beberapa plugin sekaligus. Dengan menggunakan satu plugin sebagai pengganti beberapa plugin dengan fungsi yang sama, berarti Anda bisa mengurangi sumber daya yang dipergunakan website Anda. Namun tidak berarti plugin multi fungsi mempunyai efektifitas sebaik beberapa plugin sekaligus.Salah satu plugin yang mempunyai banyak fungsi untuk meningkatkan kecepatan adalah WP Rocket, beberapa fungsi yang tersedia adalah Lazy Load, browser caching, minify Javascript + CSS, serta masih banyak lagi. Dengan menggunakan hanya satu plugin, Anda bisa mengurangi penggunaan plugin-plugin lainnya. Lebih praktis dan biasanya lebih menghemat sumber daya.
  • Kurangi jumlah plugin yang tidak bisa anda kontrol
    Ada cukup banyak plugin yang sama sekali tidak bisa Anda kendalikan atau optimalkan kecepatannya. Plugin ini biasanya mempergunakan kode JavaScript, CSS, font ataupun gambar yang disimpan di server mereka, sehingga Anda tidak bisa mengaturnya sama sekali. Ini akan menunda proses loading website karena Anda perlu menghubungi server mereka sebelum website Anda bisa ditampilkan sepenuhnya.Terkadang, bukan plugin saja yang tidak bisa Anda kontrol, tetapi juga gambar, kode-kode lain seperti iklan Google Adsense, widget dari social media (seperti Facebook, Twitter) atau kode lainnya yang Anda gunakan di website juga berpotensi untuk memperlambat kecepatan website Anda. Namun jika Anda memang memerlukannya, mau tidak mau Anda harus memasangnya, hanya saja Anda tidak akan pernah bisa mengatur baik kode ataupun gambar yang dipergunakan.

[nextpage title=”Optimalkan Gambar Web”]
Gambar merupakan salah satu hal utama penentu faktor kecepatan website yang sangat diperhatikan oleh Google. Gambar mempergunakan bandwidth terbesar dari kebanyakan website. Untuk itu, Google menyarankan agar Anda :

  1. menggunakan format gambar yang tepat
  2. mengkompres gambar secara maksimal sehingga ukurannya mengecil
  3. menentukan ukuran gambar agar browser bisa mengetahui secara lebih cepat

#4.1 Gunakan format file gambar yang sesuai dengan kebutuhan

Ada banyak jenis format gambar, untuk itu Anda perlu mengetahui format mana yang cocok dengan gambar Anda agar website lebih optimal. Berikut ini beberapa saran untuk menentukan penggunaan format gambar:

  • Gunakan GIF untuk gambar sederhana atau sangat kecil (misalnya kurang dari 10×10 piksel, atau palet warna yang kurang dari 3 warna, contoh: gambar gravatar, favicon) dan juga untuk gambar yang bergerak (animasi).
  • PNG biasanya lebih baik dari GIF, meskipun beberapa versi browser lama hanya memiliki dukungan parsial untuk PNG.
  • Gunakan JPG untuk semua gambar bertipe fotografi.
  • Jangan menggunakan BMP ataupun TIFF website karena ukurannya yang cenderung sangat besar.

#4.2 Perkecil ukuran gambar dan padatkan

Selain memperkecil ukurannya secara fisik, Anda juga bisa mengurangi ukuran gambar dengan cara mengoptimalkannya. Beberapa optimalisasi gambar yang bisa dilakukan adalah dengan :

  • menghapus bagian gambar yang tidak dibutuhkan
  • mengurangi kedalaman warna ke tingkat terendah yang masih bisa diterima oleh mata
  • menghapus komentar atau informasi gambar yang tidak dipergunakan
  • memotong gambar sesuai ukuran halaman web.
    Sebagai contoh, jika lebar halaman website 600px, ubahlah ukuran gambar menjadi selebar itu … atau lebih kecil. Jangan langsung mengunggah gambar dengan lebar diatas 600px, ini akan memperlambat proses muat halaman website Anda

#4.3 Tentukan ukuran lebar dan tinggi gambar

Menyertakan ukuran lebar dan tinggi gambar ternyata ikut menyumbang peningkatan kinerja website. Jika Anda tidak menyertakan ukuran dimensi gambar, browser tidak mengetahui seberapa besar gambar sampai gambar diunduh secara lengkap. Penundaan kecil ini membuat browser perlu mengukurnya dulu sehingga memperlambat penampilan halaman. Hal ini akan menjadi semakin buruk jika Anda mempergunakan banyak gambar dalam halaman yang sama.

Selain menggunakan editor gambar WordPress, Anda bisa menentukan ukuran gambar dengan cara berikut :

  • HTML: <img src="" width="200" height="100">
  • Inline CSS: <img src="" style="width: 200px; height: 100px">
  • External CSS: #myImage { width: 200px; height: 200px; }

Tool untuk mengoptimalkan gambar

Pengoptimalan lanjutan pada gambar bisa dilakukan dengan memadatkan gambar menggunakan kompresi lossless (tidak mengurangi kualitas gambar) dan kompresi lossy (hasil kompresi lebih kecil dari lossless tetapi dengan kualitas lebih rendah).

Ada cukup banyak plugin yang bisa dipergunakan untuk mengoptimalkan gambar, bahkan kebanyakan bisa melakukan optimalisasi secara otomatis saat gambar diunggah. Beberapa plugin yang bisa Anda pergunakan adalah :

  • WP Smush.it mengurangi ukuran file gambar dengan mengkompres secara otomatis saat diunggah ke media library. Semua kompresi bersifat lossless sehingga Anda tidak akan melihat banyak perbedaan dalam kualitas gambar.
  • Kraken Optimizer mengoptimalkan gambar WordPress melalui Kraken API. Plugin ini bisa dipergunakan untuk mengoptimalkan baik gambar lama ataupun gambar yang baru diunggah. Mode kompresi lossless dan lossy semuanya bisa dilakukan dengan Kraken.
  • EWWW Image Optimizer juga bisa mengoptimalkan gambar secara otomatis sewaktu diunggah ataupun yang sudah ada dalam pustaka media. Baik metode lossless ataupun lossy semua didukung untuk mengoptimalkan gambar Anda

Selain menggunakan plugin, ada banyak program yang juga bisa Anda pergunakan untuk mengkompres gambar, seperti :

Mempercepat dengan Metode Lazy Load
Salah satu cara lain yang bisa dipergunakan untuk mempercepat proses muat website adalah dengan menggunakan metode Lazy Load. Lazy Load adalah cara penundaan pemuatan gambar pada halaman website yang panjang. Gambar yang tidak terlihat di jendela browser pengunjung, tidak dimuat sampai pengunjung menuju ke bagian tersebut. Ini kebalikan dari teknik image preloading yang memuat gambar sebelum ditampilkan. Dengan menggunakan Lazy Load pada halaman website yang panjang akan membuat halaman ditampilkan secara lebih cepat.

Ada banyak plugin WordPress yang dibuat khusus untuk mendukung penggunaan Lazy Load, seperti :

[nextpage title=”Gunakan Browser Caching”]

Ketika Anda mengunjungi suatu website, obyek di halaman tersebut (HTML, CSS, Javascript atau gambar) yang Anda kunjungi akan disimpan di harddisk Anda dalam cache browser atau dalam penyimpanan sementara. Di lain waktu, jika Anda mengunjungi website itu kembali, browser akan mengambil sebagian isi halaman tanpa harus mengirimkan permintaan HTTP ke server lagi.

Tenni Theurer dari Yahoo menjelaskan bahwa 40-60% pengunjung website datang dengan cache dalam keadaan kosong, sehingga sangatlah penting untuk membuat halaman website Anda cepat untuk kunjungan pertama ini. Tetapi Anda juga perlu mengaktifkan browser caching untuk menghemat waktu di kunjungan berikutnya.

Apa itu browser caching?

Setiap kali browser memuat suatu halaman web, browser perlu mengunduh semua file web agar halaman tersebut bisa ditampilkan secara benar. Ini berarti termasuk, file HTML, CSS, Javascript dan juga gambar.

Beberapa halaman mungkin hanya berisi sedikit file dan berukuran kecil, hanya sekian kb (kilobyte). Halaman lainnya mungkin berisi banyak file-file besar, dan bisa saja berukuran sampai beberapa mb (megabyte). Foto dengan resolusi tinggi biasanya lebih dari 1mb. Twitter.com saja berukuran lebih dari 2mb.

Browser caching bisa membantu menyimpan file-file web secara lokal di dalam harddisk. Kunjungan pertama biasanya memerlukan waktu yang paling banyak. Namun, di kunjungan berikutnya, atau saat memuat ulang (refresh/reload) pada halaman, atau bahkan ketika berpindah ke halaman yang berbeda di website Anda, mereka sudah memiliki beberapa file yang tersimpan secara lokal di dalam harddisknya. Ini berarti jumlah data yang perlu diunduh akan menjadi lebih sedikit, akibatnya halaman website Anda akan terlihat lebih cepat.

Ada banyak plugin WordPress yang bisa dipergunakan untuk mengatur Browser Caching, beberapa diantaranya adalah :

Mau Browser Caching Premium Terbaik … GRATIS ???
Silakan baca terus artikel ini sampai selesai untuk mendapatkannya !

[nextpage title=”Berikan Batas Waktu pada Elemen-Elemen Website”]
Jika Anda menguji kecepatan website dengan menggunakan tool Google PageSpeed Insight, kemungkinan Google akan meminta Anda untuk melakukan “Leverage Browser Caching” pada website Anda. Apa artinya ini dan bagaimana cara melakukannya ?

Dengan mengontrol browser caching, browser akan mengetahui apakah elemen yang ada di cache browser bisa langsung dipergunakan atau perlu diunduh dulu. Saat berkunjung kembali, pengunjung akan mendapatkan tampilan yang lebih cepat karena elemen website yang diperlukan sudah tersimpan di browser cache.

Untuk mengaktifkan browser caching bisa dilakukan dengan cara mengatur Expire Header HTTP, yaitu dengan memberikan batas tanggal atau umur maksimum dalam header HTTP untuk elemen-elemen statis website. Ini biasanya dilakukan dengan mengubah file .htaccess di website Anda. File ini tersembunyi tetapi akan terlihat melalui program FTP seperti FileZilla ataupun File Manager di Control Panel Web. Anda bisa mengubah isi file .htaccess dengan menggunakan program Notepad atau editor teks lainnya.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

Aturan ini memberikan batas waktu 1 tahun untuk konten statis seperti gambar (jpg, jpeg, gif, png), dan 1 bulan untuk file Javascript dan CSS.

Tentukan batas waktu ini berdasarkan pada kebutuhan website Anda. Jika beberapa jenis file sering diperbarui, Anda perlu memberikan batas waktu yang lebih pendek. Dan sebaliknya, untuk file-file yang jarang diperbarui berikan batas waktu yang cukup panjang.

Plugin WordPress untuk mengatur Expire Header dan Browser Caching

Dengan menggunakan salah satu plugin diatas, Anda tidak perlu memasukkan kode dan menyentuh file .htaccess sama sekali.

Mengatasi Leverage Browser Caching yang “Bandel”

Terkadang, sekalipun Anda sudah mengaktifkan browser caching, namun sewaktu menguji kecepatannya (misal dengan Google PageSpeed Insight), Anda masih melihat masalah Leverage Browser Caching. Apakah ini berarti browser caching yang Anda buat tidak berjalan dengan baik ???

Tidak juga. Sebagai contoh di gambar berikut ini, masalah browser caching ternyata disebabkan oleh aplikasi yang ada di luar website, dalam hal ini kode yang menjadi penyebab berasal dari website Sumome, Twitter dan juga Google.

mengatasi-leverage-browser-caching

Apa yang bisa Anda lakukan untuk mengatasi kode program yang ada di luar website Anda ? Tidak ada !
Satu-satunya hal yang bisa Anda lakukan adalah menon-aktifkan program yang yang berasal dari website tersebut.

Namun jika Anda memang sangat memerlukannya … just Let It Go, Let It Go 🙂

[nextpage title=”Content Delivery Network (CDN)”]

Caching di sisi browser saja sudah bisa meningkatkan banyak performa website. Namun ini saja tidak cukup, Anda bisa menambah kecepatan website sampai dua kali lebih cepat dengan menggunakan Content Delivery Network (CDN)

CDN meningkatkan waktu muat website Anda secara drastis dengan cara mendistribusikan konten statis ke berbagai server yang tergabung dalam jaringannya. Ketika seorang pengunjung meminta suatu halaman, file-file statis (seperti, JavaScript, CSS, gambar, web-font dan obyek web lainnya) akan diambil dari server CDN yang terdekat lokasinya sehingga website akan tampil jauh lebih cepat dibandingkan tanpa menggunakan CDN.

Menurut CloudFlare, suatu website yang menggunakan CDN rata-rata akan mengalami :

  • Peningkatan kecepatan dua kali lebih baik
  • Menggunakan 60% bandwidth lebih sedikit
  • Menjadikan HTTP Request 65% lebih sedikit
  • Keamanannya lebih meningkat, dan
  • Peningkatan peringkat di mesin pencari (Google menggunakan kecepatan sebagai salah satu faktor penentu peringkat website)

Berbagai macam layanan CDN

Layanan CDN ada yang bisa Anda pergunakan secara gratis namun ada juga yang berbayar jika Anda ingin mendapatkan kemampuan yang lebih banyak.

  • Untuk website kecil, Photon dari WordPress Jetpack, jsDelivr, dan CloudFlare merupakan pilihan yang baik karena bisa dipergunakan secara gratis.
  • Jika Anda menjalankan website berukuran sedang (sekitar 40.000 sampai 50,000 pageviews), pergunakanlah CloudFlare , MaxCDN atau Rackspace
  • Untuk website yang menyediakan layanan media streaming, seperti video, audio dan game online, lebih cocok menggunakan CDN77 yang memang dibuat untuk ini.
  • Layanan CloudFront dari Amazon bisa dipergunakan untuk website yang sangat ramai atau untuk level enterprise.

Photon sebetulnya bukan CDN, tetapi Photon menyediakan layanan caching khusus untuk gambar (hanya GIF, PNG dan JPG) melalui plugin Jetpack. Ini berarti web hosting Anda akan mengalami lebih sedikit beban kerja dan tampilan gambar yang lebih cepat untuk pengunjung website.

Hanya saja ada keterbatasan layanan ini, yaitu tidak tersedianya batas waktu caching sehingga gambar selamanya akan di-cache. Untuk itu, Anda perlu mengganti nama gambar jika ingin mengubahnya.

jsDelivr adalah CDN gratis yang mengijinkan pemilik website menyimpan file-file mereka, termasuk gambar, CSS, font, JavaScript, dan jQuery. Layanan ini didukung oleh CloudFlare dan MaxCDN.

CloudFlare menyediakan layanan dasar CDN secara gratis yang mencakup performa kecepatan website, perlindungan keamanan website dan statistik lengkap tentang pengunjung Anda. CloudFlare tidak meminta biaya untuk penggunaan bandwidth, bahkan sekalipun website Anda semakin populer ataupun saat website Anda sedang mengalami serangan.

CloudFlare memiliki lebih dari 25 data center yang tersebar di berbagai penjuru dunia dan menggunakan teknologi yang disebut Anycast untuk mengarahkan pengunjung ke data center terdekat.

MaxCDN merupakan CDN populer yang dipergunakan oleh website semacam The Next Web, The Washington Times dan WP Engine. MaxCDN mempunyai jaringan server di banyak tempat, termasuk Amerika, Inggris, China Australia, dan negara-negara lainnya.

Rackspace Cloud Files menyediakan penyimpanan file dan media dengan menggunakan Akamai, salah satu CDN terbesar yang melayani perusahaan besar seperti Facebook dan Twitter. Rackspace menggunakan lebih dari 200 lokasi global untuk memastikan pengiriman file bisa dilakukan secara cepat.

CDN77 mengkhususkan diri melayani media streaming untuk software, video, audio dan juga game. CDN77 masih cukup baru namun sudah memiliki 25 data centers di 21 negara.

Amazon CloudFront adalah CDN yang memberikan akses developer dengan kapasitas sama seperti yang dipergunakan Amazon untuk menjalankan bisnis globalnya.

[nextpage title=”Optimalkan Database WordPress”]

WordPress mempunyai fitur autosave pada setiap post atau page yang dibuat. Masalahnya, database MySQL di WordPress akan segera menjadi penuh dengan revisi post, trackback, pingback, komentar spam, komentar yang belum disetujui dan bahkan item-item lain yang sudah dihapus. Jika database ini tidak dioptimalkan, maka database WordPress akan menjadi besar sehingga membuat sistem WordPress menjadi lebih lamban, yang akan berakibat buruk bagi website Anda.

Solusi untuk mengatasi hal ini adalah dengan secara rutin membersihkan sampah-sampah database MySQL sehingga menjadi lebih efisien karena hanya berisi dengan data-data yang diperlukan. Optimisasi database bisa meningkatkan waktu muat website.

Optimisasi database MySQL di WordPress bisa dilakukan melalui melalui phypmyadmin dan plugi WordPress.

Mengoptimalkan Database Melalui PHPMyAdmin
PHPMyAdmin bisa diakses melalui CPanel website Anda. Pilihlah nama database website Anda, kemudian tandai semua tabel dengan mengklik Check All. Di menu dropdown With Selected, pilih Optimize Tables untuk mulai mengoptimalkan semua tabel di database tersebut.

optimisasi-database-mysql-wordpress-di-phpmyadmin.jpg

Mengoptimalkan Database dengan Menggunakan Plugin WordPress
Jika Anda tidak menyukai cara optimisasi database secara manual, WordPress menyediakan cukup banyak plugin yang bisa dipergunakan untuk mengoptimalkan database, yaitu :

Catatan: Pastikan untuk membuat backup database terlebih dahulu sebelum melakukan proses optimisasi database WordPress, sekedar untuk berjaga-jaga jika ada hal yang tidak diinginkan terjadi.

[nextpage title=”Atur Jumlah Revisi yang Disimpan”]
Wordpress menyimpan suatu revisi dari post setiap kali Anda memperbarui post yang Anda buat. Revisi memungkinkan Anda untuk melihat kembali pada perubahan yang disimpan sebelumnya dan bahkan mengembalikannya ke versi revisi sebelumnya jika diperlukan.

Ketika Anda sudah selesai mengerjakan penulisan suatu post, WordPress masih menyimpan semua revisi yang berkaitan dengan post tersebut. Revisi-revisi ini bukan hanya mempercepat penuhnya ruang disk web hosting tetapi juga membuat database WordPress menjadi besar dan lambat.

Dengan mengatur jumlah revisi yang diperbolehkan atau bahkan menghapus semuanya setelah tidak diperlukan, Anda bisa menghemat tempat penyimpanan dan database serta sekaligus meningkatkan performa website Anda.

Jika Anda sama sekali tidak memerlukan fitur revisi post, Anda bisa menghapusnya dengan menambahkan kode berikut ke file wp-config.php melalui CPanel website Anda :

define('WP_POST_REVISIONS', false );

Plugin WordPress untuk Mengatur Revisi Post
Ada sangat banyak plugin WordPress yang bisa digunakan untuk mengatur jumlah revisi, menghapus revisi dan sekaligus mengoptimalkan database setelah menghapusnya.

  1. Revision Control
  2. WP Revisions Limit
  3. Thin Out Revisions
  4. Better Delete Revision
  5. Simple Revisions Control
  6. Revision Cleaner
  7. Optimize Database after Deleting Revisions

[nextpage title=”Matikan Pingback dan Trackback”]
Pingback dan trackback adalah metode yang dipergunakan oleh WordPress untuk memberitahu blog lain yang terkait dengan post Anda. Pingback dan trackback biasanya diaktifkan secara default di WordPress. Jika Anda mengutamakan kecepatan, sebaiknya matikan fitur ini karena akan memperbesar ukuran database dan meningkatkan jumlah permintaan ke server, yang secara otomatis akan mempengaruhi kinerja website Anda.

Anda bisa menonaktifkan fitur ini melalui menu Setting > Discussion di WordPress.

[nextpage title=”Atur Urutan Muat Plugin”]
Jika Anda menggunakan plugin dalam jumlah banyak, otomatis ini akan memperlambat website Anda. Padahal dalam kenyataannya, plugin-plugin tidak semuanya dipergunakan di setiap halaman website Anda.

Sebagai contoh, Anda menggunakan plugin Contact Form 7 hanya pada satu halaman, misalkan di halaman Kontak. Namun, plugin ini akan dimuat pada semua halaman web Anda, baik dipergunakan ataupun tidak. Ini tentu saja merupakan suatu pemborosan bandwidth.

Solusinya, pergunakanlah Plugin Organizer yang mempunyai kemampuan untuk mengatur plugin mana saja yang akan dipergunakan oleh suatu halaman web. Anda bisa secara global menonaktifkan suatu plugin dan hanya mengaktifkannya pada post atau page tertentu saja.

Plugin Organizer ini juga bermanfaat jika ada plugin-plugin tertentu yang saling konflik karena Anda bisa mengatur plugin mana yang perlu diaktifkan.

[nextpage title=”Gunakan Excerpt dan Batasi Jumlah Post Halaman Utama”]
Jika di halaman utama Anda ingin menampilkan banyak post, pastikanlah untuk tidak menampilkan isinya secara utuh karena ini akan memperlambat proses penampilan halaman utama web Anda. Sebaiknya, tampilkanlah ringkasan isinya saja. Di WordPress, Anda bisa menggunakan excerpt untuk menampilkan ringkasan post.

wordpress-excerpt

Hal lain yang bisa dilakukan untuk mempercepat proses muat halaman utama adalah dengan membatasi jumlah post yang ditampilkan agar nantinya pengunjung tidak perlu menunggu terlalu lama. Ini bisa dilakukan melalui menu Settings > Reading di WordPress :

membatasi-jumlah-post-di-halaman-utama-wordpress

[nextpage title=”Pecah Halaman Panjang Menjadi Beberapa Halaman”]
Jika Anda membuat konten yang sangat panjang dan disertai dengan banyak gambar, ada baiknya untuk memecah post menjadi beberapa halaman, sehingga setiap bagian dari post bisa dimuat secara lebih cepat dan sekaligus meningkatkan jumlah pageview Anda.

Hal ini bisa dilakukan dengan sangat mudah di WordPress jika theme Anda sudah mendukung penggunaannya. Sewaktu menulis post, Anda cukup memasukkan kode berikut di bagian yang ingin Anda pecah :

<!–nextpage–>

[nextpage title=”Pecah Komentar dalam Beberapa Halaman”]
Artikel yang menarik, biasanya mendapatkan banyak komentar dan bahkan menjadi tempat berdiskusi. Ini memberikan pengaruh pada sumber daya server karena perlu ulang dimuat setiap mendapatkan kunjungan.

Untuk mengatasi hal ini, Anda bisa memecah komentar yang panjang untuk meningkatkan kecepatan website Anda dan mengurangi beban kerja server. Di WordPress, hal ini bisa dilakukan melalui menu Settings > Discussion.

memecah-komentar-di-wordpress

[nextpage title=”Perbaiki Semua Link ke Halaman yang Tidak Ditemukan”]
Broken Link atau kaitan ke halaman yang tidak ada bukan hanya merupakan pemborosan bandwidth, tetapi juga menjadi penyebab pengunjung meninggalkan website Anda.

Untuk memeriksa ada atau tidaknya broken link, Anda bisa mempergunakan tool-tool gratis berikut ini :

screaming-frog-broken-link-checker

[nextpage title=”Hindari Flash dan Ganti dengan HTML5″]
Animasi Flash memang menarik, tetapi Flash mempunyai dampak serius memperlambat website. Selain berukuran besar, Flash juga membutuhkan konsumsi energi yang tidak sedikit.

Tidak mengherankan jika Flash tidak didukung penggunaannya di perangkat mobile. Ini berarti, jika Anda tetap menggunakan Flash, maka pengunjung website Anda yang menggunakan perangkat mobile/seluler tidak akan dapat mengaksesnya.

Bahkan Adobe sebagai pengembangnya juga memutuskan untuk tidak melanjutkan pengembangan Flash lagi dan lebih memilih untuk fokus pada HTML5 yang bisa berjalan dengan baik di semua platform.

[nextpage title=”Kosongkan Gravatar”]
Abaikan penggunaan Gravatar atau kosongkan gambarnya jika Anda ingin menambahkan sedikit kecepatan pada website. Beberapa blog menon-aktifkan sama sekali penggunaan gravatar. Namun jika Anda ingin menggunakannya, aturlah gambar default pengunjung yang tidak mempunyai avatar menjadi ‘blank‘ daripada menggunakan gambar default lainnya.

Pengaturan gambar Gravatar ini bisa dilakukan melalui menu Settings > Discussion > Avatar.

[nextpage title=”Non-Aktifkan Emoji”]
Wordpress mulai versi 4.2 menggunakan fitur Emoji baru untuk mendukung huruf dalam bahasa Cina, Jepang dan Korea. Emoji adalah icon kecil atau biasa disebut juga smiley yang banyak dipergunakan untuk mewakili suatu perasaan (ketawa, marah, senang, dll) pada suatu pesan atau komentar.

Fitur ini mungkin bagus, tapi kebanyakan pemilik bisnis tidak ingin menggunakan Emoji. Selain itu kode Javascript Emoji dimuat disetiap post WordPress yang pastinya memberikan pengaruh pada kecepatan website Anda.

Ada beberapa plugin WordPress yang bisa dipergunakan untuk menon-aktifkan penggunaan Emoji baru ini :

  • Classic Smilies Plugin ini mengganti emoji/smiley versi baru dengan versi lama sebelum Wordpres 4.2
  • Disable Emojis plugin ini menon-aktifkan semua emoji baik versi baru ataupun lama.

[nextpage title=”Non-Aktifkan HotLinking”]

Hotlinking adalah suatu bentuk pencurian bandwidth. Ini terjadi ketika website lain membuat tautan (link) langsung pada gambar yang ada di website Anda sehingga membuat beban server Anda menjadi lebih berat.

Jika satu website saja yang melakukan ini mungkin tidak akan berpengaruh banyak, namun jika ada sangat banyak website yang melakukan ini – tidak peduli sebagus apa web hosting Anda – hotlinking akan memperlambat website Anda.

Untuk mencegah situs lain menggunakan bandwidth Anda, tambahkanlah kode berikut ini ke dalam file .htaccess di server Anda.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?placesiana.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Catatan :
Ganti placesiana.com dengan website Anda !
Anda bisa membuat gambar pengganti ditampilkan di website yang melakukan hotlink

Plugin WordPress untuk Mencegah HotLinking

[nextpage title=”Non-Aktifkan WordPress Heartbeat API”]
WordPress Heartbeat API diperkenalkan mulai WordPress versi 3.6. API ini memungkinkan WordPress untuk meningkatkan manajemen sesi pemakai, penelusuran revisi artikel, dan penyimpanan artikel secara otomatis.

WordPress Heartbeat API meningkatkan permintaan akses pada admin-ajax.php yang menyebabkan peningkatan penggunaan CPU. Setiap kali Anda masuk di dashboard WordPress, Anda akan melihat permintaan akses admin-ajax.php di log website Anda, bahkan sekalipun Anda sedang mengecilkan jendela WordPress dan membuka program atau website lainnya.

Untuk mengatasi hal ini, Anda bisa mengurangi permintaan akses pada admin-ajax.php dengan menggunakan plugin Heartbeat Control.


[nextpage title=”Ganti PHP dengan HTML Statis”]
Wordpress dibuat dengan menggunakan script PHP, sehingga semuanya bersifat dinamis. PHP bagus untuk membuat website Anda efisien, diantaranya untuk mengurangi keperluan untuk memasukkan informasi yang sama berulang kali. Tetapi, penggunaan PHP membutuhkan sumber daya server dimana setiap kali suatu halaman dimuat, WordPress akan menjalankan script PHP sehingga membuat proses menjadi lebih lambat dan terkadang justru berhenti jika beban server penuh saat trafik tinggi.

Solusi terbaik untuk mengatasi hal ini adalah dengan mengganti PHP dengan HTML statis yang lebih menghemat waktu. Cara ini bisa dilakukan dengan membuat halaman HTML statis dari halaman PHP yang sudah ada di cache sehingga pengunjung tidak perlu memproses script PHP setiap kali mengunjungi halaman tersebut.

Untungnya Anda tidak perlu mengganti halaman PHP menjadi HTML secara manual karena ada banyak plugin WordPress yang khusus dibuat untuk melakukan hal ini, seperti :

[nextpage title=”Perkecil Ukuran Website dengan Kompresi GZIP”]

Website yang memiliki konten berkualitas tinggi biasanya berukuran besar dengan ukuran lebih dari 100kb. Sebagai akibatnya, website ini menjadi berat dan lambat untuk ditampilkan. Untungnya ada teknologi kompresi website yang bisa dipergunakan untuk memperkecil halaman web sehingga bisa ditampilkan lebih cepat.

Mengkompres website akan mengurangi bandwidth server, sehingga HTTP Request/Response juga akan berkurang. Untuk mengkompres website dipergunakan teknologi yang bernama Gzip.

Ketika Anda mengkompres suatu file di komputer ke dalam file ZIP, total ukuran file menjadi lebih kecil. Gzip bekerja seperti ini hanya saja berlaku untuk file-file web. Setelah diinstal, Gzip secara otomatis akan mengkompres file-file website, sehingga menghemat bandwidth dan mempercepat proses muat halaman web.

Ketika seorang pengunjung mendatangi website Anda, browser mereka secara otomatis akan menguraikan file kompres ini dan membuka isinya. Metode ini jauh lebih efisien dan menghemat banyak waktu.

Sebagian besar web hosting bisa mengkompres file dalam format Gzip sebelum mengirimkannya untuk diunduh pengunjung. Menurut Yahoo, teknologi kompresi web ini bisa mengurangi waktu unduh sekitar 70%. Anda bisa mengenal lebih lanjut tentang teknologi kompresi Gzip di link ini.

Untuk mengaktifkan Gzip, buka file .htacces di root directory dalam server web Anda, dan tambahkan kode berikut ini :

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Untuk menguji apakah kompresi Gzip ini sudah benar-benar aktif, kunjungi website Check Gzip Compression dan masukkan alamat website Anda. Di contoh berikut ini, website placesiana.com yang sebelumnya berukuran 72kb berkurang menjadi hanya 13kb setelah dikompres, hemat sampai 81,8%.

check-gzip-compression

Jika kode diatas tidak berjalan dengan baik, Anda bisa menghapusnya dari file .htaccess dan menggantinya dengan kode berikut ini :

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Plugin WordPress untuk Kompresi Gzip

Tidak mau direpotkan dengan file .htaccess ? Ini dia solusi yang lebih mudah untuk mengaktifkan kompresi halaman web dengan Gzip .. plugin WordPress :

CATATAN :

Terkadang Google PageSpeed Insights tidak mengenali kompresi Gzip pada suatu halaman web. Hal ini mungkin terjadi karena adanya proxy server ataupun anti-virus yang menonaktifkan kompresi saat file diunduh ke komputer. Untuk mengatasi hal ini, cobalah menonaktifkan sementara anti-virus dan mengganti proxy Anda.

[nextpage title=”Kompres dan Minikan CSS, JavaScript dan HTML”]

Jika Anda menginstal banyak plugin, kemungkinan website Anda memiliki 10 sampai 20 (atau bahkan lebih) file CSS dan JavaScript. Ini menjadi penyebab salah satu lambatnya website Anda karena akan ada banyak komunikasi data antara server dan browser.

Untuk mengatasi hal ini, Anda bisa mengkompres kode program sehingga ukurannya menjadi lebih kecil dan menghemat sumber daya server serta sekaligus membuat kecepatan website WordPress Anda menjadi lebih baik. Salah satu cara termudah adalah dengan menghapus setiap kode komentar dan bagian CDATA yang kurang diperlukan, juga whitespaces, baris kosong (line break), indentasi dan elemen-elemen kosong lainnya.

Tool Online untuk Mengkompres Ukuran File CSS, JavaScript dan HTML
Anda bisa melakukan proses ini secara manual , namun untuk kecepatan dan kenyamanan disarankan menggunakan tool online yang akan mengotomatiskan pekerjaan ini.

Berikut beberapa tool online yang bisa dipergunakan untuk mengkompres atau memperkecil ukuran file :

Solusi lain untuk memperkecil ukuran file CSS dan JS adalah dengan menggabungkan semua file CSS tersebut dalam satu file CSS dan semua file JavaScript dalam satu JavaScript sehingga ukurannya menjadi lebih kecil. Proses menggabungkan kode-kode, menyederhanakan atau memperkecil (meminikan) ukuran file CSS, JS dan HTML ini disebut sebagai proses minification. Minification akan memperkecil ukuran halaman web, menghasilkan permintaan HTTP yang lebih kecil dan sebagai akibatnya membuat proses muat halaman web Anda menjadi lebih cepat.

Anda bisa melakukan proses ini secara manual dengan mengumpulkan semua file CSS atau JS dari theme dan plugin WordPress Anda dan menggabungkannya dalam satu file. Namun jika Anda tidak menyukai ide pengerjaan secara manual ini, Anda bisa melakukannya dengan menggunakan tool online ataupun plugin WordPress yang dibuat khusus untuk ini.

Plugin WordPress untuk Minify CSS, JavaScript dan HTML
Ada banyak plugin WordPress yang bisa dipergunakan untuk melakukan tugas ini, berikut beberapa diantaranya :

Uji Dulu Hasilnya … !
Proses minification sekalipun bisa mempercepat website, tetapi juga sangat beresiko. Resiko utama adalah ‘rusaknya’ tampilan website Anda. Ya … jika ada file CSS, JS atau HTML yang tidak diproses secara baik, akan ada beberapa perubahan tampilan di website Anda. Untuk itu lakukanlah proses ini satu persatu pada file-file yang ingin diminikan, kemudian ujilah.

[nextpage title=”Aktifkan Fitur Keep-Alive”]

Menurut Yahoo, 80% waktu muat halaman web dihabiskan untuk mengunduh obyek-obyek halaman, seperti gambar, CSS, Javascript, Flash, dll. Suatu HTTP Request dibuat untuk setiap permintaan ini, sehingga semakin banyak obyek, semakin lama halaman ditampilkan.

Setiap kali pengunjung mendatangi website Anda, browser akan meminta kepada server satu persatu obyek website yang diperlukan dan server juga akan melayani satu persatu permintaan ini. Terkadang hal ini memunculkan pesan “Too Many HTTP Requests” dan membuat respon server menjadi lebih lambat.

Anda bisa menyederhanakan desain website untuk mengurangi permintaan ini, diantaranya dengan cara:

  • Mengurangi jumlah obyek yang ada di setiap halaman.
  • Menggunakan CSS sebagai ganti gambar, jika memungkinkan.
  • Menggabungkan beberapa CSS menjadi satu.
  • Mengurangi script dan meletakkannya di bagian paling bawah halaman web.

Cara termudah untuk mengurangi jumlah permintaan ini tanpa harus mendisain ulang website adalah dengan mengaktifkan fitur Keep-Alive. Kebanyakan web hosting mematikan fitur ini, untungnya Anda bisa mengaktifkan sendiri tanpa perlu menghubungi mereka.

Keep-Alive diaktifkan dengan cara menambahkan kode berikut di file .htaccess.

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

Dengan Keep-Alive aktif, permintaan browser akan dilayani sekaligus sehingga akan menghemat bandwidth server dan membuat halaman Anda tampil lebih cepat.

[nextpage title=”Minimalkan Round Trip Times (RTTs)”]
Round Trip Time (RTT) adalah waktu yang dibutuhkan oleh client untuk mengirimkan permintaan dan server untuk menanggapinya. Untuk mengurangi jumlah permintaan HTTP server, beberapa hal yang bisa dilakukan adalah :

  1. pergunakan metode CSS Sprite untuk menggabungkan gambar
  2. minikan dan gabungkan file JavaScript dan CSS
  3. jangan pergunakan hal-hal yang tidak terlalu diperlukan, misal plugin, widget, dll

[nextpage title=”Kurangi Penggunaan Redirect”]
Penggunaan pengalihan (redirect) menimbulkan adanya permintaan HTTP tambahan dan meningkatkan waktu muat halaman web. Jadi pastikan untuk meminimalkannya sebisa mungkin.

Sekalipun Redirect permanen 301 masih lebih baik daripada kesalahan 404 (halaman tidak ditemukan), tetapi pengalihan bukanlah solusi ideal karena tetap bisa memperlambat waktu yang diperlukan browser untuk menuju versi halaman yang diinginkan.

Screaming Frog merupakan perangkat yang bagus untuk menemukan pengalihan 301. Jika Anda menggunakan PC, Anda juga bisa menggunakan Xenu Link Sleuth untuk menelusuri website.

[nextpage title=”Link ke Stylesheet, Jangan Gunakan @import”]
Seperti script PHP, @import menggunakan lebih banyak sumber daya dibandingkan dengan jika Anda membuat link langsung ke file stylesheet. Alasan lain untuk tidak menggunakan @import adalah karena beberapa browser lama tidak mendukung penggunaannya. Jadi lebih baik menghindarinya jika memungkinkan.

[nextpage title=”Tentukan Character Set di Header HTTP”]
Sebelum browser Anda menampilkan halaman web, browser perlu menentukan terlebih dahulu susunan isi halaman web Anda. Akan bermanfaat jika Anda menentukan terlebih dahulu character set dalam HTTP response headers, sehingga browser tidak perlu meluangkan waktu tambahan hanya untuk mengetahui character set yang Anda pergunakan.

Apa itu character set ?

Character set adalah sekumpulan karakter yang dinyatakan dalam angkat oleh komputer. Sebagai misal, karakter set ASCII dari angka 0-127 dipergunakan untuk menyatakan semua karakter Inggris dan juga karakter spesial lainnya.

Character Set disarankan untuk tidak diletakkan di meta tag karena bisa meningkatkan jumlah waktu yang diperlukan untuk memuat suatu halaman, tetapi sebaiknya diletakkan di file .htaccess dalam root directory website di server web hosting Anda. Ini jauh lebih efisien karena Anda tidak perlu meletakkan Character Set di setiap halaman secara manual.

Tambahkan kode berikut ini di file .htaccess :
AddDefaultCharset UTF-8

Ini akan mengubah header dari :

Content-Type text/html

menjadi … :

Content-Type text/html; charset=UTF-8

[nextpage title=”Gabungkan Gambar dengan CSS Sprite”]
Gambar membuat tampilan halaman web menjadi lebih menarik, tetapi juga membuatnya menjadi lebih lambat. Setiap gambar memerlukan tambahan permintaan HTTP ke server. Solusi untuk mengatasi hal ini bisa dilakukan dengan menggunakan metode CSS Sprite.

Sprite adalah gabungan dari beberapa gambar menjadi sebuah gambar tunggal. Setiap gambar ini nantinya bisa diakses dengan menggunakan CSS.

Sebagai misal, Anda memiliki 3 buah gambar pada suatu halaman seperti berikut.
css_sprites_image

Sebagai ganti menggunakan 3 buah gambar terpisah, Anda bisa menggabungkannya menjadi 1 file gambar tunggal. Dan dengan CSS, Anda bisa menampilkan bagian gambar yang diinginkan. Untuk membuat CSS sprite, Anda bisa mempelajari caranya lebih lanjut di W3Schools.com

Membuat CSS sprite memang bukanlah hal mudah, terutama sekali jika Anda tidak terlalu mengetahui hal-hal teknis seperti ini. Untungnya, Internet menyediakan banyak hal secara gratis, termasuk pembuatan CSS sprite.

Berikut beberapa tool online yang bisa Anda pergunakan untuk membuat CSS sprite secara mudah :

[nextpage title=”Minimalkan Penggunaan Script dari Luar Website”]
Menggunakan script eksternal, baik secara langsung, melalui plugin ataupun widget hanya akan memperlambat website Anda. Beberapa contoh script eksternal ini adalah :

  • Kode Google Adsense
  • Kode Media Social (baik dari Twitter, Facebook ataupun yang lainnya)
  • Kode dari website statistik / counter pengunjung
  • Kode dari MyBloglog
  • Kode dari Alexa, dll

Jika memungkinkan kurangilah penggunaannya karena kode-kode ini seringkali merupakan penyebab lambatnya website Anda.

[nextpage title=”Prioritaskan Konten Bagian Atas”]
Anda bisa meningkatkan performa website dengan menampilkan terlebih dahulu konten bagian atas (above-the-fold)

Agar halaman web bisa dimuat lebih cepat, Google menyarankan untuk membatasi jumlah data (HTML, gambar, CSS, JavaScript) yang diperlukan oleh konten bagian paling atas. Ada beberapa cara untuk melakukan hal ini :

  1. Susun HTML agar memuat konten yang penting terlebih dahulu
    Ada beberapa cara untuk menata ulang situs agar dapat dimuat lebih cepat :
  • Jika HTML Anda memuat widget pihak ketiga sebelum memuat konten utama, ubahlah urutannya agar memuat konten utama terlebih dahulu.
  • Jika situs Anda menggunakan desain lebih dari satu kolom, pertimbangkan untuk memuat artikel terlebih dahulu baru kemudian bagian menu ataupun widget.

Jika hal ini Anda lakukan …

Browser akan menampilkan isi artikel terlebih dahulu.
Pengunjung langsung bisa melihat artikel utama Anda.
Sementara pengunjung membaca, sidebar Anda yang berisi menu, iklan, dan tombol lainnya dimuat
Pengunjung senang karena tidak perlu menunggu.

  • Kurangi jumlah data yang digunakan oleh sumber daya Anda
    Setelah situs Anda dirancang ulang agar dapat bekerja dengan baik pada banyak perangkat dan memuat artikel penting terlebih dahulu, gunakanlah teknik berikut untuk mengurangi jumlah data yang dibutuhkan untuk menampilkan halaman web Anda:

    • Perkecil sumber daya : Ukuran file HTML, CSS, dan JavaScript dapat diperkecil dengan menghapus whitespace dan komentar yang tidak diperlukan. Lihat juga sumber kode dalam post atau page Anda dan gantilah tag &nbsp; dengan satu spasi kosong. Tanpa Anda sadari, WordPress banyak memasukkan tag yang berpotensi memperbesar ukuran data hanya untuk membuat spasi saja.
    • Aktifkan Kompresi Website
    • Pertimbangkan menggunakan CSS untuk gambar.

[nextpage title=”Letakkan CSS di Atas dan JavaScript di Bawah”]
Browser tidak akan menampilkan isi halaman web Anda sebelum menjalankan file CSS, untuk itu letakkanlah CSS di bagian atas halaman. Sebaliknya, Javascript sebaiknya diletakkan di bagian bawah, karena Javascript menghalangi browser untuk menguraikan tag sebelum semuanya dimuat secara lengkap.

Jika Anda mendapatkan pesan “Eliminate render blocking javascript” dari Google PageSpeed Insight, salah satu cara adalah dengan mempergunakan plugin WordPress berikut ini untuk memindahkan Javascript ke bagian bawah halaman (footer) sehingga tidak menghalangi browser :

[nextpage title=”Hindari CSS Yang Menghalangi Konten”]
Render-Blocking CSS adalah CSS yang menghalangi suatu halaman web untuk bisa ditampilkan secara cepat. Setiap file CSS yang ada akan menunda tampilnya halaman web karena browser akan menunggu untuk semua CSS dimuat sampai bisa menampilkan isinya. Google menyarankan untuk melakukan optimalisasi pengiriman CSS agar konten bagian atas (above-the-fold) yang bisa langsung dilihat oleh pengunjung tanpa harus menggulung layar tidak terhalang.

Semakin besar file CSS, semakin lama penundaan terjadi. Dan semakin banyak file CSS yang dipergunakan, semakin lama juga halaman dimuat. CSS penghalang ini buruk untuk website karena akan membuatnya menjadi lebih lambat.

Cara mengurangi CSS Penghalang Konten
Ada beberapa hal yang bisa Anda lakukan untuk mengatasi hal ini :

  1. Menggunakan file-file CSS secara tepat
    Ada banyak cara untuk menggunakan CSS, dan beberapa diantaranya kurang tepat dilakukan di era mobile ini.

    • Jangan menggunakan @import untuk pemanggilan file CSS
    • Jangan menggunakan CSS dalam tag HTML (seperti div atau h1)
    • Gunakan tidak lebih dari satu file CSS external dengan ukuran yang wajar (kurang dari 75k)
    • Beri label secara tepat pada CSS, sebagai misal :
      <link href=”print.css” rel=”stylesheet” media=”print”>

      <link href=”other.css” rel=”stylesheet” media=”(min-width: 40em)”>
  2. Mengurangi jumlah file CSS di jalur kritis
    Jalur kritis adalah serangkaian peristiwa yang harus diproses sebelum menampilkan suatu halaman web. Memberi label secara tepat pada CSS adalah merupakan salah satu cara untuk mengurangi file CSS di jalur kritis. Secara prinsip ada 2 cara untuk mengurangi file CSS, yaitu :

    • Menggabungkan beberapa file CSS menjadi satu file CSS
    • Memasukkan isi file CSS dalam bagian kepala HTML (inline CSS)
  3. Menggunakan sesedikit mungkin file CSS di semua halaman web

Jika Anda tidak menguasai pengkodean CSS, pergunakanlah plugin WordPress berikut ini untuk mengurangi CSS yang menghalangi konten :

  1. Defer CSS Addon for BWP Minify
  2. CSS Above The Fold
  3. WP Rocket (Premium)

[nextpage title=”Hindari JavaScript Yang Menghalangi Konten “]
Render-Blocking Javascript seperti halnya render-blocking CSS adalah Javascript yang menghalangi suatu halaman web untuk bisa ditampilkan secara cepat. Google menyarankan untuk menghapus atau menunda Javascripts yang menghalangi konten bagian atas (above-the-fold) yang bisa langsung dilihat oleh pengunjung tanpa harus menggulung layar.

Untuk mencegah Javascript menghalangi bagian atas halaman, Anda bisa memindahkannya di bagian paling bawah, sehingga Javascript akan diproses setelah isi halaman web selesai ditampilkan.

Salah satu cara yang bisa dilakukan untuk ini adalah dengan memberikan atribut defer pada Javascript, seperti ini :

<script type=”text/javascript” src=”includes/general.js” defer=”defer”></script>

Jika Anda tidak mengenal ataupun menguasai pemrograman Javascript, pergunakanlah plugin WordPress berikut untuk mengurangi Javascript yang menghalangi konten :

  1. Async JS and CSS
  2. JCH Optimize
  3. Above The Fold Optimization
  4. Autoptimize
  5. WP Deferred JavaScripts
  6. WP Defer Loading
  7. WP Rocket (Premium)

[nextpage title=”Tampilkan Waktu Muat Halaman dan Jumlah Permintaan ke Server”]
Untuk mengetahui seberapa baik performa setiap halaman website Anda, tambahkanlah kode berikut di footer.
Kode ini akan menampilkan jumlah permintaan atau query ke server dan waktu yang diperlukan untuk memprosesnya.

<?php echo get_num_queries(); ?> query dalam <?php timer_stop(1,3); ?> detik.

Semakin kecil nilainya, semakin baik performa website Anda.
Kode ini tidak mempercepat website Anda, tapi hanya memberikan informasi seberapa cepat website Anda.


[nextpage title=”BAGAIMANA PLACESIANA MENCAPAI SKOR KECEPATAN 90+ dan WAKTU MUAT < 2 DETIK”]
Mencapai Skor Kecepatan diatas 90 dan Waktu Muat dibawah 2 Detik bukanlah suatu hal yang tidak mungkin dicapai. Sekalipun tidak mudah untuk mencapainya, namun jika Anda mengikuti saran-saran diatas, website Anda pasti akan melampaui skor dan waktu muat tersebut.

Berikut ini perangkat utama yang dipergunakan PLACESIANA sehingga mencapai target kecepatan tersebut  :

  1. Web Hosting
    PLACESIANA memilih web hosting yang menggunakan teknologi terkini, dan pilihannya jatuh ke Dewaweb.
  2. CDN (+Railgun)
    PLACESIANA memilih CDN CloudFlare yang memiliki web akselerator Railgun (semuanya sudah ada di paket Dewaweb).
  3. Theme Wordpress
    PLACESIANA memilih theme WordPress yang terbukti mempunyai skor kecepatan tinggi, yaitu WPThesisSkins.
  4. Plugin Wordpress 
    Untuk mempercepat website, PLACESIANA menggunakan caching plugin yang mudah dipergunakan namun hasilnya sangat optimal, dan pilihannya jatuh pada plugin premium WP Rocket.
  5. Optimalisasi Gambar
    Untuk mengoptimalkan gambar, PLACESIANA menggunakan program editor gambar gratis GIMP, yang juga bisa dipergunakan sebagai pengganti program komersil Photoshop.

[nextpage title=”GRATIS : THEME + PLUGIN PREMIUM UNTUK MEMPERCEPAT WEBSITE”]

Mau punya  tool premium untuk mempercepat website senilai $90 secara GRATIS ?

PLACESIANA akan menyediakan theme dan plugin premium ini untuk setiap pengunjung website ini. Syaratnya, Anda cukup menjadi member Bisnis Internasional JEUNESSE melalui link yang ada di website ini.

Selain theme dan plugin, setiap member juga akan mendapatkan BONUS SUPER berupa video training dan software lain senilai total lebih dari $1.000. Bonus istimewa ini  diberikan untuk membantu mempercepat mewujudkan mimpi Anda mencapai Kebebasan Finansial dan Kebebasan Waktu.

KLIK link ini untuk mendapatkan semua BONUS SUPER ini secara GRATIS.


[nextpage title=”Ringkasan”]
Mengapa Kecepatan Website Sekarang ini Jauh Lebih Penting Dibandingkan di Waktu Sebelumnya

Dengan semakin meningkatnya pengguna mobile tidak mengherankan jika Internet saat ini lebih banyak diakses dari perangkat mobile dibandingkan dari perangkat desktop. Itu sebabnya sangatlah penting untuk memperbaiki kecepatan website Anda.

Pengguna Internet, khususnya yang mengakses dari perangkat mobile, tidak bisa mentolerir keterlambatan. Ini berarti jika website Anda tidak cukup cepat, Anda akan segera ditinggalkan.

Anda Punya Saran dan Komentar untuk Meningkatkan Kecepatan Website WordPress ?

Apakah Anda mempunyai pertanyaan seputar artikel ini ?
Atau ingin membagikan pengalaman yang sudah Anda coba pada website Anda untuk meningkatkan performanya ?
Trik apa saja yang Anda pergunakan untuk mempercepat website WordPress Anda ?
Silakan dibagikan pada semua pengunjung melalui komentar di bawah ini.

! UPDATE ARTIKEL !
Dapatkan update dari artikel ini dan info artikel terbaru lainnya dengan berlangganan di newsletter PLACESIANA.

 

{ 4 comments… add one }
  • Jhon September 10, 2016, 2:49 pm

    Terima kasih banyak atas informasinya. Sangat informatif bagi saya yang sedang membangun website.

    Reply
  • Azhar MZ March 17, 2016, 9:09 pm

    Maksudnya gimana gan Google menyarankan agar website Anda memiliki waktu respon kurang dari 2 detik (2 ms), padahal di https://developers.google.com/speed/docs/insights/Server rekomendasinya di bawah 200 milisekon/milidetik, jika dikonversi ke detik maka 200 ms = 0,2 s (detik)

    Reply
  • kayzip October 8, 2015, 11:05 am

    apa metode keep alive bisa juga diterapkan untuk joomla? mohon pencerahannya?

    Reply
    • PLACESIANA October 9, 2015, 9:57 am

      Metode Keep-Alive bisa dipergunakan dengan CMS apa saja, termasuk Joomla.
      Bahkan website yang dibuat dengan HTML editor biasa juga bisa memanfaatkan metode ini … asalkan mempunyai akses ke konfigurasi web server.

      Reply

Leave a Comment

Cancel reply

{ 4 comments }