Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa respons dari server Anda tidak menyertakan header penyimpanan ke cache yang eksplisit atau jika sumber daya ditentukan untuk disimpan dalam cache untuk jangka waktu pendek

  

Ikhtisar

Penyimpanan ke cache browser untuk sumber daya statis dapat menghemat waktu pengguna jika mereka mengunjungi situs Anda lebih dari sekali. Sebaiknya header penyimpanan ke cache berlaku untuk semua sumber daya statis yang dapat disimpan di cache, tidak hanya sebagian kecil saja (misalnya gambar). Sumber daya yang dapat disimpan di cache meliputi file JS dan CSS, file gambar, dan file objek biner lainnya (file media, PDF, dsb.). Secara umum, HTML tidaklah statis dan tidak dapat disimpan di cache secara default. Sebaiknya Anda mempertimbangkan kebijakan penyimpanan dalam cache apa yang dapat bekerja dengan baik untuk HTML situs Anda.

Saran   

Aktifkan penyimpanan ke cache browser untuk server Anda. Sumber daya statis setidaknya memiliki masa penyimpanan dalam cache selama seminggu. Untuk sumber daya pihak ketiga seperti iklan atau widget, sumber daya tersebut memiliki masa penyimpanan dalam cache setidaknya satu hari. Untuk semua sumber daya yang dapat disimpan di cache, sebaiknya ikuti setelan berikut:

Setel Expires minimal satu minggu, dan sebaiknya sampai satu tahun ke depan. (Kami lebih memilih Expires daripada Cache-Control: max-age karena lebih banyak didukung.) Jangan menyetelnya melebihi satu tahun ke depan karena melanggar pedoman RFC.
Jika Anda tahu persis waktu saat sumber daya akan berubah, setel masa berakhir yang lebih pendek. Namun jika sumber daya tersebut "akan segera berubah" tetapi Anda tidak tahu waktunya, sebaiknya setel masa berakhir yang panjang dan gunakan penyidikjarian URL (yang dideskripsikan di bawah).


Apakah browser caching?

Setiap kali browser memuat halaman web itu untuk men-download semua file web untuk benar menampilkan halaman. Ini mencakup semua HTML, CSS, javascript dan gambar.

Beberapa halaman mungkin hanya terdiri dari beberapa file dan kecil dalam ukuran - mungkin beberapa kilobyte. Bagi orang lain namun mungkin ada banyak file, dan ini dapat menambahkan hingga menjadi beberapa megabyte besar. Twitter.com misalnya adalah 2MB +.

Masalahnya adalah dua kali lipat.

    File-file besar memakan waktu lebih lama untuk memuat dan dapat sangat menyakitkan jika Anda berada di koneksi internet yang lambat (atau perangkat mobile).
    Setiap file membuat permintaan terpisah untuk server. Semakin permintaan server Anda mendapat bersamaan semakin bekerja itu perlu dilakukan, hanya lebih lanjut mengurangi kecepatan halaman Anda.

Browser caching dapat membantu dengan menyimpan beberapa file-file ini secara lokal di browser pengguna. kunjungan pertama mereka ke situs Anda akan meluangkan waktu yang sama untuk memuat, namun ketika pengguna mengunjungi kembali situs web Anda, refresh halaman, atau bahkan bergerak ke halaman yang berbeda dari situs Anda, mereka sudah memiliki beberapa file yang mereka butuhkan secara lokal.

Ini berarti jumlah data browser pengguna harus men-download kurang, dan permintaan lebih sedikit perlu dibuat ke server Anda. Hasil? Penurunan load halaman.
Bagaimana cara kerjanya?

Browser caching bekerja dengan menandai halaman tertentu, atau bagian dari halaman, seperti yang perlu diperbarui pada interval yang berbeda. logo Anda di website Anda, misalnya, tidak mungkin untuk berubah dari hari ke hari. Dengan caching gambar logo ini, kita bisa mengatakan browser pengguna hanya men-download gambar ini seminggu sekali. Setiap kunjungan pengguna membuat dalam waktu seminggu tidak membutuhkan lain download gambar logo.

Oleh webserver mengatakan browser untuk menyimpan file-file ini dan tidak men-download mereka ketika Anda kembali menyimpan pengguna Anda waktu dan bandwidth web server Anda.
Mengapa penting?

Alasan utama mengapa cache browser penting adalah karena mengurangi beban pada server web Anda, yang akhirnya mengurangi waktu beban untuk pengguna Anda.
Cara memanfaatkan cache browser

Untuk mengaktifkan caching browser yang Anda butuhkan untuk mengedit header HTTP Anda untuk mengatur tanggal kadaluwarsa pada jenis file tertentu.

Cari file .htaccess di root domain Anda, file ini adalah file tersembunyi tetapi harus muncul di klien FTP seperti FileZilla atau CORE. Anda dapat mengedit file htaccess dengan notepad atau bentuk editor teks dasar.

Dalam file ini kita akan mengatur parameter caching kami untuk memberitahu browser apa jenis file ke cache.

## KEDALUWARSA CACHING ##

<IfModule mod_expires.c>
ExpiresActive On
image ExpiresByType / jpg "akses ditambah 1 tahun"
image ExpiresByType / jpeg "akses ditambah 1 tahun"
image ExpiresByType / gif "akses ditambah 1 tahun"
image ExpiresByType / png "akses ditambah 1 tahun"
teks ExpiresByType / css "akses ditambah 1 bulan"
Aplikasi ExpiresByType / pdf "akses ditambah 1 bulan"
ExpiresByType text / x-javascript "akses ditambah 1 bulan"
Aplikasi ExpiresByType / x-shockwave-flash "akses ditambah 1 bulan"
ExpiresByType image / x-icon "akses ditambah 1 tahun"
ExpiresDefault "akses ditambah 2 hari"
</ IfModule>

## KEDALUWARSA CACHING ##

optimasi htaccess untuk cache browser

Ada beberapa cara untuk mengoptimasi website kita, supaya loading lebih cepat saat diakses oleh pengunjung. Beberapa tips optimasi bisa sobat baca, dan terapkan. Pada kesempatan kali ini akan dibahas salah satu tips cara optimasi web dengan cara menambahkan beberapa code di .htaccess.

Sebenarnya apa sih htaccess itu?

Untuk lebih mudahnya htaccess adalah file yang memuat code tertentu yang mengatur bagaimana file-file dalam direktori diakses oleh robot search engine maupun oleh pengunjung. Diantara aturan yang terdapat pada htaccess antara lain: boleh atau tidak suatu file diakses, aturan redirect, aturan format url situs, penanganan error atau error handling, dan masih banyak aturan fungsi lainnya. Mengingat pentingnya fungsi .htaccess, maka sangat dianjurkan untuk membackup terlebih dahulu sebelum melakukan perubahan. sehinga jika terjadi error yang tidak diharapkan, kita dapat mengembalikan ke kondisi semula.

Lalu apa itu cache?

Cache menurut wikipedia adalah tempat menyimpan sementara memori. Penyimpanan sementara ini bertujuan untuk kecepatan akses data, terutama pengaksesan data yang sama atau pernah diakses sebelumnya sehingga akses akan lebih cepat.
Browser seperti halnya firefox atau internet explorer atau yang lainnya, juga mempunyai kemampuan untuk menyimpan memori sementara atau disebut cache browser. Memori ini berasal dari informasi halaman web yang dibuka oleh user.  Apabila user membuka halaman web atau informasi lainnya yang pernah ia buka sebelumnya, maka akan ditampilkan lebih cepat daripada halaman web yang belum pernah dibuka.
Nah kita akan melakukan optimasi memanfaatkan browser untuk menyimpan informasi-informasi blog kita, dengan tujuan user yang pernah membuka web kita, akan mendapatkan pengalaman membuka lebih cepat. Sebenarnya, browser sendiri secara default akan menyimpan informasi web kita sebagai cache, optimasi yang akan kita lakukan yaitu meminta browser untuk menyimpan informasi apa saja dan berapa lama informasi tersebut disimpan. Caranya yaitu dengan menambahkan beberapa baris code di .htaccess.
Kode yang ditambahkan ini berfungsi untuk meminta browser menyimpan cache web kita, sehingga pada saat pengunjung membuka web kita kembali, file-file yang sama yang pernah dibuka sebelumnya akan ditampilkan dari cache browser, tidak request lagi dari server dimana file web kita disimpan. Apa saja yang bisa disimpan di cache browser? ternyata cukup beragam, antara lain berupa file image, css, js maupun file lainnya.

Tambahkan kode berikut di .htaccess sobat

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"

Berikut ini penjelasan code di atas
access plus 1 year di situ artinya adalah meminta browser untuk menyimpan cache file selama 1 tahun. Jadi ExpiresByType image/jpg "access plus 1 year" berarti meminta browser untuk menyimpan file jpg selama 1 tahun. Tergantung kebutuhan sobat dan seberapa sering sobat mengubah file di web sobat, bisa 1 bulan (1 month), satu minggu, atau terserah. Saya sendiri sangat jarang merubah file (misalnya mengganti image jpg dalam sebuah posting di blog saya) dengan file yang baru. untuk itu saya membuat cache 1 tahun.
Nah itulah salah satu tips optimasi web yang bisa kita lakukan, terapkan juga cara optimasi lainnya sehingga menghasilkan loading blog semakin cepat.
Tergantung pada website Anda file Anda dapat mengatur tanggal kadaluwarsa yang berbeda. Jika jenis file tertentu lebih sering diperbarui, Anda akan menetapkan tanggal kadaluwarsa sebelumnya pada (yaitu. File css)

Ketika Anda selesai menyimpan file seperti, bukan sebagai file .txt.

Jika Anda menggunakan bentuk CMS, ekstensi cache atau plugin mungkin tersedia.
rekomendasi

    Jadilah agresif dengan caching untuk semua sumber daya statis
    Berakhirnya minimal satu bulan (disarankan: Akses ditambah 1 tahun)
    Jangan mengatur caching Anda lebih dari satu tahun di muka!

Hati-hati

Anda ingin berhati-hati ketika mengaktifkan cache browser seperti jika Anda mengatur parameter terlalu lama pada file tertentu, pengguna mungkin tidak mendapatkan versi segar dari situs Anda setelah update.

Hal ini terutama relevan jika Anda bekerja dengan seorang desainer untuk membuat perubahan ke situs web Anda - mereka mungkin telah membuat perubahan tetapi Anda tidak dapat melihat mereka namun karena unsur-unsur yang telah diubah cache pada browser Anda.
Ringkasan

Jenis: Server
Prioritas: Tinggi
Kesulitan: Sedang
Rata-rata: 64%

PageSpeed ​​merekomendasikan:
Mengatur header caching agresif untuk semua sumber daya statis

Untuk semua sumber daya disimpan di cache, kami sarankan pengaturan berikut:

    Set Kedaluwarsa untuk minimal satu bulan, dan sebaiknya sampai satu tahun, di masa depan. (Kami lebih memilih Kedaluwarsa lebih Cache-Control:. Max-age karena lebih banyak didukung) Jangan set ke lebih dari satu tahun di masa depan, seperti yang melanggar pedoman RFC.
    Menetapkan tanggal terakhir-Modified untuk terakhir kali sumber daya berubah. Jika tanggal Last-Modified cukup jauh cukup di masa lalu, kemungkinan browser tidak akan refetch itu.

Gunakan sidik jari untuk secara dinamis mengaktifkan caching

Untuk sumber daya yang terkadang berubah, Anda dapat memiliki cache browser sumber daya sampai berubah pada server, di mana titik server memberitahu browser bahwa versi baru tersedia. Anda mencapai hal ini dengan menanamkan sidik jari dari sumber daya di URL-nya (jalur file).
Mengatur Vary tajuk benar untuk Internet Explorer

Internet Explorer tidak cache sumber daya yang disajikan dengan Vary header dan bidang apapun tetapi Terima-Encoding dan User-Agent. Untuk memastikan sumber daya ini cache oleh IE, pastikan untuk menghapus setiap bidang lain dari Vary header, atau menghapus Vary tajuk sama sekali jika memungkinkan.
Hindari URL yang menyebabkan tembolok tabrakan di Firefox

Firefox cache disk fungsi hash dapat menghasilkan tabrakan untuk URL yang berbeda hanya sedikit, yaitu hanya pada batas-batas 8-karakter.
Gunakan kontrol Cache: direktif publik untuk mengaktifkan HTTPS caching untuk Firefox

Beberapa versi dari Firefox mengharuskan kontrol Cache: header publik harus ditetapkan agar sumber daya yang dikirim melalui SSL untuk di-cache pada disk, bahkan jika header caching lainnya secara eksplisit ditetapkan. Meskipun header ini biasanya digunakan untuk mengaktifkan caching oleh proxy server (seperti dijelaskan di bawah), proxy tidak bisa cache setiap konten yang dikirim melalui HTTPS, sehingga selalu aman untuk mengatur header ini untuk sumber daya HTTPS.

Baca lebih banyak

Menggunakan Expires dan Cache-Control: max-age

    Header ini menentukan jangka waktu yang dimiliki browser untuk dapat menggunakan sumber daya yang disimpan di cache tanpa perlu memeriksanya untuk mengetahui apakah versi baru tersedia dari server web. Header tersebut merupakan "header penyimpanan ke cache yang kuat" yang berlaku tanpa syarat. Setelah header disetel dan sumber daya diunduh, browser tidak akan mengeluarkan permintaan GET apa pun untuk sumber daya sampai tanggal masa berakhir atau usia maksimum tercapai, atau sampai cache dihapus oleh pengguna.

Header Last-Modifed dan ETag

    Header ini menetapkan bagaimana seharusnya browser menentukan apakah file sama untuk tujuan penyimpanan ke cache. Pada header Last-Modified, yang menjadi acuan adalah tanggal. Pada header ETag, yang ditetapkan menjadi acuan dapat berupa nilai apa pun yang mengidentifikasi sumber daya secara unik (umumnya versi file atau hash konten). Last-Modified merupakan header penyimpanan ke cache yang "lemah", dalam artian browser menerapkan heuristik untuk menentukan apakah mengambil item dari cache atau tidak.

Header ini memungkinkan browser memperbarui sumber daya yang disimpan di cache secara efisien dengan mengeluarkan permintaan GET bersyarat saat pengguna memuat ulang laman secara eksplisit. GET bersyarat tidak mengembalikan respons penuh kecuali sumber daya telah berubah di server. Dengan demikian, GET bersyarat memiliki latensi yang lebih rendah daripada GET penuh.
Header penyimpanan ke cache mana yang seharusnya saya gunakan?
Penting untuk menetapkan salah satu dari Expires atau Cache-Control max-age, dan salah satu dari Last-Modified atau ETag, untuk semua sumber daya yang dapat disimpan di cache. Menentukan Expires dan Cache-Control: max-age, atau menentukan Last-Modified dan ETag merupakan hal yang berlebihan.

Menggunakan penyidikjarian URL

    Untuk sumber daya yang terkadang berubah, kita dapat meminta browser agar menyimpan sumber daya di cache sampai sumber daya tersebut berubah di server. Dan pada saat sumber daya berubah di server, server memberi tahu browser bahwa versi baru tersedia. Kita dapat mencapai hal ini dengan memberikan URL unik ke setiap versi sumber daya. Misalnya, anggap saja kita memiliki sumber daya yang diberi nama “my_stylesheet.css.” Kita dapat mengubah nama file menjadi “my_stylesheet_fingerprint.css”. Saat sumber daya berubah, begitu juga sidik jarinya, dan kemudian URL-nya pun berubah. Segera setelah URL berubah, browser dipaksa untuk mengambil ulang sumber daya. Penyidikjarian memungkinkan kita menyetel tanggal masa berakhir yang lama ke masa mendatang, bahkan untuk sumber daya yang lebih sering berubah.

Cara umum penyidikjarian adalah dengan bilangan heksadesimal 128-bit yang mengodekan hash konten file tersebut.

Strategi lain adalah dengan membuat direktori rilisan baru untuk setiap versi baru aplikasi dan menempatkan semua aset untuk setiap versi pada direktori berversi. Strategi ini memiliki kelemahan bahwa apabila aset tidak berubah di antara versi, URL-nya masih akan berubah dan memaksa pengunduhan ulang. Menggunakan hash konten tidak terkena dampak masalah ini, tapi sedikit lebih kompleks.

Demikian apa yang dapat saya sampaikan dan saya berharap anda dapat mengambil manfaatnya untuk informasi dan bahan pengetahuan.jika anda merasa artikel yang saya tulis bermanfaat silahkan tinggalkan komentar anda,dan terima kasih atas kunjungannya.