Waktu muat halaman yang cepat adalah salah satu faktor penting dalam pengalaman pengguna yang baik. Yii Framework memiliki fitur asset caching yang memungkinkan Anda untuk mempercepat waktu muat halaman dengan menggabungkan, mengompres, dan menyimpan sumber daya (seperti CSS dan JavaScript) ke dalam satu file atau cache. Dalam artikel ini, kita akan membahas cara mempercepat waktu muat halaman dengan menggunakan asset caching di Yii.

Pendahuluan

Asset caching mengacu pada proses mengoptimalkan pengiriman sumber daya (asset) dari server ke browser pengguna. Ini mencakup penggabungan beberapa file menjadi satu, mengompresi isi file, dan menyimpannya dalam cache untuk pengguna berikutnya. Ini mengurangi latensi jaringan dan mempercepat waktu muat halaman.

Langkah 1: Mengaktifkan Asset Bundling

Langkah pertama adalah mengaktifkan bundling asset dalam konfigurasi aplikasi Anda. Ini dapat dilakukan dengan mengubah berkas konfigurasi web.php atau main.php dalam direktori config.

'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'js' => ['jquery.min.js'],
            ],
            'yii\bootstrap\BootstrapAsset' => [
                'css' => ['css/bootstrap.min.css'],
            ],
            // Tambahkan bundel-bundel tambahan di sini
        ],
    ],
    // ...
],

Pada contoh di atas, kita telah menggabungkan file jquery.min.js dan css/bootstrap.min.css ke dalam bundel masing-masing. Ini akan mengurangi jumlah request yang dibuat oleh browser pengguna.

Langkah 2: Menggunakan Asset Cache

Yii Framework akan secara otomatis menghasilkan cache asset saat aplikasi dalam mode production. Pastikan aplikasi Anda berada dalam mode produksi dengan mengubah konfigurasi di berkas index.php Anda:

defined('YII_ENV') or define('YII_ENV', 'production');

Dalam mode produksi, Yii akan menyimpan sumber daya dalam direktori cache dan mengirimkannya sebagai satu file ke browser pengguna.

Langkah 3: Memanfaatkan Versi Cache

Untuk memastikan bahwa pengguna mendapatkan versi terbaru dari cache saat Anda melakukan perubahan pada sumber daya, Anda dapat memanfaatkan versi cache. Ini memaksa browser untuk memuat ulang sumber daya saat ada perubahan.

<link rel="stylesheet" href="<?= Yii::$app->assetManager->getAssetUrl($asset, 'css/main.css') . '?' . filemtime(Yii::getAlias('@webroot/css/main.css')) ?>">

Dalam contoh di atas, kita menambahkan timestamp dari file sebagai parameter query untuk URL asset. Ini akan memaksa browser untuk memuat ulang sumber daya saat file berubah.

Kesimpulan

Asset caching adalah teknik yang efektif untuk mempercepat waktu muat halaman dengan menggabungkan, mengompres, dan menyimpan sumber daya dalam cache. Dengan mengaktifkan bundling asset dan memanfaatkan versi cache, Anda dapat memastikan bahwa pengguna mendapatkan pengalaman yang lebih cepat saat menggunakan aplikasi Anda. Pastikan untuk memantau dan mengelola cache asset secara teratur, terutama saat melakukan perubahan pada sumber daya.