bimber-theme
TERBAIK UNTUK CONTENT VIRAL. Bimber Theme punya plugin bawaan yang paling dibutuhkan untuk posting cepat. Cocok untuk pemakai Android. (Credit: bringthepixel)
in

Rahasia Loading 2,6 Detik di Share Hosting

Bagaimana SakJose ini bisa mencapai loading 2.6 detik per halaman, tanpa plugin speed dan cache?

SakJose memakai Theme Bimber terbaru yang sudah saya modifikasi. Kode final tidak akan saya share. Saya hanya akan share clue di balik rahasia mempercepat loading web WordPress, yang hanya memakai share host (bukan VPS, bukan dedicated server). Tanpa plugin speed atau cache.

Server

Pastikan, server hosting kamu tidak bermasalah. Pilih hosting yang bisa begini: 1. Memberikan akses cpanel. Akses cpanel bisa untuk melihat pemakaian file, script mana yang loadingnya paling berat, dst.; 2. Bisa ekseskusi SQL code; 3. Fitur SSL https dan enkripsi Let’s Encrypt; 5. Fitur gzip compression dan sistem cache sendiri; 6. Mudah berkonsultasi untuk troubleshooting, tanpa perlu ticketing, bicara langsung dengan tim teknis, dan 7. Memberikan space besar dengan harga murah dan bandwith unlimited; 8. Uptime 99.9%. 9. Aman. Kamu bisa tidur tenang dan tidak perlu repot optimasi, karena fitur bawaan sudah bagus.

Contoh buruk yang sering terjadi, para pemilik web melakukan optimasi, karena melihat tutorial di internet, tanpa melihat kondisi server. Misalnya, sudah ada fitur kompresi gzip bawaan server dan pengaturan memory besar untuk upload, tetapi masih dioptimasi dengan script sendiri. Bahkan tidak bisa mengatur versi php untuk WordPress terbaru. Akhirnya, website malah lambat.

Bagi yang berminat hosting 350 ribu per tahun, sudah dapat domain .com dan space 2GB, dengan semua fitur di atas, bisa hubungi saya. Belum termasuk jasa desain.

Mengetahui cara-kerja plugin, juga syarat utama dalam mengoptimasi. Jangan langsung percaya pada review, apalagi terbujuk dengan fitur yang dimiliki suatu plugin yang menangani speed dan cache.

Baca code dari plugin itu. Atau kirimkan email ke pembuat plugin, mereka mau menjelaskan. Saya pernah korespondensi dengan programmer Jetpack dan Autoptimize. Mereka ramah.

Kebanyakan plugin bilang, hebat dalam kecepatan, termasuk versi demo mereka memang cepat. Mereka tidak menjelaskan apa yang tersisa di table wp_options ketika plugin ini kamu lepas. Tidak jarang, modifikasi .htaccess dan php.ini bisa membuat website mengalami “white screen of death”. Review harus selalu kamu lihat: versi berapa dan apa masalahnya. Saya tidak akan review plugin speed dan cache di sini.

Sekilas saja, saya share prinsipnya. Yang disebut “kecepatan” itu kalau loading lebih sedikit dan butuh waktu singkat. Kamu bisa buka tab baru, kemudian tekan F12 di keyboard kemudian klik “Network”. Buka URL di situ, maka akan ada penjelasan kecepatan loading.

Loading semakin cepat jika: 1. Query sedikit; 2. File-file yang dipanggil berukuran kecil (sudah di-compress dan di-optimasi); 3. Urutan pemanggilan diprioritaskan dari elemen yang harus kelihatan lebih dahulu, menuju elemen-elemen lain yang bisa dipanggil belakangan; selain itu 4. Browser diminta untuk memanggil file statis. Inilah peran cache. Saya tidak suka cache karena makan space.

Plugin speed dan cache selalu memiliki fitur ini: menggabungkan script (agar query semakin sedikit), code sudah dikompresi, file seperti gambar boleh dikompresi, dan postingan/halaman boleh distatiskan. Setelah itu, pertanyaannya, script mana yang dipanggil duluan dan script mana yang tidak perlu di-load di sini.

WP Rocket Pro. Fitur paling komplet, setting lebih mudah. LiteSpeed Cache. Yang ini, free. Menurut review LiteSpeed Cache, plugin ini lebih unggul daripada WP Rocket Pro, dalam hal melayani jumlah panggilan di atas 200.000 user. Bisa loading halaman dalam 1 detik. Saya tidak pakai, karena versi terbaru masih “bermasalah” dengan WP Post Views. Ada lagi plugin Swift Performance, W3 Total Cache, dan WP Super Cache, dll. namun kebanyakan membutuhkan space besar. Ketahui cara-kerja sistem cache, sebelum install plugin. Backup table wp_options sebelum memodifikasi web, agar bisa kamu restore dengan mudah kalau ada masalah.

Theme dan Plugin yang Saya Pakai

Saya sama sekali tidak memakai plugin cache. Ketika menulis catatan ini, saya memakai theme Bimber 8.1.3, WordPress 5.4, php 7.4, dan WP Bakery Visual Composer 6.2.1 : ) ) Plugin kecepatan yang saya pakai Asset Cleanup Pro dan Load Order. Baca prinsip kecepatan dan urutan pemanggilan, kemudian atur. Website akan semakin cepat. Sekali lagi, harap diingat, saya cuma pakai share hosting biasa.

Optimasi Database

Banyak kasus website yang saya reparasi, terjadi karena sembarangan install plugin, kemudian (ketika tidak work) mereka uninstall namun tersisa di database. Selain itu, terlalu banyak pengaturan “Autoload Yes”. Website menjadi lambat.

Buka cpanel > phpMyAdmin > pilih database WordPress > klik SQL.

Jalankan command ini. Ganti wp_options sesuai nama table yang ada di database WordPress kamu.

Fungsi command ini, untuk menghapus site transient, revisi postingan, dan mengosongkan tempat sampah.

Bagaimana kalau mau melihat perubahan terakhir terkait pengaturan?
Klik pada table wp_options. Buka pada halaman terakhir, itulah yang kamu lakukan. Penghapusan plugin yang tak-terpakai, bisa kamu lakukan di situ.

Cari mana saja yang “autoload”.

Tandai option_id (bentuknya, nomor) yang mau kamu nonaktifkan. Misalnya, kamu mau ubah autoload dari “yes” ke “no” pada option_id nomor 103, jalankan command ini:

Satu hal yang sering terjadi, kamu menyisipkan link ke dalam posting. Bisa inbound link, atau outbond link. Atau video YouTube, Instagram, image dari luar, dll. Semua pakai link. Proses yang terjadi, ketika kamu membuka postingan dengan link adalah: memeriksa protocol. Apakah http atau https? Ini membuat selisih sepersekian detik. Solusinya, hapus protocol kalau itu adalah http atau https.

Misalnya, nanti kamu menyisipkan link, jangan menambahkan http atau https.

Link ini:
https://sakjose.com/pemblokir-kreativitas-6540

Menjadi ini:
//sakjose.com/pemblokir-kreativitas-6540

Apa yang terjadi kalau sudah ada 100+ postingan dan mau mengubah semua link menjadi tanpa protocol http atau https?

Kompresi dari Server

Kompresi ada bermacam-macam. Kompresi di nginx, apache, tentu berbeda. Kalau kompresi sudah diaktifkan server, ya nggak perlu code komrpresi. Singkatnya, aktifkan kompresi di server. Lakukan test atau minta bantuan dari hosting, agar mereka mengaktifkan kompresi gzip.

Pastikan url kamu selalu memakai https. Selain lebih cepat, lebih aman. Mengaktifkan https itu bukan hanya dengan membuka Dashboard > Settings > General kemudian mengganti url website dan blog ke https:// : ) Perlu ada kelanjutan, dengan memasang SSL (tanya pihak hosting lagi, apakah kamu dapat SSL). Kemudian, lakukan force https dari file .htaccess. Jadi, kalau user mengetikkan nama domain kamu, yang terpakai selalu protocol https.

Tambahkan

Kemudian, tambahkan baris ini di wp-config.php

Maintenance dan Scripting

Buka file functions.php yang ada di theme Bimber, lakukan penyuntingan langsung. Tidak perlu memakai code sinppet, tidak perlu membuat theme child. Jangan takut. Kalau website error, tinggal buka cpanel dan hapus code tambahan kamu.

Hapus query string dari .css dan .js dengan memodifikasi functions.php pada theme Bimber. Saya sempat coba WP Rocket terbaru, yang punya fitur ini, namun tidak bisa jalan.

Deregister widget yang tidak perlu kamu pakai, seperti: calendar, recent post (karena theme Bimber punya widget untuk recent posts yang lebih keren), meta, akismet, dll. Pokoknya yang kamu tidak perlukan, deregister saja. Termasuk, deregister link G1 yang tidak kamu pakai.

Contohnya, kamu memasang plugin Contact Form. Plugin ini bisa dipasang di postingan (ini berarti single.php) maupun halaman (page.php), akan dipanggil di mana-mana. Padahal, kamu hanya ingin loading di halaman Contact. Bagaimana cara deregister style Contact Form?

Buatlah halaman Contact, kemudian catat slug dari halaman itu, misalnya, slug halaman ini: contact-us. Sebagai tambahan catatan, slug itu ada di manapun. Setiap postingan, halaman, semua punya slug.

Tambahkan code ini di functions.php

// deregister cf7
add_action( 'wp_print_styles', 'sjdregcf7_deregister_styles', 100 );
function sjdregcf7_deregister_styles() {
if ( ! is_page( 'contact-us' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}

Code itu berfungsi membuat perkecualian. Jika slug bukan contact-us maka style tidak dipanggil.

Bagaimana kalau perkecualian ini bukan hanya di 1 halaman?
Tambahkan array. Kamu bisa masukkan slug, ID, atau Title.
Code yang dibutuhkan, begini:

/**
* is_page( array( ID, 'slug', 'Title' ) );
* Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title
*/
is_page( array( 42, 'about-me', 'Contact' ) );

Benarkah kamu butuh Classics Editor? Gutenberg lebih keren. Fitur Gutenberg Editor bawaan WordPress 5.x memang terlalu banyak. Kamu bisa deregister mana yang tidak diperlukan.

Nonaktifkan emoji, dari Settings > Discussion. Sepemuhnya, hapus pemanggilan emoji dari theme dan dari prefetch. Saya juga hapus plugin Reaction bawaan theme Bimber.

Kompresi file .html agar halaman yang dibuka pemakai, selalu dalam keadaan terkompresi. Kamu tidak butuh plugin. Cukup modifikasi file functions.php di theme Bimber.

File .js yang belum dikompresi, bisa kamu kompresi. Hati-hati sebelum mengkompresi.file .php yang di dalamnya terdapat kode html. Lakukan kompresi hanya pada kode .php agar layout tidak kacau. Saya kompresi .php dan .js demgam minifier online. Copy-paste code yang mau dikompresi, setelah itu Compress, dan copy-paste kembali ke Theme Editor, kemudian Update File.

Ubah logo menjadi “data uri” dan oasang di .css agar loading lebih cepat. Tentu saja, gambar yang kamu upload harus sudah terkompresi. Logo yang terpakai di sini, semuanya, memakai dimensi 315x97pxl. Kamu bisa pakai iloveimg untuk resize dan compress. Setiap upload gambar untuk featured image, gunakan selalu dimensi 850x450pxl. Selalu memakai ukuran tepat, tanpa crop, dan sudah terkompresi. Loading web kamu akan sangat cepat.

Apa yang terjadi kalau sudah banyak file tersimpan di folder /uploads tetapi ingin mengkompresi?

Seminggu sekali, saya jalankan sftp, kemudian download image yang ada di /wp-content/uploads. Saya jalankan aplikasi kompresi, untuk mengkompresi file .jpeg dan .png, setelah itu, saya upload ke server. Namun, dengan cara upload image yang saya ceritakan sebelumnya, secara teknis saya tidak butuh ini.

Loading halaman di SakJose, rata-rata 2.6s, nggak sampai 3 detik.

Kalau.kamu cek dengan PageSpeed Insight, Pingdom, GTmetrix, skor saya masih jauh. Persyaratan mereka bukan tentang kecepatan, tetapi kesempurnaan. Buat saya, untuk dapat 100% sebenarnya mudah. Kalau kamu nggak pakai CDN atau dedicated server, nggak bakalan dapat nilai 100. File .css perlu dikompresi, digabungkan, dan bikin critical .css.

Singkatnya, kecepatan loading website ini masih bisa.dioptimasi di bawah 2 detik. Yang membuat saya menyukai kecepatan website ini, karena saya tidak memakai plugin speed dan cache, serta hanya share hosting biasa. Saya melakukan optimasi di tengah jam makan-siang atau menjelang tengaj malam, sepulang ngopi.

Kalau kamu ingin bikin website atau redesign, atau optimasi, saya bisa. Asalkan kamu punya imajinasi dan ide, saya bisa terjemahkan menjadi 52 jenis website, sesuai keinginanmu. [dm]

What do you think?

1993 points
Upvote Downvote