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

Demián Renzulli

ในโค้ดแล็บนี้ คุณจะใช้การจําล่วงหน้าได้ 2 วิธี ได้แก่ การใช้ <link rel="prefetch"> และการใช้ส่วนหัว HTTP Link

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

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

ขั้นแรก ให้สร้างประสิทธิภาพพื้นฐาน

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

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

  5. ในรายการแบบเลื่อนลงการจำกัด ให้เลือก 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. ในรายการแบบเลื่อนลงการควบคุม ให้เลือก 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 และระบุว่าทรัพยากรเป็น HTML document ในแอตทริบิวต์ 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. ในรายการแบบเลื่อนลงการควบคุมปริมาณ ให้เลือกออนไลน์
  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 มิลลิวินาที