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

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

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

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

นั่นคือที่มาของคำแนะนำทรัพยากร

ในบรรทัดต่อไปนี้ เราจะมาดูวิธีใช้ประโยชน์จากข้อดีเหล่านี้ให้ดีที่สุด

มาดำดิ่งลงไปกันเถอะ

วิธีการทำงานของเบราว์เซอร์ (โดยสังเขป)

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

เราสามารถแบ่งกระบวนการทั้งหมดของเบราว์เซอร์ที่โหลดหน้าเว็บออกเป็นสามขั้นตอน:

• สร้างการเชื่อมต่อ
• ดาวน์โหลด แยกวิเคราะห์ และแสดงโค้ด
• ทำให้หน้าโต้ตอบ;

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

เมื่อทุกอย่างเสร็จสิ้น เบราว์เซอร์สามารถดำเนินการดาวน์โหลดและแยกวิเคราะห์ข้อมูล สร้าง Document Object Model (DOM) และ CSS Object Model (CSSOM) แล้วแสดงผลเนื้อหา

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

โดยสรุป นั่นคือกระบวนการเบื้องหลังทุกครั้งที่โหลดหน้า

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

คำแนะนำทรัพยากร: ดึงข้อมูลล่วงหน้า เชื่อมต่อล่วงหน้า โหลดล่วงหน้า

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

คำแนะนำทรัพยากรทั้งหมดใช้แอตทริบิวต์ rel ขององค์ประกอบ ลิงก์ ที่คุณจะพบในส่วน หัว ของเอกสาร HTML

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

และตอนนี้ที่ข้อมูลพื้นฐานอยู่ข้างหลังเรา ให้ไปยังส่วนที่คุณอยู่ - ภาพรวมของคำแนะนำทรัพยากร ประโยชน์ และเมื่อใดควรใช้

โหลดล่วงหน้า

link rel=prefetch เป็นคำใบ้ทรัพยากรที่มีลำดับความสำคัญต่ำที่ช่วยให้เบราว์เซอร์ดึงทรัพยากรที่อาจจำเป็นในภายหลังและจัดเก็บไว้ในแคชของเบราว์เซอร์

เนื่องจากการ ดึงข้อมูลล่วงหน้า ตั้งค่าลำดับความสำคัญต่ำมาก อย่าใช้คำใบ้นี้สำหรับไฟล์ที่มีความสำคัญสูง

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

คุณสามารถปรับปรุงเมตริกต่างๆ เช่น First Contentful Paint และ Time to Interactive โดยคาดการณ์ขั้นตอนของผู้เข้าชมในไซต์ของคุณและดึงทรัพยากรล่วงหน้า สิ่งที่ Netflix ทำและลดเวลาในการโต้ตอบลง 30%

ทุกสิ่งที่เรากล่าวถึงจนถึงจุดนี้เกี่ยวข้องกับการดึงข้อมูลล่วงหน้า หรือที่เรียกว่าการดึงข้อมูลล่วงหน้าของลิงก์ แต่มีการดึงข้อมูลล่วงหน้าอีกสองประเภทที่สำคัญเท่าเทียมกัน และเราต้องพูดถึง:

1. การดึงข้อมูล DNS ล่วงหน้า
เบราว์เซอร์จำเป็นต้องทำการค้นหา DNS เพื่อแปลงชื่อโฮสต์ (URL) เป็นที่อยู่ IP ก่อนเชื่อมต่อกับโฮสต์ (เซิร์ฟเวอร์ต้นทาง)

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

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

ตามที่แนะนำใน Web Almanac 2021 แนวปฏิบัติที่ดีคือการรวม DNS-prefetch เข้ากับคำใบ้การ เชื่อมต่อล่วงหน้า เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด คุณสามารถดูสาเหตุได้ในส่วนที่เราพูดถึงการ เชื่อมต่อล่วงหน้า

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

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

เช่นเดียวกับ dns-prefetch คำสั่ง เชื่อมต่อล่วงหน้า ช่วยให้เบราว์เซอร์สร้างการเชื่อมต่อตั้งแต่เนิ่นๆ ก่อนส่งคำขอเริ่มต้นไปยังเซิร์ฟเวอร์

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

แต่มีคำถามตามมาว่า

หากการ เชื่อมต่อล่วงหน้า ทำทุกอย่าง ที่ dns-prefetch ทำ และเหนือกว่านั้น ทำไมฉันถึงใช้ dns-prefetch ตั้งแต่แรก

ในกรณีส่วนใหญ่ การ เชื่อมต่อล่วงหน้า เป็นตัวเลือกที่ดีกว่าสำหรับ dns-prefetch แต่ปัญหาคือการ เชื่อมต่อล่วงหน้า ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์บางตัว:

ที่มา: caniuse.com

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

ตามที่ Google:

ย้อนกลับไปในปี 2019 Chrome สามารถปรับปรุง Time To Interactive ได้เกือบ 1 วินาทีโดยเชื่อมต่อกับต้นกำเนิดที่สำคัญล่วงหน้า

พรีโหลด

ก่อนที่จะอธิบายว่าคำสั่ง พรีโหลด ทำงานอย่างไร เราต้องทำให้ชัดเจนก่อน

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

ดังที่กล่าวไว้ พรีโหลด ใช้เพื่อบังคับให้เบราว์เซอร์ดาวน์โหลดทรัพยากร เร็วกว่าที่เบราว์เซอร์จะค้นพบเพราะเป็นสิ่งสำคัญสำหรับหน้า

คำสั่งการ โหลดล่วงหน้า ทำงานได้ดีที่สุดกับทรัพยากรที่เป็นส่วนหนึ่งของเส้นทางการแสดงผลที่สำคัญ แต่เบราว์เซอร์ไม่สามารถค้นพบได้ง่าย ตัวอย่างเช่น แบบอักษร CSS หรือ JavaScript ที่สำคัญ

ความแตกต่างอีกประการจากคำแนะนำ dns-prefetch และ preconnect ก็คือ แม้ว่าพวกเขาต้องการเพียง แอตทริบิวต์ rel และ href แต่การ โหลดล่วงหน้า นั้นซับซ้อนกว่า คุณต้องเพิ่มแอตทริบิวต์ เป็น ซึ่งระบุประเภทเนื้อหาของทรัพยากรที่คุณต้องการโหลดล่วงหน้า

ตามที่ Addy Osmani ผู้จัดการฝ่ายวิศวกรรมของ Google ระบุ เป็น แอตทริบิวต์เมื่อจำเป็นต้องโหลดล่วงหน้า:

นี่คือรายการที่สมบูรณ์ของค่า ที่ คุณสามารถระบุได้:

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

ดูเอกสารการจัดลำดับความสำคัญของทรัพยากร Chrome และการจัดกำหนดการเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการจัดลำดับความสำคัญของทรัพยากรประเภทต่างๆ

สำหรับทรัพยากรบางอย่าง เช่น ฟอนต์ คุณต้องรวมแอตทริบิวต์ crossorigin ด้วย

แอตทริบิวต์ crossorigin ตั้งค่าโหมดของคำขอเป็นคำขอ HTTP CORS CORS (Cross-Origin Resource Sharing) เป็นกลไกที่ช่วยให้เซิร์ฟเวอร์สามารถระบุต้นทางอื่น ๆ นอกเหนือจากที่เบราว์เซอร์ควรอนุญาตให้โหลดทรัพยากร เราจะไม่ลงลึกในเรื่องนี้เนื่องจากไม่ใช่จุดสนใจของบทความนี้ แต่คุณสามารถหาข้อมูลเพิ่มเติมได้ที่นี่

และคล้ายกับแอตทริบิวต์ as การโหลดฟอนต์ล่วงหน้าโดยไม่มี crossorigin จะดึงข้อมูลสองเท่า นี่เป็นอีกข้อความที่ตัดตอนมาจากบทความของ Addy Osmani ในหัวข้อ:

คำแนะนำทรัพยากรเพิ่มเติม ปัญหาเพิ่มเติม

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

น่าเสียดายที่นี่ไม่ใช่กรณี

ต่อไปนี้คือข้อเสียบางประการที่คุณควรคำนึงถึงเมื่อผสานรวมคำแนะนำทรัพยากร:

1. การดึงข้อมูลล่วงหน้าอาจเพิ่มการใช้ข้อมูล

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

2. Prerender อาจทำให้แบนด์วิธเสียได้

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

3. การเชื่อมต่อล่วงหน้าอาจทำให้มีการใช้งาน CPU เพิ่มขึ้น

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

4. โหลดล่วงหน้าจะแทนที่ลำดับความสำคัญที่กำหนดโดยตัววิเคราะห์ของเบราว์เซอร์

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

สรุป

เราได้กล่าวถึงประเด็นต่างๆ มากมายในบทความนี้ เรามาสรุปประเด็นสำคัญที่สำคัญที่สุดกัน:

• dns-prefetch และ preconnect ใช้เพื่อจัดลำดับความสำคัญของชื่อโดเมน (เช่น https://example.com)
• การ ดึงข้อมูลล่วงหน้า และ โหลดล่วงหน้า ใช้เพื่อจัดลำดับความสำคัญการโหลดทรัพยากร แม้ว่าการ ดึงข้อมูลล่วงหน้า จะใช้ในการปรับปรุงเวลาในการโหลดของหน้าถัดไป การ โหลดล่วงหน้า จะทำงานได้ดีที่สุดกับทรัพยากรที่สำคัญสำหรับหน้าปัจจุบัน
• การแสดงผล ล่วงหน้า อ้างอิงทั้งหน้า (เช่น blog.html)
• prefetch , prerender และ preconnect เป็นคำแนะนำทรัพยากรและจะดำเนินการตามที่เบราว์เซอร์เห็นสมควร คำสั่ง พรีโหลด เป็นคำสั่งที่จำเป็นสำหรับเบราว์เซอร์
• เมื่อใช้ preload อย่าลืมระบุแอตทริบิวต์ as และ crossorigin เพื่อหลีกเลี่ยงการดึงข้อมูลซ้ำซ้อน
• แม้ว่าคำแนะนำทรัพยากรจะเป็นคำแนะนำที่มีลำดับความสำคัญต่ำ แต่ก็ยังเป็นภัยคุกคามต่อประสิทธิภาพของไซต์ของคุณ ใช้ในปริมาณที่พอเหมาะและเมื่อจำเป็นเท่านั้น
• โหลดล่วงหน้า เป็นคำสั่งที่มีประสิทธิภาพที่สามารถแทนที่ลำดับความสำคัญของตัววิเคราะห์ของเบราว์เซอร์ได้ อย่าลืมว่าเบราว์เซอร์สมัยใหม่นั้นค่อนข้างดีในการจัดลำดับความสำคัญของทรัพยากร ดังนั้นโปรดใช้ "คำใบ้" ที่ โหลดล่วงหน้า ไว้เท่าที่จำเป็น

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