Menggunakan cache di sisi browser (Apache). Cara mengaktifkan cache browser, resep htaccess Cara mengaktifkan cache browser
img class=”aligncenter wp-image-2458 size-full” title=”Cara mengaktifkan cache browser pada halaman situs” src=”http://about-windows.ru/wp-content/uploads/2014/07/How untuk mengaktifkan -browser-caching-of-site-pages.jpg” alt=”Cara mengaktifkan cache browser pada halaman situs” width=”600″ height=”450″ />
Bagaimana cara mengaktifkan cache browser pengguna akhir di situs saya?
Jika server Anda mengizinkan browser pengguna akhir mengetahui bahwa beberapa sumber daya dapat disimpan di , maka permintaan berulang untuk sumber daya yang sama akan menerima respons bukan dari server jauh, tetapi dari komputer lokal. Kedua belah pihak akan mendapatkan keuntungan dari hal ini. Dengan demikian, server akan meringankan sebagian beban, karena tidak perlu mengirimkan sumber daya tertentu yang sudah tersedia di komputer pengguna. Namun pengguna akan menerima akses lebih cepat ke sumber daya yang diminta.
Bagaimana cara mengaktifkan cache browser sumber daya situs di server Apache?
Pertama, mari kita cari tahu sumber daya apa yang harus di-cache oleh browser. Izinkan saya mengingatkan Anda bahwa jika browser menyimpan beberapa sumber daya dalam cache, browser mungkin tidak memperbaruinya dalam waktu yang cukup lama. Situasi ini cukup cocok untuk objek statis. Sumber daya apa yang dapat diklasifikasikan sebagai objek statis?
- file CSS.
- file JS.
- Gambar-gambar.
- Video.
- Musik.
Sumber daya di atas, serta beberapa sumber daya lainnya, dapat disimpan dalam cache untuk waktu yang lama tanpa membahayakan. Mereka tidak akan diperbarui setiap hari. Berdasarkan ini, saya akan memberi Anda kode yang akan memaksa browser pengguna untuk menyimpan sumber daya yang terdaftar dalam cache. Selain itu, kami akan menunjukkan periode di mana sumber daya ini dapat disimpan dalam cache tanpa meminta pembaruan.
Kedaluwarsa Aktif Aktif
KedaluwarsaDefault "akses 7 hari"
Aplikasi ExpiresByType/javascript "akses ditambah 1 tahun"
ExpiresByType teks/javascript "akses ditambah 1 tahun"
ExpiresByType teks/css “akses ditambah 1 tahun”
ExpiresByType teks/html “akses ditambah 7 hari”
ExpiresByType text/x-javascript "akses 1 tahun"
ExpiresByType image/gif “akses ditambah 1 tahun”
ExpiresByType image/jpeg “akses ditambah 1 tahun”
Gambar ExpiresByType/png “akses ditambah 1 tahun”
ExpiresByType image/jpg “akses ditambah 1 tahun”
ExpiresByType image/x-icon “akses 1 tahun”
Aplikasi ExpiresByType/x-shockwave-flash “akses 1 tahun”
Kode ini harus dimasukkan ke dalam file .htaccess, yang terletak di folder root situs tempat Apache berfungsi sebagai server. Setelah ini, browser akan menyimpan semua objek di atas dalam cache selama jangka waktu tertentu. Ini berarti bahwa jika Anda mengunjungi situs yang sama dalam waktu satu tahun (seperti yang ditunjukkan dalam contoh), Anda akan menerima banyak file dari komputer Anda, kecuali, tentu saja, Anda telah mengosongkan cache komputer Anda selama waktu tersebut.
Instruksi ini hanya berfungsi jika Apache memproses file statis (diinstal sebagai frontend). Jika nginx ada di depannya, tindakan yang sama harus dilakukan dengan cara yang sangat berbeda.
Pertama, beberapa kata tentang topik - mengapa caching sumber daya situs web (gambar, css, file html, arsip, dan file statis lainnya) diperlukan?
Setiap kali pengunjung membuka situs Anda, tidak hanya kode html halaman yang diunduh, tetapi juga semua file pendamping yang diperlukan untuk mendesain halaman (gambar, gaya css, skrip js, dan sebagainya).
Akibatnya, satu pembukaan halaman file bukanlah satu permintaan ke server, tetapi dari sepuluh hingga ratusan! Setiap permintaan tersebut tidak hanya membebani server (yang penting), tetapi juga waktu tambahan bagi pengguna untuk memuat halaman (yang penting sebagai indikator kualitas situs dan kemudahan pengguna dalam bekerja dengannya) .
Misalnya, layanan pengecekan situs populer dari Google PageSpeed Insights selalu menulis peringatan tentang ini:
Gunakan cache browser Anda
Dengan menentukan tanggal atau tanggal kedaluwarsa untuk sumber daya statis di header HTTP, browser akan memuat sumber daya yang diambil sebelumnya dari disk lokal, bukan dari Internet.
Gunakan cache browser Anda untuk sumber daya berikut://— daftar file yang bermasalah —//
Mengaktifkan caching tidak hanya mengurangi beban di server (hampir semua halaman situs memiliki elemen desain duplikat, skrip java, dll.) ketika pengguna mengunjungi situs/halaman lagi, tetapi juga mengurangi waktu pemuatan halaman di sisinya. Karena browser mengambil file dari cache hampir secepat kilat, pengguna merasa bahwa halaman dimuat hampir secepat kilat!
Untuk mengatasi masalah ini, buat file di folder situs dengan nama .htaccess(dengan titik di awal. Ini penting!) dan tambahkan aturan berikut ke dalamnya. Jika file sudah ada, tambahkan ke akhir file yang sudah ada:
# caching di browser di sisi pengguna
Setelah ini, Anda dapat memeriksa hasilnya di halaman Google PageSpeed Insights (jika semuanya benar - pesan “ Gunakan cache browser Anda" akan ditandai dengan warna hijau dan ditempatkan di bagian "Aturan yang sudah selesai: (detail lebih lanjut)")
Tidak berhasil, apa yang harus saya lakukan?
Jika caching tidak berfungsi, maka Anda perlu memeriksa apakah modul sudah terpasang. Untuk melakukan ini, Anda perlu membuat file di folder situs tes.php dengan kode:
Jika mod_expires atau mod_headers tidak ada dalam daftar, jalankan perintah berikut di konsol server (terhubung) secara bergantian ( ini akan menginstal/mengaktifkan mod_expires, mod_headers):
Header A2enmod a2enmod kedaluwarsa layanan restart apache2
Jika situs tersebut menggunakan hosting biasa, maka semuanya menjadi lebih rumit. Hubungi dukungan teknis dan cari tahu mengapa modul tidak dipasang dan bagaimana Anda dapat mengatasi masalah ini. Karena ada banyak alasan mengapa hoster tidak menginstal modul.
Sebelum membuka halaman, browser perlu mendownload semua kontennya (HTML, CSS, Javascript, dan gambar). Memuat situs yang besar dan berat bisa menjadi pengalaman yang menyakitkan jika Anda memiliki internet yang lambat (atau menggunakan ponsel). Setiap file mengirimkan permintaan terpisah ke server, dan semakin banyak permintaan tersebut diterima pada saat yang sama, semakin banyak pekerjaan yang harus dilakukan dan semakin lambat halaman dimuat. Dalam hal ini, gunakan cache browser.
Cache browser mungkin menyimpan beberapa file situs untuk pengguna. Pada kunjungan pertama Anda, waktu pengunduhan tidak akan berubah, tetapi pada kunjungan berikutnya, menyegarkan halaman atau beralih ke halaman lain, beberapa file sudah disimpan di browser. Ini berarti browser pengguna perlu mengunduh lebih sedikit data dan membuat lebih sedikit permintaan ke server, sehingga mengurangi waktu pemuatan situs.
Sebelum memulai panduan ini, Anda memerlukan hal-hal berikut:
- Akses ke file .htaccess
Langkah 1 - Mengedit file .htaccess
Prosesnya cukup sederhana, Anda perlu menambahkan kode berikut ke file .htaccess Anda (Anda dapat menemukan panduan cara menentukan lokasi file .htaccess Anda):
## KEDALUWARSA CACHING ##
Setelah menyimpan perubahan pada file .htaccess, situs Anda akan secara otomatis mulai menggunakan cache browser untuk menyimpan file sementara.
Langkah 2 - Memeriksa Penggunaan Cache Browser
Anda dapat memeriksa kebenaran perubahan yang dilakukan menggunakan banyak alat, seperti WebPageTest atau GTMetrix
Inilah hasilnya SEBELUM mengaktifkan cache browser:
Sebagai perbandingan, berikut hasilnya SETELAH aktifkan cache browser:
Kesimpulan
Dalam panduan singkat ini, Anda mempelajari cara mempercepat situs web Anda menggunakan cache browser Anda. Jika Anda ingin meningkatkan kecepatan memuat situs Anda, gunakan cache browser.
Anda dapat membebaskan situs Anda dari cache file menggunakan file .htaccess dengan menambahkan kode khusus ke dalamnya. Buka direktori root situs Anda di hosting, tempat semua file situs Anda berada, temukan file .htaccess di sana, buka file .htaccess dan tambahkan kode berikut ke dalamnya:
Kedaluwarsa Aktif Aktif
KedaluwarsaDefault “akses 7 hari”
Aplikasi ExpiresByType/javascript “akses ditambah 1 tahun”
ExpiresByType teks/javascript “akses ditambah 1 tahun”
ExpiresByType teks/css “akses ditambah 1 tahun”
ExpiresByType teks/html “akses ditambah 7 hari”
ExpiresByType teks/x-javascript “akses 1 tahun”
ExpiresByType image/gif “akses ditambah 1 tahun”
ExpiresByType image/jpeg “akses ditambah 1 tahun”
Gambar ExpiresByType/png “akses ditambah 1 tahun”
ExpiresByType image/jpg “akses ditambah 1 tahun”
ExpiresByType image/x-icon “akses 1 tahun”
Aplikasi ExpiresByType/x-shockwave-flash “akses 1 tahun”
Set header Kontrol-Cache “max-age=2592000, publik”
Set header Kontrol-Cache “max-age=172800, publik, harus divalidasi ulang”
Set header Kontrol-Cache “max-age=172800, pribadi, harus divalidasi ulang”
BrowserMatch “MSIE” tidak berlaku secara paksa
BrowserMatch “Mozilla/4.(2)” tidak berlaku secara paksa
Dalam kode, Anda dapat mengubah periode waktu di mana situs Anda akan di-cache oleh browser. Misalnya, alih-alih nilai – 1 tahun (setahun sekali), Anda dapat membuat 1 bulan (yaitu setiap bulan). Batas waktu ditentukan untuk setiap jenis file.
Menggunakan plugin
Jika Anda takut untuk memasukkan kode tersebut atau Anda tidak memiliki file .htaccess, maka Anda dapat membuat cache di sisi browser menggunakan plugin sederhana - Zendy Speed: Browser Caching. Yang perlu Anda lakukan hanyalah menginstal dan mengaktifkan plugin ini, Anda tidak perlu melakukan apa pun lagi. Setelah mengaktifkan plugin, kode akan ditambahkan secara otomatis.
Halo semua! Hari ini saya ingin memberi tahu Anda cara menyimpan cache elemen eksternal di Google PageSpeed Insights untuk meningkatkan kecepatan situs Anda. Intinya adalah mengunduh js dan file lain yang dapat diunduh dari sumber eksternal ke situs web Anda.
Cara mengaktifkan cache file di browser
Sebelum menulis tentang cara mengaktifkan file caching untuk website Anda di browser sisi pengguna, saya ingin menjelaskan apa itu cache.
Cache- menyimpan file yang dilihat di komputer Anda, yang pada gilirannya meningkatkan kecepatan memuat halaman atau situs saat melihatnya kembali. Cache memiliki umur simpannya sendiri, setelah itu diperbarui atau dihapus.
Kami menemukan apa itu cache. Sekarang mari kita periksa situs kita di layanan PageSpeed dan pastikan Google menyarankan kita menggunakan cache browser. Berikut kutipan dari pesan tersebut.
Dengan menentukan tanggal atau tanggal kedaluwarsa untuk sumber daya statis di header HTTP, browser akan memuat sumber daya yang diambil sebelumnya dari disk lokal, bukan dari Internet.
Jika file-file ini terletak di sumber daya Anda, maka Anda dapat menulis kode cache browser di file tersebut htaccess, terletak di akar situs. Ini kodenya sendiri, jika ada yang membutuhkannya.
# kompresi teks, html, javascript, css, xml:
Dengan menempelkan kode ini ke file htaccess, Anda dapat memeriksa ulang situs Anda di layanan Google PageSpeed
Wawasan. Jika di bagian " menggunakan cache browser"Semuanya baik-baik saja, itu artinya kamu akan memilikinya di sana
hanya tautan ke sumber daya eksternal, seperti analitik, sosial
tombol dan sebagainya.
Secara pribadi, bersamaan dengan kode ini, saya menggunakan kemampuan hosting saya untuk menyimpan file dalam cache di sisi pengguna. Ini terlihat seperti ini. 
Seperti yang Anda lihat, hosting saya memungkinkan Anda mengaktifkan caching di sisi browser dan mengatur tingkat kompresi dan periode penyimpanan file. Juga, saya menggunakan plugin untuk memuat halaman dengan cepat wp super cache, tapi mungkin saya akan memberi tahu pembaca saya tentang hal itu, entah bagaimana, berlangganan pembaruan blog.
Cara mengaktifkan cache file eksternal di Google PageSpeed Insights
Jika Anda sudah mengikuti anjuran untuk melakukan caching file pada blog Anda. Anda seharusnya hanya melihat tautan ke sumber daya eksternal di alat Google PageSpeed Insights. Anda pasti memiliki sesuatu yang serupa. 
Seperti yang Anda lihat dari tangkapan layar, Google PageSpeed Insights bersumpah pada sumber daya eksternal, seperti metrik Yandex, Google Analytics, dan lainnya. Sekarang saya akan memberi tahu Anda cara memperbaiki kesalahan ini dan membuat tautan ke sumber daya eksternal menjadi internal dan di-cache di sisi server Anda.
Menggunakan cache browser untuk sumber daya eksternal
Karena file sumber daya eksternal bukan milik situs kami, file tersebut harus diunduh terlebih dahulu. Untuk mengunduh file eksternal dari sumber pihak ketiga, kita harus membuat file kesh_js.php dengan kode berikut. Saya menyarankan Anda untuk menggunakan Notepad++ untuk menambahkan kode ke file dengan cepat dan benar.
Untuk menulis kode yang kita butuhkan. ambil dan salin tautan ini:
unduhJs( ‘paste link dari PageSpeed di sini /metrik.js ‘ , jalur nyata("./ folder_js« ) . ‘/ metrik.js— masukkan file terakhir di sini') ;
Dengan cara ini Anda dapat menambahkan banyak pertanyaan. Satu-satunya hal adalah jangan lupa untuk memastikan bahwa Anda tidak memiliki file duplikat di folder tersebut. Dalam hal ini, gunakan satu file untuk beberapa skrip, biasanya skrip yang sama, atau ganti namanya.
Setelah menambahkan kode ke file kesh_js.php, Anda dapat menyebutnya dengan nama lain. Itu harus diunggah ke root situs kami. Juga di root situs Anda perlu membuat folder folder_js, atau dengan nama lain dengan hak akses 777/755. Untuk mengatur hak akses suatu folder, saya sarankan menggunakan Isizille.
Untuk melakukan ini, cukup buka program fillizilla. Selanjutnya pilih folder dan atur hak aksesnya, pastikan ke 777, setelah itu kita ubah kembali ke 755. Ini juga bisa dilakukan di control panel hosting Anda jika tidak ingin menggunakan program ini. Saya akan menunjukkan kepada Anda tangkapan layar pengaturan hak akses di program Fillizilla. 
Kemudian buka bagian “ izin berkas" dan masukkan nilai kita 777/755.
Cara mengaktifkan penjadwal tugas untuk situs (cron)
Langkah selanjutnya, kita perlu mengaktifkan penjadwal tugas untuk situs kita, sehingga skrip kita https://alamat situs web Anda/kesh_js.php dimulai, setiap hari. Berkat ini, situs web kami akan selalu memiliki versi file terbaru dari sumber eksternal. Bahkan jika pengembang membuat perubahan pada kode mereka, kami akan selalu memiliki versi yang berfungsi di situs, berkat penjadwal tugas.
Untuk menjadwalkan tugas untuk situs web Anda, Anda perlu membuka panel kontrol hosting dan memasukkan salah satu opsi kode.
menjalankan tugas melalui GET. Jika Anda perlu menjalankan tugas cron dengan mempertimbangkan konteks mesin:
DAPATKAN https://site.ru/script.php
di mana site.ru adalah nama domain Anda, dan script.php adalah nama file dengan tugas;
menjalankan pekerjaan melalui WGET. Opsi alternatif untuk menjalankan tugas cron, dengan mempertimbangkan konteks mesin:
Wget -q -O - https://site.ru/script.php> /dev/null 2>&1
di mana site.ru adalah nama domain Anda, dan script.php adalah nama file dengan tugas;
Dalam kasus kita, kita harus menulis:
DAPATKAN https://alamat situs web Anda/kesh_js.php
Atau pilih opsi alternatif; Saya pribadi memilih yang pertama.
Kita sudah tahu apa yang harus didaftarkan, sekarang kita buka hosting kita dan masuk ke panel kontrolnya. Saya menggunakan panel kontrol ISPmanager, jika Anda memiliki yang berbeda, cari tab penjadwal tugas, atau cron.
Sekarang, buka tab "buat".
Lalu kita bersihkan cache browsernya. Untuk Google Chrome, gunakan pintasan keyboard ctrl+shift+delete dan periksa pengoperasian situs. Saya juga menyarankan untuk menjalankan kembali situs Anda melalui alat PageSpeed Insights.
Itu saja untuk saya, semoga Anda mendapat skor bagus berkat metode mempercepat halaman ini. Pada artikel selanjutnya saya akan kasih tahu cara membuat tombol subscribe youtube warna warni untuk blog anda, jadi jangan sampai lupa berlangganan pembaruan. Selamat tinggal semuanya!