ชอบแคชของคุณ ❤️

ผู้ใช้ที่โหลดเว็บไซต์ของคุณเป็นครั้งที่ 2 จะใช้แคช HTTP ดังนั้นโปรดตรวจสอบว่า ได้ผลดี

Sam Thorogood

โพสต์นี้แสดงร่วมกับวิดีโอรักแคชของคุณ ซึ่งเป็นส่วนหนึ่งของ Extended เนื้อหาในงาน Chrome Dev Summit 2020 อย่าลืมดูวิดีโอเลย

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

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

เป้าหมาย

เมื่อเว็บไซต์โหลดเป็นครั้งที่ 2 คุณมีเป้าหมาย 2 ประการ ดังนี้

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

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

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

ข้อมูลเบื้องต้น

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

ผู้ใช้ทั่วไปบนอินเทอร์เน็ต แต่ละคนไม่ได้มีความหรูหราขนาดนั้น ดังนั้นขณะที่เรา มีเป้าหมายหลักบางประการ เพื่อให้ผู้ใช้ของเราได้รับประสบการณ์ในการใช้งานที่ 2 การโหลดแอป YouTube ก็สำคัญเช่นกัน ช่วยตรวจสอบว่าพวกเขาจะไม่เกิดเวลาแย่ หรือ ติดขัด (ดูวิดีโอหากต้องการฟังเราพูดถึงวิธีที่เรา ทำให้เว็บไซต์ web.dev/live ค้าง)

มาดูเหตุผลทั่วไปที่มักทำให้เกิด "แคชเก่า" จริงๆ แล้ว ซึ่งเป็นค่าเริ่มต้นสำหรับการแคชในยุค 1999 ต้องใช้ส่วนหัว Last-Modified ดังนี้

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

ไฟล์ทุกไฟล์ที่คุณโหลดจะเก็บไว้ อีก 10% ของอายุการใช้งานปัจจุบัน กับเบราว์เซอร์ของคุณ เช่น หาก index.html สร้างขึ้นเมื่อ 1 เดือนที่ผ่านมา เบราว์เซอร์จะถูกแคชไว้อีกประมาณ 3 วัน

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

เส้นทางที่มีแสงสว่างเพียงพอ

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

คุณสามารถกำหนดค่าโฮสต์เว็บให้ตอบกลับคำขอเว็บด้วยส่วนหัวนี้

Cache-Control: max-age=0,must-revalidate,public

โดยพื้นฐานแล้ว ไฟล์นี้สามารถใช้ได้นานเป็นพิเศษ และคุณต้องตรวจสอบ จากเครือข่ายก่อนที่คุณจะใช้งานได้อีกครั้ง (มิฉะนั้นจะ "suggested")

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

อย่างไรก็ตาม นี่เป็นวิธีการสมัยใหม่ที่ เป็นค่าเริ่มต้นใน CDN ยอดนิยม, Netlify แต่สามารถกำหนดค่าบน CDN ได้เกือบทุกรายการ สำหรับโฮสติ้งของ Firebase คุณจะระบุ ส่วนหัวนี้ ในส่วนโฮสติ้ง ของไฟล์ firebase.json

"headers": [
  // Be sure to put this last, to not override other headers
  {
    "source": "**",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=0,must-revalidate,public"
    }
  }
]

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

URL ที่มีลายนิ้วมือ

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

Cache-Control: max-age=31536000,immutable

ค่านี้คือปีในหน่วยวินาที และตามข้อกำหนดแล้ว นี่เป็น เท่ากับ "ตลอดไป"

ที่สำคัญคืออย่าสร้างแฮชเหล่านี้ด้วยตัวเอง เพราะเป็นงานที่ต้องทำเองมากเกินไป คุณ สามารถใช้เครื่องมือต่างๆ เช่น Webpack, Rollup และอื่นๆ เพื่อช่วยคุณในเรื่องนี้ ตรวจสอบให้แน่ใจว่า เพื่ออ่านเพิ่มเติมในรายงานการใช้เครื่องมือ

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

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

แน่นอนว่าเราไม่สามารถเปลี่ยนชื่อหน้าเว็บที่ 'เป็นมิตร' ต่อผู้ใช้ได้ เช่น การเปลี่ยนชื่อ ไฟล์ index.html ของคุณไปยัง index.abcd12.html - เป็นไปไม่ได้เลย คุณยังบอกไม่ได้ ไปที่ URL ใหม่ทุกครั้งที่โหลดเว็บไซต์ "มีความเป็นมิตร" URL และจะไม่สามารถเปลี่ยนชื่อและแคชด้วยวิธีนี้ พื้นดิน

พื้นตรงกลาง

แน่นอนว่าการแคชมีที่ว่างตรงกลาง ฉัน ได้นำเสนอ 2 ตัวเลือกที่ยอดเยี่ยมที่สุด ได้แก่ แคช never หรือแคช forever และจะ เป็นตัวเลขที่คุณอาจต้องการแคชในช่วงเวลาหนึ่ง เช่น "เป็นมิตร" URL ที่ฉันกล่าวถึงข้างต้น

ถ้าคุณต้องการแคช "friendly" เหล่านี้ URL และ HTML ของลิงก์นั้น โดยพิจารณาจากทรัพยากร Dependency ที่รวมอยู่ด้วย วิธีแคชรายการเหล่านั้น และวิธีการ การแคช URL ของพวกเขาเป็นระยะเวลาหนึ่งอาจส่งผลกระทบต่อคุณ เราลองมาดูหน้า HTML ซึ่ง มีรูปภาพดังนี้

<img src="/images/foo.jpeg" loading="lazy" />

หากคุณอัปเดตหรือเปลี่ยนแปลงเว็บไซต์ด้วยการลบหรือเปลี่ยนการโหลดแบบ Lazy Loading นี้ ผู้ใช้ที่ดู HTML เวอร์ชันแคชของคุณอาจได้รับการแสดงผลที่ไม่ถูกต้อง หรือ ไม่มีรูปภาพ เนื่องจากยังแคช /images/foo.jpeg เดิมไว้เมื่อ เข้าชมเว็บไซต์อีกครั้ง

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

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

Cache-Control: max-age=3600,immutable,public

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

ตัวเลือกที่ไม่ใช่ HTML

นอกจาก HTML แล้ว ยังมีตัวเลือกอื่นๆ อีกบางรายการสำหรับไฟล์ที่อยู่อยู่ตรงกลาง รวมข้อมูลต่อไปนี้

  • โดยทั่วไป ให้มองหาชิ้นงานที่ไม่ส่งผลต่อผู้อื่น

    • เช่น หลีกเลี่ยง CSS เนื่องจากจะทำให้ HTML เปลี่ยนแปลง แสดงผลแล้ว

  • รูปภาพขนาดใหญ่ที่ใช้เป็นส่วนหนึ่งของบทความที่ทันสมัย

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

  • ชิ้นงานที่แสดงถึงสิ่งที่มีตลอดอายุการใช้งาน

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

สรุป

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

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

ดูเพิ่มเติม

สำหรับคำแนะนำทั่วไปเกี่ยวกับแคช HTTP โปรดดูที่ ป้องกันคำขอเครือข่ายที่ไม่จำเป็นด้วยแคช HTTP