Cara Mengoptimalkan Gambar WordPress Tanpa Plugin: WebP dan Lazy Loading via cPanel

Gambar adalah penyebab nomor satu website WordPress lambat. Bukan karena gambar itu jahat — tapi karena kebanyakan pemilik website mengunggah foto langsung dari kamera atau ponsel tanpa optimasi apapun. Satu foto 8MB dari smartphone bisa membuat halaman yang harusnya muat dalam 2 detik menjadi 8 detik.

Kabar baiknya: WordPress sudah punya fitur lazy loading bawaan sejak versi 5.5, dan Anda bisa mengkonversi gambar ke format WebP modern langsung dari cPanel hosting — tanpa perlu plugin berbayar.

Mengapa Format WebP dan Lazy Loading Itu Penting?

WebP adalah format gambar modern dari Google yang menghasilkan file 25 hingga 35% lebih kecil dari JPEG/PNG dengan kualitas visual yang hampir sama. Artinya gambar yang tadinya 500KB bisa menjadi 325KB — tanpa terlihat berbeda di layar pengunjung.

Lazy Loading menunda pemuatan gambar yang berada di bawah area tampilan awal (below the fold). Browser hanya memuat gambar yang terlihat oleh pengunjung, bukan semua gambar di halaman sekaligus. Ini mengurangi data yang diunduh saat halaman pertama dibuka.

Dampak nyata keduanya: skor Core Web Vitals (LCP, CLS, FID) meningkat — yang langsung berpengaruh pada peringkat Google dan pengalaman pengguna.

Bagian 1: Aktifkan WebP di WordPress

Opsi A: Upload Gambar WebP Langsung (WordPress 7.x)

WordPress 7.x sudah mendukung upload file WebP secara native. Sebelum upload, konversi gambar ke WebP terlebih dahulu:

Di Windows: Gunakan software gratis seperti XnConvert atau GIMP: 1. Buka GIMP → File → Export As 2. Ganti ekstensi file menjadi .webp 3. Atur kualitas antara 80-85% 4. Export

Di cPanel File Manager (konversi batch via PHP):

Buat file convert_webp.php di folder public_html/wp-content/uploads/:

<?php
// Jalankan sekali, lalu hapus file ini!
$dir = __DIR__;
foreach (glob("$dir/*.{jpg,jpeg,png}", GLOB_BRACE) as $file) {
    $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    if (!file_exists($webp)) {
        $img = imagecreatefromstring(file_get_contents($file));
        imagewebp($img, $webp, 82);
        imagedestroy($img);
        echo "Converted: " . basename($webp) . "<br>";
    }
}
echo "Done!";
?>

Akses via browser: https://websiteanda.com/wp-content/uploads/convert_webp.php

PENTING: Hapus file ini segera setelah selesai digunakan.

Opsi B: Paksa WordPress Sajikan WebP via .htaccess

Jika server mendukung mod_rewrite dan sudah ada file .webp di folder yang sama:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Sajikan WebP jika browser mendukung dan file WebP ada
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME:1}.webp -f
  RewriteRule (?i)(.*)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept
</IfModule>

Tambahkan ke .htaccess di root WordPress Anda (backup dulu sebelum edit).

Bagian 2: Lazy Loading — Cara Cek dan Optimalkan

Cek Apakah Lazy Loading Sudah Aktif

WordPress mengaktifkan lazy loading secara otomatis sejak versi 5.5. Untuk memverifikasi:

• Klik kanan gambar di halaman website Anda → Inspect
• Cari atribut loading="lazy" di tag <img>

Jika sudah ada, lazy loading berfungsi tanpa perlu setting tambahan.

Jangan Lazy-Load Gambar Hero/Banner (LCP)

Ini kesalahan umum: gambar besar di bagian atas halaman (hero image, slider pertama) ikut di-lazy-load. Padahal gambar ini justru perlu dimuat secepat mungkin karena ia adalah Largest Contentful Paint (LCP) — metrik yang diukur Google.

Untuk menonaktifkan lazy loading pada gambar spesifik di dalam Gutenberg editor: – Tambahkan atribut via HTML editor: loading="eager" pada gambar hero

Atau via fungsi di functions.php:

// Nonaktifkan lazy loading untuk featured image
add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'the_post_thumbnail' === $context ) {
        return false;
    }
    return $default;
}, 10, 3 );

Bagian 3: Ukuran Gambar yang Benar Sebelum Upload

Sebelum upload, resize gambar ke ukuran maksimum yang akan ditampilkan:

Verifikasi Hasil: Cek PageSpeed Insights

Setelah optimasi, uji hasilnya:

• Buka PageSpeed Insights (pagespeed.web.dev)
• Masukkan URL website Anda
• Cek skor LCP (target: di bawah 2,5 detik) dan Total Blocking Time
• Di bagian “Opportunities”, pastikan tidak ada lagi rekomendasi “Serve images in next-gen formats”

Jika skor meningkat setelah optimasi gambar, artinya pengaturan berhasil. Skor yang lebih baik bukan hanya soal kecepatan — Google menggunakan Core Web Vitals sebagai faktor peringkat pencarian.

—

Optimasi gambar adalah salah satu perbaikan teknis paling berdampak dengan biaya nol. Jika website bisnis Anda masih lambat setelah optimasi gambar dan Anda membutuhkan audit menyeluruh — caching, database, server configuration — tim antond.net siap membantu dengan pendekatan teknis yang terukur.