Artikel ini adalah bagian kedua seri pengenalan dan instalasi WordPress
Saat panduan ini ditulis tahun 2021, WordPress sudah digunakan oleh 40% lebih dari keseluruhan total website yang ada di internet.
Kejayaan WordPress tidak serta merta terjadi begitu saja.
Banyak hal yang terjadi sejak awal adanya WordPress.
Dari yang awalnya hanya sebagai platform blogging, sekarang sudah menjadi multi purpose platform.
Pada sesi ini, kamu akan belajar tentang sejarah, plugin, tema, komunitas, dan masa depan WordPress.
Bagi yang belum familiar dengan WordPress, silakan baca artikel tentang apa itu WordPress.
Sejarah Berdirinya dan perjalanan WordPress
WordPress mulai di develop pada tahun 2002 dan dibuat sebagai langkah awal untuk meneruskan project open source b2/cafelog yang merupakan sebuah platform blogging.
Platform b2/cafelog ini ditinggalkan oleh pembuatnya karena masalah pribadi yang akhirnya komunitasnya ditinggal sendirian tanpa induk.
Berkat dibuatnya b2/cafelog ini sebagai platform open source, maka komunitasnya bisa melanjutkan pengembangan software ini.
Tahun 2008, akhirnya muncul repository untuk tema.
Tema-tema yang ada di halaman itu baru bisa diakses tahun 2008!
DI tahun ini juga, dengan update versi 2.5 aka "Brecker", penggunaan shortcode sudah bisa digunakan.
Shortcode adalah kode yang dapat digunakan dimana saja pada halaman WordPress menggunakan kurung siku buka tutup.
Misal : [shortcode].
Adanya tema dan shortcode ini mulai menambah fungsionalitas WordPress.
Lalu di tahun 2010 terdapat sebuah rilis besar-besaran yaitu versi 3.0 dengan 218 kontibutor dengan code name "Thelonious".
Update ini sangat besar dampaknya pada kemampuan WordPress untuk melakukan kustomisasi dengan ditambahkannya fitur :
Custom post type
Custom taxonomy
WordPress multisite
Default theme "Twenty Ten"
Penambahan API untuk custom tema
dan masih banyak lainnya.
Sebelumnya WordPress hanya menyediakan post, kategori dan tags saja untuk dikustom.
Dengan update ini, WordPress bisa membuat custom post type misalkan mobil dengan custom taxonomy merk.
Ini sangat memudahkan dan mulai melepaskan WordPress dari sekadar CMS blogging.
Dengan adanya update major ini, maka pada tahun 2011, WordPress sudah dipakai oleh 50 juta lebih website!
Perbaikan dan penambahan fitur ini terus dilakukan untuk mempermudah penggunaan WordPress.
Tahun 2015, akhirnya WordPress menambahkan fitur REST API yang memungkinkan data WordPress dapat digunakan pada aplikasi lain.
Tahun 2016 adalah era dimana WordPress mulai memodrenisasi diri.
Penambahan fitur seperti custom CSS dan support HTTPS.
Kemudian pada 2018, para kontributor dan developer core WordPress mulai mengerjakan project gutenberg.
Gutenberg nantinya akan digunakan sebagai content editor berbasis block menggantikan classic editor.
Update WordPress 5.0 pada penghujung tahun 2018 ini, classic editor digantikan dengan gutenberg.
Pada update ini terdapat banyak pro dan kontra terkait perubahan content editor ini.
Bagi yang sudah terbiasa menggunakan classic editor merasa kesulitan dengan digantikannya gutenberg.
Terus terang saya juga awalnya merasa kesulitan, tapi ternyata setelah digunakan lebih mudah.
Lalu akhirnya pada tahun 2021 ini, gutenberg sudah memiliki banyak block yang makin disempurnakan dan WordPress dapat membuat website apa saja.
Apa itu WordPress
Artikel ini adalah bagian pertama seri pengenalan dan instalasi WordPress
Saat pertama kali ada niat untuk membuat website, kamu pasti bertanya :
"Gimana sih caranya buat website?"
Ada 2 cara yang selama ini dijalankan oleh orang-orang yang sudah berkecimpung di dunia perwebsitean yaitu menggunakan :
CMS
Coding
CMS adalah singkatan dari Content Management System yang artinya sistem yang digunakan untuk mengatur konten.
CMS sendiri ada banyak sekali seperti :
WordPress
Joomla
Ghost
Moddle
Opencart
Drupal
Dll
Coding adalah pembuatan instruksi terhadap komputer yang memberitahu bagaimana komputer harus berjalan.
Dengan coding, kamu bisa membuat CMS sendiri.
Tapi pembuatan website dengan coding memakan waktu dan tenaga yang lebih besar daripada menggunakan CMS meskipun lebih fleksibel, terutama kalau kamu belum bisa coding.
Oleh karena itu, pada serangkaian tutorial kedepan, kamu akan belajar bagaimana memanfaatkan CMS WordPress untuk membuat website atau blog sesuai yang diinginkan.
Sebelum melangkah lebih jauh, kamu perlu tahu lebih lanjut tentang apa itu WordPress.
WordPress adalah sebuah CMS yang open source dan sangat populer yang digunakan sebagai aplikasi pembuat website atau awalnya disebut blog engine.
Kenapa awalnya disebut sebagai blog engine adalah karena WordPress sendiri adalah penerus dari sebuah CMS blogging (CMS yang digunakan untuk membuat blog) bernama B2/cafelog.
Namun kegunaannya sekarang tidak hanya sebatas menjadi CMS blogging, namun jauh lebih fleksibel.
Kenapa WordPress?
Tentu saja karena WordPress sangat populer!
WordPress digunakan lebih dari 40% dari total keseluruhan website yang ada di internet.
Jadi kalau ada 10 website, 4 nya menggunakan WordPress.
Wait, bukan hanya itu saja.
WordPress menggunakan lisensi GPLv2 yang memungkinkan siapapun menggunakan, mengedit, dan mendistribusikan wordpress dengan tujuan apapun.
Lebih jelasnya bisa lihat gambar dibawah.
Hasilnya mau dijual? Boleh!
Dengan adanya lisensi ini, jutaan penggiat website dapat menghidupi keluarganya dengan legal.
Disamping itu, dari sisi penggunaan, WordPress menawarkan banyak kelebihan, diantaranya :
Kemudahan dalam membuat, mengedit dan menghapus konten yang bahkan seorang pemula bisa dengan mudah menggunakannya.
WordPress dapat digunakan dengan gratis dan tanpa kredit, meskipun nantinya waktu mau mengonlinekan kamu butuh biaya hosting dan domain.
WordPress sangat fleksibel sehingga dapat membuat setiap jenis website yang diinginkan.
Dengan WordPress kamu bisa membuat blog maupun website dengan mudah tanpa harus bisa coding sedikitpun.
Penambahan fungsi dapat dilakukan dengan plugin.
Mudah di desain dengan banyaknya tema yang tersedia.
Tingkat keamanan yang tinggi dan terus diperbarui
Komunitas yang sangat besar dan aktif yang membantu setiap lini perkembangan WordPress.
Dan banyak keuntungan lainnya
Dengan banyaknya keuntungan diatas, WordPress menjadi salah satu pilihan kuat untuk menjadi CMS dalam membuat website.
Fitur WordPress
Bagaimana dengan fitur WordPress sendiri yang menunjang produktivitas?
Banyak fitur-fitur bawaan WordPress yang sangat menunjang produktivitas dan akan terus diperbarui seiring update dari WordPress.
WordPress secara bawaan sudah SEO Friendly yang bisa membuat website atau blog yang dibuat dengan mudah diketahui oleh mesin pencari.
WordPress senantiasa membuat code yang ada semakin ramping dan menghilangkan kode-kode yang tidak diperlukan yang membuat website menjadi lambat, sehingga website yang dibuat dengan WordPress menjadi semakin cepat.
Setiap website yang dibangun dengan WordPress sudah mobile friendly dan responsive.
Penyimpanan gambar, media dan file diletakkan dengan sangat baik sehingga mempermudah pencarian file dan kamu dapat melakukan perubahan dasar seperti crop/resize foto dengan mudah.
Tampilan interface yang user friendly membuat WordPress mudah digunakan bahkan oleh pemula.
WordPress juga berfokus pada aksesbilitas fungsi-fungsinya yang memudahkan penggunaan.
Kustomisasi menu website yang mudah.
Karena dasarnya WordPress dibangun sebagai platform blog, membuat blog semudah publish post!
Melakukan pembuatan konten semakin mudah dengan adanya gutenberg sejak versi 5.0.
Tersedia dokumentasi secara lengkap dan dilengkapi dengan hook dan filter untuk pengembangan WordPress.
Dan masih banyak lainnya
Terus terang, kamu cukup beruntung karena belajar WordPress sewaktu WordPress sudah sangat matang seperti sekarang.
Melakukan kustomisasi sudah bukan hal yang sulit lagi.
Penggunaan WordPress
Karena sejak awal WordPress dibangun untuk meneruskan platform blogging B2/cafelog, kebanyakan orang hanya tau WordPress digunakan untuk kepentingan blogging.
Padahal sekarang sudah sangat jauh berbeda dari pertama kali WordPress muncul.
WordPress sudah menjadi sangat dinamis dan bisa digunakan untuk membuat website apa saja.
Para developer dan kontributor WordPress telah bekerja keras untuk membuat semua hal ini bisa dinikmati sekarang.
Sebagai contoh, WordPress memiliki plugin woocomerce yang memungkinkan kamu untuk membuat sebuah toko online.
Wow!
Bukan lagi sekadar blog, tapi sudah toko online!
Apa lagi website yang bisa dibuat WordPress?
Company Profile - website berisi profil dari sebuah perusahaan.
Toko Online - website yang digunakan untuk menjual sesuatu baik fisik maupun digital.
Blog - website berisi sekumpulan artikel
Portofolio - website yang digunakan untuk memajang hasil pekerjaan/project
Forum - website yang digunakan untuk interaksi antar member
Membership - website yang digunakan untuk mendapatkan penghasilan dari subscribe member
Dan banyak lainnya
Sebenarnya mau buat website apapun bisa menggunakan WordPress.
Jadi seharusnya website apapun yang ingin dibuat, bisa dibuat dengan WordPress.
Pengguna WordPress
Siapa saja pengguna WordPress?
Semua orang bisa menggunakan WordPress!
Terlepas dari apapun pekerjaan, latar belakang, umur, pendidikan dan lainnya, semua bisa!
Tapi, bukan hanya sekadar perorangan yang menggunakan WordPress.
Bahkan UMKM, agensi dan perusahaan besar menggunakan WordPress!
Microsoft
Blog microsoft menggunakan WordPress sebagai CMS untuk memanage blognya.
Sony Music
Sony Music menggunakan WordPress sebagai CMS untuk membuat websitenya.
Toyota Brasil
Toyota Brasil menggunakan WordPress sebagai CMS untuk membuat websitenya.
Dan masih banyak website-website besar lainnya yang menggunakan WordPress.
Apa yang akan dipelajari
Setelah memahami apa itu WordPress, kelebihan, fitur dan contoh website yang menggunakan WordPress, kamu juga akan belajar cara menggunakan WordPress untuk membuat website atau blog sesuai dengan kebutuhan.
Tapi, sebelum mencapai tahap itu, pada seri pengenalan dan instalasi ini kamu akan belajar mengenal WordPress dan lingkungan pendukungnya agar mudah dalam melanjutkan ke tahap berikutnya.
Sampai jumpa di pelajaran kedua!
Apa Itu Hosting?
Setiap website yang pernah kamu klik, lihat, baca, tonton pada browser kamu berada pada suatu hosting yang membuat website-website ini dapat diakses di seluruh dunia (world wide web).
Tanpa hosting, website-website ini tidak bisa diakses oleh semua orang.
Hosting ini sendiri merupakan salah satu komponen krusial dalam pembuatan website.
Dalam tutorial ini, kamu akan belajar tentang hosting, penyedia hosting, dan tipe hosting yang umum dijual.
Secara teknis, setiap orang harus tahu kalau sebuah aplikasi/website/apapun bisa kita lihat dengan minimal 2 syarat.
Ada datanya dan ada yang menampilkannya.
Data ini mirip seperti kamu ambil foto di smartphone.
Dimana sih gambar ini ada?
Di ruang penyimpanan.
Yap, betul. disini.
Artinya data ini ada ruang penyimpanannya, kalau di dunia perwebsitean biasanya disebut diskspace.
Diskspace inilah yang gunanya untuk menyimpan data-data website kamu yang nantinya akan diakses oleh orang-orang yang membuka website kamu.
Kalau begitu, bagaimana caranya mendapatkan hosting ini?
Untuk kamu yang sedang membaca artikel ini, saya sarankan untuk sewa saja.
Jauh lebih murah dan gak perlu pusing-pusing mikirin hal teknis.
Terus kalo harus sewa, sewa dimana?
Penyedia Hosting
Menurut wikipedia, layanan hosting adalah tipe layanan internet hosting yang membuat baik website personal ataupun website perusahaan dapat diakses melalui world wide web (www).
Kita membutuhkan layanan ini agar isi website kita nantinya bisa diakses oleh siapa saja.
Penyedia layanan ini sudah banyak di indonesia.
Mulai dari kebutuhan dasar untuk sekadar mengonlinekan website maupun untuk strategi pemasaran seperti corporate email dan sebagainya.
Biaya untuk sewa hosting ini rata-rata dibanderol dengan biaya bulanan.
Tapi kalau kamu beli dengan jangka waktu yang lebih panjang, misalkan tahunan/3 tahunan biasanya akan lebih murah.
Beberapa penyedia hosting yang saya rekomendasikan adalah sebagai berikut :
Sebelum menyewa hosting, kamu perlu tahu bahwa hosting tidak hanya ada 1 macam.
Untuk saat ini mungkin kamu hanya butuh yang sekadar cukup untuk mengonlinekan saja.
Tapi ada sebagian pemilik website yang sudah besar dan memiliki kebutuhan lebih.
Beberapa tipe hosting yang banyak dijual di pasaran diantaranya adalah
Shared Hosting
WordPress Hosting
Cloud Hosting
VPS
Dedicated Server
Shared Hosting
Shared hosting adalah salah satu tipe hosting yang paling umum, paling murah dan paling mudah untuk dikelola.
Kamu gak perlu ribet memikirkan gimana cara setting server dan sebagainya.
Hanya dengan sekali klik sudah jadi.
Mirip seperti kamu menggunakan aplikasi.
Pengelolaan server ini biasanya menggunakan panel tertentu.
Hosting indonesia banyak menggunakan direct admin dan cpanel sebagai control panelnya.
Tapi untuk siapa sih shared hosting ini?
Shared hosting ini digunakan untuk orang-orang yang baru mau memulai belajar membuat wordpress.
Yes, kamu nantinya BAIKNYA beli shared hosting saja.
Kelebihan
Konfigurasi server dilakukan oleh penyedia hosting
Dimudahkan dengan kontrol panel
Hanya memerlukan pengetahuan dasar mengenai server
Biaya sangat terjangkau
Fokus memikirkan website
Tersedia support
Bisa memilih konfigurasi server yang tersedia
Kekurangan
Kontrol terhadap konfigurasi server sangat terbatas
Berbagi resource
performa server standar
Shared Hosting
Harga
Support
Performa
Pengetahuan Teknis
Kontrol Server
Kemudahan
Kesimpulan
Harga sangat murah Support terbaik Performa standar Pengetahuan teknis dasar Kontrol terhadap server minimal Sangat mudah mengelolanya
3.3
WordPress Hosting
Sebenarnya wordpress hosting ini sama dengan shared hosting.
Tapi wordpress hosting adalah shared hosting yang dikonfigurasi secara khusus untuk CMS wordpress.
Baik dari segi performa maupun security wordpress hosting ini lebih baik daripada shared hosting karena memang dikofigurasi khusus untuk wordpress.
Beberapa penyedia wordpress hosting juga menyediakan plugin bawaan tambahan atau tema tambahan sebagai pilihan yang dirasa paling cocok dengan konfigurasi hostingnya.
Kelebihan
Konfigurasi server dilakukan oleh penyedia hosting
Dimudahkan dengan kontrol panel
Hanya memerlukan pengetahuan dasar mengenai server
Performa lebih bagus dibanding shared hosting
Biaya terjangkau
Fokus memikirkan website
Tersedia support wordpress
Bisa memilih konfigurasi server yang tersedia
Kekurangan
Hanya bisa digunakan untuk website dengan CMS wordpress
Kontrol terhadap server terbatas
WordPress Hosting
Harga
Support
Performa
Pengetahuan Teknis
Kontrol Server
Kemudahan
Kesimpulan
Harga sangat murah Support wordpress terbaik Performa lebih baik Pengetahuan teknis dasar Kontrol terhadap server minimal Sangat mudah mengelolanya
3.3
Cloud Hosting
Cloud hosting adalah salah satu tipe hosting yang menggunakan banyak server virtual yang dihubungkan untuk menjaga performa terutama masalah uptime.
Uptime ini simpelnya adalah berapa persen waktu online hostingnya.
Kadang server tertentu down/maintenance.
Dengan adanya cloud hosting ini, uptime bisa di push sampai 100% uptime yang artinya website kamu selalu bisa diakses.
Saat ini, cloud hosting merupakan layanan yang paling bisa diandalkan.
Dia setara dengan VPS tapi semudah mengoperasikan shared hosting.
Dan tentu saja, kamu gak lagi harus berbagi resource di cloud hosting ini.
Jadi performanya bagus banget!
Kelebihan
Konfigurasi server dilakukan oleh penyedia hosting
Sangat jarang ada downtime
Dimudahkan dengan kontrol panel
Hanya memerlukan pengetahuan dasar mengenai server
Performa sangat bagus
Fokus memikirkan website
Tersedia support wordpress
Bisa memilih konfigurasi server yang tersedia
Server yang down/maintenance tidak berpengaruh terhadap website
Bisa upgrade resource sesuai kebutuhan
Biasanya pembayaran ditagihkan per jam pakai (pay as you go)
Kekurangan
Biaya cukup mahal
Kontrol terhadap server terbatas
Penggunaan resource berlebih tetap didukung namun dengan biaya yang jauh lebih mahal
Cloud Hosting
Harga
Support
Performa
Pengetahuan Teknis
Kontrol Server
Kemudahan
Kesimpulan
Harga cukup mahal Support terbaik Performa paling baik Pengetahuan teknis dasar Kontrol terhadap server cukup Sangat mudah mengelolanya
3.3
VPS
VPS adalah sebuah server privat virtual atau Virtual Private Server yang mana sebenarnya juga mirip seperti shared hosting.
Bedanya shared hosting berbagi alokasi resource.
Tapi di VPS kamu dapat alokasi resource yang tidak dibagi dengan pengguna lain.
Dengan alokasi resource yang tidak dibagi dengan user lain, website kamu bisa lebih lega dalam melakukan eksekusinya.
Tapi VPS ini butuh pengetahuan teknis dalam pengelolaan server.
Berbeda dengan shared hosting/wordpress hosting/cloud hosting.
Jadi kalau kamu tidak punya kemampuan pengelolaan server, kamu bisa cari jasa untuk setting VPS.
Kelebihan
Performa sangat bagus
Resource tidak dibagi-bagi dengan user lain
Bisa upgrade resource sesuai kebutuhan
Dapat mengkonfigurasi server sendiri
Penggunaan resource pengguna lain tidak berpengaruh terhadap performa server
Kekurangan
Biaya cukup mahal
Support terhadap kendala sangat terbatas
Wajib memiliki kemampuan teknis
VPS
Harga
Support
Performa
Pengetahuan Teknis
Kontrol Server
Kemudahan
Kesimpulan
Harga cukup mahal Support terbatas Performa sangat baik Pengetahuan teknis diperlukan Kontrol terhadap server penuh Cukup sulit mengelolanya
3.5
Dedicated Server
Hosting dengan tipe dedicated server ini adalah hosting yang paling bebas.
Kamu bisa melakukan konfigurasi apapun dengan akses penuh.
Sama seperti kamu punya komputer sendiri untuk website kamu.
Jadi performanya terjaga dan powerful.
Biasanya website dengan traffic yang besar dan butuh kestabilan menggunakan dedicated server.
Kelebihan
Performa sangat bagus
Resource tidak dibagi-bagi dengan user lain
Stabil
Dapat mengkonfigurasi server sendiri
Tidak ada pengguna lain pada server
Kekurangan
Biaya mahal
Support terhadap kendala sangat terbatas
Wajib memiliki kemampuan teknis
Dedicated Server
Harga
Support
Performa
Pengetahuan Teknis
Kontrol Server
Kemudahan
Kesimpulan
Harga mahal Support terbatas Performa sangat baik Pengetahuan teknis diperlukan Kontrol terhadap server penuh Cukup sulit mengelolanya
3
Sebagai permulaan, saya sangat menyarankan untuk menggunakan shared hosting atau wordpress hosting.
Kamu bisa gunakan salah satu rekomendasi wpcepat diatas.
Tapi apa setelah beli shared hosting sudah bisa mengonlinekan website nya?
Bisa, tapi akan sulit diakses.
Kamu perlu juga sesuatu yang namanya domain.
Di pelajaran selanjutnya kamu akan belajar tentang domain.
Cara Membuat Website dengan WordPress dari Nol untuk Pemula
Mungkin kamu tidak akan percaya kalau saya bilang membuat website itu mudah, cepat dan murah.
Kalau memang benar, kenapa penyedia jasa pembuatan website kasih harga mahal untuk membuat website?
Sebenarnya bukan instalasinya yang mahal, tapi pengaturan, koding dan pembuatan fungsinya.
Lalu apa bisa melakukan pengaturan dan penambahan fungsi sendiri?
Tentu bisa!
Tapi kamu mungkin perlu pengetahuan tentang programing.
Kalau engga bisa programing dan mau buat website gimana?
Jangan khawatir, kamu juga bisa buat website dengan tambahan seabrek fungsinya dengan menggunakan wordpress.
Untungnya setelah nanti kamu menyelesaikan seri panduan dasar tentang pengenalan dan instalasi wordpress ini, kamu akan bisa membuat website hanya dalam waktu 5 menit.
Materi yang disampaikan dalam panduan ini akan mencakup sebagian materi yang akan menuntun kamu dalam membuat website dengan wordpress.
Jadi apa saja yang akan dipelajari dalam bagian pertama ini?
Oya, Kupon diatas bisa dipakai untuk dapat diskon lebih lho!
Sebagai contoh, kita akan membeli hosting dan domain dari niagahoster.
Pilih paket personal karena paket ini yang paling murah dengan fitur yang diharapkan.
Kemudian pilih nama domain yang diinginkan.
Kalau nama domainnya tersedia, bisa dilanjut ke tambahkan ke cart.
Kalau tidak tersedia, coba cari nama lain atau ganti dengan ekstensi lain selain com.
Kemudian klik lanjutkan.
Halaman berikutnya ada rekomendasi fitur tambahan.
Saya selalu langsung klik lanjutkan dan mengabaikan rekomendasi fitur tambahan.
Untuk SSL nanti akan dapat gratis dari Let's Encrypt SSL.
Di halaman berikutnya, kamu bisa masukkan kode "wpcepat" tanpa tanda petik seperti gambar diatas untuk dapat diskon lebih.
Setelah itu kamu bisa cekout, isi data dan bayar sesuai tagihan.
Beberapa hosting menggunakan fitur autoconfirm payment dan aktivasi instan.
Jadi setelah bayar otomatis akan langsung aktif.
Selanjutnya tinggal login dan install wordpress.
Instalasi WordPress
Proses selanjutnya adalah melakukan instalasi wordpress agar bisa digunakan dan mulai melakukan kustomisasi website.
Langkah awalnya adalah dengan login ke hosting dan klik menuju cpanel.
Kemudian klik all features cpanel.
Berikutnya adalah langkah yang ENGGA BOLEH di skip karena akan membuat websitenya kurang aman.
Sebelum instalasi wordpress wajib hukumnya untuk menginstall SSL terlebih dahulu.
Jadi pada langkah ini cari yang namanya Let's Encrypt SSL atau cara mudah tinggal search.
Kalau sudah ketemu, di klik issue untuk domain yang mau diinstall SSL.
Setelah itu tinggal issue saja.
Kemudian tunggu sampai berhasil baru lanjut ke langkah berikutnya.
Berikutnya baru kita masuk ke langkah install wordpress.
Pada menu softaculous klik wordpress kemudian klik install now
Setelah itu akan muncul berbagai settingan yang perlu diset terutama pada protokolnya wajib https.
Pilih protokol https:// atau https://www, pilih aja yang sesuai antara 2 itu.
Kemudian setting judul websitenya dan deskripsi websitenya.
Yang terakhir setting username, password dan email yang digunakan lalu lanjutkan langsung ke install di bawah.
Kalau sudah selesai, kamu bisa akses website wordpress kamu dengan mengetik alamat domain yang dibeli tadi.
Untuk login ke dashboard, tinggal menambahkan url wp-admin dibelakang nama domain.
Jadi seperti ini : domain.com/wp-admin.
Isi email dan password sesuai saat instalasi tadi.
And done!
Website kamu sudah jadi dan bisa mulai di kustom.
Secara garis besar, artikel ini adalah rangkuman dari keseluruhan materi tutorial dasar tentang pengenalan dan instalasi wordpress.
Selanjutnya kamu akan berkenalan lebih dalam dengan wordpress.
Pembahasan lebih lanjut dibahas di materi selanjutnya.
Berapa biaya membangun website dengan WordPress?
Setiap orang yang ingin merambah dunia online dengan membuat website terutama dengan wordpress, pasti akan tersirat, "berapa sih bikin wordpress itu?".
Percaya atau tidak, sebenarnya wordpressnya sendiri itu gratis.
Yap gratis!
Perusahaan pembuat wordpress, automattic memutuskan untuk membuat wordpress sebagai software yang opensource sehingga dapat diakses oleh siapa saja.
Tetapi, meskipun wordpress ini gratis, wordpress ini tidak bisa digunakan secara optimal tanpa adanya dukungan-dukungan dari pihak ketiga.
Pihak-pihak ketiga inilah yang memerlukan biaya untuk pengembangan website yang nantinya akan kamu buat.
"Tapi, apa bisa saya membuat website dengan wordpress secara gratis tanpa bantuan pihak ketiga?"
Ya bisa, tapi saya tidak menyarankan untuk tujuan komersial.
Karena wordpress ini gratis, seharusnya wordpress bisa digunakan tanpa biaya.
Dan memang bisa.
Ada beberapa alternatif untuk membuat website dengan wordpress secara cuma-cuma
WordPress.com
Install di komputer pribadi
Menggunakan hosting gratis
Kita bahas singkat satu-satu ya.
WordPress.com adalah versi wordpress yang dikelola sendiri oleh automattic.
Beruntungnya, dia menyediakan versi gratis untuk mencoba wordpress terlebih dahulu.
Kelebihannya adalah tanpa biaya sama sekali, sudah bisa membuat website dengan wordpress.
Tapi tentu saja karena versi gratis, tidak bisa melakukan monetisasi dengan iklan selain wordads.
Juga kustomisasi yang bisa dilakukan terbatas.
Kemudian bisa dengan melakukan instalasi wordpress pada komputer/laptop pribadi.
Untuk instalasinya memang sedikit lebih repot, tapi versi ini yang paling memungkinkan wordpress untuk lebih bebas berkreasi.
Tapi sayangnya, cuma kamu yang bisa lihat website yang sudah dibuat.
Yang terakhir adalah dengan menggunakan hosting gratis.
Hosting gratis ini sangat terbatas memang dari sisi kapasitas dan sebagainya, tapi bisa cukup bebas berkreasi.
Jadi dari beberapa poin diatas dapat dirangkum sebagai berikut
Kelebihan
WordPress.com
Merasakan infrastruktur hebat dari wordpress.com
Komputer Pribadi
Bebas berkreasi dengan tambahan plugin dan tema
Hosting Gratis
Dapat diakses di seluruh dunia
Kekurangan
WordPress.com
Tidak dapat install plugin secara bebas
Komputer Pribadi
Tidak dapat dilihat oleh orang lain
Hosting Gratis
Akses sangat terbatas
Para Pihak Ketiga WordPress
Yap, kita selesai membahas cara membuat website dengan wordpress secara gratis.
Karena tujuan utama dari seri tutorial ini adalah untuk membuat sebuah website dari wordpress yang akan diperlakukan selayaknya sebuah bisnis, maka sebaiknya kita mulai mengenal pihak-pihak ketiga yang nantinya akan membantu kita.
Sebagian pihak ketiga ini bisa digunakan dengan gratis, sebagian harus berbayar.
Kita lanjut saja untuk mulai mengenal para pihak ketiga ini.
Penyedia Hosting & Domain
Untuk bisa website kita diakses dari internet, diperlukan komputer yang terhubung dengan internet.
Harga untuk membuat infrastruktur ini terbilang sangat mahal untuk orang yang baru memulai terjun ke dunia online.
Oleh karena itu, ada beberapa penyedia hosting dan domain yang siap untuk disewa guna mengonlinekan websitemu.
Harga yang ditawarkan juga bervariasi, ada yang sangat terjangkau hingga terkesan "kurang masuk akal murahnya atau mahalnya".
Hal ini dipengaruhi oleh perbedaan fitur dan spesifikasi server yang didapatkan.
Contohnya, niagahoster dan dewabiz menggunakan skema pembelian 3 tahun lebih murah sudah termasuk domain.
Beberapa penyedia hosting lainnya juga memberlakukan pembelian terpisah antara hosting dan domain.
Berapa biaya sewa hosting dan domain?
Rata-rata pembelian hosting dilakukan pertahun.
Biasanya berkisar antara 100-300an ribu per tahun tergantung fitur dan spesifikasi yang didapatkan.
Niagahoster dan dewabiz membanderol 1 juta untuk 3 tahun beserta domainnya sehingga lebih murah.
Untuk harga domain sendiri bervariasi tergantung ekstensi dan promo yang sedang berlaku.
Harga domain dengan ekstensi .com biasanya memiliki harga berkisar 100ribuan.
Domain-domain lain dengan ekstensi .site, .club, .online dan sebagainya sering ada promo untuk pembelian tahun pertama.
Biaya menyewa hosting dan domain selama 1 tahun rata-rata berada pada kisaran 200 - 500 ribu.
Developer Tema dan Plugin
Plugin-plugin dan tema-tema yang tersedia pada halaman admin wordpress semuanya gratis.
Halaman-halaman yang berisi kumpulan plugin dan tema ini disebut sebagai wordpress repository.
Namun ada tema dan plugin yang tidak tersedia pada wordpress repository dengan fitur yang jauh lebih baik dan lengkap disertai dengan desain yang lebih baik.
Plugin dan tema ini seringkali dibuat sebagai fitur premium dari "versi gratis" nya yang ada pada repostory.
Meski tidak jarang juga yang menjual plugin dan tema tanpa memberikan versi gratisnya.
Sebagai contoh adalah plugin oxygen builder.
Oxygen builder tidak memiliki versi gratis melainkan langsung berbayar untuk dapat menggunakan pluginnya.
Kalau ada plugin dan tema gratis, kenapa harus beli yang berbayar?
Kalau kamu bukan developer, menambahkan suatu fungsi pada wordpress butuh banyak kode dan seringkali cukup sulit.
Developer-developer ini yang membantu membuatkan fungsi tambahan pada plugin dan tema yang bisa dipergunakan tanpa perlu menambahkan kode-kode.
Istilahnya user friendly/newbie friendly.
Ambil contoh tema generatepress.
Generatepress adalah tema gratis.
Tapi untuk mendapatkan fitur-fitur tambahan seperti layout, warna, bahkan tampilan berbeda dengan site library, perlu menggunakan generatepress premium.
Penyedia Keamanan Data
Penyedia keamanan?
Apa wordpress gak aman?
Eh tunggu dulu tunggu dulu, engga gitu konsepnya.
WordPress secara standar dari core code sangat aman.
Tapi pertanyaan selanjutnya adalah, apakah nantinya wordpress hanya akan digunakan secara standar tanpa menambahkan apapun selain post dan page?
Celah keamanan wordpress ini semakin membesar dengan adanya tambahan-tambahan code, plugin dan tema.
Oleh karena itu, penting untuk selalu melakukan penyelamatan data.
Rutin backup maksimal 1 bulan sekali.
Bisa setiap hari, tapi perhatikan juga kebutuhan backupnya dan sisa kapasitas hostingnya.
Salah satu pluginnya adalah updraft.
Updraft merupakan plugin untuk melakukan backup, memiliki versi gratis dan juga memiliki versi premium.
Plugin, tema dan service seperti ini yang akan mengeluarkan biaya tambahan.
Biaya pengamanan data bisa dimulai dengan gratis hingga 750ribuan per tahun.
Desainer
Terkadang untuk mempercantik website, kita membutuhkan seseorang untuk membuatkan desain tertentu untuk asset wesbsite kita.
Contohnya, untuk gambar-gambar ilustrasi atau icon atau logo.
Ada penyedia-penyedia gambar ilustrasi dan icon secara gratis.
Namun tentunya desainnya standar-standar saja.
Untuk menyewa desainer, budget yang diperlukan untuk setiap gambar ilustrasi maupun icon dapat bervariasi tergantung skill dari desainer ini.
Biasanya ada di kisaran 100 - 200 ribu per desain.
Untuk icon sendiri biasanya bisa melakukan pemesanan untuk 1 set icon berkisar 500 ribu sampai 1 juta.
Untuk logo ada yang mulai 100 ribuan hingga jutaan tergantung konsep dan profesionalitas logo yang akan dibuat.
Biaya untuk menyewa desainer berkisar 100ribu sampai jutaan.
Developer
Yang terakhir adalah menyewa jasa developer.
Kalau kamu menginginkan fungsi yang tidak ada pada plugin atau tema, maka satu-satunya jalan adalah melakukan custom.
Bagi pengguna yang tidak memiliki dasar pemrograman akan sangat sulit untuk bisa membuat suatu fungsi yang dapat menunjang aktivitas website.
Disinilah peran freelancer developer untuk membantu kamu dalam mengerjakan project.
Biaya untuk menyewa jasa developer sangat bervariasi tergantung dari rumitnya fungsi yang dilakukan.
Terkadang untuk menyamakan persepsi terhadap tingkat kerumitan inilah yang jadi sulit.
Bagi kamu itu mudah cuma tambah button dark mode tapi bagi developer tidak hanya serta merta menambah button, tetapi aksi setelah button itu diaktifkan.
Karena itu, komunikasi antara kamu dan developer menjadi kunci suksesnya fungsi yang kamu harapkan dapat terwujud.
Biaya menyewa developer bervariasi rata-rata mulai dari 250 ribu hingga jutaan.
Contoh Perancangan Biaya
Biaya-biaya diatas bersifat tidak wajib kalau kamu memiliki sumber daya sendiri.
Tapi untuk orang biasa yang sedang mencoba terjun ke dunia online seperti saya, saya tidak memiliki resource apapun.
Sehingga saya memerlukan bantuan-bantuan dari pihak ketiga diatas.
Tapi harus keluar budget berapa sih sebenarnya untuk membangun sebuah website yang fungsional?
Biaya Membuat Blog
Membuat blog sebenarnya bisa sangat murah.
Dengan modal hosting dan domain saja sudah bisa memiliki blog.
Untuk memperkaya fitur blog inilah yang berbayar.
Saya akan coba rincikan biaya paling mahal untuk membuat sebuah blog.
Rincian biaya :
Hosting dan domain : 200-400 ribu/tahun
Tema Premium : 250 - 500 ribu/tahun
Plugin-plugin premium : 500 ribu/tahun
Desain : 200ribu
Biaya paling mahal untuk sebuah blog adalah 400 + 500 + 500 + 200 = 1,6 juta/tahun atau 100 ribuan/bulan.
Tapi rata-rata teman-teman blogger hanya mengeluarkan sekitar 500 ribuan saja per tahun.
Biaya Membuat Landing Page
Landing page adalah halaman yang dikhususkan untuk menjual suatu jasa atau barang.
Untuk membuat halaman ini, biasanya diperlukan yang namanya page builder untuk mempermudah dan mempercepat prosesnya.
Nah page builder ini juga biasanya memiliki banyak addon yang mungkin akan diperlukan untuk menunjang efektivitas landing page.
Rincian biaya :
Hosting dan domain : 200-400 ribu/tahun
Tema : biasanya pakai yang free
Page builder + addon : 1 juta/tahun
Plugin premium tambahan : 500 ribu/tahun
Desain : 300 ribu
Kurang lebih untuk biaya paling mahal untuk membuat sebuah landing page berada pada kisaran 400 + 1000 + 500 + 300 = 2,2 juta/tahun atau 150 ribuan/bulan.
Biaya Membuat Toko Online
Membuat toko online ini cukup sulit dan memakan biaya banyak karena banyak sekali yang harus dipersiapkan.
Misalkan saja payment gateway, server yang mumpuni, tema dan beberapa plugin premium.
Belum lagi jika memerlukan sistem kirim email untuk berbagi promo atau sekadar notifikasi transaksi.
Rincian biaya :
Hosting dan domain : 500 ribu/tahun
Tema premium : 500 ribu/tahun
Plugin premium : 1 juta/tahun
Payment gateway : +- 5 ribu/transaksi
Email : 1.5 juta/tahun
Desain : 500 ribu
Perkiraan untuk membuat toko online memerlukan biaya kurang lebih 500 + 500 + 1000 + 1500 + 500 = 4 juta/tahun.
Jika setiap bulan melakukan transaksi sebanyak 100, maka biaya payment gateway tiap tahun adalah 6 juta/tahun.
Jadi pengeluaran membuat toko online kisaran 10 juta/tahun.
Cara mengurangi biaya pembuatan wordpress
Sebagian besar pengeluaran-pengeluaran diatas muncul karena kita memerlukan service dari pihak ketiga.
Apa ada cara supaya gak keluar banyak biaya?
Tentu ada!
Domain dan hosting sering kali mengadakan promo.
Kamu bisa menggunakan promo untuk mendapatkan potongan harga yang lumayan.
Hal ini akan memotong anggaran yang seharusnya dibayarkan.
Misalkan niagahoster dan dewabiz mengadakan promo diskon 75% untuk pembelian sekaligus untuk 3 tahun sudah termasuk domain.
Jadi kamu tidak perlu mengeluarkan biaya untuk domain dan hosting kamu aktif lebih murah dan lebih lama.
Kemudian untuk tema dan plugin premium, seringkali karena banyak developer luar negeri yang membuat plugin, maka ada saat-saat tertentu dimana mereka memberikan potongan khusus untuk membeli plugin atau tema mereka.
Diskonnya kadang bisa sampai 90%!
Dengan demikian, kamu bisa jauh lebih berhemat dalam pembuatannya.
Kalau mau potongan lebih untuk hosting dan domain, saya bisa kasih kupon potongan lagi.
Generatepress adalah salah satu tema yang sangat diminati oleh komunitas wordpress dan dibuat oleh Tom Usborne, salah satu rescpected wordpress developer.
Hal ini dibuktikan dengan banyaknya peminat tema ini baik untuk digunakan sebagai tema dasar untuk pagebuilder maupun digunakan sebagai tema wordpress.
Hal ini tidak lepas dari peran generatepress yang pada dasarnya hanya menambah 4 file request berukuran kecil.
Saat review ini dipublish, generatepress sudah diinstall dan aktif pada lebih dari 300.000 website.
300 ribu instalasi aktif dengan 1000++ review bintang 5 dan sedikit sekali review yang dibawah bintang 5.
Ini membuktikan bahwa generatepress merupakan tema yang sangat dipercaya.
Terlebih lagi, setiap harinya generatepress didownload sekitar 1500-2000 kali per hari.
Bahkan saat peak day, hampir 6000 per hari!
Saya sendiri sudah menggunakan generatepress sejak 2016 saat generatepress belum se-tenar sekarang.
Secara keseluruhan, Generatepress adalah tema sangat ringan, simpel dan cepat diakses.
Modul premium tersedia untuk $49.95 pada website resminya.
Desain awal generatepress adalah sebagai tema blogging.
Simpel dan mudah untuk dimengerti pembaca merupakan salah satu kelebihan UX generatepress.
Secara default, setiap section dibagi dengan kotak/box sehingga lebih menekankan perbedaan section tiap box.
Generatepress memiliki addon berupa settingan untuk
Blog
Colors
Copyright
Disable Elements
Elements
Menu Plus
Secondary Nav
Sections
Site Library
Spacing
Typography
WooCommerce
Modul premium ini sangat memudahkan pengguna dalam melakukan kustomisasi website.
Oya generatepress juga memiliki opsi untuk menambahkan retina logo yang mana gambar biasa pada umumnya akan "burik" pada tampilan iphone.
Layout
Pada bagian customizer -> layout ini, generatepress menyediakan setting untuk container, header, primary-secondary-sticky header, off canvas, sidebar, blog dan footer.
Pada opsi container, terdapat opsi untuk melakukan setting terhadap lebar container yang defaultnya adalah 1100px.
Bagi yang belum tahu, container adalah lebar konten secara keseluruhan.
Secara default, tidak ada konten yang berada diluar container.
Kemudian separating space ini gunanya untuk menentukan jarak antar tampilan.
Misalkan jarak antara konten dengan sidebar dan item sidebar dengan item lainnya.
Secara default 20px ini sudah cukup bagus.
Content separator adalah settingan untuk mengatur jarak antar item di dalam artikel seperti jarak featured image dengan judul dan lain sebagainya.
Content layout ini ada opsi separate containers atau one containers.
Perbedaanya adalah separate containers ada garis pembatasnya sedangkan one container tidak ada pembatasnya dan dijadikan 1 tampilan selebar container width.
Container alignment adalah lebarnya content dimulai dari mana.
Idealnya, lebar konten dimulai dengan boxed selebar header/footer.
Namun jika memilih one container pada content layout, maka text ini bisa sediki terkesan menjorok masuk.
Untuk itulah, ada opsi untuk text sebagai container alignment nya.
Pada bagian header juga terdapat pengaturan untuk menjadikan navigasi sebagai header atau membuat header sendiri.
Bisa dengan logo yang berbeda maupun sama.
Setinggan tampilan menu juga terdapat pada bagian layout ini.
Bisa dengan atau tanpa search, lalu apa harus di klik atau hover saja dropdownnya ada setelannya.
Kemudian generatepress juga memiliki secondary navigation yaitu menu tambahan diluar menu utama.
Biasanya menu ini berisi tambahan seperti jam buka, social media dan sebagainya.
Menu ini juga dapat di sticky kan baik mobile saja, desktop saja, selalu on maupun selalu off.
Artinya sticky menu ini bisa mengikuti scroll pembaca.
Bahkan ada opsi untuk mendisable sticky hanya saat scroll kebawah untuk menambah kenyamanan membaca pengunjung.
Bagi yang membangun sebuah webiste tanpa menu terlihat dan hanya icon saja, generatepress juga menyediakan dalam bentuk off canvas menu.
Sebelumnya saya adalah penggemar berat menu semacam ini.
Setting sidebar juga tersedia beberapa pilihan.
Bagi pembaca dari kiri ke kanan, posisi sidebar sebaiknya berada di sebelah kanan.
Warna
Pewarnaan memegang peran penting dalam memudahkan pengunjung mengenali sebuah website.
Generatepress memiliki settingan untuk mengganti warna untuk semua item yang ada di web.
Warna background setiap section, warna link dan link aktif, warna dropdown dan sebagainya
Menariknya, generatepress bahkan memiliki opsi untuk pewarnaan form.
Good Job!
Tipografi
Tipografi pada generatepress merupakan pengaturan untuk melakukan perubahan secara global terhadap bentuk dan jenis tulisan.
Umumnya semua settingan untuk tipografi hanya ada 2, yaitu untuk judul dan untuk text.
Namun generatepress membuat banyak sekali opsi untuk memilih font di berbagai tempat.
Demi alasan optimasi performa, jangan gunakan font yang berbeda-beda lebih dari 3 varian.
Biasanya saya hanya melakukan setting tipografi untuk body saja.
Settingan lain saya set ke inherit yang artinya mengikuti default sistem pada website.
Dengan 1 settingan ini saja, pemuatan google fonts bisa menjadi 2 atau lebih.
Gunakan dengan bijak.
Background Images
Pengaturan lain yang tidak kalah menarik adalah pemberian background images di setiap komponen tema.
Body, navigation, button semua bisa diberi background image.
Biasanya website seperti website anime dan sebagainya menggunakan background image.
Setting ini juga berlaku untuk dropdown menu.
General
Pengaturan umum ini lebih ditujukan untuk optimasi.
Penggunaan jenis icon dapat dipilih dengan menggunakan svg atau webfonts.
Jika menggunakan banyak icon, saya menyarankan menggunakan font.
Namun jika hanya sedikit, gunakan svg.
Combine CSS dan cache dynamic CSS biasanya diaktifkan untuk meningkatkan performa dan mengurangi jumlah http request.
Sedangkan untuk smooth scroll digunakan jika internal link yang di klik ingin dibuat seperti sedang scroll.
Generatepress Elements
Bagi yang terbiasa membuat child theme untuk menambahkan fungsi pada tema, child theme tidak diperlukan dalam development dengan generatepress.
Generatepress memiliki addon generatepress elements yang dapat menambahkan fungsi tertentu pada setiap halaman wordpress.
Sebagai contoh saya menambahkan header pada setiap artikel yang berada tepat dibawah navigasi.
Ada banyak sekali settingan untuk menentukan posisi custom code pada generatepress.
Pada header ini, saya menambahkan judul postingan dan estimasi waktu baca agar memudahkan bagi pengunjung untuk mengetahui kira-kira artikel akan selesai dibaca dalam berapa menit.
Dengan adanya elements ini, child theme sudah tidak diperlukan lagi karena setiap penambahan custom code yang ada di generatepress, sudah tersimpan pada elements ini.
Site Library
Generatepress bukan sekadar tema untuk blogging saja.
Generatepress adalah multi purpose theme alias tema multi fungsi.
Karena itu tom usborne menyediakan premade template yang bisa digunakan dengan generatpress sebagai company profile, blog, toko online dan sebagainya.
Premade template ini juga ada yang menggunakan elementor dan beaver builder sehingga lebih mudah dalam kustomisasinya.
Performa
Masalah performa ini sejak awal sudah dipikirkan oleh tom usborne, sehingga pembuatan tema generatepress ini dimungkinkan untuk full custom namun dengan dasar code yang clean.
Pada pengujian httpp request, generatepress menambahkan hanya 4 dari installan default wordpress.
Keempat asset itu secara keseluruhan hanya berukuran sekitar 10kb.
Sangat kecil!
Hanya 2 file JS, 1 file CSS dan 1 jenis font.
Dengan shared hosting, fresh install tema generatepress ini dimuat dalam 0.8 detik!
Tapi fresh install ini hanyalah indikator awal seberapa ringan dan efisien tema itu.
Untuk membuktikan performa generatepress, saya melakukan testing lebih lanjut dengan menginstall salah satu child theme dari site library yaitu vacation.
Kemudian saya mencoba untuk melakukan 2 testing, yaitu generatepress dengan default vacation dan versi yang dioptimasi.
Generatepress dengan versi asli child theme vacation dimuat dalam 1.5 detik dengan 34 request dan berukuran 264kb.
Meskipun tanpa dioptimasi, generatepress sudah sangat istimewa dalam memberikan performanya bagi para penggunanya.
Kemudian versi yang dioptimasi, bisa jauh lebih menyenangkan!
Versi ini jauh lebih cepat daripada versi defaultnya dan lebih ringan dengan konten dan fungsi yang sama.
Dengan optimasi lanjutan, tema generatepress ini bisa mendapatkan fully loaded time selama 425ms dengan 11 request dan ukuran halaman 112kb.
Artinya, optimasi ini mempercepat hingga 352%, 3.1 kali lebih sedikit request dan berukuran 42% dari versi originalnya.
Performa tema yang outstanding!
Kesimpulan
Generatepress sangat layak dijadikan tema dasar jika ingin menggunakan pagebuilder maupun dijadikan tema utama untuk keperluan apasaja.
Berkat multipurpose nya, baik untuk company profile, toko online, blog atau apapun bisa dilakukan dengan generatepress.
Saya secara pribadi menggunakan tema generatepress untuk semua website yang saya kelola.
Berikut penilaian saya untuk generatepress.
Generatepress
Fonnte
Beginner Friendly
Harga
Performa
Support
Kesimpulan
Generatepress sangat layak menjadi tema dasar untuk setiap website dengan kebutuhan apapun.
4.8
Cara Menggunakan GTMetrix Secara Optimal
Untuk bisa mempercepat loading website, hal pertama yang perlu dilakukan adalah mengetahui
Berapa lama website saya diload?
Apa saja asset yang dimuat?
Apa saja faktor yang memperlambat website?
Bagaimana perilaku website saya dalam proses pemuatan ini?
Bagaimana saya bisa melakukan optimasi dengan data-data ini?
Tanpa mengetahui hal-hal diatas, maka mempercepat loading hanya akan menjadi sebuah ritual brutal.
Disebut ritual brutal karena pada akhirnya optimasinya hanya asal pasang plugin cache, on kan semua, dan pada akhirnya tampilan website menjadi rusak.
Perlakukanlah website layaknya seorang pria yang sedang jatuh cinta.
Cari tahu apa kesukaannya dan bagaimana dia bertingkah supaya doi tidak ilfeel.
Kebetulan sekali, sudah ada alat yang bisa membantu menemukan jawaban pertanyaan-pertanyaan diatas dan salah satu alat yang bisa digunakan untuk mengetahuinya adalah GTmetrix.
GTmetrix adalah sebuah tools yang digunakan untuk mengukur dan mengetahui proses loading website.
GTmetrix sendiri dibuat tahun 2009, saat itu hanya digunakan untuk menilai performa website dari klien-klien mereka.
Namun atas tingginya antusiasme klien-klien mereka terhadap tools ini, maka tools ini dibuka secara umum dan dapat kita gunakan sekarang dengan gratis.
Tampilan GTmetrix
Begitu membuka website GTmetrix, halamannya akan menampilkan sebuah form inputan untuk melakukan testing website dengan default option server di vancouver, canada dan menggunakan chrome desktop.
Untuk mengubah option ini perlu membuat akun pada GTmetrix (gratis) atau login jika sudah memiliki akun.
Salah satu keuntungan dengan memiliki akun gratis ini adalah bisa memonitor performa halaman website setiap kali melakukan test dibandingkan dengan performa sebelumnya.
Jadi, wajib punya akun GTmetrix ya.
Melakukan Setting
Sebelum terlalu cepat melakukan testing website, ada baiknya melakukan setting terlebih dahulu untuk mendapatkan hasil yang diinginkan.
GTmetrix memiliki settingan untuk memilih
Lokasi testing
Browser yang digunakan
Kecepatan koneksi
Menonaktifkan ads
Stop onload
Membuat video pemuatan
Fitur-fitur diatas sangat berguna.
Biasanya saya melakukan setting server di hongkong, china karena target visitor saya di indonesia dan lokasi server saya berada di singapura.
Singapura ke hongkong mengalami latensi berkisar 30-40ms sedangkan jakarta ke singapura mengalami latensi sekitar 12-16ms.
Dari jakarta ke hongkong 44-56ms.
Seharusnya, real akses berkurang 44-56ms dari total waktu yang tertera.
GTmetrix memiliki 7 pilihan region sebagai tempat melakukan test yaitu di
Dallas, USA
Hongkong, China
London, UK
Mumbai, India
Sydney, Australia
Sao Paulo, Brazil
Vancouver, Canada
Pilih salah satu yang paling dekat dengan lokasi server hosting.
Pilihan browser hanya 2, yaitu chrome dan firefox.
Browser chrome adalah pilihan saya karena rata-rata orang menggunakan browser chrome untuk melakukan browsing.
Sedangkan pada pilihan koneksi, ada banyak pilihan koneksi.
Biasanya, saya menggunakan 3 kecepatan koneksi untuk melakukan pengujian.
Unthrottled connection untuk koneksi yang tidak dibatasi alias pake kecepatan koneksi internet untuk pengguna PC.
Kemudian test versi device menggunakan 2 kecepatan yaitu 4G dan 3G.
4G atau LTE digunakan oleh pengguna mobile phone yang berada di dalam kota.
3G digunakan oleh pengguna mobile phone yang berada di lokasi yang belum di support oleh 4G.
Penonaktifan ads saya belum pernah pakai, karena saya berpedoman ada tidaknya iklan, halaman tetap harus disajikan secepat mungkin.
Stop onload juga saya belum pernah pakai.
Terakhir membuat video pemuatan ini sangat berguna selalu saya pakai.
Dengan adanya video ini, saya bisa tahu bagaimana proses load halaman web itu.
Kapan TTFB terjadi, first paint dan contentful paint terjadi bisa dilihat dengan jelas.
Melakukan Test
Bagian ini adalah bagian dimana kita akan mengetahui bagaimana halaman website ini dimuat.
Mari kita lihat tingkahnya.
Untuk memudahkan, saya akan menggunakan website resmi pemerintah indonesia yaitu indonesia.go.id dengan settingan :
Meskipun tidak menggunakan wordpress, tapi cara membaca dan menanalisanya tidak berbeda.
Hasilnya adalah sebagai berikut
Test ini diambil tanggal 11 Juli 2020 pukul 4:39 sore.
Membaca dan Menganalisa Hasil GTmetrix
Hal pertama yang dianalisa pada hasil test diatas bukan pada skor pagespeed score, yslow score ataupun fully loaded time.
Itu hanyalah angka-angka yang general dan tidak merefleksikan apapun yang terjadi pada halaman website.
Tapi total page size dan requests ini penting.
Perlu diperhatikan bahwa idealnya menurut google total page size berada dibawah 500kb.
Homepage website indonesia.go.id memiliki total page size 11.4MB.
Tolong pakai wifi kalau akses ya supaya kuotanya gak berkurang.
Kemudian jumlah requests ini menurut google idealnya berada dibawah 50 requests.
Jadi jumlah ini sudah 2x lebih banyak dari idealnya.
Maka diperlukan optimasi untuk 2 hal ini yaitu optimasi asset.
Darisini, ada informasi apa saja yang harus dioptimasi.
Dilihat dari rekomendasinya, terbanyak adalah urusan gambar.
Ya, gambar memang yang paling merepotkan karena biasanya tidak teroptimasi.
Yang harus dilakukan untuk gambar adalah : melakukan optimasi ukuran, dimensi, dan penyajian gambar yang sama dengan url yang sama.
Entah kenapa dari beberapa klien yang saya optimasi menggunakan url berbeda untuk gambar sama.
Hindari ini!
Selebihnya adalah JS dan CSS tapi dari gambar diatas tidak terlalu parah.
Pada bagian YSlow diatas, yang paling penting adalah menambahkan expired header dan mengkompres asset (CSS/JS).
Kedua permasalahan diatas biasanya bisa teratasi dengan plugin cache.
Kemudian untuk bagian CDN, jika server berada di indonesia atau singapura dan target untuk visitor indonesia, maka CDN ini tidak terlalu banyak membantu selain meringankan beban server.
Pembacaan tingkah lakunya berada pada bagian waterfall ini.
Kelakuan awalnya adalah melakukan koneksi antara browser dengan server yang terjadi selama 1.18 detik.
Optimalnya, pemuatan awal terjadi dalam 500ms.
Kemudian saya melihat sesuatu yang cukup mencurigakan.
Kemungkinan protokol yang digunakan adalah http/1 atau http/1.1.
Terlihat dari alur pemuatan yang tidak pipelining dan berjajar ke kanan.
Dan terlihat pada respon header menggunakan http/1.
Kalau memang menggunakan protokol http/1, mungkin sebaiknya developer indonesia.go.id melakukan upgrade protokol minimal ke http/2.
Bagian yang merah mengindikasikan file tersebut diminta tetapi tidak dapat dimuat yang biasanya karena file tidak ada.
Hal ini harus di fix segera.
Kemudian, periksa juga bagian canceled.
Sebisa mungkin jangan muat asset yang tidak diperlukan.
Bagian timing ini tidak kalah penting dari bagian waterfall.
Terlihat dari proses bagaimana TTFB terbentuk 1 detik adalah karena waktu yang diperlukan untuk konek selama 173ms dan 0.9ms untuk menghubungkan backend.
Pengoptimasian perlu dilakukan untuk mendapatkan TTFB ideal yaitu dibawah 200ms.
Artinya gabungan waktu redirect, konek dan backend hanya selama 200ms.
Kemudian bagian first paint dan contentful paint berada pada waktu yang sama merupakan hal yang bagus.
Selisih contentful paint dan TTFB itu selama 0.6 detik, masih masuk batas aman dibawah 1 detik.
Kemudian DOM init dan DOM loaded juga dieksekusi pada waktu waktu yang berdekatan merupakan hal yang baik.
Sayangnya jarak antara last element loaded ke onload cukup lama yaitu 1.8 detik.
Hal ini mengindikasikan kurang efektifnya pemuatan secara keseluruhan akibat render blocking.
Bagaimana proses pemuatannya terlihat pada video berikut
Kesimpulan
Dari pembacaan data GTmetrik, website pemerintah indonesia, indonesia.go.id, memerlukan beberapa rekomendasi optimasi yang sebaiknya dilakukan yaitu
Optimasi gambar
Optimasi JS/CSS
Mengupgrade protokol http/1 menjadi http/2
Mengurangi TTFB
Setidaknya dengan melakukan rekomendasi diatas, website akan lebih ringan dan lebih cepat diakses.
Jika GTmetrix digunakan dengan benar, alat ini sangat powerfull untuk menganalisa asset apa saja yang memperlambat dan bagian mana yang harus dioptimasi.
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
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 :
gambar 1
gambar 2gambar 3
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
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.
Tanpa CDNDengan CDN
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.
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.
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.
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.
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.