การแคชหน้าเว็บ CDN และแบนเนอร์ความยินยอม: วิธีหลีกเลี่ยงการแสดงสถานะความยินยอมที่ผิด

หน้าเว็บเร็ว ความยินยอมผิด

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

คู่มือนี้ครอบคลุมชั้นการแคชที่มักอยู่หน้าเว็บไซต์ของผู้เผยแพร่ — แคช edge ของ CDN ปลั๊กอินแคชเต็มหน้า reverse proxy service worker และตัวเบราว์เซอร์เอง — และวิธีป้องกันไม่ให้แต่ละชั้นแสดงประสบการณ์ความยินยอมที่ผิด

กฎหลัก: เก็บความยินยอมไว้นอก HTML ที่แคช

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

ปัญหาเริ่มเมื่อเซิร์ฟเวอร์ตัดสินใจเรื่องความยินยอมตอนเรนเดอร์ เช่น:

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

เหตุใด “Vary: Cookie” จึงแทบไม่ใช่คำตอบ

วิธีแก้ตามตำราสำหรับเนื้อหาเฉพาะผู้เข้าชมคือสั่งให้แคช vary ตามเฮดเดอร์คุกกี้ ในทางปฏิบัติ ผู้เข้าชมมีคุกกี้จำนวนมากที่มีค่าไม่ซ้ำกัน การ vary ตามเฮดเดอร์คุกกี้ทั้งหมดจึงมักทำให้อัตรา cache hit ของคุณเกือบเป็นศูนย์ CDN บางรายให้สร้างคีย์แคชจากค่าคุกกี้ตัวเดียว ซึ่งใช้ได้หากคุกกี้ความยินยอมของคุณมีสถานะที่เป็นไปได้จำนวนน้อย แต่เพิ่มความซับซ้อนและยังคูณจำนวนสำเนาที่แคชไว้ การย้ายการตัดสินใจไปไว้ในเบราว์เซอร์ง่ายกว่าและทำให้แคชมีประสิทธิภาพ

ภูมิศาสตร์ที่ edge

ผู้เผยแพร่จำนวนมากแสดงแบนเนอร์ต่างกันตามภูมิภาค: แบนเนอร์ opt-in สำหรับ EU และ UK ประกาศ opt-out สำหรับรัฐต่าง ๆ ของสหรัฐฯ และแบบที่เบากว่าที่อื่น หากเซิร์ฟเวอร์เลือกตัวแปรจากที่อยู่ IP ของผู้เข้าชมและหน้านั้นถูกแคช ผู้อ่านชาวยุโรปอาจได้รับหน้าของสหรัฐฯ ที่แคชไว้ หรือในทางกลับกัน

สามรูปแบบช่วยหลีกเลี่ยงปัญหานี้:

  1. การระบุตำแหน่งฝั่งไคลเอนต์ ให้ CMP กำหนดภูมิภาคในเบราว์เซอร์ เพื่อให้ HTML ที่แคชเหมือนกันสำหรับทุกคน
  2. ประเทศในคีย์แคช หากต้องตัดสินใจที่ edge ให้ใส่รหัสประเทศที่ CDN ของคุณให้มาในคีย์แคช คุณจะได้สำเนาแคชหนึ่งชุดต่อประเทศ ซึ่งคาดการณ์ได้
  3. ตรรกะ 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 เมื่อหน้าถูกกู้คืนจากแคชนี้ ให้อ่านสถานะความยินยอมที่เก็บไว้ใหม่ และหยุดหรือเริ่มแท็กให้ตรงกัน

ขั้นตอนการทดสอบ

ประเด็นสำคัญ

← บล็อก อ่านทั้งหมด →