ใช้การโหลดทันทีด้วยรูปแบบ PRPL

PRPL เป็นตัวย่อที่อธิบายรูปแบบที่ใช้ทำให้หน้าเว็บโหลดและโต้ตอบได้เร็วขึ้น

  • โหลดทรัพยากรที่ค้นพบล่าช้าไว้ล่วงหน้า
  • แสดงเส้นทางเริ่มต้นโดยเร็วที่สุด
  • เนื้อหาที่เหลืออยู่ในแคชล่วงหน้า
  • การโหลดแบบ Lazy Loading เส้นทางอื่นๆ และชิ้นงานที่ไม่สำคัญ

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

ตรวจสอบหน้าเว็บด้วย Lighthouse

เรียกใช้ Lighthouse เพื่อระบุโอกาสในการปรับปรุงที่สอดคล้องกับเทคนิค PRPL ดังนี้

  1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกแท็บ Lighthouse
  3. เลือกช่องทําเครื่องหมายประสิทธิภาพและ Progressive Web App
  4. คลิกดำเนินการตรวจสอบเพื่อสร้างรายงาน

ดูข้อมูลเพิ่มเติมได้ที่ค้นพบโอกาสในการเพิ่มประสิทธิภาพด้วย Lighthouse

โหลดทรัพยากรที่สำคัญล่วงหน้า

Lighthouse แสดงการตรวจสอบที่ล้มเหลวต่อไปนี้หากมีการแยกวิเคราะห์ทรัพยากรบางรายการและดึงข้อมูลล่าช้า

Lighthouse: การตรวจสอบคำขอโหลดคีย์ล่วงหน้า

การโหลดล่วงหน้าคือคำขอดึงข้อมูลแบบประกาศที่บอกให้เบราว์เซอร์ขอทรัพยากรซึ่งโหลดเครื่องสแกนล่วงหน้าของเบราว์เซอร์ไม่พบ เช่น รูปภาพที่พร็อพเพอร์ตี้ background-image อ้างอิง โหลดทรัพยากรที่ค้นพบล่าช้าไว้ล่วงหน้าโดยการเพิ่มแท็ก <link> ที่มี rel="preload" ไว้ที่ส่วนหัวของเอกสาร HTML:

<link rel="preload" as="image" href="hero-image.jpg">

การเพิ่มคำสั่ง <link rel="preload"> จะเป็นการเริ่มคำขอสำหรับทรัพยากรดังกล่าวและจัดเก็บไว้ในแคช จากนั้น เบราว์เซอร์จะสามารถเรียกเบราว์เซอร์ได้เมื่อต้องการ

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

แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด

Lighthouse จะแสดงคำเตือนหากมีทรัพยากรที่ทำให้ First Paint แสดงล่าช้า ซึ่งเป็นช่วงเวลาที่เว็บไซต์แสดงผลพิกเซลบนหน้าจอ

Lighthouse: กำจัดการตรวจสอบทรัพยากรที่บล็อกการแสดงผล

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

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

ไม่มีโซลูชันที่ถูกต้องวิธีเดียวในการลด First Paint ในแอปพลิเคชันของคุณ และคุณควรลองใช้รูปแบบอินไลน์และการแสดงผลฝั่งเซิร์ฟเวอร์เฉพาะในกรณีที่ประโยชน์นั้นให้ประโยชน์เหนือกว่าข้อเสียของแอปพลิเคชันของคุณ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับทั้ง 2 แนวคิดนี้ได้ในแหล่งข้อมูลต่อไปนี้

คำขอ/การตอบกลับด้วย Service Worker

แคชชิ้นงานล่วงหน้า

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

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

การโหลดแบบ Lazy Loading

Lighthouse แสดงการตรวจสอบที่ล้มเหลวหากคุณส่งข้อมูลผ่านเครือข่ายมากเกินไป

Lighthouse: มีการตรวจสอบเพย์โหลดเครือข่ายขนาดใหญ่

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

Lighthouse: การตรวจสอบเวลาเปิดเครื่อง JavaScript

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

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

นอกจากการแยกและโหลด JavaScript ส่วนต่างๆ ตามคำขอแล้ว Lighthouse ยังมีการตรวจสอบสำหรับการโหลดแบบ Lazy Loading รูปภาพที่ไม่สำคัญด้วย

Lighthouse: เลื่อนการตรวจสอบรูปภาพนอกหน้าจอ

หากคุณโหลดรูปภาพหลายรูปในหน้าเว็บ เลื่อนรูปภาพทั้งหมดที่อยู่ครึ่งหน้าล่างหรือนอกวิวพอร์ตของอุปกรณ์ไว้ เมื่อหน้าเว็บโหลดขึ้น (ดูใช้การโหลดแบบ Lazysize เพื่อโหลดรูปภาพแบบ Lazy Loading)

ขั้นตอนถัดไป

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

  • โหลดทรัพยากรที่สำคัญล่วงหน้า
  • แสดงเส้นทางเริ่มต้นโดยเร็วที่สุด
  • เนื้อหาที่เหลืออยู่ในแคชล่วงหน้า
  • การโหลดแบบ Lazy Loading เส้นทางอื่นๆ และชิ้นงานที่ไม่สำคัญ

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับรูปแบบ PRPL