วิธีให้บริการสินทรัพย์คงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ

เว็บไซต์ เช่น GTMetrix และ Google PageSpeed ​​Insights ให้คำแนะนำเกี่ยวกับวิธีปรับปรุงประสิทธิภาพเว็บไซต์ของคุณ หากคุณกำลังอ่านสิ่งนี้ อย่างน้อยคุณก็ตระหนักว่าทุกเว็บไซต์มีโอกาสปรับปรุงประสิทธิภาพ ไม่ว่าจะผ่านการเพิ่มประสิทธิภาพด้วยตนเองหรือผ่านการใช้ปลั๊กอินเช่น 10Web Booster

ในเครื่องมือทั้งสอง คุณอาจเห็นคำแนะนำในการ ให้บริการสินทรัพย์คง ที่ด้วยนโยบายแคชที่มีประสิทธิภาพคำแนะนำนี้คือการจัดเก็บไฟล์ไว้ในเครื่องเพื่อให้การเยี่ยมชมไซต์ซ้ำเร็วขึ้น ขั้นตอนในการปรับปรุงคำแนะนำนี้ไม่ได้ปรับปรุงการเยี่ยมชมไซต์ครั้งแรก (มีการปรับปรุงอื่นๆ สำหรับสิ่งนั้น) อย่างไรก็ตาม การเข้าชมครั้งต่อไปทั้งหมดจะได้รับประโยชน์จากการใช้ประโยชน์จากแคชของเบราว์เซอร์

ควรสังเกตว่าคำแนะนำในการให้บริการเนื้อหาแบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพยังถูกเรียกว่าการใช้ประโยชน์จากการแคชของเบราว์เซอร์หรือการแคชของเบราว์เซอร์ใน WordPress

บทความนี้จะอธิบายวิธีการให้บริการเนื้อหาคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ และนโยบายแคชที่มีประสิทธิภาพสามารถปรับปรุงประสิทธิภาพเว็บไซต์ของคุณได้อย่างไร

เมื่อใช้ GTMetrix คำแนะนำจะมีลักษณะเหมือนตัวอย่างด้านล่างในหน้าผลลัพธ์ มันจะเน้นการประหยัดที่เป็นไปได้จากการใช้แคชของเบราว์เซอร์

ใน Google PageSpeed ​​Insights คำแนะนำจะมีลักษณะคล้ายกันและให้ข้อมูลที่คล้ายกัน

คำแนะนำจะคล้ายกันเนื่องจาก GTMetrix และ PageSpeed ​​Insights ใช้ เครื่องมือ Lighthouse สำหรับเฟรมเวิร์กการวิเคราะห์หน้าเว็บ Lighthouse เป็นเครื่องมือโอเพ่นซอร์สที่มุ่งปรับปรุงประสิทธิภาพของไซต์และสามารถทำงานได้ในหลายรูปแบบ

มาทบทวนกันสักนิดเพื่อเตือนตัวเราเองว่าประสิทธิภาพของเว็บไซต์วัดจากชุดเมตริกได้อย่างไร ซึ่งเกณฑ์ที่สำคัญที่สุดคือ Core Web Vitals

นี่คือบทสรุป:

• Largest Contentful Paint ( LCP ) – การวัดระยะเวลาที่วัตถุที่ใหญ่ที่สุดจะโหลดในวิวพอร์ตของหน้า
• First Input Delay ( FID ) – เป็นการวัดการตอบสนองของเว็บไซต์ โดยจะวัดเวลาระหว่างที่ผู้ใช้คลิกหรือโต้ตอบกับไซต์และไซต์ตอบสนอง
• Cumulative Layout Shift ( CLS ) – เป็นการวัดว่าเลย์เอาต์ของเพจมีการเปลี่ยนแปลงโดยไม่คาดคิดมากน้อยเพียงใด

วิธีหนึ่งที่จะส่งผลดีต่อทั้ง LCP และ FID คือการให้บริการสินทรัพย์แบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ ซึ่งหมายถึงการแจ้งให้เบราว์เซอร์ทราบว่าสามารถจัดเก็บทรัพยากรในเครื่องได้เป็นระยะเวลาหนึ่ง

นโยบายแคชที่มีประสิทธิภาพหมายถึงเวลาในการโหลดที่เร็วขึ้น เพราะไม่ว่าความเร็วอินเทอร์เน็ตของคุณจะเร็วแค่ไหน การโหลดจากแคชในเครื่องจะเร็วขึ้นและประหยัดเวลา

มีส่วนประกอบอยู่ไม่กี่อย่าง เรามาคุยกันในรายละเอียดเพิ่มเติมกันดีกว่า

วิธีให้บริการสินทรัพย์คงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ

เพื่อทำความเข้าใจวิธีการให้บริการสินทรัพย์แบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ ก่อนอื่นเราต้องเข้าใจแง่มุมต่างๆ เช่น สินทรัพย์แบบคงที่ การแคช และนโยบายการแคช มาทำลายมันลงที่นี่

สินทรัพย์คงที่คืออะไร?

สินทรัพย์คงที่คือไฟล์ เมื่อเราอ้างถึงเนื้อหาแบบสแตติกในบทความนี้ เราหมายถึงไฟล์แต่ละไฟล์ที่ไม่คาดว่าจะมีการเปลี่ยนแปลงในเร็วๆ นี้หรือบ่อยครั้ง

ไฟล์ต่างๆ เช่น รูปภาพ, จาวาสคริปต์, ไฟล์ CSS และฟอนต์เป็นไฟล์ที่อาจถือเป็นสินทรัพย์คงที่ เกี่ยวกับ WordPress ไฟล์ CSS, จาวาสคริปต์ และรูปภาพและฟอนต์เหล่านี้มักจะเป็นส่วนหนึ่งของธีม ปลั๊กอิน หรือเนื้อหาของผู้ใช้

ไฟล์และเพจที่สร้างขึ้นแบบไดนามิกไม่ถือเป็นเนื้อหาแบบสแตติก ตัวอย่างนี้ใน WordPress จะเป็นหน้าคงที่ที่สร้างขึ้นโดยปลั๊กอินแคช ซึ่งจะอธิบายอย่างละเอียดในหัวข้อถัดไป

การแคชคืออะไร?

การแคชคือกระบวนการจัดเก็บคำตอบไว้ในแคช เพื่อให้ครั้งต่อไปที่ถามคำถามเดียวกัน คำตอบสามารถส่งคืนได้เร็วขึ้น

บทความที่เกี่ยวข้อง

วิธีล้างแคช WordPress อย่างปลอดภัยและมีประสิทธิภาพ

ค้นหาปลั๊กอินแคช WordPress ที่ดีที่สุดด้วยตัวเลือก 5 อันดับแรกของเรา

หากคุณเคยทำงานกับปลั๊กอินแคชของ WordPress มาก่อน คุณอาจคุ้นเคยกับการแคชแบบเต็มหน้า การแคชเพจแตกต่างจากการแคชเนื้อหาแบบคงที่

การแคชหน้าเทียบกับการแคชเนื้อหาแบบคงที่

บทความนี้กล่าวถึงการแคชเนื้อหา (ไฟล์) แบบคงที่โดยเฉพาะ ไม่ควรสับสนกับการแคชแบบเต็มหน้า ซึ่งจัดเก็บหน้าที่สร้างขึ้นเพื่อใช้ในภายหลัง

ทั้งการแคชเพจและการแคชไฟล์ช่วยปรับปรุงประสิทธิภาพของไซต์ เมื่อพูดถึงการแคชเนื้อหาแบบสแตติก เราหมายถึงเนื้อหาเฉพาะ เช่น จาวาสคริปต์, CSS และไฟล์รูปภาพ

การแคชเพจ จัดเก็บผลลัพธ์ของเพจที่สร้างแบบไดนามิกของ WordPress และให้บริการเวอร์ชันนั้นซ้ำตามระยะเวลาที่กำหนด แคชของเพจมักถูกจัดเก็บไว้ในเซิร์ฟเวอร์หรือเครือข่ายขอบ เช่น CDN และสินทรัพย์แบบสแตติกจะถูกจัดเก็บไว้ในเครื่องของผู้ใช้

การแคชเกี่ยวกับวิธีที่เรา ให้บริการสินทรัพย์คงที่ ด้วยนโยบายแคชที่มีประสิทธิภาพหมายถึงการบอกเบราว์เซอร์ว่าสามารถเก็บทรัพยากรไว้บนเบราว์เซอร์ได้นานเท่าใดก่อนที่จะต้องดาวน์โหลดซ้ำ

อะไรทำให้สินทรัพย์แบบคงที่สามารถแคชได้

ตาม GTMetrix สินทรัพย์สามารถแคชได้หากเป็นไปตามข้อกำหนดต่อไปนี้:

• เป็นแบบอักษร, CSS, จาวาสคริปต์หรือไฟล์มีเดีย
• โดยจะส่งคืนรหัสสถานะ HTTP 200, 203 หรือ 206
• ไม่มีนโยบายการไม่แคชที่ชัดเจน

นโยบายการแคชคืออะไร?

เราได้พิจารณาถึงสิ่งที่เป็นสินทรัพย์แบบคงที่และความหมายของการแคชสินทรัพย์

สามารถใช้คำว่าความสดและไม่เก่าได้ที่นี่เพื่ออธิบายสถานะของไฟล์แคช ถ้าสามารถดึงไฟล์ออกจากแคชได้ ก็เรียกว่า fresh เมื่อหมดอายุก็จะเรียกว่า เก่า

นโยบายจะตอบคำถามต่างๆ เช่น ระยะเวลาที่ไฟล์ได้รับการพิจารณาว่าใหม่ และวิธีตรวจสอบว่าไฟล์นั้นใหม่ นโยบายระบุว่าเราจำเป็นต้องตรวจสอบกับเซิร์ฟเวอร์หลังจากระยะเวลาที่กำหนดเท่านั้น หรือแจ้งให้เราทราบเพื่อตรวจสอบกับเซิร์ฟเวอร์ในทุกคำขอ แต่จะดาวน์โหลดไฟล์ซ้ำหากมีการเปลี่ยนแปลงเท่านั้น

คำศัพท์เพิ่มเติมอีกเล็กน้อยที่ควรทำความเข้าใจก่อนที่เราจะก้าวหน้าต่อไป

UX และ SEO ได้รับผลกระทบจากนโยบายแคชอย่างไร

ประสบการณ์ผู้ใช้ (UX) และการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) เชื่อมโยงกันอย่างแนบแน่น จากการศึกษาของ Google แสดงให้เห็นว่าผู้ใช้ให้ความสำคัญกับการตอบสนองของไซต์ ดังนั้น Google จึงจัดอันดับหน้าการตอบสนองให้สูงขึ้น

หากมีการแคชเนื้อหาแบบคงที่อย่างมีประสิทธิภาพ หน้าเว็บจะแสดงผลเร็วขึ้นเนื่องจากใช้เวลาโหลดเนื้อหาเหล่านี้น้อยลง เวลาที่ลดลงนำไปสู่การปรับปรุงใน Vitals หลักของเว็บ เช่น LCP และ FID และท้ายที่สุดคือการจัดอันดับของเครื่องมือค้นหาที่สูงขึ้น

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีที่ Vitals หลักของเว็บส่งผลต่อการจัดอันดับหน้าได้ที่นี่

วิธีแก้ไขการให้บริการสินทรัพย์คงที่ด้วยปัญหานโยบายแคชที่มีประสิทธิภาพ

แก้ไขด้วยตนเอง

การแสดงเนื้อหาแบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพไม่ใช่การตั้งค่าเฉพาะของ WordPress คุณสามารถตั้งค่าได้ด้วยตนเองโดยแก้ไขไฟล์การกำหนดค่าเว็บเซิร์ฟเวอร์ของคุณหรือใช้ปลั๊กอิน เช่น 10Web Booster โฮสติ้งเพื่อให้แน่ใจว่าไซต์ของคุณได้รับการกำหนดค่าด้วยการตั้งค่าการแคชที่ปรับให้เหมาะสม

ส่วนนี้จะครอบคลุมถึงการแก้ไขไฟล์การกำหนดค่าของเว็บเซิร์ฟเวอร์โดยตรงเพื่อเปิดใช้งานการควบคุมแคชและทำให้ส่วนหัว HTTP หมดอายุบนเซิร์ฟเวอร์ของคุณ ดังนั้นเมื่อให้บริการเนื้อหาแบบสแตติก จะใช้ส่วนหัว HTTP ในการตอบกลับ

เมื่อมีการร้องขอทรัพยากร เว็บเซิร์ฟเวอร์จะตอบกลับด้วยทรัพยากรและข้อมูลเพิ่มเติมบางอย่างในสิ่งที่เรียกว่าส่วนหัว HTTP คิดว่าส่วนหัว HTTP เป็นข้อมูลเมตาเกี่ยวกับการเชื่อมต่อ ในกรณีของการแคช ส่วนหัว HTTPการควบคุมแคชและการหมดอายุจะควบคุมวิธีที่เราแคชเนื้อหา

ส่วน หัว ของการควบคุมแคช ประกอบด้วยคำแนะนำว่าควรแคชเนื้อหาแบบคงที่หรือไม่และ/หรืออย่างไร มีคำสั่งมากมายสำหรับการควบคุมแคช ดังนั้นมาทำความเข้าใจกับคำสั่งที่ได้รับความนิยมมากที่สุด

ต่อไปนี้คือตัวอย่างบางส่วนของลักษณะส่วนหัวของตัวควบคุมแคช

ตัวอย่าง: แคชเนื้อหาเป็นเวลาเจ็ดวัน
Cache-Control: max-age=604800

ตัวอย่าง: สามารถเก็บไว้ในแคชที่ใช้ร่วมกันได้นานถึงเจ็ดวัน
Cache-Control: public, max-age=604800

ตัวอย่าง: สามารถจัดเก็บได้ แต่ต้องตรวจสอบซ้ำในแต่ละคำขอ
Cache-Control: no-cache

ตัวอย่าง: ไม่สามารถแคชได้
Cache-Control: no-store

ส่วนหัวการควบคุมแคชนั้นใหม่กว่าและมีตัวเลือกมากกว่า แต่ในกรณีที่ไม่รองรับการควบคุมแคช ส่วนหัว HTTP ที่หมดอายุ จะทำงานส่วนหัวเดียวกันให้สำเร็จและสั่งระยะเวลาที่เนื้อหาถูกต้องก่อนที่จะต้องตรวจสอบความถูกต้องอีกครั้ง (โปรดทราบว่าคำสั่ง max-age ในส่วนหัวของ Cache-Control จะมีความสำคัญเหนือกว่า Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

แก้ไขการกำหนดค่าเซิร์ฟเวอร์โดยตรง

อันดับแรก ให้เราดูที่ "วิธีที่ยาก" เพื่อให้เราเข้าใจว่าเกิดอะไรขึ้นเมื่อเราใช้เครื่องมือและบริการอื่นๆ ที่ทำให้เราง่ายขึ้น

อาปาเช่

ในเซิร์ฟเวอร์ Apache HTTP ข้อมูลโค้ดต่อไปนี้สามารถเพิ่มลงในข้อกำหนดของไซต์หรือไฟล์ .htaccess

คำอธิบายตัวอย่างนี้ระบุว่าเนื้อหาใด ๆ ที่มีนามสกุลตรงกับ .ico หรือ .pdf ฯลฯ จะมีการตั้งค่าส่วนหัวของการควบคุมแคชสำหรับเนื้อหานั้น

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

เมื่อใช้ Apache ผู้ให้บริการโฮสติ้งหลายรายจะมีตัวเลือกในการเพิ่มคำสั่งให้กับไฟล์ .htaccess โปรดทราบว่าแม้ว่าวิธีนี้จะเป็นวิธีที่ง่ายในการเพิ่มการกำหนดค่าของเซิร์ฟเวอร์ แต่การใช้ไฟล์ .htaccess เป็นที่ทราบกันดีว่าส่งผลต่อประสิทธิภาพเชิงลบในระดับเซิร์ฟเวอร์

งินซ์

ใน Nginx ข้อมูลโค้ดนี้สามารถเพิ่มลงในบล็อกเซิร์ฟเวอร์ได้

อธิบายข้อมูลโค้ดนี้ โดยระบุว่าเนื้อหาใด ๆ ที่นามสกุลตรงกับ .ico หรือ .pdf ฯลฯ จะมีทั้งส่วนหัวที่หมดอายุและส่วนหัวควบคุมแคช

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

สำหรับทั้ง Apache และ Nginx เรากำลังแสดงวิธีแก้ไข/เพิ่มส่วนหัว เรากำลังแสดงส่วนหัวเฉพาะที่เราใช้สำหรับการแคช แต่วิธีนี้สามารถใช้สำหรับการแคชรูปแบบอื่นได้

แก้ไขด้วยปลั๊กอิน WordPress

หากข้างต้นรู้สึกเหมือนมากก็เป็นเพราะมันเป็น การแก้ไขการกำหนดค่าเซิร์ฟเวอร์และการอัปเดตการเปลี่ยนแปลงด้วยตนเองนั้นใช้เวลานานและเกิดข้อผิดพลาดได้ง่าย

แผนฟรี 10Web Booster สามารถกำหนดค่า Apache เพื่อเพิ่มส่วนหัวสำหรับเนื้อหาแบบสแตติก และยังเพิ่มส่วนหัวสำหรับเว็บเพจที่เก็บไว้ หากคุณยังไม่ได้ใช้ 10Web hosting และโฮสต์ของคุณใช้ Apache นี่เป็นวิธีที่ดีในการเริ่มต้นใช้งานนโยบายแคชที่มีประสิทธิภาพ

หากคุณต้องการตัวเลือกเพิ่มเติมหรือควบคุมส่วนหัว HTTP ได้มากขึ้น คุณสามารถใช้ 10Web Booster Pro 10Web Booster Pro ใช้ประโยชน์จาก Cloudflare เมื่อคุณใช้ Cloudflare จะเพิ่มส่วนหัวของการควบคุมแคชไปยังเนื้อหาแบบคงที่และหน้าแคชของคุณ สิ่งนี้จะข้ามการกำหนดค่าเซิร์ฟเวอร์หรือข้อจำกัดใด ๆ เนื่องจากผู้เยี่ยมชมของคุณจะได้รับไฟล์จาก Cloudflare โดยตรง

สิ่งที่ทำให้ปลั๊กอิน 10Web Booster เป็นตัวเลือกที่ดีที่สุดคือทำทั้งหมดนี้โดยอัตโนมัติ คุณไม่จำเป็นต้องจัดการการกำหนดค่าเซิร์ฟเวอร์หรือไฟล์ .htaccess

อีกทางเลือกหนึ่ง หากคุณใช้ 10Web Hosting ระบบ จะใช้การแคชโดยอัตโนมัติ และคุณไม่จำเป็นต้องกังวลเกี่ยวกับการเพิ่มส่วนหัวสำหรับเนื้อหาแบบคงที่

ยังไม่สามารถแก้ไขปัญหาได้ใช่หรือไม่ ลองใช้สองเคล็ดลับเหล่านี้

หากคุณได้ดำเนินการตามขั้นตอนข้างต้นแล้ว และคุณยังเห็นว่าทรัพยากรคงที่ของบริการที่มีนโยบายแคชที่มีประสิทธิภาพยังคงแสดงอยู่ในรายงานของคุณ ต่อไปนี้เป็นอีกสองสามสิ่งที่คุณลองทำได้

การตรวจสอบว่าไฟล์ถูกแคชไว้

หาก GTMetrix และ PageSpeed ​​​​ยังคงรายงานว่าคุณควรให้บริการเนื้อหาคงที่ด้วยนโยบายแคช คุณอาจต้องการตรวจสอบว่าการใช้งานของคุณทำให้เกิดการเปลี่ยนแปลงตามที่คาดไว้จริง

ในเบราว์เซอร์ส่วนใหญ่ มีวิธีง่ายๆ ในการตรวจสอบว่าไฟล์มาจากแคชหรือไม่

ใน Chrome ภายใต้มุมมองและผู้พัฒนา เลือกเครื่องมือสำหรับนักพัฒนา:

ภายใต้แท็บเครือข่าย คุณจะสามารถระบุไฟล์ที่มาจาก (แคชดิสก์) หรือ (แคชหน่วยความจำ) ข้อแตกต่างระหว่างดิสก์และแคชหน่วยความจำคือ หน่วยความจำจะหายไปเมื่อปิดเบราว์เซอร์ และดิสก์ยังคงอยู่เมื่อปิดเบราว์เซอร์

เพิ่มเวลาแคช

ตามสถิติจาก Lighthouse นโยบายแคชที่มีประสิทธิภาพคือนโยบายที่มีอัตราส่วนสูงต่อการเข้าถึงแคชและพลาด ซึ่งหมายความว่าสินทรัพย์คงที่ส่วนใหญ่มีการตั้งค่าอายุสูงสุดหรือหมดอายุ สำหรับไซต์ที่อยู่ในระหว่างการผลิตหรือไม่ได้เปลี่ยนแปลงบ่อย แนะนำให้ใช้อายุสูงสุดสามเดือนถึงหนึ่งปี

พวกเขาแนะนำให้เริ่มนโยบายประมาณสามเดือน (ประมาณ 7890000 วินาที) หากคุณได้ตั้งค่านี้แล้ว การเพิ่มอายุสูงสุดเป็นหนึ่งปีหรือมากกว่านั้นอาจคุ้มค่าหากเว็บไซต์ของคุณใช้งานได้จริง

บทสรุป

ความสามารถในการให้บริการสินทรัพย์คงที่ด้วยนโยบายแคชที่มีประสิทธิภาพจะช่วยเพิ่มความเร็วให้กับประสิทธิภาพของเว็บไซต์ของคุณ

บทความนี้ครอบคลุมเนื้อหาแบบสแตติกคืออะไร ส่วนหัว HTTP คืออะไร และดูวิธีเปิดใช้งานและตรวจสอบความถูกต้องของส่วนหัวการแคช

เราดูที่จุดสำคัญของการเปิดใช้งานส่วนหัวด้วยตนเองโดยการแก้ไขการกำหนดค่าเซิร์ฟเวอร์ และวิธีที่เราจะทำให้ง่ายขึ้นโดยใช้ปลั๊กอิน WordPress เช่น 10Web Booster และใช้ประโยชน์จากการผสานรวมของ 10Web กับ Cloudflare เพื่อเข้าถึงการตั้งค่าส่วนหัว HTTP ที่ควบคุมแคช

10Web Booster เป็นมากกว่าแค่ปลั๊กอินแคช คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติการแคชและการเพิ่มประสิทธิภาพความเร็วได้ใน บทความ 10Web Booster นี้

คำถามที่พบบ่อย