Cara mempercepat loading website

Sejak google mengumumkan bahwa kecepatan website menjadi salah satu ranking factor, banyak pemilik website mulai memperhatikan dan mencari cara untuk mempercepat loading websitenya.

Ditambah lagi sejak 2018, google mengumumkan mobile speed sebagai salah satu faktor yang dapat mempengaruhi rangking.

Informasi dari pegawai google Zhiheng Wang and Doantam Phan :

The “Speed Update,” as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page. The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.

Terjemahannya :

"Speed Update" sebagaimana kami menamainya, hanya akan mempengaruhi halaman yang memberikan pengalaman buruk kepada pengunjung dan hanya akan berpengaruh pada sebagian kecil kueri. Hal ini diterapkan dengan standar yang sama untuk semua halaman terlepas dari teknologi apa yang digunakan untuk membuat halaman itu. Tujuan dari kueri pencarian masih menjadi sinyal kuat, jadi sebuah halaman yang lambat masih dapat merangking dengan baik jika memiliki konten yang bagus dan relevan.

Jika dengan konten yang bagus dan relevan saja bisa merangking tinggi, maka dengan konten yang bagus, relevan dan cepat diakses dapat merangking lebih baik dibandingkan kompetitor yang memiliki kualitas konten yang sama namun lebih lambat diakses.

Tapi kenapa harus membuat loading website cepat?

Apa mungkin website di load secara instan?

WPCepat berhasil membuat full page loading dalam 311ms dengan melakukan tips-tips dibawah ini.

TL;DR

Tujuan optimasi adalah untuk user experience, bukan score pada tools.

Menggunakan GTmetrix atau chrome devtools sebagai tools.

Cara mempercepat loading website dengan mengurangi TTFB dan menurukan ukuran halaman serta jumlah request.

Optimasi yang perlu dilakukan adalah :

• Memilih hoster yang tepat
• Memilih tema dan pagebuilder dengan ukuran yang paling ringan tapi masuk akal
• Mengurangi pemuatan asset berupa JS, CSS, Gambar, Font dan asset eksternal

Tujuan Optimasi Speed

Sebelum memulai optimasi kecepatan wordpress, perlu mengetahui apa tujuan mempercepat loading websitenya dan bagian mana yang harus cepat.

Biasanya tujuannya hanya ingin websitenya diload cepat.

Namun terkadang dengan desain yang sudah ada, dengan skrip yang sudah digunakan, css yang digunakan, font, gambar dan skrip eksternal (skrip dari website lain), atau yang kemudian akan disebut sebagai asset, optimasi jadi semakin sulit dilakukan.

Dengan banyaknya asset tidak terpakai, artinya halaman website me-load asset yang tidak diperluan.

Inilah yang membuat website di load lambat.

Dari hasil riset machmetrics.com, ada beberapa hal yang perlu dicermati dan menjadi landasan mengapa loading website perlu dipercepat dan apa yang menjadi prioritas.

• Mengutamakan optimasi untuk digunakan di perangkat mobile
• 53% traffic di seluruh dunia menggunakan mobile
• Rata-rata TTFB desktop 1.28 detik dan mobile 2.5 detik
• Rekomendasi google tentang TTFB adalah dibawah 1.3 detik
• Rekomendasi google tentang TTFB menurut pagespeed adalah dibawah 200ms
• Rekomendasi terbaru google tentang TTFB menurut web.dev adalah dibawah 600ms
• Rata-rata full load time desktop 10 detik dan mobile 27 detik
• Rata-rata Speed Index desktop 4.7 detik dan mobile 11.4 detik
• Rekomendasi google tentang speed index adalah dibawah 3 detik
• Rata-rata ukuran halaman desktop 1.966 Mb dan mobile 1.778 Mb
• Rekomendasi google tentang ukuran halaman adalah dibawah 500 Kb
• Rata-rata file yang harus di load di desktop adalah 75 dan di mobile 70
• Rekomendasi google tentang file yang di load adalah dibawah 50

Lebih mudahnya untuk memahami list diatas bisa dengan melihat gambar dibawah ini

Mungkin ada yang bingung speed index dengan full load time ini bedanya apa karena rata-ratanya berbeda.

Speed index menunjukkan seberapa cepat konten halaman terlihat terisi lengkap dan user sudah dapat melakukan aksi pada halaman meskipun halaman tersebut masih melakukan load dan background load.

Full load time adalah seberapa cepat konten halaman selesai dimuat secara utuh.

Semua proses load sudah selesai ketika full load time.

Mengapa speed index yang digunakan? bukannya full load time yang seharusnya digunakan sebagai metrik optimasi?

Speed index ini mengacu pada halaman website yang sudah dapat digunakan, sehingga user bisa mulai membaca/melakukan aksi pada halaman.

Tidak ada gunanya bagi user untuk menunggu proses load selesai baru digunakan padahal halamannya sudah bisa diakses beberapa detik yang lalu.

Inilah metrik yang penting karena tujuan utama pemilik website HARUS berada pada user experience dan bukan pada score tools.

Memang terlihat keren untuk mendapatkan nilai 100, tapi percayalah, pengunjung halaman tidak tahu dan tidak mau tahu tentang score yang didapatkan, tapi mereka peduli dengan seberapa cepat mereka "dilayani".

Dengan semakin cepatnya halaman dapat diakses, maka user experience akan meningkat yang berakibat pada turunnya bounce rate, meningkatkan konversi, dan meningkatkan peluang user kembali lagi.

Karena hal inilah google menggunakan speed sebagai salah satu ranking factor karena google menilai user experience.

Semakin lambat website diakses, semakin besar kemungkinan user meninggalkan halaman.

Jadi tujuan dari optimasi ini adalah memberikan user apa yang dicari secepat mungkin, yang artinya sebisa mungkin instan.

Lalu seberapa cepat website diakses?

Ada beberapa tools yang dapat digunakan untuk mengecek kecepatan wordpress.

Speedtest Tools

Sebenarnya indikator utama dari speedtest ini adalah mata.

Seberapa cepat website diakses ketika dibuka dengan mata? 1 detik, 2 detik, 10 detik?

Tentu saja berapa lamanya bergantung pada perspektif masing-masing.

Oleh karena itu, tools ini memberikan angka kuantitatif dan dapat dipahami oleh semua orang terlepas dari perspektif "cepat" masing-masing pengunjung.

Jadi tools ini hadir untuk memberikan pemahaman tentang

• Seberapa cepat halaman dimuat
• Berapa banyak file yang harus di load
• File mana yang perlu dioptimasi
• Rekomendasi apa yang bisa dilakukan

Sekali lagi, tools ini dibuat untuk membantu pemilik website melakukan optimasi agar websitenya bisa diakses secepat mungkin oleh user, bukan mengejar skor 100.

Artinya, optimasi dilakukan untuk menyenangkan manusia yang mengunjungi, bukan tools.

GTMetrix

GTmetrix adalah salah satu tools andalan saya secara pribadi untuk melakukan audit website.

Tools ini simpel dan powerful untuk melihat file mana saja yang di load dan apa yang bisa dioptimasi.

Lokasi server untuk ditest juga tersedia beberapa pilihan.

Karena lokasi server saya ada di singapura, maka hongkong, china merupakan lokasi server yang dekat dengan server saya.

Sebagai contoh, website wpcepat.com yang sudah dioptimasi ini ketika di cek dengan gtmetrix hasilnya adalah sebagai berikut :

Yang perlu diperhatikan pada GTMetrix adalah bagian file size dan request pada gambar 1.

Sebisa mungkin kurangi ukuran halaman dan jumlah request ke angka yang reasonable.

Abaikan score dan fuly load time.

Ini tidak akan membantu apa-apa.

Fokus saja pada file size dan request.

Kemudian pada gambar 2, lihat file-file apa yang di load dan bagaimana proses mereka di load.

Abaikan saja bagian favicon.

Setiap waktu yang dibutuhkan untuk proses loadnya dapat dibaca di gambar 3 termasuk TTFB dan contentful paint

Pagespeed Insight

Pagespeed insight adalah tools buatan google untuk menilai seberapa cepat website diakses.

Sayangnya google pagespeed insight tidak memiliki fitur untuk memilih lokasi server, sehingga bagi kebanyakan hosting akan muncul peringatan reduce initial server response time.

Gambar diatas adalah tampilan pagespeed insight setelah melakukan testing.

Data yang diberikan cukup banyak, tapi tidak semudah gtmetrix dalam pembacaannya.

Terus terang saya tidak menggunakan google pagespeed insight sebagai alat untuk melakukan audit, saya lebih berpegang ke lighthouse dev chrome daripada pagespeed ini.

Alasannya sudah jelas karena google pagespeed index tidak memberikan banyak informasi yang berguna bagi saya untuk optimasi.

Web.dev

Web.dev adalah website dari google juga yang baru dirilis untuk menilai kinerja website dalam 4 kategori yaitu Performance, Accessibility, Best Practice, dan SEO.

Dan lagi, tools yang dibuat oleh google tidak memberikan data spesifik mengenai apa saja file yang di load, bagaimana file-file ini di load dan bagaimana browser me load halaman website.

Bahkan web.dev tidak memberikan detail file yang menjadi masalah dalam hasil analisanya.

Hanya masalah general yang dilaporkan.

Menurut saya, tools dari google ini belum mampu menggeser dominasi GTMetrix dalam memahami bagaimana halaman sebuah website dimuat.

Namun tentu saja tools ini berguna untuk melihat speed index, First Contentful Paint dan Time to Interactive sebagai indikator kuantitatif sebagai penilaian terhadap user experience.

Google Lighthouse & Devtools

Tools ini adalah tools yang paling lengkap karena mengcover semua kebutuhan analisa halaman sebuah website yang dapat diakses dengan melakukan klik kanan pada google chrome.

Google lighthouse bekerja layaknya devtools yaitu memiliki informasi First Contentful Paint, Time to Interactive dan speed index.

Disamping itu, devtools memberikan informasi file-file yang di load, bagaimana cara me loadnya dan apa yang membuatnya lambat di load.

Jika terdapat asset yang error saat di load, maka kan ada keterangan error pada menu console.

Yang paling saya suka pada tools ini adalah saya bisa identifikasi dengan mudah TTFB dan receiving per file.

Meskipun hasil analisanya selalu menggunakan GTMetrix, konfirmasi akhir optimasi speed selalu menggunakan google lighthouse dan devtools.

Lalu, tools mana yang sebaiknya digunakan?

Tidak ada patokan khusus untuk tools mana yang sebaiknya digunakan karena tools ini hanya alat bantu untuk memahami bagaimana user experincenya.

Namun saya merekomendasikan menggunakan GTMetrix atau devtools

Mempercepat Loading WordPress

Setelah memahami tujuan dan mengetahui tools untuk optimasi speed ini, selanjutnya ke bagian inti yaitu bagaimana cara mempercepat loading wordpress?

Berdasarkan rekomendasi-rekomendasi pada bagian tujuan, maka untuk mempercepat halaman website adalah dengan mempercepat TTFB dan menurunkan ukuran halaman & jumlah request.

TTFB berkaitan dengan server, sedangkan ukuran halaman & jumlah request berkaitan dengan konten.

Langkah pertama dalam mempercepat loading website adalah dengan mempercepat TTFB.

Mempercepat TTFB

Bagian ini adalah bagian yang paling awal dalam optimasi wordpress.

TTFB atau singkatan dari time to first byte adalah waktu yang dibutuhkan bagi halaman untuk mulai melakukan load data.

Load data yang dimaksud adalah ketika browser menerima request dari user, maka request itu dikirimkan kepada server.

Kemudian Server memproses sesuai request dari http yang diminta user.

Selanjutnya mengirimkan kembali kepada user untuk ditampilkan di browser.

Jadi seberapa cepat TTFB sangat bergantung dengan server dan kecepatan internet pengguna.

Langkah pertama untuk menurunkan TTFB adalah dengan memilih hosting yang tepat.

Optimasi Hosting

Hosting melakukan peranan yang penting dalam optimasi ini.

Skrip, modul dan racikan yang digunakan oleh hosting satu dan lainnya pastinya berbeda meskipun memiliki spesifikasi server yang sama.

Ibarat mobil, hosting adalah tenaganya dan website kita adalah bebannya.

Semakin bagus hosting, semakin besar tenaga yang dimiliki yang memungkinkan membawa beban website yang lebih berat.

Oleh karena itu, memilih hosting yang tepat dapat membantu website diakses lebih cepat.

Berikut hal-hal yang perlu diperhatikan saat memilih hosting.

Lokasi Datacenter

Sebelum membeli hosting, sangat penting untuk menentukan geografi pengunjung website.

Apa target pengunjung website adalah orang-orang di indonesia? atau luar negeri? atau seluruh dunia?

Pemilihan lokasi datacenter adalah hal pertama yang harus dilakukan ketika memilih hosting.

Hal ini berkaitan dengan kecepatan akses website nantinya oleh user.

Jika target visitor hanya dari indonesia, datacenter terjauh yang dipilih adalah singapura.

Normalnya, visitor indonesia dengan datacenter di singapura akan mengalami ping berkisar 10-100ms.

Spesifikasi Hosting

Memiliki spesifikasi yang mumpuni akan jauh menunjang performa website.

Pertama, Jangan pilih hosting dengan disk HDD!

Website wordpress yang di host dengan disk HDD tidak bisa optimal dalam urusan kecepatan.

Pilih hosting dengan disk SSD.

Jika memungkinkan pilih hosting dengan disk SSD NVMe.

Hard disk dengan SSD memiliki kecepatan transfer data 5x lebih cepat dari HDD.

Sedangkan SSD NVMe memiliki kecepatan transfer data 5x lebih cepat dari SSD.

Ini artinya, kecepatan transfer data SSD NVMe 25x lebih cepat dari HDD!

Meski demikian, menggunakan hosting dengan SSD sudah cukup untuk website dengan traffic kecil dan tidak memiliki data banyak.

Kedua, pilih hosting yang menggunakan http/2.

Http/2 lebih cepat dari http/1 berkat paralelisasi/pipelining yang membuat request dijalankan secara bersamaan.

Http/1.0 atau http/1.1 menjalankan request 1 demi 1 sehingga pada bagian timing akan terlihat seperti terasering (lihat GTMetrix/devtools).

Ketika beberapa file didapatkan secara bersamaan, halaman akan lebih cepat di load.

Saat ini sudah tersedia beberapa hosting yang sudah mensupport http/3.

Protokol http/3 ini lebih baik dibandingkan dengan http/2 dalam hal delivering request.

Meskipun http/2 melakukan pipelining untuk pengiriman request, namun jika ada salah satu file dalam paket itu tidak dapat dimuat, maka akan mem-block keseluruhan request hingga seluruh request dapat terkirim.

Hal ini tidak terjadi pada http/3 berkat penggunaan UDP (user diagram protocol).

Sehingga setiap ada file yang tidak dapat dimuat, maka, hanya file itu saya yang terblock sampai requestnya dikirimkan.

Google sendiri menggunakan http/3 untuk setiap layanannya termasuk google fonts.

Penyedia Hosting

Ada banyak sekali penyedia hosting yang ada di indonesia yang mampu menjadi solusi dari setiap kebutuhan hosting.

Hosting sendiri dibagi menjadi beberapa kelas sesuai dengan kebutuhan masing-masing website.

Secara garis besar, ada 3 tipe layanan hosting yang dijual

• Shared Hosting
• VPS
• Dedicated Server

Pengalaman saya menggunakan beberapa provider hosting dari 2015, saya bisa mendapatkan speed dibawah 500ms dengan hosting dari niagahoster dan dewabiz.

Sampai dengan artikel ini dipublish, wpcepat.com menggunakan layanan shared hosting dari niagahoster karena kebutuhannya hanya landing page dan blog saja.

Untuk VPS, saya menggunakan vultr dan upcloud untuk beberapa website dan tools saya.

Sedangkan dedicated server, saya belum pernah menggunakan layanan manapun.

Jika ada hosting yang ingin dicoba untuk ditest performanya, bisa infokan ke saya lewat komentar.

Memilih Webserver

Ada 3 webserver yang umumnya digunakan oleh penyedia hosting di seluruh dunia.

• Apache
• NGINX
• Litespeed

Sebisa mungkin hindari apache dan gunakan webserver NGINX atau litespeed saja.

Saat ini mereka berdua adalah webserver dengan performa terbaik.

Kebanyakan penyedia hosting di indonesia menggunakan litespeed dan saya merekomendasikan menggunakan litespeed.

Memang litespeed performanya berada diatas NGINX dari banyak test yang dilakukan.

Namun jika terpaksa harus menggunakan NGINX karena lisensi litespeed mahal, install NGINX pada VPS.

Jadi tinggal pilih webserver sesuai penyedia hosting yang sesuai dengan kebutuhan.

Upgrade Versi PHP

WordPress menggunakan PHP sebagai basis kode-kodenya dan selalu dimaintain oleh core developer wordpress.

Setiap ada pembaruan versi PHP, maka setiap kode-kode wordpress juga di cek untuk disesuaikan sesuai dengan versi php terbaru.

Setiap pembaruan versi PHP meningkatkan beberapa persen kecepatan eksekusi skrip.

Karena itu, sangat disarankan untuk melakukan upgrade versi PHP ke versi terbaru.

Dari hasil test kinsta pada wordpress versi 5.3, PHP 7 sudah hampir 3x lipat lebih cepat daripada PHP 5.6!

Jika memungkinkan, pilih hosting dengan minimal versi PHP yang tersedia adalah PHP 7.3.

Akan lebih bagus jika menyediakan PHP 7.4.

Note : core code wordpress pasti kompatibel dengan versi PHP terbaru. jika terjadi error setelah upgrade versi PHP, kemungkinan besar ada code tambahan atau plugin yang tidak kompatibel dengan versi PHP terbaru.

Menurunkan Ukuran Halaman & Jumlah Request

Ukuran halaman memegang peranan penting dalam pemuatan halaman.

Semakin besar ukuran halaman, semakin lambat pula diakses.

Setelah mengoptimasi TTFB, langkah berikutnya adalah menurunkan ukuran halaman

Berikut adalah beberapa hal yang dapat dilakukan untuk optimasi ukuran halaman.

Optimasi Tema

Sebagai pengguna wordpress, tema adalah bagian yang harus ada untuk menampilkan data yang sudah diisi pada halaman wp-admin.

Sekalipun menggunakan oxygen builder yang notabene adalah theme builder, wordpress tetap mewajibkan menggunakan tema meskipun asset yang digunakan di tema itu tidak di load.

Dengan adanya tema ini, maka halaman depan (frontend) wordpress ketika diakses pengunjung memiliki tampilan tertentu seusai dengan asset tema.

Sayangnya kebanyakan tema membuat asset yang harus diload meskipun tidak digunakan di suatu halaman.

Menggunakan Lightweight Theme

Lightweight theme adalah tema yang ringan dan memiliki asset minimalis.

Minimalis bukan berarti tanpa konten atau tanpa desain melainkan tema yang memiliki ukuran total asset kurang dari 250kb dan request kurang dari 20 untuk fresh install.

Fresh install artinya, meskipun tanpa konten yang dibuat, tema sudah memuat asset sebesar 250kb dan melakukan 20 request.

Jika ditambah dengan konten, maka konten yang ditambahkan berada di kisaran 250kb dan tambahan 30 request untuk mencapai rekomendasi batas google.

Tema fresh install yang memiliki asset diatas 250kb ini tidak direkomendasi untuk digunakan kecuali untuk tujuan tertentu.

Pilih tema yang minimalis dan hanya memiliki asset-asset esensial yang dibutuhkan.

Kebutuhan kustomisasi sebaiknya dilakukan melalui plugin atau yang terbaik dengan hard coding.

Beberapa rekomendasi tema yang lightweight dan multipurpose yang sudah saya test

• Generatepress | asset : 30.6kb | 10 request | Speed Index : 502 ms
• Suki | asset : 31.6kb | 8 request | Speed Index : 512 ms
• Zakra | asset : 39kb | 13 request | Speed Index : 529 ms
• Neve | asset : 31.8kb | 8 request | Speed Index : 580 ms
• Writee | asset : 177kb | 18 request | Speed Index : 669ms
• Astra | asset : 42.3kb | 10 request | Speed Index : 689 ms
• Page Builder Framework | asset : 69.2kb | 12 request | Speed Index : 756 ms
• Arke| asset : 21.5kb | 7request | Speed Index : 489 ms

Arke adalah tema tercepat dan paling minimalis.

Sayangnya tema ini terlalu minimalis dan plain, sehingga saya menempatkan tema arke di posisi akhir sebagai cadangan.

Jika memang kebutuhannya hanya menulis saja atau akan dipadukan dengan pagebuilder, tema ini masih masuk dalam rekomendasi.

Performa tema writee cukup mengesankan mengingat ukuran asset dan jumlah requestnya jauh diatas tema lainnya, namun masih memiliki speed index yang cukup cepat.

Jika saya diminta memberikan saran untuk tema yang sebaiknya digunakan, pilihan saya jatuh di 2 tema, generatepress dan suki.

Namun wpcepat menggunakan generatepress karena generatepress memberikan desain blog yang lebih user friendly dan navigasi yang mudah dimengerti.

JS to CSS

Untuk melihat perbedaan fungsi javascript dan css, diperlukan pemahaman struktur halaman website.

Pada dasarnya hanya ada 2 komponen yang membangun sebuah halaman.

HTML dan CSS.

Ya hanya 2 komponen diatas.

Untuk lebih memahaminya, ibaratkan sedang membangun sebuah gedung.

HTML membentuk kerangka dasar mulai dari pondasi bangunan sampai lantai teratas.

Sedangkan CSS membuat kerangka tadi jadi enak dilihat dengan mewarnai lantai dan sebagainya.

Jadi HTML membuat kerangka bangunan dan CSS mempercantik bentuk bangunan.

Namun ketika pemilik bangunan menginginkan adanya lift, pintu yang terbuka otomatis ketika ada orang lewat, diperlukan komponen lain, yaitu Javascript/JS.

Javascript berguna untuk menambah fungsi dari HTML dan CSS.

Javascript tidak seharusnya menggantikan peran CSS.

Javascript seharusnya digunakan sebagai penambah fungsi.

Misalkan untuk mengirimkan email setelah klik sebuah button, ini adalah fungsi.

Tapi jika hanya dibutuhkan untuk dropdown, sebaiknya gunakan CSS saja.

Javascript yang digunakan secara berlebihan, tentu akan memperlambat load website.

Oleh karena itu, ubahlah JS yang digunakan untuk styling dengan CSS.

Optimasi Tema yang digunakan

Sebagian pembaca panduan ini pasti sudah terlanjur menggunakan tema tertentu yang mungkin bloated.

Apalagi kalau websitenya sudah live, akan sangat sulit untuk mengubah tema karena banyak sekali pertimbangan dari segi SEO , setting dan lain-lain.

Untuk itu, lebih direkomendasikan untuk mengurangi overhead yang ada.

Bagian ini termasuk dalam remove unused CSS/JS.

Utamakan untuk menghilangkan efek-efek yang tidak krusial seperti animasi, preloader.

Jika tidak menggunakan google map, disable google map.

Kemudian, setelah mengurangi JS yang tidak terpakai, bisa dilanjutkan dengan mengurangi CSS yang tidak digunakan.

Hapus CSS yang ada tapi tidak di load, ini hanya menambah beban.

Optimasi Page Builder

Mulai era 2016 keatas, page builder menjadi suatu tools yang sangat digemari oleh para pengguna wordpress untuk membuat halaman-halaman websitenya.

Page builder ini bisa melakukan overide terhadap settingan tema dan menampilkan sesuai dengan desain yang ada di page builder.

Untuk menjadi sebuah page builder, maka haruslah memiliki komponen-komponen yang siap pakai dan tinggal digunakan oleh user.

Komponen-komponen ini juga mengandung default style dan fungsinya masing-masing.

Beberapa page builder membuat struktur komponennya agak terlalu jauh demi memudahkan user dalam melakukan personalisasi edit data, styling dan bagaimana komponen ini akan bertindak.

Dengan demikian, dalam satu komponen saja, tentu akan terdapat banyak HTML, CSS dan JS yang di load.

Misalkan komponen heading, maka akan terdapat settingan seperti ukuran fontnya berapa, warnanya apa, efeknya bagaimana (slide/fade/dsb).

Ketika satu style/efek dipilih, tidak serta merta membuat CSS/JS yang lain tidak di load, melainkan masih di load, namun tidak digunakan.

Sehingga terjadilah unused CSS/JS dan kemungkinan excessive DOM element.

Sejauh ini saya baru menggunakan elementor, oxygen builder dan gutenberg.

Elementor

Elementor adalah salah satu page builder favorit bagi kebanyakan pengguna wordpress.

Saat artikel ini ditulis, elementor pada wordpress repository sudah di download dan aktif pada 5 juta lebih website.

Saya sudah menggunakan elementor sejak instalasi aktif masih 5000.

Elementor sangat beginner friendly!

Bahkan saya pikir setiap orang bisa menggunakan elementor.

Elementor memiliki banyak sekali komponen-komponen beserta addon dari third party yang memungkinkan fungsi elementor semakin beragam.

Meskipun mudah digunakan, elementor menghasilkan asset yang bloated.

Hal ini diindikasikan dengan banyaknya kerangka HTML yang diperlukan untuk menggunakan 1 komponen, banyaknya style/CSS dan JS yang di load.

Dengan demikian, halaman website akan semakin berat seiring dengan bertambahnya konten.

Untuk mempercepat loading halaman yang menggunakan elementor, akan perlu upaya lebih untuk memilih dan menganalisa CSS dan JS yang tidak digunakan.

Oxygen Builder

Saya sudah mengetahui oxygen builder dari tahun 2018, namun tidak berencana menggunakannya saat itu.

Saat itu oxygen builder sangat tidak nyaman untuk saya karena tidak banyak pilihan desain dan komponennya.

Tapi sejak oxygen 3.0,

sekitar tahun 2019, saya mulai mencoba untuk menggunakan oxygen builder dan sampai sekarang menggunakan oxygen builder.

Oxygen builder sebenarnya bukanlah page builder, tapi theme builder.

Sehingga sangat diperlukan pemahaman struktur wordpress, hook, dan kode-kode wordpress.

Menurut saya kurang friendly untuk pengguna wordpress baru.

Namun kode yang dihasilkan sangat bersih dan hanya berisi struktur yang dibutuhkan.

Untuk JS tidak ada yang di load jika komponennya tidak digunakan.

Gutenberg

Gutenberg adalah block builder resmi dari core wordpress.

Gutenberg muncul di wordpress 5.0 sebagai pengganti classic editor.

YA! masa depan wordpress berada di block-block seperti ini.

Kemungkinan kedepannya page builder tidak akan sepenting sekarang karena adanya gutenberg yang mulai digunakan dan semakin baik dari hari ke hari.

Struktur yang dihasilkan dari gutenberg juga sangat bersih.

Hasil struktur kodenya adalah saingan berat oxygen builder.

Lalu page builder mana yang sebaiknya digunakan?

Memilih Page Builder

Pertama-tama, pilihan ideal adalah page builder dengan output HTML, CSS dan JS yang diperlukan saja.

Yang paling ideal adalah hard coding.

Tapi tidak semua orang memiliki kemampuan itu.

Elementor sangat user friendly, bisa membuat halaman yang menarik dengan mudah.

Oxygen builder sedikit lebih sulit untuk mendapatkan halaman yang sama yang dibuat dengan elementor namun dengan output yang lebih bersih.

Gutenberg juga pilihan yang bagus mengingat kebutuhan performa dan kemudahan bagi user.

Faktor apa saja yang perlu diperhatikan?

Hindari Bloated Page Builder

Arti kata bloated adalah bengkak atau buncit.

Dalam hal mempercepat loading website, sebisa mungkin load seminimal mungkin request dengan tampilan sama atau tidak jauh berbeda.

Elementor termasuk salah satu page builder yang bloated, sehingga jika tidak terpaksa, gunakan page builder lain.

Komparasi yang dilakukan oleh supa mike terhadap beberapa page builder, menempatkan oxygen builder sebagai page builder dengan asset terendah.

Seiring perkembangan page builder, setiap perkembangan selalu menambahkan asset.

Sehingga, cukup bijaksana untuk menggunakan page builder yang sejak awal sudah ringan.

Mengurangi DOM Element

Tema yang lightweight tidak akan memberikan DOM element yang berlebihan.

DOM element yang berlebihan disebabkan oleh penggunaan bloated page builder untuk mendesain banyak element pada suatu halaman.

Jika pada test GTMetrix ada peringatan untuk mengurangi jumlah DOM element, maka halaman website itu dipastikan berat.

Tidak ada optimasi lain yang bisa dilakukan selain mengurangi penggunaan komponen pada halaman website atau mengganti page builder dengan page builder yang lebih ringan atau langsung ke gutenberg.

Remove Unused CSS/JS

Bagian ini memang sedikit tricky karena harus tahu CSS/JS mana yang di pakai mana yang tidak.

Jika page builder itu me load semua asset terlepas dari komponen mana yang digunakan, maka asset yang tidak digunakan harus dipilah-pilah lalu di remove.

Sedangkan jika page builder itu hanya me load asset yang mana komponennya digunakan, maka untuk meremove unused CSS/JS ini jadi lebih ringan.

Sebenarnya sangat sulit untuk benar-benar melakukan remove unused CSS/JS selama masih menggunakan wordpress dengan tema/page builder.

Sebuah halaman website baru bisa benar-benar tanpa unused CSS/JS jika dibuat dengan hard coding.

Saat ini menggunakan page builder oxygen builder maupun gutenberg adalah pilihan terbaik untuk meningkatkan performa website dari sisi asset.

Optimasi Plugin

WordPress menggunakan 2 cara untuk bagi penggunanya untuk menambah fungsionalitas dan personalisasi dari wordpress yang dibuatnya yaitu tema dan plugin.

Plugin adalah sekumpulan kode yang dirangkum menjadi satu untuk menjalankan suatu fungsi tertentu.

Plugin ini dapat di buat oleh siapa saja dengan fungsi apa saja.

Karena banyak developer yang membuatnya, tidak semua plugin developer menanamkan mindset untuk mengoptimalkan performa.

Sebagian developer hanya membuat plugin untuk menjalankan fungsi tertentu saja.

Fungsi-fungsi yang ada ini juga seringkali sudah ada di plugin yang lain.

Maka dari itu, jangan asal pasang plugin.

RULE : Semakin banyak plugin dengan fitur yang sama/mirip yang dipasang, loading wordpress semakin berat.

Hapus Plugin Tidak Terpakai

Seringkali, pengguna wordpress membaca di artikel tentang plugin-plugin rekomendasi yang sebaiknya dipasang.

Misalkan saja menggunakan plugin SEO : Yoast SEO.

Yoast SEO memiliki fitur sitemap, opengraph dll.

Maka jangan download lagi plugin sitemap seperti Google XML Sitemaps, karena hanya akan menambah beban untuk fungsi yang sama.

Plugin-plugin semacam ini harus di nonaktifkan dan di delete untuk memperingan wordpress.

Hindari Plugin yang Tidak Perlu

Secara default, wordpress sudah menyediakan banyak sekali tools untuk melakukan custom.

Misalkan saja, untuk CSS.

Tidak pelu menginstall plugin CSS untuk melakukan custom CSS.

WordPress menyediakannya di appearance->custom CSS.

Tambahkan saja CSS disini.

Contoh lain adalah mengarahkan semua url ke https.

TIdak perlu install plugin really simple SSL.

Memang lebih mudah tinggal klik-klik, tapi akan lebih cepat jika eksekusinya langsung dari sisi server.

Tambahkan ini pada htaccess untuk mengarahkan http ke https tanpa WWW

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301

Atau dengan WWW

RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Pertimbangkanlah penggunaan plugin untuk setiap kebutuhan.

Gunakan Hanya Plugin yang dibutuhkan

Plugin apa yang dibutuhkan untuk setiap website bisa berbeda-beda.

Website blog seperti wpcepat ini tidak membutuhkan banyak plugin tambahan.

Secara default sudah menggunakan gutenberg untuk pengisian konten, plugin cache untuk mempercepat loading, dan plugin SEO untuk mempermudah optimasi konten.

Selain ini kemungkinan besar sudah tidak diperlukan lagi tambahan-tambahan lain.

Jika membutuhkan salah satu fitur dari suatu plugin dengan banyak fungsi yang tidak dipakai, sebaiknya gunakan alternatif lain, gunakan plugin khusus sesuai kebutuhan atau buat sendiri fungsinya.

Contohnya adalah jetpack.

Jika yang dibutuhkan hanya fitur lazy loadnya saja, coba cari plugin serupa yang memiliki fungsi khusus untuk lazy load.

Dengan demikian, website yang dibangun akan lebih sedikit bloat.

Gunakan Plugin dari Developer Terbaik

Developer-developer plugin dan tema terbaik dari wordpress mengutamakan performa dibanding kemudahan penggunaan.

Tom Usborne adalah salah satu developer terbaik wordpress dimana beliau sanggup membuat tema generatepress yang sangat ringan dan plugin-plugin yang juga ringan seperti WP show post dan generateblock.

Bagaimana caranya bisa tahu siapa developer terbaik?

Bisa lihat dari plugin-plugin atau tema yang dihasilkan.

Jika lightweight, kemungkinan plugin lainnya dari developer yang sama juga lightweight.

Dan kebanyakan akan diketahui seiring berjalannya waktu, trial and error, dan rekomendasi dari developer lain.

Jika ada plugin yang disukai tapi memiliki performa kurang baik, jangan berikan review buruk.

Ini sangat penting.

Sekali lagi jangan.

Gunakan fitur support atau hubungi developer untuk meningkatkan performa pluginnya.

Cara ini jauh lebih efektif untuk meningkatkan performa.

Pengguna senang, developer senang.

Membuat Plugin Sendiri

Cara ini adalah cara yang terbaik.

Tanpa tambahan kode yang tidak dibutuhkan dan minimal asset yang di load.

Sangat direkomendasikan untuk pengguna yang memiliki kemampuan coding.

Atau bahkan copy paste code dari sumber-sumber seperti stackoverflow juga tidak masalah.

Usahakan seminimal mungkin untuk menambah kode yang tidak diperlukan.

Optimasi Local Asset

Melakukan optimasi terhadap asset-asset yang berasal dari website sendiri disebut optimasi local asset.

Asset-asset ini pada wordpress berupa javascript, CSS, font dan gambar.

Namun pada bagian ini hanya javascript dan CSS yang akan dibahas karena optimasi gambar dan font akan dibahas pada sub bab berikutnya.

Mengurangi Jumlah Request

Mengurangi jumlah request yang dikirimkan dapat mengurangi waktu yang dibutuhkan untuk me load sebuah halaman website.

Idealnya dalam satu halaman, terdapat paling banyak 50 http request.

Bagaimana jika ternyata halaman yang dibuat, lebih dari 50 request? bahkan lebih dari 100?

Jika angka request ini melebihi 50, solusinya adalah mengurangi hingga sesedikit mungkin requestnya.

Memang dengan http2 keatas, banyaknya jumlah request ini tidak lagi menjadi masalah.

Hanya saja, makin banyak request, makin besar kemungkinan packet loss yang akan menunda pemuatan asset.

Akibatnya waktu loadnya akan meningkat.

Tapi tolong diingat, bahwa solusinya bukan dengan menggabungkan semua asset dalam 1 request, tapi benar2 mengeliminasi asset-asset yang diload namun tidak digunakan.

Usahakan selalu dalam setiap pemuatan halaman maksimal 50 request.

WordPress Core HTML CSS JS

Pada dasarnya, wordpress secara default memiliki beberapa HTML yang di generate otomatis, CSS dari gutenberg, JS yang digunakan untuk meload fungsi di frontend.

Jika tidak digunakan, bisa di remove dari wordpress untuk mengurangi pemuatan request http dan ukuran halaman.

• wp-emoji-release.min.js : javascript library yang digunakan untuk menggunakan emoji.
• wp-embed.min.js : javascript library yang digunakan untuk memuat embed video dari youtube maupun penyedia layanan video lainnya yang menggunakan embed.
• dashicons.min.css : dashicons adalah webfonts yang memuat icon-icon yang digunakan pada halaman wp-admin wordpress.
• jquery-migrate(.min).js : JS ini digunakan untuk mensupport jquery dari versi lama ke versi baru.
• comment-reply(.min).js : javascript library yang digunakan untuk memberikan balasan komentar.
• style.min.css : CSS yang digunakan wordpress sebagai default styling gutenberg
• Really Simple Discovery (RSD) : HTML yang digunakan untuk mengijinkan client side untuk melihat postingan atau data website. Biasanya digunakan situs-situs seperti flickr dan jetpack untuk menghubungkan dengan website kita.
• Windows Live Writer : digunakan hanya jika pengeditan artikel menggunakan windows live writer.
• REST API : digunakan jika konten website dapat diakses menggunakan endpoint, seperti mobile apps yang mengambil data konten dari website.
• Post's Relational Links : digunakan untuk navigasi postingan sebelum dan berikutnya pada artikel.
• WordPress version & generator meta tag : HTML yang memberikan informasi terkait versi wordpress yang digunakan. Disable untuk alasan keamanan.
• RSS Feed : digunakan untuk menerima update artikel reguler dari website atau blog tanpa harus membuka website. Biasanya digunakan untuk tujuan blogging
• Comment RSS Feed : sama seperti RSS Feed, tapi berkaitan dengan komentar, bukan postingan.
• Strip HTML comments : Menghilangkan semua HTML comment dari halaman. dapat menghemat beberapa kb.

Pilih dengan bijak mana-mana yang digunakan mana yang tidak.

Kalau mendisable fitur yang digunakan, website bisa break dan tidak bertindak sebagaimana mestinya.

Remove Unused CSS

Menghapus CSS yang tidak digunakan bisa menghemat lebih dari 50% dari keseluruhan total ukuran CSS.

Hal ini disebabkan oleh plugin dan tema yang selalu memiliki default CSS.

Bagaimana sebuah plugin atau tema secara default melakukan styling terhadap text, tabel dan lain-lain dapat berbeda satu sama lain.

Maka dari itu, jika memungkinkan disable default styling dari setiap plugin dan tema jika tidak digunakan.

Beberapa tema dan plugin menyediakan fitur untuk disable ini.

Lebih baik lagi mendisable semua default styling dan membuat styling sendiri.

Remove Unused JS

Javascript yang digunakan seringkali merupakan suatu fungsi dari sebuah javascript library.

Sebagai contoh, aos.js.

Aos.js adalah javascript library yang berfungi melakukan animasi terhadap suatu tag HTML saat user melakukan scroll.

Sehigga ketika layar user sampai pada tag HTML yang memiliki animasi dari aos.js ini akan melakukan animasi sesuai yang diset.

Namun, pemanggilan fungsi animasi ini, misalkan fade up, dilakukan secara menyeluruh yang artinya memanggil seluruh library aos.js dan meload semua javascript yang tidak digunakan.

Lalu bagaimana cara menghapus javascript yang tidak digunakan?

I am sorry to say, but it's nearly impossible.

Sebagian besar dari pengguna wordpress, termasuk saya, tidak memiliki kemampuan untuk membuat fungsi dengan javascript.

Sedangkan satu-satunya cara adalah dengan menulis ulang javascript sesuai fungsi yang dibutuhkan dan mendisable javascript secara keseluruhan.

Jadi, lanjut saja ya!

Minify HTML/CSS/JS

Minify adalah proses penghapusan tambahan white space dan comment untuk mengurangi total ukuran halaman.

Pada dasarnya, setiap spasi berukuran 1-4 bytes.

Jika dalam 1 halaman berisi 1000 tambahan white space, ada pembengkakan ukuran sebesar 1-4 kb.

Anggaplah sebuah halaman landing page memiliki total 100.000 white space dan 1000 comment dari HTML, CSS dan JS.

Dengan minify semua, halaman itu bisa mengurangi ukuran halaman sebesar 101 - 404 kb.

Contoh realnya adalah jquery 3.1.1 yang versi original dan versi minified.

File jquery yang telah di minify berukuran 84.6kb dibandingkan file jquery original yang berukuran 260kb.

Sebisa mungkin minify semua asset untuk mengurangi total ukuran halaman.

Tapi hati-hati, ada HTML/CSS/JS yang error ketika di minify.

Jangan minify asset yang error atau jika tetap ingin di minify, gunakan layanan CDN untuk meminify asset.

Combine CSS/JS

Penggabungan beberapa CSS/JS menjadi 1 file merupakan taktik yang digunakan untuk memperkecil jumlah request.

Namun cara ini tidak selalu menjadi cara yang terbaik untuk melakukan optimasi.

Cara ini aman dan baik digunakan pada situs kecil karena assetnya tidak banyak.

Namun cara ini tidak efektif untuk digunakan pada situs besar.

Menggabungkan CSS/JS menjadi 1 file sebenarnya sudah tidak relevan lagi dengan adanya protokol http/2.

Penggabungan ini adalah cara yang digunakan ketika protokol http masih berada pada http/1.

Dengan pipelining, semua asset akan dimuat bersamaan.

Dari data GTmetrix diatas, terjadi 3x pengiriman beberapa file secara bersamaan.

Pertama, pemuatan html wpcepat.com.

Kedua, pemuatan 5 asset pertama.

Ketiga, pemuatan sisa asset lainnya.

Pada http/1, pemuatan asset ini dilakukan bergantian, sehingga masuk akal untuk menggabungkan beberapa asset menjadi 1 asset saja.

Agar lebih mudah, bayangkan proses ini seperti mengantri pesanan di restoran cepat saji.

Combine CSS/JS ini ibarat menyajikan seluruh pesanan dalam 1 nampan.

Jika pesanan sedikit, tidak ada masalah.

Jika pesanan banyak, akan ada pesanan yang tertindih atau jatuh.

Jadi tidak semua halaman pantas untuk di combine.

Memang jumlah requestnya akan banyak, tapi ini cara terbaik untuk menghindari error dan tetap menjalankan fungsi dengan baik tanpa mengkompromikan performa.

CDN asset

Penggunaan CDN untuk pemuatan asset dapat mempercepat dan mengurangi penggunaan bandwidth server.

Website dengan traffic yang besar dan halaman yang berat sangat disarankan menggunakan CDN.

CDN dapat melakukan minifikasi dan mencache asset-asset baik berupa font, gambar, JS, CSS bahkan HTML.

Setelah asset halaman diupload dan di cache di CDN, maka pemuatan asset berikutnya akan di deliver menggunakan CDN.

Biasanya CDN memiliki server yang lebih baik sehingga proses delivery asset ini berjalan lebih optimal dan lebih cepat.

Waktu delivery gambar yang dibutuhkan dari server selama 88.8ms dapat dipangkas menjadi 14.8ms.

Pada kasus ini, waktu pemuatannya lebih cepat hingga 600%!

Penempatan CSS/JS

Terakhir, optimasikan urutan pemuatan asset.

Istilah dalam caching disebut critical asset.

Critical asset adalah asset yang harus dimuat terlebih dahulu sebelum asset-asset lainnya dimuat.

Sebelum membahas lebih jauh, JS memiliki 3 cara untuk dimuat :

• Default
• Defer
• Async

Pada pemuatan JS secara default, maka file HTML akan terpause saat meload JS.

Pemuatan async membuat HTML tetap di muat bersamaan dengan JS, namun saat JS ini dieksekusi, HTML akan di pause.

Pemuatan Defer tidak membuat HTML terpause selama pemuatan JS.

Namun eksekusi JS ini dilakukan saat HTML selesai dimuat.

Akan lebih mudah memahami perbedaannya dengan gambar dibawah

Sebagai contoh, pada pemuatan halaman biasanya ada hamburger menu pada mobile yang mana pemuatannya memerlukan JS agar dapat di klik untuk dropdown.

JS ini jangan di defer apalagi dipindah ke footer!

Asset ini harus diload seketika untuk mendapatkan user experience terbaik.

User harus segera bisa melakukan aksi terhadap menu ini.

Bisa saja menggunakan async, tapi harus di test dulu karena jika ada JS lain yang menjadi induk atau anak dari JS ini, kemungkinan fungsinya bisa break.

Tempatkan JS yang tidak digunakan seketika seperti JS pada form ke footer atau defer JS ini.

Inilah yang disebut critical CSS, critical JS dan sebagainya.

Asset yang harus di load duluan, harus ditempatkan di header.

Optimasi Gambar

Apa yang paling memperlambat loading sebuah halaman website?

Javascript?CSS?HTML?

Bukan.

Gambar!

Gambar yang tidak dioptimasi bisa berukuran beberapa MB dan ini memperberat loading halaman secara keseluruhan.

Meskipun gambar ini awalnya berukuran besar, ada banyak cara mudah untuk optimasinya.

Optimasi Gambar sebelum Upload

Gambar yang optimal untuk website adalah gambar yang memang dibuat untuk sesuai dengan website.

Optimasi ini meliputi pemilihan format gambar, resize dan compress.

Ada beberapa tools untuk melakukan optimasi gambar.

Favorit saya adalah RIOT dan iloveimg.com.

Dengan RIOT, gambar bisa dikompres dan diresize semaunya dengan hasil seperti apapun.

RIOT efektif ketika memiliki gambar yang butuh kompresi lanjutan.

iloveimg.com juga tidak kalah menarik fiturnya.

Hanya saja hasil kompresinya adalah kompresi terbaik yang bisa didapatkan oleh gambar itu.

Kemudian gambar yang sudah dioptimasi, baru di upload ke dalam website.

Inilah cara terbaik untuk optimasi gambar.

Format Gambar

Sangat penting untuk menentukan format gambar dengan tepat agar gambar dapat di deliver dengan sempurna.

Secara umum gambar memiliki 4 format untuk website.

• JPG
• PNG
• GIF
• Webp

JPG merupakan format gambar yang biasa digunakan untuk gambar foto.

PNG merupakan format gambar yang digunakan ketika membutuhkan transparansi dan biasanya digunakan sebagai ilustrasi atau icon.

GIF adalah format gambar beresolusi rendah yang biasanya digunakan untuk membuat gambar bergerak di meme.

Webp adalah format gambar generasi terbaru yang memadukan bagian baik dari PNG untuk mempertahankan transparansi dan JPG untuk mempertahankan warna dan kompresi maksimal.

Sayangnya format webp belum diadopsi oleh semua browser.

Namun kabar baiknya sekarang sudah disupport oleh browser safari!

Meskipun masih dalam tahap testing.

Artinya semua major browser sudah mendukung format webp.

Tinggal Internet Explorer yang belum.

Pada microsoft Edge 18 terdapat bug dimana gambar webp tidak dapat ditampilkan meskipun memiliki fallback image.

Detail browser yang support webp bisa dilihat di sini.

Sesuaikan Ukuran Gambar

Jutaan orang bahkan tidak menyadari bahwa mereka dapat menghasilkan puluhan megabyte gambar setiap hari tanpa melakukan resizing.

Resize adalah sebuah metode untuk memangkas ukuran gambar menjadi lebih kecil.

Ukuran layar yang digunakan juga biasanya fixed.

Tema generatepress secara default menggunakan lebar halaman sebesar 1100px.

jika menggunakan sidebar default, maka lebar artikel adalah 75% * 1100 = 775px.

Dengan margin 20px dan padding kiri kanan masing-masing 40px, maka lebar konten maksimum yang dapat diisi oleh gambar adalah 775px - 20px - 40px - 40px = 675px.

Misalkan gambar yang akan digunakan berukuran 2500px x 1600px, maka perlu di resize sampai 675px x 432px.

Kompress Gambar

Gambar yang sudah di resize tadi ke ukuran 675px x 432px akan mengalami penurunan ukuran gambar.

Untuk lebih mengoptimasi gambar, lakukan kompresi.

Kompresi ini dapat menurunkan kualitas gambar, namun tidak kasat mata manusia jika dikompress dengan rasio yang tepat.

Biasanya untuk gambar JPG dikompres dengan rasio kompresi 80% dan untuk png dikompress dengan 128 atau 256 warna.

Kompresi ini bisa menurunkan lebih dari 50% ukuran gambar yang sudah diresize.

artinya gambar dengan ukuran resize 100kb bisa menjadi 20kb setelah dikompres.

Langkah selanjutnya, gambar yang sudah optimal tadi di upload di wordpress.

Idealnya sekarang, gambar yang diupload tidak lebih dari 50kb untuk gambar dibawah 1000px dan kurang dari 100kb untuk gambar diatas 1000px.

Usahakan ukuran lebar maksimal gambar yang digunakan adalah 1440px.

Dan gambar ini hanya sebagai background.

jika digunakan sebagai gambar utama, pastikan ukuran gambar <100kb untuk mempercepat loading.

Responsive Image

Beruntung sekali menggunakan wordpress!

WordPress secara default sudah membuat struktur gambar responsive untuk setiap lebar layar dengan format seperti ini

<img src="https://wpcepat.com/wp-content/uploads/mobile-page-speed-new-industry-benchmarks-01-21.png" alt="mobile speed new industry benchmark" class="wp-image-51" srcset="https://wpcepat.com/wp-content/uploads/mobile-page-speed-new-industry-benchmarks-01-21.png 1000w, https://wpcepat.com/wp-content/uploads/mobile-page-speed-new-industry-benchmarks-01-21-300x209.png 300w, https://wpcepat.com/wp-content/uploads/mobile-page-speed-new-industry-benchmarks-01-21-768x536.png 768w, https://wpcepat.com/wp-content/uploads/mobile-page-speed-new-industry-benchmarks-01-21-20x14.png 20w" sizes="(max-width: 1000px) 100vw, 1000px">

WordPress membuat 4 gambar untuk setiap gambar yang di upload yang nantinya berguna untuk dimuat sesuai dengan lebar layar.

Semakin kecil layarnya, semakin kecil gambar yang di load.

Otomatis total ukuran halamannya makin kecil yang berarti loading lebih cepat.

Responsive image juga membantu SEO website!

Menentukan Transparansi

Gambar yang menggunakan transparansi baik untuk digunakan pada background yang memiliki gambar/pattern/gradient tertentu.

Jika background yang digunakan adalah plain atau warna polosan seperti background artikel ini, disarankan tidak menggunakan transparansi.

Transparansi gambar ini diubah dengan background berwarna sesuai dengan warna background pada halaman.

Dengan demikian, ukuran gambar yang didapatkan akan lebih kecil.

Jika memungkinkan, ubah gambar dengan transparansi ini ke format jpg untuk ukuran file yang lebih kecil.

Menghapus Ukuran Gambar yang Tidak Dipakai

Gambar-gambar yang diupload tapi tidak terpakai hanya akan memberatkan hosting dan membuat server semakin mahal.

Meskipun tidak secara langsung memperlambat loading halaman bagi user, menggunakan ukuran yang digunakan saja dapat membantu mempercepat proses upload.

Seperti yang sudah dibahas diatas, wordpress secara default membuat beberapa gambar sebagai gambar responsive.

Di pihak lain, tema maupun plugin tertentu dapat membuat ukuran gambar lain selain ukuran gambar default dari wordpress untuk digunakan sesuai kebutuhan tema/plugin tersebut.

Disable generate ukuran gambar yang tidak diperlukan di setting->media.

Ubah ke 0 untuk disable generate imagenya.

Optimasi Gambar yang Sudah Ada

ketika sudah terlanjur banyak gambar yang tidak teroptimasi berada pada halaman wordpress, ini bukanlah akhir.

Masih ada solusi.

Meskipun cara terbaik adalah menghapus gambar dan mengupload lagi gambar yang sudah dioptimasi dengan baik, ada cara yang lebih simple dengan bantuan plugin gambar.

Beberapa diantaranya wp smush, shortpixel dan resmush.

Dari hasil riset wpbeginner, berikut adalah perbandingan beberapa plugin kompresi gambar.

Plugin	Compressed Size	Saved (%)	Method
reSmush.it	36 KB	63.8%	Lossless
EWWW Image Optimizer	97.5 KB	1.9%	Lossless
Compress JPEG & PNG images	34.3	64%	Lossy
ShortPixel Image Optimizer	37 KB	63.5%	Lossy
WP Smush	99 KB	2.9%	Lossless

Lossy memiliki tingkat kompresi yang lebih baik namun hasil yang lebih pecah jika digunakan pada tingkat kompresi yang tinggi.

Lossless memiliki tingkat kompresi yang lebih rendah dibandingkan lossy namun tidak ada perbedaan yang kasat mata antara gambar original dan gambar yang dikompresi.

Saya tidak menggunakan plugin semacam ini, sehingga saya tidak memiliki rekomendasi plugin yang baik untuk pekerjaan ini.

Tapi banyak orang yang merekomendasikan shortpixel karena hasil yang diperoleh memuaskan.

Silakan coba sendiri dan temukan plugin yang terbaik.

Inline SVG vs SVG vs Webfonts

Inline SVG, SVG file dan webfonts adalah pilihan gambar untuk icon.

Masing-masing memiliki kelebihan dan kekurangannya masing-masing.

Inline SVG adalah gambar yang dibuat dengan HTML svg.

Gambar ini lebih ringan karena dibuat dengan HTML, sehingga tidak membuat request tambahan ke server dan berukuran sangat kecil apalagi dikompress menggunakan gzip/brotli (pilih brotli kalau ada).

Sayangnya penggunaan berlebihan inline SVG ini membuat HTML bengkak dan kebanyakan HTML tidak di cache untuk website dinamis sehingga inline SVG harus di load berulang-ulang.

SVG image adalah gambar yang dibuat dalam ekstensi SVG.

Gambar ini umumnya memiliki ukuran file yang lebih besar dibandingkan ekstensi gambar-gambar lainnya.

Namun SVG dapat dikonversi ke dalam ukuran berapapun yang dibutuhkan di website.

Gambar SVG ini bisa di cache sehingga lebih cepat diload dibandingkan inline SVG.

Tapi kalau HTMLnya di cache, lebih cepat inline SVG.

Yang terakhir adalah webfonts.

Webfonts ini adalah fonts yang dibuat khusus untuk penggunaan website dan dipanggil menggunakan @font-face untuk dapat digunakan dengan memanggil class atau unicode pada website.

Contohnya adalah google fonts dan fontawesome.

Fontawesome memiliki library berupa icon-icon yang dapat dipanggil dengan class/unicode tertentu.

<i class="fas fa-bath"></i>

Contoh diatas adalah contoh penggunaan webfonts dan ada beberapa cara lain, tapi ini yang paling umum digunakan.

Kelebihan dari webfonts sendiri adalah tidak perlu menambah request untuk menampilkan beberapa icon yang berbeda.

Cukup 1 request tambahan dan semua icon yang tersedia dapat digunakan dengan ukuran apapun.

Namun biasanya karena library icon ini besar, maka request nya akan sedikit lambat (+-100ms).

Lazy Load

Memang sangat masuk akal untuk menunda pemuatan asset sampai dengan asset itu dapat dilihat oleh user.

Tidak ada gunanya memuat asset yang belum dapat dilihat oleh user kecuali revenue based (adsense dkk).

Ada banyak perdebatan mengenai penggunaan lazy load ini karena di satu sisi lazy load membantu user & pemilik website menghemat bandwidth namun ketika user melakukan fast scroll, akan terlihat blank karena asset baru dimuat saat user berinteraksi.

Saya sendiri termasuk pengguna lazy load.

Hal ini karena saya sudah mengoptimasi gambar, sehingga pemuatan gambar yang dilakukan saat fast scroll tidaklah lama dan dari stuktur wordpress, gambar memang didesain untuk di load belakangan.

Silakan memilih untuk menggunakan lazy load atau tidak.

Saya berikan informasi kelebihan dan kekurangannya

Kelebihan

• Memperkecil request saat load
• Mempercepat loading
• Menghemat bandwidth
• Menurunkan ukuran awal halaman

Kekurangan

• Blank saat fast scroll
• Penggunaan CPU sedikit lebih tinggi
• Buruk untuk asset-asset yang tidak teroptimasi
• User merasa ada lag

Optimasi Font

Font memegang peranan yang sangat penting dalam sebuah website.

Mungkin sebagian dari pengguna wordpress berpikir bahwa bagian font ini tidak perlu dioptimasi.

Yang penting website ada font yang bagus untuk dilihat.

Pandangan semacam ini tidak benar!

Tanpa font yang menarik dari google fonts atau pihak ketiga lainnya, tampilan fontnya akan terlihat membosankan dan pengguna malas untuk meneruskan membaca.

System font tidak optimal untuk digunakan pada website.

Penggunaan font dari pihak ketiga dengan tepat dapat mempercantik tulisan, namun penggunaan berlebihan tanpa optimasi akan memperlambat loading.

Persepsi tentang seberapa cepat sebuah halaman terlihat dari seberapa cepat text diload dengan sempurna.

Memilih Font

Ada banyak sekali font yang font yang dapat dipilih untuk keperluan apapun di website.

Tapi ada 3 tipe font yang bisa digunakan pada website

• System fonts
• Local fonts
• Webfonts

System fonts adalah font yang sudah ada pada setiap sistem dan tidak memerlukan pemanggilan asset untuk dapat menggunakannya.

Contoh font yang termasuk dalam system fonts adalah verdana, tahoma, dan arial.

Tipe font ini adalah tipe font yang tercepat namun sangat terbatas pilihannya dan secara estetika kurang menarik.

Local fonts adalah font custom yang tidak terdapat pada system fonts, namun font filenya terletak pada server sendiri.

Contohnya adalah google fonts yang didownload dan digunakan pada server sendiri.

Kelebihan local fonts adalah pemuatan font bisa lebih cepat dengan tampilan font yang menarik.

Local font ini juga mendapakan keuntungan dari sistem cache website sehingga lebih cepat lagi dimuat.

Webfonts itu apa sudah saya jelaskan diatas di bagian optimasi gambar.

Untuk webfonts ini saya akan fokuskan pada google fonts karena biasanya google fonts digunakan sebagai font dalam sebuah website.

Kelebihannya dibandingkan local fonts adalah google fonts menggunakan CDN super cepat dari google yang sudah menggunakan http/3 dan font populer mungkin sudah tercache pada browser pengunjung sehingga pemuatan google fonts ini tidaklah diperlukan.

Jika font dari google fonts yang digunakan sudah di cache oleh browser pengunjung, maka google font akan hampir secepat system fonts karena tidak melakukan request http.

Dari 3 tipe fonts diatas yang tercepat?

System fonts!

Silakan saja kalau mau menggunakan system fonts, tapi tetap saja, saya akan merekomendasikan untuk menggunakan google fonts untuk alasan user experience.

Maka pilihannya tinggal google fonts ini digunakan sebagai local fonts atau webfont.

Keduanya memiliki keuntungan masing-masing.

Local Fonts

• Mendapatkan keuntungan dari cache
• Tidak melakukan DNS lookup
• Dapat menentukan browser cache expiration
• Dapat menentukan versi font
• Lebih cepat diakses

Webfonts

• Mendapatkan keuntungan dari CDN super cepat google
• Versi font selalu terbaru
• Akses instan jika sudah tercache di browser pengunjung

Saat ini saya menggunakan webfonts karena fakta yang saya lihat waktu aksesnya lebih cepat dibandingkan local fonts.

Lain kesempatan saya akan berikan studi kasusnya.

Gunakan Lebih Sedikit Font

Semakin banyak font yang digunakan juga akan memperlambat pemuatan sebah halaman.

Idealnya sebuah halaman website akan memiliki 1-3 font saja.

Halaman dengan 1 font adalah yang cara yang terbaik dan tercepat.

Tetapi kadang ada font lain yang digunakan untuk keperluan tertentu, misalnnya heading dan text berbeda.

Tetapi usahakan untuk menggunakan maksimal 3 font dalam 1 halaman.

Gunakan Hanya Font yang Diperlukan

Seperti yang sudah saya singgung diatas, penggunaan font yang berlebihan dapat memperlambat loading website.

Penggunaan berlebihan ini bukan hanya berapa banyaknya font yang digunakan, tapi juga meliputi variasi font yang digunakan.

Pada umumnya font memiliki beberapa ukuran untuk ketebalan fontnya, mulai dari 100 sampai 900.

100 adalah font dengan tingkat ketebalan paling kecil dan 900 adalah font dengan tingkat ketebalan paling banyak.

Idealnya, gunakan 2 atau 3 tingkat ketebalan sebgai font heading dan font body.

Jika menggunakan beberapa font, gunakan 1 saja tingkat ketebalan agar tidak memperberat loadingnya.

Pada tema generatepress terdapat settingan pada typography untuk memilih font variation nya.

Combine Google Fonts Request

Ketika menggunakan 2 atau lebih google fonts dalam sebuah halaman, maka halaman itu akan melekukan 2 kali atau lebih request http untuk memanggil semua fonts yang digunakan.

Ini sangat tidak efektif!

Lakukan peningkatan efektivitas dengan melakukan request sekaligus.

https://fonts.googleapis.com/css?family=Montserrat:regular,|Merienda+One:400

Contoh diatas adalah hasil request yang telah di combine menjadi 1 request.

Preload Fonts

Jika halaman yang dimuat ini cukup lambat dalam memuat font, maka preload ini perlu digunakan.

Preload Fonts ini berguna untuk membuat fonts di load lebih cepat sehingga dapat menampilkan tulisan pada halaman sesegera mungkin.

Namun tidak selalu preload menjadi jawaban untuk optimasi font secara optimal.

Perhatikan font yang memang harus dimuat lebih cepat dan font yang memang harus menunggu css selesai dimuat.

Sumber Font

Salah satu kesalahan paling umum bagi pengguna wordpress adalah melakukan instalasi dan setting plugin dan tema yang berkaitan dengan font.

Font hanya perlu diload 1 kali saja.

Jangan buat font di request 2 kali atau lebih.

Jika sudah melakukan setting font pada tema, jangan lakukan setting font pada pugin.

Menghindari kesalahan dasar ini saja sudah mengurangi pemuatan halaman 50-200ms.

Sebaiknya gunakan tema sebagai tempat untuk setting font dan set inherit untuk settingan plugin.

Optimasi External Asset

External asset adalah asset-asset yang digunakan pada halaman website namun berasal dari website lain.

Contohnya adalah google fonts, fontawesome, google adsense, google analytics, fb pixel, banner iklan, dan lain lain.

Asset diatas tidak mendapatkan keuntungan dari cache website.

Performa asset itu sangat bergantung pada server asset.

Terutama untuk asset gratis, sebagian besar penyedia asset tidak akan menghabiskan budget untuk menyewa server terbaik untuk diakses oleh halaman website kita.

Sehingga akses asset ini sering kali kurang optimal dan dimuat dalam beberapa detik, namun tidak banyak hal yang dapat dilakukan untuk melakukan optimasi dari sisi kita.

Ah, satu kelemahan eksternal asset lainnya adalah, jika server penyedia asset down, asset tidak akan termuat pada halaman website.

Lalu bagaimana caranya melakukan optimasi dari sisi website sendiri?

Minimalkan penggunaan external asset

Semakin banyak eksternal asset yang digunakan, semakin banyak asset yang tidak bisa dikontrol secara penuh.

Minimalkan penggunaannya!

Hapus yang tidak perlu.

Gunakan hanya yang critical dan dibutuhkan.

Jika sudah menggunakan google analytics, tidak perlu menggunakan jetpack site stats.

Tetapkan jumlah eksternal asset seminimal mungkin.

Download Asset dan Gunakan Secara Lokal

Jika ada beberapa eksternal asset yang harus digunakan, maka opsi berikutnya adalah menggunakannya secara lokal.

Asset-asset dari pihak ketiga ini bisa di download dan di host pada server sendiri.

Sebagai contoh google fonts.

Google fonts dapat dimuat secara lokal dengan mendownloadnya via website resmi atau heroku atau melalui plugin.

Ada plugin yang mengidentifikasi font apa saja dari google fonts yang digunakan dan meloadnya serta mendisable pemuatan google fonts yaitu OMGF.

OMGF adalah cara termudah melokalkan google fonts.

Berikut adalah list asset yang sebaiknya di host secara lokal

• Googe Fonts (optional)
• Font Awesome
• Google Analytics
• Gambar

Lazy Load Video (Youtube)

Menggunakan youtube sebagai media untuk memutar video non komersial adalah langkah yang cerdas.

Tanpa memberatkan server dan menguras bandwidth, video dapat diputar.

Bisa saja video ini dibuat dalam format gif.

Hanya saja gambarnya lebih blur dan ukuran filenya besar.

Youtube yang di embed ke dalam halaman akan menambah sekitar 12 request.

Sangat banyak dibandingkan asset-asset yang lokal yang dimuat.

Bisa jadi 12 request adalah keseluruhan asset lokal yang harus dimuat.

Maka dari itu, video dari pihak ketiga seperti youtube dan vimeo harus di lazy load.

Plugin lazy load video ini secara cerdas bisa membantu menunda pemuatan youtube sampai ada interaksi user.

Disable Google Maps

Sebenarnya kurang tepat kalau harus mendisable penuh google maps.

Beberapa halaman website memerlukan google maps untuk keperluan navigasi atau sekadar lokasi.

Jika memang keperluan google mapsnya hanya untuk memberitahu lokasi tempat bisnis, maka google maps ini WAJIB didisable.

Namun, yang dimaksud mendisable google maps bukanlah menghilangkan google maps dari halaman, melainkan mengubah format google maps menjadi gambar.

Dengan mengubah google maps menjadi gambar, maka hanya akan ada 1 request yang diperlukan dan bagian terbaiknya adalah dapat dimuat secara lokal.

Gambar ini nanti akan dihubungkan dengan url google maps lokasi bisnis sehingga ketika user melakukan klik pada maps, akan diarahkan ke aplikasi google maps atau website google maps.

Gravatar Cache

Gravatar adalah website yang menampilkan profil picture dari sebuah email.

Gravatar digunakan oleh wordpress sehingga ketika melakukan komentar hanya dengan email, maka profil picture ini akan muncul.

Biasanya orang jarang mengganti profile picture di gravatar.

Karena itu, sangat baik untuk mencache gravatar yang sudah mengisi komentar pada halaman website.

DNS Prefetch

Kendala utama yang dialami saat pemuatan halaman dengan asset eksternal adalah waktu tunggu untuk menghubungkan halaman dengan website penyedia asset.

Bisa jadi waktu untuk menghubungkan ini lambat karena perbedaan lokasi server antara server website dan server penyedia asset yang mengakibatkan adanya latensi sehingga latensi ini bisa menyebabkan penambahan total waktu pemuatan.

Untuk mengatasi kendala ini, caranya adalah dengan memuat asset-asset eksternal ini dimuat lebih dulu.

Cara untuk pemuatannya adalah dengan menambahkan rel="DNS-prefetch" untuk setiap website eksternal yang ingin dimuat terlebih dahulu.

Contoh penggunaannya seperti dibawah ini.

<link rel='dns-prefetch' href='//fonts.gstatic.com'>

HTML diatas meminta website fonts.gstatic.com alias google fonts untuk dimuat lebih awal sambil melakukan pemuatan halaman.

Untuk mengetahui apa saja pihak ketiga yang digunakan, bisa melakukan test pada gtmetrix atau chrome devtools.

Tinggal dipilih website yang harus di load terlebih dahulu.

Cara Memperburuk Performa Website

Kebiasaan pengguna wordpress pemula adalah menggunakan semua taktik untuk mempercepat loading website mereka yang dibaca dari artikel-artikel atau forum-forum diskusi.

Tidak ada yang salah dari cara diatas, tapi ini menjadi salah jika semua tips ini digunakan secara bersamaan.

Bukannya memperbaiki performa, justru memperburuk performa.

Setiap website ini UNIK.

Tidak ada yang sama.

Jadi, cara optimasi yang sama mungkin tidak berlaku untuk semua website.

Mengoptimasi Skor Pagespeed Tools

Ini adalah langkah utama yang buruk.

Nilai A+ dan total load time bukanlah tujuan akhir dari optimasi.

Tapi tujuan akhirnya adalah memberikan informasi kepada user secepat mungkin.

Secepat mungkin bukan berarti pada website berat seperti website fotografi atau video harus dimuat semua assetnya instan.

Berapa banyak yang komplain youtube lambat di load?

Lihat data dibawah ini

Skornya tidak penting.

Yang penting adalah waktu koneknya (TTFB) dan first contentful paint.

Halaman youtube sudah muncul dalam 363ms menurut GTmetrix.

Menurut web.dev :

Sekali lagi, skor tidak penting.

Contentful paint dan time to interactive yang penting.

Lalu kita cek realnya di browser.

Untuk first time visit, contentful paint timenya 647ms!

Hanya butuh setengah detik lebih untuk memuat halaman youtube.

Gila, kenceng banget untuk ukuran halaman video.

Terlebih, waktu konek (TTFB) nya hanya 41an ms.

Jadi, inilah data-data yang penting.

Seberapa cepat halaman dapat disajikan ke pengguna adalah prioritas utama optimasi, bukan ke skor.

BTW, coba lihat betapa tidak akuratnya informasi yang diberikan oleh web.dev dan menjadi alasan kuat saya tidak menggunakan web.dev (maafkan saya google fanboy).

Menggunakan Tema Bloated Karena Desain

Saya setuju bahwa desain adalah bentuk personalisasi dan identifikasi yang diberikan kepada pengguna untuk lebih mengenal brand.

Tapi menggunakan tema yang bloated demi desain adalah langkah yang buruk.

Gunakan saja tema lightweight dan custom sedikit dengan CSS untuk memberikan sentuhan personal terhadap desain.

Tapi jangan gunakan tema yang sangat minimalis seperti arke karena kustomisasinya akan lebih sulit dan justru lebih bloated hasil akhirnya.

Menggunakan Beberapa Plugin Cache

Tunggu sebentar, siapa yang sebenarnya mengajarkan ini?

Dalam hampir setiap optimasi yang saya lakukan terhadap website klien, setidaknya ada 2 plugin cache yang digunakan secara bersamaan.

Penggunaan beberapa plugin optimasi dengan fungsi yang sama hanya akan memperburuk performa!

Yang paling sering terjadi adalah penggunaan autoptimize + cache plugin.

Autoptimize digunakan untuk melakukan combine JS/CSS.

Kalau memang harus menggunakan autoptimize, jangan optimasi apapun di plugin cache yang sudah di setting di autoptimize karena kemungkinan asset menjadi error/rusak lebih besar.

Yang lebih parah lagi menggunakan 2 plugin cache secara bersamaan, misal WP fastest cache + WP rockets.

Please, jangan lakukan ini.

Gunakan 1 saja sudah lebih dari cukup.

On Semua

Tidak tahu settingan cache optimal untuk website?

Aktifkan saja semua fitur, pasti lebih bagus....dalam merusak website.

Tidak semua fitur harus on semua.

Tentukan mana yang harus on mana yang harus off berdasarkan kebutuhan website.

Terlalu Banyak Kompres Gambar

Kompres gambar adalah langkah yang cerdas untuk mengurangi ukuran halaman.

Tapi jika berlebihan, gambar ini akan buram, kasar dan tidak enak dilihat.

Untuk JPG/JPEG, gunakan maksimal 80% kompresi untuk hasil yang lossless.

Selebihnya akan menurunkan kualitas secara kasat mata (lossy).

Terlalu Banyak Inline SVG

Inline SVG dapat mengurangi HTTP request dengan kompensasi menambah ukuran HTML.

Jika hanya 1 atau 2 saja, tidak ada masalah.

Tapi penggunaan berlebihan justru memperburuk performa dibandingkan menggunakan SVG/icon.

Harapan

Dengan panduan dan tutorial diatas, saya berharap pembaca dapat meningkatkan kecepatan websitenya dari puluhan detik menjadi dibawah 3 detik.

Target utama saya secara pribadi dalam optimasi ini adalah mendapatkan TTFB<200ms dan contentful paint dibawah 1 detik.

Saya juga membuka jasa mempercepat loading website untuk optimasi speed.

Perlu digarisbawahi, melakukan optimasi kecepatan website ini memang lebih ke seni karena tukang optimasinya harus tahu mana-mana asset yang harus didahulukan dan diload belakangan, mana yang harus dioptimasi mana yang harus dibiarkan apa adanya.

Semakin banyak praktik optimasi dan melakukan trial & error, akan semakin tajam intuisinya.