การแคชหน้าเว็บ CDN และแบนเนอร์ความยินยอม: วิธีหลีกเลี่ยงการแสดงสถานะความยินยอมที่ผิด
หน้าเว็บเร็ว ความยินยอมผิด
การแคชหน้าเว็บเป็นหนึ่งในสิ่งที่ดีที่สุดที่คุณทำได้เพื่อความเร็วและต้นทุนโฮสติ้ง แต่ก็เป็นหนึ่งในวิธีที่ง่ายที่สุดที่จะทำให้การตั้งค่าความยินยอมพังโดยไม่รู้ตัว แคชทำตามที่ถูกสั่งทุกประการ: เก็บการตอบกลับไว้ครั้งเดียวและส่งให้ทุกคนที่ตรงกับคีย์เดียวกัน หากการตอบกลับที่เก็บไว้มีสิ่งใดที่เฉพาะเจาะจงกับตัวเลือกความยินยอมหรือตำแหน่งของผู้เข้าชมคนหนึ่ง ผู้เข้าชมคนถัดไปก็จะได้รับสิ่งนั้นด้วย
คู่มือนี้ครอบคลุมชั้นการแคชที่มักอยู่หน้าเว็บไซต์ของผู้เผยแพร่ — แคช edge ของ CDN ปลั๊กอินแคชเต็มหน้า reverse proxy service worker และตัวเบราว์เซอร์เอง — และวิธีป้องกันไม่ให้แต่ละชั้นแสดงประสบการณ์ความยินยอมที่ผิด
กฎหลัก: เก็บความยินยอมไว้นอก HTML ที่แคช
สถาปัตยกรรมที่ปลอดภัยที่สุดเรนเดอร์หน้า HTML ที่แคชให้เป็นกลางด้านความยินยอม หน้ามีตัวโหลด CMP และแท็กของคุณอยู่ในสถานะถูกบล็อกหรือรอ แต่ไม่มีการตัดสินใจเกี่ยวกับผู้เข้าชมรายนี้โดยเฉพาะ จากนั้น CMP ทำงานในเบราว์เซอร์ อ่านตัวเลือกที่เก็บไว้ ตัดสินว่าจะแสดงแบนเนอร์หรือไม่ และปล่อยแท็กตามนั้น
ปัญหาเริ่มเมื่อเซิร์ฟเวอร์ตัดสินใจเรื่องความยินยอมตอนเรนเดอร์ เช่น:
- ธีมหรือปลั๊กอินที่พิมพ์แท็กโฆษณาหรือการวิเคราะห์เฉพาะเมื่อมีคุกกี้ความยินยอม
- โค้ดฝั่งเซิร์ฟเวอร์ที่ละมาร์กอัปแบนเนอร์สำหรับผู้เข้าชมที่เลือกไปแล้ว
- เทมเพลตที่ฝังสถานะความยินยอมของผู้เข้าชมไว้ในตัวแปรสคริปต์ inline
เมื่อหน้านั้นถูกแคช สถานะของผู้เข้าชมคนแรกจะกลายเป็นสถานะของทุกคน ผู้เข้าชมที่ปฏิเสธการติดตามอาจได้รับหน้าที่แท็กทำงานอยู่แล้ว หรือผู้เข้าชมใหม่อาจไม่เคยเห็นแบนเนอร์เลยเพราะสำเนาที่แคชมาจากคนที่ปิดมันไปแล้ว
เหตุใด “Vary: Cookie” จึงแทบไม่ใช่คำตอบ
วิธีแก้ตามตำราสำหรับเนื้อหาเฉพาะผู้เข้าชมคือสั่งให้แคช vary ตามเฮดเดอร์คุกกี้ ในทางปฏิบัติ ผู้เข้าชมมีคุกกี้จำนวนมากที่มีค่าไม่ซ้ำกัน การ vary ตามเฮดเดอร์คุกกี้ทั้งหมดจึงมักทำให้อัตรา cache hit ของคุณเกือบเป็นศูนย์ CDN บางรายให้สร้างคีย์แคชจากค่าคุกกี้ตัวเดียว ซึ่งใช้ได้หากคุกกี้ความยินยอมของคุณมีสถานะที่เป็นไปได้จำนวนน้อย แต่เพิ่มความซับซ้อนและยังคูณจำนวนสำเนาที่แคชไว้ การย้ายการตัดสินใจไปไว้ในเบราว์เซอร์ง่ายกว่าและทำให้แคชมีประสิทธิภาพ
ภูมิศาสตร์ที่ edge
ผู้เผยแพร่จำนวนมากแสดงแบนเนอร์ต่างกันตามภูมิภาค: แบนเนอร์ opt-in สำหรับ EU และ UK ประกาศ opt-out สำหรับรัฐต่าง ๆ ของสหรัฐฯ และแบบที่เบากว่าที่อื่น หากเซิร์ฟเวอร์เลือกตัวแปรจากที่อยู่ IP ของผู้เข้าชมและหน้านั้นถูกแคช ผู้อ่านชาวยุโรปอาจได้รับหน้าของสหรัฐฯ ที่แคชไว้ หรือในทางกลับกัน
สามรูปแบบช่วยหลีกเลี่ยงปัญหานี้:
- การระบุตำแหน่งฝั่งไคลเอนต์ ให้ CMP กำหนดภูมิภาคในเบราว์เซอร์ เพื่อให้ HTML ที่แคชเหมือนกันสำหรับทุกคน
- ประเทศในคีย์แคช หากต้องตัดสินใจที่ edge ให้ใส่รหัสประเทศที่ CDN ของคุณให้มาในคีย์แคช คุณจะได้สำเนาแคชหนึ่งชุดต่อประเทศ ซึ่งคาดการณ์ได้
- ตรรกะ edge ที่ไม่แคช รันการตัดสินใจระดับภูมิภาคในฟังก์ชัน edge ที่แทรกค่าเล็ก ๆ ที่ไม่แคชลงในหน้าที่แคชไว้
ไม่ว่าคุณเลือกแบบใด ให้บันทึกเป็นเอกสาร บั๊กด้านภูมิศาสตร์เป็นหนึ่งในบั๊กที่ทำซ้ำยากที่สุด เพราะปรากฏเฉพาะกับผู้เข้าชมในสถานที่เดียวที่บังเอิญได้รับหน้าที่คนในอีกที่หนึ่งแคชไว้
การแคชสคริปต์ CMP เอง
การแคชตัวโหลด CMP เป็นเวลานานดีต่อประสิทธิภาพ แต่มีต้นทุนเมื่อการกำหนดค่าเปลี่ยน หากคุณอัปเดตผู้ให้บริการ วัตถุประสงค์ หรือข้อความแบนเนอร์ และสคริปต์หรือไฟล์การกำหนดค่าถูกแคชไว้หนึ่งปี ผู้เข้าชมบางส่วนจะยังเห็นเวอร์ชันเก่า ตรวจสอบว่า CMP ของคุณกำหนดเวอร์ชันไฟล์อย่างไร ชื่อไฟล์หรือพารามิเตอร์เวอร์ชันที่เปลี่ยนไปช่วยให้แคชได้อย่างเต็มที่และยังเผยแพร่การเปลี่ยนแปลงได้ทันที และยืนยันด้วยว่า CDN ของคุณไม่ตัด query string ออกจาก URL สคริปต์ของบุคคลที่สามหาก CMP พึ่งพามัน
Service worker และแคชออฟไลน์
ไซต์ที่มีชั้น progressive web app มักแคช HTML ใน service worker กฎเดียวกันใช้ได้: อย่าเก็บหน้าที่สะท้อนการตัดสินใจเรื่องความยินยอมเฉพาะรายเด็ดขาด ยกเว้น endpoint ที่เกี่ยวกับความยินยอมและหน้าศูนย์การตั้งค่าออกจากการแคชของ service worker และตรวจสอบให้แน่ใจว่าสามารถดึงการกำหนดค่า CMP ใหม่ได้เสมอ
แคช back/forward
เบราว์เซอร์สมัยใหม่เก็บหน้าที่เพิ่งเยี่ยมชมไว้ในหน่วยความจำ เพื่อให้ปุ่มย้อนกลับกู้คืนได้ทันที หากผู้เข้าชมเปิดศูนย์การตั้งค่าในหน้าหนึ่ง ถอนความยินยอม แล้วกดย้อนกลับ หน้าที่กู้คืนอาจยังมีแท็กที่ทำงานจากก่อนหน้า ฟังเหตุการณ์ pageshow และตรวจสอบคุณสมบัติ persisted เมื่อหน้าถูกกู้คืนจากแคชนี้ ให้อ่านสถานะความยินยอมที่เก็บไว้ใหม่ และหยุดหรือเริ่มแท็กให้ตรงกัน
ขั้นตอนการทดสอบ
- โหลดหน้าในเซสชันที่สะอาด ปฏิเสธ แล้วโหลดหน้าที่สอง และยืนยันว่าไม่มีแท็กติดตามทำงาน
- ทำซ้ำด้วยเบราว์เซอร์สะอาดอีกตัว และยืนยันว่าแบนเนอร์ปรากฏ ซึ่งพิสูจน์ว่าไม่ได้ถูกแคชหายไป
- ตรวจสอบเฮดเดอร์การตอบกลับว่าหน้าถูกส่งจากแคชหรือไม่ และเปรียบเทียบ HTML ที่มีและไม่มีคุกกี้ความยินยอม — ควรเหมือนกัน
- ทดสอบจากอย่างน้อยสองภูมิภาคหลังล้างแคช แล้วทดสอบอีกครั้งหลังแคชอุ่นแล้ว
- ถอนความยินยอม ใช้ปุ่มย้อนกลับ และตรวจสอบว่าแท็กหยุดทำงาน
ประเด็นสำคัญ
- HTML ที่แคชควรเป็นกลางด้านความยินยอม ให้ CMP ตัดสินใจในเบราว์เซอร์
- หลีกเลี่ยงการ vary ตามเฮดเดอร์คุกกี้ทั้งหมด เพราะทำลายอัตรา hit
- หากแบนเนอร์ต่างกันตามภูมิภาค ให้ตัดสินใจฝั่งไคลเอนต์หรือเพิ่มประเทศในคีย์แคช
- กำหนดเวอร์ชันไฟล์ CMP เพื่อไม่ให้อายุแคชที่ยาวทำให้การเปลี่ยนการกำหนดค่าล่าช้า
- จัดการ service worker และแคช back/forward และทดสอบขณะแคชอุ่น ไม่ใช่เพียงหลังล้างแคช