HTML5Tingkat: Menengah6 min
Optimasi Kinerja: loading=lazy, fetchpriority & Resource Hints
Optimalkan skor Core Web Vitals (LCP, CLS, FCP) halaman Anda melalui atribut native HTML: pemuatan gambar malas (loading=lazy), prioritas pengambilan (fetchpriority), dan Resource Hints (preload, preconnect).
Prioritas Pemuatan Aset Tanpa JavaScript
Pratinjau TerbukaBrowser modern mendukung kontrol urutan pemuatan aset langsung pada level atribut HTML. Gunakan fetchpriority='high' pada gambar banner hero untuk mempercepat waktu LCP (Largest Contentful Paint).
Contoh Kode Sintaks
<!-- 1. Resource Hints di dalam <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<!-- 2. Gambar Hero Utama (Prioritas Tertinggi) -->
<img src="/hero-banner.webp" alt="Banner Utama" fetchpriority="high" width="1200" height="600">
<!-- 3. Gambar Konten Bawah (Pemuatan Malas saat Dekat Viewport) -->
<img src="/produk-terkait.webp" alt="Produk" loading="lazy" decoding="async" width="400" height="300">Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi