Kode "Turbo-Boost
Untuk memberikan kode "Final & Paling Canggih", kita akan menggunakan teknik Critical Path Optimization dan Service Worker Strategy. Kode ini dirancang khusus agar lolos uji Google Core Web Vitals (LCP, FID, dan CLS).
Berikut adalah paket kode lengkapnya. Jika Anda menggunakan Blogger atau sistem berbasis XML, kode ini sudah dilengkapi dengan pembungkus CDATA agar tidak error.
1. Bagian <head> (Optimasi Prioritas)
Gunakan kode ini tepat di bawah <head>. Ini akan mengatur bagaimana browser memprioritaskan aset dan membuat tampilan responsif secara instan.
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1'/>
<link href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<style>
/*<![CDATA[*/
/* CSS Kritis: Hanya yang penting untuk tampilan awal */
body { margin:0; padding:0; font-family:system-ui,-apple-system,sans-serif; background:#fff; color:#333; }
/* Mencegah Layout Shift (CLS) */
.header, .main-content { content-visibility: auto; contain-intrinsic-size: 1px 500px; }
/* Optimasi Gambar agar responsif & cepat */
img { max-width:100%; height:auto; aspect-ratio: attr(width) / attr(height); content-visibility: auto; }
/* Sembunyikan elemen berat di perangkat seluler (opsional) */
@media screen and (max-width: 480px) {
.desktop-only { display: none !important; }
}
/*]]>*/
</style>
2. Bagian Atas </body> (Mesin Akselerasi JS)
Ini adalah "otak" dari kecepatan web Anda. Script ini akan mendeteksi kapan user sedang idle (santai) baru kemudian memuat script berat (seperti Iklan atau Widget).
<script type='text/javascript'>
//<![CDATA[
/* Warkasa1919 Engine: Smart Lazy Loader
Memastikan script pihak ketiga tidak menghambat loading utama
*/
const lazyLoadScripts = () => {
const scripts = [
// Masukkan link script luar (adsense/analytics) di sini jika ada
// 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
];
scripts.forEach(src => {
const s = document.createElement('script');
s.src = src;
s.async = true;
document.body.appendChild(s);
});
};
// Eksekusi hanya saat user scroll, gerakkan mouse, atau sentuh layar
const triggerEvents = ["mouseover", "keydown", "touchstart", "touchmove", "wheel"];
triggerEvents.forEach(event => {
window.addEventListener(event, () => {
if (!window.scriptsLoaded) {
lazyLoadScripts();
window.scriptsLoaded = true;
console.log("Performance Mode: Assets Loaded.");
}
}, { once: true, passive: true });
});
/* Optimasi Scroll */
document.addEventListener('touchstart', () => {}, {passive: true});
//]]>
</script>
3. Kode .htaccess (Hanya untuk Hosting/CPanel)
Jika Anda memiliki akses ke file .htaccess, tambahkan ini. Ini adalah cara paling ampuh untuk membuat website terasa "instan" saat dikunjungi kembali (caching).
# Kompresi Gzip untuk mengecilkan ukuran file hingga 70%
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml
</IfModule>
# Browser Caching (Menyimpan data di HP user agar tidak download ulang)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
Mengapa Kode Ini "Paling Canggih"?
Content-Visibility: Ini adalah fitur CSS modern yang memberitahu browser untuk tidak menggambar elemen yang ada di bawah (footer) sampai user scroll ke sana. Ini sangat menghemat CPU HP.
Passive Event Listeners: Menghilangkan peringatan "Slow Scroll" di Google Chrome, membuat website terasa sangat mulus (60fps).
Lazy Execution: Berbeda dengan lazy load biasa, kode di atas tidak akan memproses script berat sama sekali sampai ada interaksi manusia. Bot pencari (Googlebot) akan melihat web Anda sangat ringan, sehingga skor SEO naik.
Cara Memasang:
Buka Editor Tema Anda.
Cari
</head>dan letakkan kode Nomor 1 tepat di atasnya.Cari
</body>dan letakkan kode Nomor 2 tepat di atasnya.Jika Anda pakai Blogger, pastikan klik Simpan (ikon disket).
