การดึงข้อมูลล่วงหน้ามี 2 วิธี ได้แก่ แท็ก <ลิงก์> และส่วนหัว HTTP

เดเมียน เรซูลลี

ใน Codelab นี้ คุณจะใช้การดึงข้อมูลล่วงหน้า 2 วิธี ได้แก่ ด้วย <link rel="prefetch"> และส่วนหัว HTTP Link

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

วัดประสิทธิภาพ

ก่อนอื่นให้สร้างประสิทธิภาพพื้นฐาน

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  2. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  3. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

  4. คลิกแท็บเครือข่าย

  5. ในรายการแบบเลื่อนลง Throttling ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า

  6. หากต้องการโหลดหน้าผลิตภัณฑ์ ให้คลิกซื้อเลยในแอปตัวอย่าง

หน้าเว็บ product-details.html จะใช้เวลาประมาณ 600 มิลลิวินาทีในการโหลด:

แผงเครือข่ายที่แสดงเวลาที่ใช้ในการโหลดสำหรับ product-details.html

ดึงข้อมูลหน้าผลิตภัณฑ์ล่วงหน้าด้วย <link rel="prefetch">

หากต้องการปรับปรุงการนำทาง ให้แทรกแท็ก prefetch ในหน้า Landing Page เพื่อดึงข้อมูลหน้า product-details.html ล่วงหน้า โดยทำดังนี้

  • เพิ่มองค์ประกอบ <link> ต่อไปนี้ในส่วนหัวของไฟล์ views/index.html
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

แอตทริบิวต์ as เป็นแอตทริบิวต์ที่ไม่บังคับ แต่แนะนำให้มี เพราะจะช่วยให้เบราว์เซอร์ตั้งค่าส่วนหัวที่ถูกต้องและกำหนดว่าแหล่งข้อมูลอยู่ในแคชแล้วหรือไม่ ค่าตัวอย่างสำหรับแอตทริบิวต์นี้ ได้แก่ document, script, style, font, image และ อื่นๆ

วิธียืนยันว่าการดึงข้อมูลล่วงหน้าใช้งานได้

  1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

  3. คลิกแท็บเครือข่าย

  4. ในรายการแบบเลื่อนลง Throttling ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า

  5. ล้างช่องทำเครื่องหมาย ปิดใช้งานแคช

  6. โหลดแอปซ้ำ

ตอนนี้เมื่อหน้า Landing Page โหลดขึ้น หน้า product-details.html จะโหลดเช่นกัน แต่จะมีลำดับความสำคัญต่ำสุดดังนี้

แผงเครือข่ายที่แสดง product-details.html ที่ดึงข้อมูลล่วงหน้า

หน้าเว็บจะเก็บไว้ในแคช HTTP เป็นเวลา 5 นาที หลังจากนั้นกฎ Cache-Control ปกติสำหรับเอกสารจะมีผล ในกรณีนี้ product-details.html มีส่วนหัว cache-control ที่มีค่าเป็น public, max-age=0 ซึ่งหมายความว่าหน้าเว็บจะคงอยู่เป็นเวลาทั้งหมด 5 นาที

ประเมินประสิทธิภาพอีกครั้ง

  1. โหลดแอปซ้ำ
  2. หากต้องการโหลดหน้าผลิตภัณฑ์ ให้คลิกซื้อเลยในแอปตัวอย่าง

ลองดูที่แผงเครือข่าย การติดตามเครือข่ายเริ่มต้นมีความแตกต่าง 2 ประการดังนี้

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

อัตรานี้ลดลงประมาณ 98% เมื่อเทียบกับเวอร์ชันก่อนหน้า ซึ่งใช้เวลาประมาณ 600 มิลลิวินาที

แผงเครือข่ายที่แสดง product-details.html ที่ดึงมาจากแคชที่ดึงข้อมูลล่วงหน้า

เครดิตเพิ่มเติม: ใช้ prefetch เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง

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

หากต้องการใช้การดึงข้อมูลล่วงหน้าแบบปรับอัตโนมัติ ให้นำแท็ก <link rel="prefetch"> ออกจาก views/index.html ก่อน:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

จากนั้นเพิ่มโค้ดต่อไปนี้ลงใน public/script.js เพื่อประกาศฟังก์ชันที่แทรกแท็ก prefetch แบบไดนามิกเมื่อผู้ใช้มีการเชื่อมต่อที่รวดเร็ว

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

ฟังก์ชันนี้จะทำงานดังนี้

  • โดยจะตรวจสอบพร็อพเพอร์ตี้ effectiveType ของ Network Information API เพื่อระบุว่าผู้ใช้ใช้การเชื่อมต่อ 4G (หรือเร็วกว่า) หรือไม่
  • หากเงื่อนไขดังกล่าวเป็นไปตามเงื่อนไข ก็จะสร้างแท็ก <link> ที่มี prefetch เป็นประเภทคำแนะนำ ส่ง URL ที่จะถูกดึงข้อมูลล่วงหน้าในแอตทริบิวต์ href และระบุว่าทรัพยากรเป็น document ของ HTML ในแอตทริบิวต์ as
  • สุดท้ายจะแทรกสคริปต์แบบไดนามิกใน head ของหน้าเว็บ

จากนั้น เพิ่ม script.js ลงใน views/index.html ก่อนแท็กปิด </body>:

<body>
      ...
      <script src="/script.js"></script>
</body>

การส่งคำขอ script.js ที่ส่วนท้ายของหน้าเว็บจะช่วยให้มั่นใจได้ว่าระบบจะโหลดและดำเนินการหลังจากที่มีการแยกวิเคราะห์และโหลดหน้าเว็บแล้ว

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

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

ตอนนี้หน้า Landing Page จะดึงข้อมูล product-details.html ล่วงหน้าสำหรับการเชื่อมต่อที่มีความเร็วเท่านั้น โดยทำดังนี้

  1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  3. คลิกแท็บเครือข่าย
  4. ในรายการแบบเลื่อนลง Throttling ให้เลือก Online
  5. โหลดแอปซ้ำ

คุณควรเห็น product-details.html ในแผงเครือข่ายดังนี้

แผงเครือข่ายที่แสดง product-details.html ที่ดึงข้อมูลล่วงหน้า

วิธียืนยันว่าหน้าผลิตภัณฑ์ไม่ได้ถูกดึงข้อมูลล่วงหน้าจากการเชื่อมต่อที่ช้า

  1. ในรายการแบบเลื่อนลง "การควบคุม" ให้เลือก 3G ช้า
  2. โหลดแอปซ้ำ

แผงเครือข่ายควรรวมเฉพาะทรัพยากรสำหรับหน้า Landing Page ที่ไม่มี product-details.html ดังนี้

แผงเครือข่ายที่แสดง product-details.html ไม่ได้ดึงข้อมูลล่วงหน้า

ดึงสไตล์ชีตสำหรับหน้าผลิตภัณฑ์ที่มีส่วนหัว HTTP Link ล่วงหน้า

ส่วนหัว HTTP Link สามารถใช้เพื่อดึงข้อมูลทรัพยากรประเภทเดียวกันกับแท็ก link ล่วงหน้า การตัดสินใจว่าเมื่อใดควรใช้สิ่งหนึ่งหรือทางเลือกอื่นๆ ขึ้นอยู่กับความต้องการของคุณเป็นหลัก เนื่องจากความแตกต่างของประสิทธิภาพนั้นไม่มีนัยสำคัญ ในกรณีนี้ คุณจะใช้ค่าดังกล่าวเพื่อดึงข้อมูล CSS หลักของหน้าผลิตภัณฑ์ล่วงหน้าเพื่อปรับปรุงการแสดงผลให้ดียิ่งขึ้น

เพิ่มส่วนหัว HTTP Link สำหรับ style-product.css ในการตอบกลับของเซิร์ฟเวอร์สำหรับหน้า Landing Page ดังนี้

  1. เปิดไฟล์ server.js แล้วมองหาตัวแฮนเดิล get() เพื่อหา URL ราก /
  2. เพิ่มบรรทัดต่อไปนี้ที่จุดเริ่มต้นของเครื่องจัดการ
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  3. คลิกแท็บเครือข่าย
  4. โหลดแอปซ้ำ

ขณะนี้ ระบบจะดึงข้อมูล style-product.css ล่วงหน้าที่ลำดับความสำคัญต่ำสุดหลังจากหน้า Landing Page โหลด

แผงเครือข่ายที่แสดงการดึงข้อมูล style-product.css ล่วงหน้า

หากต้องการไปที่หน้าผลิตภัณฑ์ ให้คลิกซื้อเลย ลองดูที่แผงเครือข่าย

แผงเครือข่ายที่แสดง style-product.css ที่ดึงจากแคชที่ดึงข้อมูลล่วงหน้า

ไฟล์ style-product.css ดึงมาจาก "การดึงข้อมูลแคชล่วงหน้า" และใช้เวลาโหลดเพียง 12 มิลลิวินาที