การโหลดเว็บไซต์ที่เร็วขึ้นยิ่งมีแนวโน้มที่ผู้เยี่ยมชมจะอยู่ บทความนี้จะแนะนำคุณเกี่ยวกับวิธีการใช้การแคชเบราว์เซอร์ด้วยการกำหนดค่า NGINX

วิธีการใช้การแคช BrowsR ด้วยการกำหนดค่า NGINX

ในชุดการสอนของ Nginx ของเราเราได้กล่าวถึง วิธีใช้ Nginx เป็น load balancer, กำหนดค่า nginx เป็น proxy reverse, ใช้ PHP หลายรุ่นกับ nginx และ แปลง HTaccess rewrite rewrite กฎของ Nginx เขียนคำสั่งใหม่ ในบทความของวันนี้เราครอบคลุมหัวข้อที่สำคัญมากที่ช่วยให้ธุรกิจปรับปรุงประสบการณ์ของผู้ใช้โดยใช้ประโยชน์จากการแคชเบราว์เซอร์ ในบทช่วยสอนนี้เราจะแนะนำคุณเกี่ยวกับวิธีการใช้การแคชเบราว์เซอร์ด้วยการกำหนดค่า Nginx โดยใช้โมดูลส่วนหัวของ 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 หวังว่าสิ่งนี้จะช่วยให้คุณปรับปรุงประสบการณ์ผู้ใช้ของคุณบนเว็บไซต์ของคุณ

สำรวจ