OPTIMASI SPEED
Kali aja bermanfaat untuk yang lain, beberapa tips optimasi dari saya yang mungkin saja belum banyak dibahas di berbagai tutorial:
1. Pakai internal CSS (<style> di <head>) ketimbang external dan inline. Metode ini tidak seribet inline dalam perawatan, namun kecepatannya relatif sama ngebut. Kalau waktunya selo, pilah2 CSS yang kepakai saja tiap lamannya. Bisa manfaatin ekstensi Chrome "Unused CSS Tracker" untuk milah2 mana yang dipakai dan mana yang tidak.
2. Pakai kompresi Brotli (+ Gzip fallback) untuk root HTML-nya + file2 berbasis text (non binary) yang mungkin karena alasan2 tertentu tak bisa di-inline-kan, misal background (pernak-pernik) SVG via CSS. Jangan tinggi2 level kompressnya, 4-6 sudah ideal. Kalau ketinggian kan nanti jadinya sama juga bohong, rakus vCPU dan proses encoding-nya lama.
3. Gunakan WebP untuk media images. Tahun 2022 ini sudah relatif "aman" misal ingin migrasi total dari JPEG ke WebP (seperti saya). Aman karena beberapa "leading industry standard" kek Apple, Adobe, dll. yang dulu ogah2an mendukung WebP secara native di produk2nya, sejak 2021 lalu kayak kompakan berubah pikiran.
4. Gunakan SVG untuk logo, icon, dll. dengan metode inline (SVG path), bukan <img>, <object>, dll. biar benar2 nol HTTP request ke media theme. Meng-inline-kan SVG di root HTML bakal otomatis dapet kompresi brotli juga. Selain itu, misal ngeaktifin HTML/page cache + minify (saya enggak pakai), itu nanti juga otomatis sepaket.
5. Pakai Lazyload untuk media images dan iklan. WP secara default sudah mendukung native lazy load [loading="lazy"], jadi untuk gambar postingan, list sidebar, list footer, dll. tak perlu diapa2in lagi sudah ter-lazyload. Untuk iklan, pakai fitur lazyload bawaan Google Ad Manager (dulu DFP). Tapi ini hanya untuk iklan yang non auto-ads saja.
6. Pakai “rel=preconnect” untuk domain2 yang berpotensi "muncul/di-trigger" script/tag2 eksternal. Sederhananya "nyolong start" untuk proses DNS Lookup, TCP Handshake, dan TLS Handshake. Di kasus blog2 saya, "nembaknya" lebih dominan domain produk2nya Google, seperti Analytics/GTM, dan Iklan (Adsense + Ad Exchange).
7. Pakai “rel=preload“ pada aset2 yang vital untuk di-request duluan, misal 1st attachment, font, jQuery, dll. Jika aset2nya di-load via origin server (tidak di-CDN-kan), ganti “rel=preload“ dengan "HTTP/2 Server Push" yang lebih potensial ngebutnya. Saya sendiri “rel=preload“ untuk 1st attachment, sementara "HTTP/2 Server Push" untuk font dan jQuery.
8. Aktifin 0-RTT Handshakes (ssl_early_data on;) jika pakai Nginx dan TLS 1.3-nya jalan. Sebenarnya TLS 1.3 saja sudah ngebut dibanding TLS 1.2 untuk visitor yang baru pertama kali berkunjung. Namun, untuk returning visitor (resumed connection), TLS 1.3 dan 1.2 sama saja, tidak ada peningkatan. Maka itu, lahirlah 0-RTT untuk ngakalin hal tersebut.
Apalagi ya, itu dulu deh. Mungkin ada yang tanya, kok di atas saya tak pakai cache yang selalu aktif? Cache2an bisa digunakan untuk pertolangan terakhir. Logikanya, ketika web kita tanpa cache diakses bisa ngebut, kalau pakai cache bisa bayangin berapa kali peningkatan yang terjadi. Nah, ini bisa dipakai untuk jurus andalan terakhir.
Kalau mau dipakai di awal2 juga tidak apa2 sih, bebas2 saja. Jadi bukan "anti cache", tapi hanya dipakai saat genting saja kalau di saya. Tanpa cache2an juga sangat bermanfaat ketika saya pindah2 server atau gonta-ganti OS (kurang kerjaan bolak-balik FreeBSD-Linux), pantauan time to first byte (TTFB)-nya jadi tidak rawan misleading.
Oiya satu lagi, untuk yang pasang banyak iklan, misal seperti saya pakai Adsense dan Ad Exchange via Google Ad Manager + Adsense Auto Ads (hard code), skornya ngga bisa sempurna jangan berkecil hati. Belum lagi tag/script analytics lain seperti Comscore, Quantcast, dll. yang sering saya sebut printilan2 tak jelas itu juga nambah beban.
Namanya juga external resource, kita tidak bisa mengatur mereka pakai server apa, teknologinya seperti apa, men-trigger berapa HTTP request tambahan lagi, dll. Website dengan banyak script iklan/analytics skornya tidak bisa disamakan dengan web2 tanpa script2 gituan, lebih buruk? itu normal dan memang konsekuensinya seperti itu.
https://www.freecodecamp.org/news/svg-tutorial-learn-to-code-images/
https://icons8.com/icons/set/music
https://id.wikipedia.org/wiki/Sider