เพิ่มประสิทธิภาพด้วยคำแนะนำทรัพยากร

เผยแพร่แล้ว: 2022-03-10
สรุปโดยย่อ ↬ สามารถเพิ่มประสิทธิภาพการทำงานได้หลายอย่างเมื่อเราสามารถคาดการณ์สิ่งที่ผู้ใช้อาจทำก่อนลงมือทำจริง คำแนะนำด้านทรัพยากรเป็นวิธีง่ายๆ แต่มีประสิทธิภาพที่นักพัฒนาเว็บสามารถช่วยให้เบราว์เซอร์นำหน้าผู้ใช้หนึ่งก้าวและทำให้หน้าเว็บทำงานได้อย่างรวดเร็ว

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

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

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

คำแนะนำทรัพยากรทั้งหมดเหล่านี้ใช้แอตทริบิวต์ rel ขององค์ประกอบ <link> ที่คุณจะคุ้นเคยกับการค้นหาใน <head> ของเอกสาร HTML ของคุณ ในบทความนี้ เราจะมาดูประเภทหลักของ Resource Hints และเมื่อใดและที่ใดที่เราสามารถใช้คำแนะนำเหล่านี้ในเพจของเรา เราจะเริ่มจากคำแนะนำเล็กๆ น้อยๆ ไปจนถึงปืนใหญ่ในตอนท้าย

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

การดึงข้อมูล DNS ล่วงหน้า

การค้นหา DNS เป็นกระบวนการในการเปลี่ยนชื่อโดเมนที่เป็นมิตรกับมนุษย์ เช่น example.com ให้เป็นที่อยู่ IP ที่เหมาะกับเครื่อง เช่น 123.54.92.4 ซึ่งจำเป็นจริง ๆ เพื่อดึงทรัพยากร

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

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

 <link rel="dns-prefetch" href="https://images.example.com">

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

ฉันควรใช้ dns-prefetch เมื่อใด

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

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

เชื่อมต่อล่วงหน้า

ขั้นตอนเดียวในการดึงข้อมูล DNS ล่วงหน้าคือการ เชื่อมต่อล่วงหน้า กับเซิร์ฟเวอร์ การสร้างการเชื่อมต่อกับเซิร์ฟเวอร์ที่โฮสต์ทรัพยากรนั้นมีหลายขั้นตอน:

  • การค้นหา DNS (อย่างที่เราเพิ่งพูดถึง);
  • TCP จับมือ
    "การสนทนา" สั้นๆ ระหว่างเบราว์เซอร์และเซิร์ฟเวอร์เพื่อสร้างการเชื่อมต่อ
  • การเจรจา TLS บนไซต์ HTTPS
    นี่เป็นการตรวจสอบว่าข้อมูลใบรับรองถูกต้องและถูกต้องสำหรับการเชื่อมต่อ

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

 <link rel="preconnect" href="https://scripts.example.com">

ฉันควรใช้การ preconnect เมื่อใด

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

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

กำลังดึงหน้าถัดไปล่วงหน้า

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

อย่างแรกคือการดึงข้อมูลล่วงหน้า และแท็กลิงก์อาจมีลักษณะดังนี้:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

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

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

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

as แอตทริบิวต์

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

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

ค่าของ as ประเภทของทรัพยากร
audio ไฟล์เสียงและเพลง
video วีดีโอ
Track แทร็กวิดีโอหรือเสียง WebVTT
script ไฟล์จาวาสคริปต์
style สไตล์ชีต CSS
font แบบอักษรเว็บ
image รูปภาพ
fetch คำขอ XHR และดึงข้อมูล API
worker พนักงานเว็บ
embed มัลติมีเดีย <embed> คำขอ
object มัลติมีเดีย <object> ร้องขอ
document หน้าเว็บ

ค่าต่างๆ ที่สามารถใช้เพื่อระบุประเภททรัพยากรที่มีแอตทริบิวต์ as

ฉันควรใช้การ prefetch เมื่อใด

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

Prerendering หน้าถัดไป

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

ซึ่งอาจรวมถึงการแยกวิเคราะห์ทรัพยากรสำหรับทรัพยากร ย่อย ใดๆ เช่น ไฟล์ JavaScript และรูปภาพ และการดึงข้อมูลล่วงหน้าเช่นกัน

 <link rel="prerender" href="https://example.com/news/?page=2">

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

ฉันควรใช้ prerender เมื่อใด

ขณะนี้การสนับสนุนเบราว์เซอร์สำหรับการแสดงผล prerender นั้นถูกจำกัดอย่างมาก โดยมีเพียง Chrome และ IE รุ่นเก่า (ไม่ใช่ Edge) เท่านั้นที่ให้การสนับสนุนตัวเลือกดังกล่าว การดำเนินการนี้อาจจำกัดประโยชน์เว้นแต่คุณจะกำหนดเป้าหมาย Chrome อย่างเฉพาะเจาะจง อีกครั้ง เป็นกรณีของ “ไม่เป็นอันตราย ไม่ฟาวล์” เนื่องจากผู้ใช้จะไม่เห็นประโยชน์ แต่จะไม่ก่อให้เกิดปัญหาใดๆ กับพวกเขา หากไม่เป็นเช่นนั้น

การนำคำแนะนำทรัพยากรไปใช้

เราได้เห็นแล้วว่าสามารถใช้คำแนะนำทรัพยากรใน <head> ของเอกสาร HTML โดยใช้แท็ก <link> ได้อย่างไร นั่นอาจเป็นวิธีที่สะดวกที่สุดที่จะทำ แต่คุณสามารถทำสิ่งเดียวกันนี้ได้ด้วยส่วนหัว Link: HTTP

ตัวอย่างเช่น หากต้องการดึงข้อมูลล่วงหน้าด้วยส่วนหัว HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

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

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

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

สิ่งที่ควรทราบ

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

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

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

ความสำคัญของการบำรุงรักษา

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

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

ทรัพยากร

  • “ข้อกำหนดคำแนะนำทรัพยากร” W3C
  • “เร่งความเร็วการนำทางหน้าถัดไปด้วยการดึงข้อมูลล่วงหน้า” Addy Osmani