การโหลดเว็บไซต์ที่เร็วขึ้นยิ่งมีแนวโน้มที่ผู้เยี่ยมชมจะอยู่ บทความนี้จะแนะนำคุณเกี่ยวกับวิธีการใช้การแคชเบราว์เซอร์ด้วยการกำหนดค่า NGINX
ในชุดการสอนของ Nginx ของเราเราได้กล่าวถึง วิธีใช้ Nginx เป็น load balancer, กำหนดค่า nginx เป็น proxy reverse, ใช้ PHP หลายรุ่นกับ nginx และ แปลง HTaccess rewrite rewrite กฎของ Nginx เขียนคำสั่งใหม่ ในบทความของวันนี้เราครอบคลุมหัวข้อที่สำคัญมากที่ช่วยให้ธุรกิจปรับปรุงประสบการณ์ของผู้ใช้โดยใช้ประโยชน์จากการแคชเบราว์เซอร์ ในบทช่วยสอนนี้เราจะแนะนำคุณเกี่ยวกับวิธีการใช้การแคชเบราว์เซอร์ด้วยการกำหนดค่า Nginx โดยใช้โมดูลส่วนหัวของ Nginx มาเริ่มกันเลย!
- ใช้ประโยชน์จากเบราว์เซอร์
- โมดูลส่วนหัว nginx
- e-tage และ if-none-match
- เลเวอเรจเบราว์เซอร์แคชด้วยการกำหนดค่า nginx
- บทสรุป
ใช้ประโยชน์จากการแคชเบราว์เซอร์
ยิ่งเว็บไซต์โหลดเร็วขึ้นเท่าใดผู้เข้าชมก็จะอยู่บนเว็บไซต์ได้มากขึ้นเท่านั้น เว็บไซต์ที่มีรูปภาพจำนวนมากและเนื้อหาแบบโต้ตอบถูกโหลดในพื้นหลังทำให้เว็บไซต์เปิดงานที่ซับซ้อน ประกอบด้วยการร้องขอไฟล์ต่าง ๆ มากมายจากเซิร์ฟเวอร์ทีละไฟล์ การลดปริมาณการร้องขอเหล่านี้ให้น้อยที่สุดเป็นวิธีหนึ่งในการเร่งความเร็วเว็บไซต์ของคุณ วิธีหนึ่งในการปรับปรุงประสิทธิภาพของเว็บไซต์คือ leveraging เบราว์เซอร์ Caching การแคชเบราว์เซอร์มีบทบาทอย่างมากในกลไกแคชสำหรับการเพิ่มความเร็วของหน้า ไฟล์แบบคงที่เช่น CSS, JS, JPEG, PNG และอื่น ๆ ที่ใช้สำหรับเว็บไซต์สามารถบันทึกไว้ในคอมพิวเตอร์ของผู้เข้าชมเพื่อการเข้าถึงในอนาคต เมื่อใดก็ตามที่ผู้เข้าชมพบหน้าใหม่ในเว็บไซต์ของคุณไฟล์ด้านบนสามารถเข้าถึงได้จากคอมพิวเตอร์ของผู้เข้าชมแทนที่จะเป็นเซิร์ฟเวอร์ที่ให้ไว้ซึ่งจะเพิ่มความเร็วในการโหลดหน้าเว็บอย่างมาก
โมดูลส่วนหัวของ Nginx
โมดูล _ngx \ _http \ headers_module อนุญาตให้เพิ่มฟิลด์ส่วนหัว“ expires” และ“ cache-control” และเขตข้อมูลโดยพลการไปยังส่วนหัวตอบกลับ เราสามารถใช้โมดูลส่วนหัวเพื่อตั้งค่าส่วนหัว HTTP เหล่านี้ โมดูลส่วนหัวเป็นโมดูล Core Nginx ซึ่งหมายความว่าไม่จำเป็นต้องติดตั้งแยกต่างหากเพื่อใช้ การกำหนดค่าตัวอย่างมีลักษณะเช่นนี้:
expires 24h;
expires modified +24h;
expires @24h;
expires 0;
expires -1;
expires epoch;
expires $expires;
add_header Cache-Control private;
e-tag และถ้าไม่มีการแข่งขัน
สมมติว่าเรามีไฟล์ทดสอบที่มีส่วนขยายที่แตกต่างกันเช่น test.html, test.jpg, test.css และ test.js. โดยค่าเริ่มต้นไฟล์ทั้งหมดจะมีพฤติกรรมการแคชเริ่มต้นเดียวกัน ในการตรวจสอบส่วนหัวการตอบกลับของไฟล์โดยใช้คำสั่งต่อไปนี้เพื่อขอไฟล์จากเซิร์ฟเวอร์ Nginx ในพื้นที่ของเราและแสดงส่วนหัวการตอบกลับ:
curl -I http://localhost/test.html
Output: Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Fri, 03 March 2021 18:23:09 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Fri, 03 March 2021 18:23:09 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
Accept-Ranges: bytes
ในบรรทัดที่สองถึงสุดท้ายคุณจะพบส่วนหัว etag ซึ่งมีตัวระบุที่ไม่ซ้ำกันสำหรับการแก้ไขไฟล์ที่ร้องขอโดยเฉพาะนี้ หากคุณเรียกใช้คำสั่ง curl ล่าสุดซ้ำ ๆ คุณจะพบค่า ETAG เดียวกันที่แน่นอน เมื่อใช้เว็บเบราว์เซอร์ค่า etag จะถูกเก็บไว้และส่งกลับไปยังเซิร์ฟเวอร์ด้วยส่วนหัวคำขอ if-none-match เมื่อผู้ใช้รีเฟรชหน้าหรือเบราว์เซอร์ที่ต้องการไฟล์เดียวกันไม่ว่าด้วยเหตุผลใดก็ตาม เราสามารถจำลองสิ่งนี้บนบรรทัดคำสั่งด้วยคำสั่งต่อไปนี้
curl -I -H 'If-None-Match: "501c3b6f-401"' http://localhost/test.html
หมายเหตุตัวระบุที่ไม่ซ้ำกันจะต้องตรงกับค่าการตอบกลับที่เราได้รับจากการโทร curl ก่อนหน้าของเรา การตอบสนองจะแตกต่างกันในเวลานี้:
Output: Nginx response headers
<strong>HTTP/1.1 304 Not Modified</strong>
Server: nginx/1.14.1
Date: Thu, 04 Feb 2021 18:24:05 GMT
Last-Modified: Thu, 04 Feb 2021 18:22:39 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
เวลานี้ Nginx จะตอบกลับด้วย 304 ไม่ได้แก้ไข จะไม่ส่งไฟล์ผ่านเครือข่ายอีกครั้ง แต่จะบอกเบราว์เซอร์ว่าสามารถนำไฟล์ที่มันดาวน์โหลดมาได้แล้ว สิ่งนี้มีประโยชน์เนื่องจากช่วยลดทราฟฟิกเครือข่าย แต่เบราว์เซอร์ยังคงต้องโทร HTTP เพื่อรับการตอบกลับจากเซิร์ฟเวอร์ซึ่งยังคงใช้เวลาอยู่พอสมควร
ใช้ประโยชน์จากการแคชเบราว์เซอร์ด้วยการกำหนดค่า Nginx
ในตัวอย่างก่อนหน้าของเราเราอธิบายว่า E-TAG และ IF-NONE-MATCH ช่วยให้คุณลดการรับส่งข้อมูลเครือข่ายได้อย่างไร แต่ปัญหาเกี่ยวกับ etag คือเบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์เพื่อถามว่าสามารถนำไฟล์แคชมาใช้ซ้ำได้หรือไม่ และสิ่งนี้ยังต้องใช้เวลาในการร้องขอและรับการตอบกลับ
ขณะนี้ด้วยความช่วยเหลือของโมดูลส่วนหัวของ Nginx เราจะทำให้เบราว์เซอร์สามารถแคชไฟล์บางไฟล์ได้โดยไม่ต้องถามเซิร์ฟเวอร์อย่างชัดเจน
เพิ่ม 3 บรรทัดต่อไปนี้ในไฟล์กำหนดค่า Nginx ของคุณลงในแคชเนื้อหาคงที่ใน nginx
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
บรรทัดแรกสั่งให้ Nginx เนื้อหาแคชในเบราว์เซอร์ไคลเอนต์เป็นเวลา 30 วัน (30d) หลังจากช่วงเวลานี้คำขอใหม่ใด ๆ จากผู้ใช้จะส่งผลให้เกิดการตรวจสอบความถูกต้องของแคชและอัปเดตจากเบราว์เซอร์ไคลเอนต์ คุณสามารถวางบรรทัดด้านบนใน location, server หรือบล็อก http
location /static/ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
เมื่อคุณวางไว้ในบล็อกที่ตั้งเฉพาะเนื้อหาที่เสิร์ฟโดยสถานที่นั้นจะถูกแคช ในกรณีข้างต้นมีการร้องขอเฉพาะ / คงที่ / จะถูกแคช หากคุณต้องการแคชประเภทไฟล์เฉพาะคุณสามารถทำได้โดยใช้บล็อกตำแหน่ง
location ~* \.(js|jpg|gif|png|css)$ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
ในตัวอย่างข้างต้นเรากำลังแคชไฟล์ประเภทต่าง ๆ เช่น JS, JPG, CSS ฯลฯ ในทำนองเดียวกันคุณสามารถวางการกำหนดค่าแคชในบล็อก server ก่อนบล็อกตำแหน่งใด ๆ ในกรณีนี้คำตอบทั้งหมดจากเซิร์ฟเวอร์นี้จะถูกแคช หรือคุณอาจวางไว้ในบล็อก http ในกรณีนี้คำขอเซิร์ฟเวอร์ทั้งหมดที่รองรับโดยไฟล์กำหนดค่า Nginx จะถูกแคช
บทสรุป
โมดูลส่วนหัวของ Nginx สามารถใช้เพื่อเพิ่มส่วนหัวโดยพลการใด ๆ ในการตอบสนอง แต่การตั้งค่าส่วนหัวควบคุมแคชเป็นหนึ่งในแอพพลิเคชั่นที่มีประโยชน์มากที่สุด มันช่วยให้คุณปรับปรุงประสิทธิภาพของเว็บไซต์โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ในเครือข่ายที่มีเวลาแฝงที่สูงขึ้นเช่นเครือข่ายผู้ให้บริการมือถือ ในบทช่วยสอนนี้เราได้เรียนรู้วิธีการใช้ประโยชน์จากการแคชเบราว์เซอร์ด้วยการกำหนดค่า Nginx หวังว่าสิ่งนี้จะช่วยให้คุณปรับปรุงประสบการณ์ผู้ใช้ของคุณบนเว็บไซต์ของคุณ