กลยุทธ์การแคชส่วนหน้า: HTTP Cache และ Service Worker Cache

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

ทำความเข้าใจพื้นฐานของการแคช

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

มีแคชหลายระดับ รวมถึงแคชของเบราว์เซอร์ พร็อกซีแคช และแคชฝั่งเซิร์ฟเวอร์ บทความนี้เน้นที่การแคชส่วนหน้า โดยเฉพาะวิธีใช้ประโยชน์จาก HTTP cache ในตัวของเบราว์เซอร์และ Service Worker cache ที่มีความซับซ้อนมากขึ้น

HTTP Caching: ใช้ประโยชน์จากความสามารถของเบราว์เซอร์

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

ส่วนหัว HTTP Cache ที่สำคัญ

• Cache-Control: นี่คือส่วนหัวที่สำคัญที่สุดสำหรับการควบคุม HTTP caching ซึ่งช่วยให้คุณสามารถระบุคำสั่งต่างๆ ได้ เช่น:
• max-age=seconds: ระบุเวลาสูงสุดที่ทรัพยากรจะถือว่าใหม่ หลังจากเวลานี้ เบราว์เซอร์จะต้องตรวจสอบความถูกต้องของแคชกับเซิร์ฟเวอร์อีกครั้ง ตัวอย่าง: Cache-Control: max-age=3600 (แคชเป็นเวลา 1 ชั่วโมง)
• s-maxage=seconds: คล้ายกับ max-age แต่ใช้เฉพาะกับแคชที่ใช้ร่วมกัน เช่น CDN ตัวอย่าง: Cache-Control: max-age=3600, s-maxage=86400 (แคชเป็นเวลา 1 ชั่วโมงในเบราว์เซอร์, 1 วันใน CDN)
• public: ระบุว่าการตอบสนองสามารถแคชได้โดยแคชใดๆ รวมถึงแคชที่ใช้ร่วมกัน
• private: ระบุว่าการตอบสนองสามารถแคชได้โดยเบราว์เซอร์เท่านั้น ไม่ใช่แคชที่ใช้ร่วมกัน มีประโยชน์สำหรับข้อมูลเฉพาะของผู้ใช้
• no-cache: บังคับให้เบราว์เซอร์ตรวจสอบความถูกต้องของแคชกับเซิร์ฟเวอร์อีกครั้งก่อนใช้งาน แม้ว่าจะยังใหม่ก็ตาม
• no-store: ป้องกันไม่ให้เบราว์เซอร์แคชการตอบสนองเลย
• Expires: ส่วนหัวเก่ากว่าที่ระบุวันที่และเวลาแน่นอนที่ทรัพยากรหมดอายุ โดยทั่วไป Cache-Control จะแทนที่ Expires หากมีทั้งคู่ ตัวอย่าง: Expires: Wed, 21 Oct 2024 07:28:00 GMT
• ETag: ตัวระบุเฉพาะสำหรับทรัพยากรเวอร์ชันเฉพาะ เบราว์เซอร์ส่ง ETag ในส่วนหัวคำขอ If-None-Match ระหว่างการตรวจสอบความถูกต้อง หากทรัพยากรไม่เปลี่ยนแปลง เซิร์ฟเวอร์จะส่งการตอบสนอง 304 Not Modified ซึ่งระบุว่าเบราว์เซอร์สามารถใช้เวอร์ชันที่แคชไว้ได้
• Last-Modified: ระบุเวลาล่าสุดที่ทรัพยากรถูกแก้ไข เบราว์เซอร์ส่งวันที่ Last-Modified ในส่วนหัวคำขอ If-Modified-Since ระหว่างการตรวจสอบความถูกต้อง เช่นเดียวกับ ETag เซิร์ฟเวอร์สามารถส่งการตอบสนอง 304 Not Modified หากทรัพยากรไม่เปลี่ยนแปลง

ตัวอย่างการแคช HTTP ในทางปฏิบัติ

ตัวอย่างที่ 1: การแคชเนื้อหาแบบคงที่ (รูปภาพ, CSS, JavaScript):

สำหรับเนื้อหาแบบคงที่ที่ไม่ค่อยมีการเปลี่ยนแปลง คุณสามารถตั้งค่า max-age เป็นค่าที่ยาวได้:

            Cache-Control: public, max-age=31536000  

            

              
                Copy
              
            
          

สิ่งนี้บอกเบราว์เซอร์ให้แคชทรัพยากรเป็นเวลาหนึ่งปี (31,536,000 วินาที) และสามารถแคชได้โดยแคชใดๆ (public)

ตัวอย่างที่ 2: การแคชเนื้อหาไดนามิกด้วยการตรวจสอบความถูกต้อง:

สำหรับเนื้อหาไดนามิกที่มีการเปลี่ยนแปลงบ่อยขึ้น คุณสามารถใช้ no-cache ร่วมกับ ETag หรือ Last-Modified เพื่อตรวจสอบความถูกต้อง:

            Cache-Control: no-cache, must-revalidate
ETag: "unique-etag-value"

            

              
                Copy
              
            
          

สิ่งนี้บังคับให้เบราว์เซอร์ตรวจสอบความถูกต้องของแคชกับเซิร์ฟเวอร์อีกครั้งก่อนใช้งาน จากนั้นเซิร์ฟเวอร์สามารถใช้ ETag เพื่อตรวจสอบว่าทรัพยากรมีการเปลี่ยนแปลงหรือไม่ และส่งการตอบสนอง 304 Not Modified หากไม่มีการเปลี่ยนแปลง

ตัวอย่างที่ 3: การให้บริการเนื้อหาที่มีเวอร์ชัน:

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการแคช HTTP

• ใช้ CDN: Content Delivery Networks (CDNs) กระจายเนื้อหาเว็บไซต์ของคุณไปยังเซิร์ฟเวอร์หลายแห่งที่อยู่ใกล้กับผู้ใช้มากขึ้นทางภูมิศาสตร์ สิ่งนี้ช่วยลดเวลาแฝงและปรับปรุงเวลาในการโหลด โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ในส่วนต่างๆ ของโลก CDN ยอดนิยม ได้แก่ Cloudflare, Akamai และ Amazon CloudFront เว็บไซต์ในญี่ปุ่นที่โหลดรูปภาพจากเซิร์ฟเวอร์ในยุโรปจะได้รับประโยชน์อย่างมากจาก CDN ที่มีเซิร์ฟเวอร์ในเอเชีย
• ใช้ประโยชน์จากการแคชของเบราว์เซอร์: กำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อส่งส่วนหัว HTTP cache ที่เหมาะสมสำหรับเนื้อหาทั้งหมดของคุณ
• ใช้เทคนิคการล้างแคช: ใช้เทคนิคต่างๆ เช่น การกำหนดเวอร์ชันหรือพารามิเตอร์การสืบค้นเพื่อบังคับให้เบราว์เซอร์ดาวน์โหลดเนื้อหาที่อัปเดตเมื่อมีการเปลี่ยนแปลง
• ตรวจสอบประสิทธิภาพของแคช: ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์และการวิเคราะห์ฝั่งเซิร์ฟเวอร์เพื่อตรวจสอบอัตราการเข้าชมแคชและระบุจุดที่ต้องปรับปรุง

Service Worker Cache: การควบคุมขั้นสูงและความสามารถแบบออฟไลน์

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

Service Workers เป็นเทคโนโลยีหลักที่อยู่เบื้องหลัง Progressive Web Apps (PWAs) ช่วยให้สามารถใช้งานคุณสมบัติต่างๆ เช่น การเข้าถึงแบบออฟไลน์ การแจ้งเตือนแบบพุช และการซิงโครไนซ์พื้นหลัง

Service Workers ทำงานอย่างไร

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

API Service Worker ที่สำคัญสำหรับการแคช

• Cache API: จัดเตรียมกลไกสำหรับการจัดเก็บและดึงข้อมูลการตอบสนองที่แคชไว้ ช่วยให้คุณสามารถสร้างแคชที่มีชื่อและเพิ่ม อัปเดต และลบรายการได้
• Fetch API: ใช้เพื่อสร้างคำขอเครือข่ายจาก Service Worker
• addEventListener('install', ...): ตัวจัดการเหตุการณ์ที่ทำงานเมื่อติดตั้ง service worker เป็นครั้งแรก โดยทั่วไปจะใช้เพื่อแคชเนื้อหาที่สำคัญล่วงหน้า
• addEventListener('activate', ...): ตัวจัดการเหตุการณ์ที่ทำงานเมื่อ service worker เปิดใช้งาน โดยทั่วไปจะใช้เพื่อล้างแคชเก่า
• addEventListener('fetch', ...): ตัวจัดการเหตุการณ์ที่สกัดกั้นคำขอเครือข่าย นี่คือที่ที่ตรรกะการแคชอยู่

กลยุทธ์การแคชด้วย Service Workers

Service Workers ช่วยให้คุณสามารถใช้กลยุทธ์การแคชต่างๆ ที่ปรับให้เหมาะกับประเภททรัพยากรและสภาวะเครือข่ายที่แตกต่างกัน นี่คือกลยุทธ์ทั่วไปบางส่วน:

• Cache First: ให้บริการทรัพยากรจากแคชเสมอหากมี หากไม่มีในแคช ให้ดึงข้อมูลจากเครือข่ายและจัดเก็บไว้ในแคชเพื่อใช้ในอนาคต เหมาะสำหรับเนื้อหาแบบคงที่ที่ไม่ค่อยมีการเปลี่ยนแปลง
• Network First: พยายามดึงข้อมูลทรัพยากรจากเครือข่ายก่อนเสมอ หากเครือข่ายพร้อมใช้งาน ให้ให้บริการทรัพยากรและอัปเดตแคช หากเครือข่ายไม่พร้อมใช้งาน ให้ให้บริการทรัพยากรจากแคช เหมาะสำหรับเนื้อหาไดนามิกที่ต้องเป็นปัจจุบันที่สุดเท่าที่จะเป็นไปได้
• Cache, then Network: ให้บริการทรัพยากรจากแคชทันที พร้อมกับการดึงข้อมูลเวอร์ชันล่าสุดจากเครือข่ายพร้อมกัน อัปเดตแคชด้วยเวอร์ชันใหม่เมื่อมาถึง สิ่งนี้ให้การโหลดเริ่มต้นที่รวดเร็วและช่วยให้มั่นใจได้ว่าผู้ใช้จะได้รับเนื้อหาล่าสุดในที่สุด
• Stale-While-Revalidate: ให้บริการทรัพยากรจากแคชทันที ในพื้นหลัง ให้ดึงข้อมูลเวอร์ชันล่าสุดจากเครือข่ายและอัปเดตแคช ในครั้งต่อไปที่มีการร้องขอทรัพยากร จะมีการให้บริการเวอร์ชันที่อัปเดตแล้ว กลยุทธ์นี้ให้การโหลดเริ่มต้นที่รวดเร็วและช่วยให้มั่นใจได้ว่าผู้ใช้จะได้รับเวอร์ชันล่าสุดเสมอในที่สุด โดยไม่ปิดกั้นคำขอเริ่มต้น
• Network Only: ดึงข้อมูลทรัพยากรจากเครือข่ายเสมอ ห้ามใช้แคช เหมาะสำหรับทรัพยากรที่ไม่ควรแคช เช่น ข้อมูลผู้ใช้ที่ละเอียดอ่อน
• Cache Only: ให้บริการทรัพยากรจากแคชเสมอ ห้ามดึงข้อมูลจากเครือข่าย มีประโยชน์สำหรับสถานการณ์ที่คุณต้องการให้แน่ใจว่าทรัพยากรพร้อมใช้งานแบบออฟไลน์เสมอ

ตัวอย่างการแคช Service Worker ในทางปฏิบัติ

ตัวอย่างที่ 1: กลยุทธ์ Cache First สำหรับเนื้อหาแบบคงที่:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it.
            const responseToCache = response.clone();

            caches.open('my-site-cache')
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

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

ตัวอย่างที่ 2: กลยุทธ์ Stale-While-Revalidate สำหรับเนื้อหาไดนามิก:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('my-site-cache').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      })
    })
  );
});

            

              
                Copy
              
            
          

โค้ดนี้สาธิตกลยุทธ์ Stale-While-Revalidate Service Worker จะให้บริการทรัพยากรจากแคชทันที ในพื้นหลัง จะดึงข้อมูลเวอร์ชันล่าสุดจากเครือข่ายและอัปเดตแคช ในครั้งต่อไปที่มีการร้องขอทรัพยากร จะมีการให้บริการเวอร์ชันที่อัปเดตแล้ว

แนวทางปฏิบัติที่ดีที่สุดสำหรับการแคช Service Worker

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

เปรียบเทียบ HTTP Cache และ Service Worker Cache

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

ข้อควรพิจารณาด้าน Global สำหรับการแคช

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

• สภาวะเครือข่าย: ผู้ใช้ในภูมิภาคต่างๆ อาจประสบกับความเร็วและความน่าเชื่อถือของเครือข่ายที่แตกต่างกัน ปรับกลยุทธ์การแคชของคุณให้สอดคล้องกับความแตกต่างเหล่านี้ ตัวอย่างเช่น ผู้ใช้ในพื้นที่ที่มีการเข้าถึงอินเทอร์เน็ตที่ไม่น่าเชื่อถือจะได้รับประโยชน์อย่างมากจากการรองรับออฟไลน์ที่แข็งแกร่ง
• ความครอบคลุมของ CDN: เลือก CDN ที่มีเครือข่ายเซิร์ฟเวอร์ทั่วโลกเพื่อให้แน่ใจว่าเนื้อหาของคุณถูกส่งไปยังผู้ใช้อย่างรวดเร็วในทุกภูมิภาค ตรวจสอบว่า CDN มี Points of Presence (PoPs) ในภูมิภาคที่สำคัญสำหรับผู้ชมของคุณ
• ความเป็นส่วนตัวของข้อมูล: คำนึงถึงกฎระเบียบด้านความเป็นส่วนตัวของข้อมูลในประเทศต่างๆ เมื่อแคชข้อมูลเฉพาะของผู้ใช้ ตรวจสอบให้แน่ใจว่าคุณปฏิบัติตามกฎหมาย เช่น GDPR และ CCPA
• ภาษาและการแปล: พิจารณาการแคชเว็บไซต์เวอร์ชันที่แปลเป็นภาษาท้องถิ่นเพื่อให้ผู้ใช้ในภาษาและภูมิภาคต่างๆ ได้รับประสบการณ์ที่ดีขึ้น
• การล้างแคช: ใช้กลยุทธ์การล้างแคชที่เชื่อถือได้เพื่อให้แน่ใจว่าผู้ใช้จะได้รับเนื้อหาล่าสุดเสมอ แม้ว่าจะมีการเปลี่ยนแปลงบ่อยครั้ง ให้ความสนใจเป็นพิเศษกับการอัปเดตเนื้อหาที่แปลเป็นภาษาท้องถิ่น

สรุป

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