Menjadi seorang Nginx administrator, Anda selalu mencari metode baru untuk meningkatkan kinerja server web Anda. Pencarian ini akan membawa Anda ke berbagai jalur, dan pada akhirnya, Anda akan bingung untuk memilih di antara jumlah solusi yang tak ada habisnya.
Mengaktifkan static resources atau content caching adalah salah satu metode yang mungkin untuk Nginx optimasi. Setiap kali browser mengunjungi situs web, Nginx menurunkan cache file tertentu seperti aset gambar statis ke browser web individual alih-alih menyajikan setiap file. Akibatnya, situs web Anda yang didukung Nginx dimuat lebih cepat di browser.
Dalam posting ini, Anda akan belajar how to cache static resources using HTTP caching in Nginx. Sebelum beralih ke prosedur caching konten statis, pertama-tama, pahami konsep dasar konten statis dan bagaimana konten statis di-cache di Nginx.
Apa itu konten statis?
File apa pun yang disimpan di server dan disajikan kepada user setiap kali, dengan cara yang sama, dikenal sebagai konten statis. Fungsionalitas konten statis mirip dengan koran. Saat surat kabar diterbitkan, setiap orang yang mengambil copyannya akan melihat cerita dan foto yang sama sepanjang hari, terlepas dari peristiwa baru apa yang terjadi di siang hari.
Konten sebagian besar situs web didasarkan pada file statis yang telah diformat sebelumnya. File statis ini tidak mungkin berubah seiring waktu dan juga untuk user lain. Dibandingkan dengan file dinamis yang dihasilkan “on the fly” berdasarkan informasi database, file statis adalah kandidat default untuk caching. Contoh konten statis adalah gambar, musik, javascript, film, dan file CSS.
Cara menyimpan sumber daya statis di Nginx
Metode khas untuk cache web adalah menyimpan copyan file statis dalam cache. Proses ini memungkinkan konten statis lebih dekat dengan user situs web dan mengirimkan sumber daya statis lebih cepat di lain waktu. Konten atau sumber daya statis dapat di-cache oleh Jaringan Pengiriman Konten (CDN) dan Peramban untuk jangka waktu yang telah ditentukan dan disajikan kepada user selama sumber daya statis tersebut diminta. Karena konten statis tidak berubah seiring waktu, user dapat menerima file yang sama beberapa kali.
Apa itu header cache HTTP di Nginx
Untuk menentukan durasi cache dan menunjukkan konten web yang dapat di-cache, pengembang web menggunakan HTTP cache headers. Anda dapat menyesuaikan strategi caching Anda dengan menggunakan header cache yang berbeda, yang memastikan kesegaran konten atau sumber daya statis Anda.
Misalnya, “Cache-Control: max-age=3600” menyatakan bahwa file tertentu hanya dapat di-cache selama satu jam setelah itu harus direload dari sumbernya. Menandai satu atau sekelompok file secara terpisah dapat memakan waktu. Dengan menerapkan metode kognitif yang mampu mengesampingkan header cache, CDN cararn mengizinkan Anda menghindari praktik ini.
Sekarang, kami akan menunjukkan cara mengaktifkan caching statis menggunakan caching HTTP di Nginx. Jika situs web Anda terdiri dari banyak sumber daya atau konten statis, maka metode yang disediakan akan membantu Anda mempercepat pemuatan halaman web. Untuk mengikuti metode yang diberikan di bawah ini, Anda harus menginstal dan mengaktifkan Nginx di sistem Anda.
Cara mengaktifkan caching sumber daya statis menggunakan caching HTTP di Nginx
Pertama, tekan “CTRL+ALT+T” untuk membuka terminal. Setelah itu, jalankan perintah yang diberikan di bawah ini untuk membuka file konfigurasi Nginx di editor nano Anda:
$ sudo nano /etc/nginx/nginx.conf
Kami mengaktifkan caching statis di file Nginx default. Jika Anda memiliki beberapa host dan situs virtual, maka Anda harus menambahkan pengaturan berikut dalam setiap file konfigurasi:
Tambahkan baris berikut untuk menyimpan sumber daya statis
seperti file css, gambar, ikon, file JavaScript:
location ~*.(css|gif|jpg|js|png|ico|otf|sng|xls|doc|exe|jpeg|tgx)$ {
access_log off;
expires max;
}
Kami telah menambahkan “access_log off” untuk menonaktifkan akses log off karena tidak mencapai batas I/O. Sedangkan “expires” header terdiri dari informasi yang terkait dengan ketersediaan konten yang di-cache di cache browser Anda. “expires” adalah HTTP header yang dapat ditempatkan di dalam blok yang ada dalam file konfigurasi seperti server{}, http{}, dan location{}memblokir. Biasanya, “expires” Header HTTP ditambahkan di blok lokasi untuk menyimpan file statis:
Sekarang, tekan “CTRL+O” untuk menyimpan perubahan yang telah kita buat ke dalam file konfigurasi Nginx:
Jalankan “nginx” perintah dengan “-t” opsi untuk menguji Nginx file konfigurasi dan sintaksnya:
$ sudo nginx -t
Sekarang, restart Nginx dengan mengetikkan perintah yang diberikan di bawah ini di terminal Anda:
$ sudo systemctl restart nginx
Cara menguji caching sumber daya statis menggunakan HTTP Header Live di Nginx
Untuk situs web Anda yang berjalan di Nginx server web, Anda dapat menambahkan ekstensi HTTP header Live di browser Anda untuk menguji proses caching.
Misalnya, kami menambahkan HTTP Header Live ke browser Firefox kami dengan mengklik tombol “Add to Firefox” tombol:
Izinkan HTTP Header Live untuk mengakses situs web dan data terkait browser:
Selanjutnya, buka situs web tempat Anda mengaktifkan cache konten statis dalam file konfigurasinya, dan Anda akan melihat bahwa HTTP Header menampilkan semua informasi yang terkait dengan sumber daya cache:
Anda juga dapat menekan “CTRL+SHIFT+I” untuk membuka alat pengembang. Memuat situs web Anda beberapa kali, dan Anda akan melihat bahwa kecepatan pemuatan web jauh lebih baik karena sebagian besar sumber daya di-cache selama pemuatan pertama halaman web:
Kesimpulan
Di situs web, konten statis adalah jenis konten yang tidak berubah di seluruh halaman web. Jika situs web Anda terdiri dari sumber daya atau konten statis, Anda dapat meningkatkan kinerjanya dengan mengaktifkan caching, yang menyimpan konten statis untuk akses yang lebih cepat di browser. Dalam posting ini, kami telah menjelaskan apastatic content adalah, how static caching works in Nginx, dan kamu bisa cache static resources or content using HTTP caching in Nginx. Selain itu, kami juga telah menunjukkan caranyato test caching of static resources using HTTP Header Live.
