Panduan Lengkap Optimasi Website PHP: WebP, Minify CSS/JS/HTML, dan Autoconvert Gambar

Artikel mendukung untuk PopojiCMS V.2.x.x

Apakah websitemu terasa berat dan lambat dimuat? Gambar besar dan kode HTML/CSS/JS yang tidak dioptimalkan bisa memperlambat loading secara signifikan. Artikel ini akan memandumu membuat script otomatis untuk mengoptimalkan:

• Gambar → WebP

• Tag <img> → <picture>

• CSS, JS, dan HTML → versi minified

• Tanpa merombak struktur website yang sudah ada

Struktur Website yang Didukung

Script ini kompatibel dengan struktur website seperti:

po-content/
├── uploads/
│	├── medium/
├── thumbs/
├── themes/
│   └── theme-active/
│       ├── style.css, script.js, template.php, dll

Script akan memproses semua gambar dan file yang ada di dalam po-content, lalu menyimpan hasilnya ke dalam po-content-opt/ (versi optimal).

Fitur Utama Script Optimasi

1. Kompres dan konversi semua .jpg, .jpeg, .png ke .webp

2. Otomatis ganti tag <img> menjadi <picture> dengan <source type="image/webp">

3. Minify semua file .css, .js, dan .html/.php/.tpl

4. Tidak mengubah file asli (semua hasil diletakkan di folder po-content-opt/)

File Script: optimize-po-content.php

Berikut adalah isi script utama:

<?php
$baseDir = __DIR__ . '/po-content';
$outputDir = __DIR__ . '/po-content-opt';

// Konversi gambar ke WebP
function compressImageToWebP($source, $destination, $quality = 75) {
    $info = getimagesize($source);
    if (!$info) return false;

    switch ($info['mime']) {
        case 'image/jpeg': $image = imagecreatefromjpeg($source); break;
        case 'image/png':  $image = imagecreatefrompng($source); break;
        default: return false;
    }

    imagewebp($image, $destination, $quality);
    imagedestroy($image);
    return true;
}

// Minify CSS & JS
function minifyCSS($input) {
    return preg_replace('/s+/', ' ', preg_replace('//*.*?*//s', '', $input));
}
function minifyJS($input) {
    return preg_replace('/s+/', ' ', preg_replace('///.*?(n|$)/', '', $input));
}

// Konversi <img> → <picture>
function convertImgToPicture($html) {
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    @$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $imgs = $dom->getElementsByTagName('img');
    $replacements = [];

    foreach ($imgs as $img) {
        $src = $img->getAttribute('src');
        $ext = pathinfo($src, PATHINFO_EXTENSION);
        if (!in_array(strtolower($ext), ['jpg', 'jpeg', 'png'])) continue;
        $webpSrc = preg_replace('/.(jpg|jpeg|png)$/i', '.webp', $src);
        $picture = $dom->createElement('picture');

        $source = $dom->createElement('source');
        $source->setAttribute('srcset', $webpSrc);
        $source->setAttribute('type', 'image/webp');

        $cloneImg = $img->cloneNode(true);
        $picture->appendChild($source);
        $picture->appendChild($cloneImg);
        $replacements[] = ['old' => $img, 'new' => $picture];
    }

    foreach ($replacements as $rep) {
        $rep['old']->parentNode->replaceChild($rep['new'], $rep['old']);
    }

    return $dom->saveHTML();
}

// Proses Gambar
function processImages($sourceDir) {
    $images = glob("$sourceDir/**/*.{jpg,jpeg,png}", GLOB_BRACE);
    foreach ($images as $file) {
        $target = str_replace('po-content', 'po-content-opt', $file);
        $webp = preg_replace('/.(jpg|jpeg|png)$/i', '.webp', $target);
        if (!is_dir(dirname($webp))) mkdir(dirname($webp), 0777, true);
        compressImageToWebP($file, $webp);
        echo "✔ WebP: $filen";
    }
}

// Proses CSS/JS
function processAssets($dir, $type) {
    $files = glob("$dir/**/*.$type", GLOB_BRACE);
    foreach ($files as $file) {
        $content = file_get_contents($file);
        $minified = $type == 'css' ? minifyCSS($content) : minifyJS($content);
        $target = str_replace('po-content', 'po-content-opt', $file);
        $target = preg_replace("/.$type$/", ".min.$type", $target);
        if (!is_dir(dirname($target))) mkdir(dirname($target), 0777, true);
        file_put_contents($target, $minified);
        echo "✔ Minify .$type: $filen";
    }
}

// Proses HTML/PHP/TPL untuk <picture>
function processHTMLFiles($dir) {
    $files = glob("$dir/**/*.{html,php,tpl}", GLOB_BRACE);
    foreach ($files as $file) {
        $html = file_get_contents($file);
        $converted = convertImgToPicture($html);
        $target = str_replace('po-content', 'po-content-opt', $file);
        if (!is_dir(dirname($target))) mkdir(dirname($target), 0777, true);
        file_put_contents($target, $converted);
        echo "✔ Picture convert: $filen";
    }
}

// Jalankan
echo "⏳ Mulai optimasi...n";
processImages($baseDir.'/uploads');
processImages($baseDir.'/uploads/medium');
processImages($baseDir.'/thumbs');

processAssets($baseDir.'/themes/theme-active', 'css');
processAssets($baseDir.'/themes/theme-active', 'js');

processHTMLFiles($baseDir.'/themes/theme-active');

echo "n✅ Semua selesai! Hasil di: po-content-opt/n";

Cara Menggunakan:

1. Simpan script di root: optimize-po-content.php

2. Jalankan via browser atau terminal:

   php optimize-po-content.php
   

3. Semua hasil akan disimpan di:

   /po-content-opt/
   

Bonus: Otomatis WebP Saat Upload

Tambahkan ke file upload kamu (misalnya upload.php):

require 'functions-upload.php'; // tambahkan
optimizeUploadedImage($targetFile); // panggil setelah upload sukses

Fungsi optimizeUploadedImage() bisa diambil dari script di atas (gunakan bagian compressImageToWebP()).

Kesimpulan

Dengan script ini kamu:

• Hemat bandwidth hingga 80% lewat WebP

• Percepat loading dengan file minify

• Tidak perlu ubah struktur website yang sudah ada

Contoh Implementasi Frontend/Snippet Images

<figure>
	<a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $list_post);?>">
	<picture>
		<source srcset="<?=BASE_URL.'/'.DIR_CON_OPT.'/uploads/medium/medium_'.pathinfo($list_post['picture'], PATHINFO_FILENAME)?>.webp" type="image/webp">
		<img src="<?=BASE_URL;?>/<?=DIR_CON_OPT;?>/uploads/medium/medium_<?=$list_post['picture'];?>" alt="<?=$list_post['title'];?>">
	</picture>
	</a>
</figure>