PRPL เป็นคำย่อที่อธิบายรูปแบบที่ใช้เพื่อทำให้หน้าเว็บโหลดและ ที่โต้ตอบได้และรวดเร็วยิ่งขึ้น
- โหลดทรัพยากรที่ค้นพบล่าช้าล่วงหน้า
- แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด
- แคชล่วงหน้าเนื้อหาที่เหลือ
- การโหลดแบบ Lazy Loading เส้นทางอื่นๆ และชิ้นงานที่ไม่สำคัญ
ในคู่มือนี้ คุณจะได้เรียนรู้ว่าเทคนิคแต่ละอย่างนี้ทำงานร่วมกันอย่างไร แต่ยังคงสามารถ ได้อย่างอิสระเพื่อให้ได้ผลลัพธ์ด้านประสิทธิภาพ
ตรวจสอบหน้าเว็บด้วย Lighthouse
เรียกใช้ Lighthouse เพื่อระบุโอกาสในการปรับปรุงที่สอดคล้องกับ PRPL เทคนิค
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- เลือกช่องทำเครื่องหมายประสิทธิภาพและ Progressive Web App
- คลิกดำเนินการตรวจสอบเพื่อสร้างรายงาน
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อค้นพบโอกาสด้านประสิทธิภาพด้วย Lighthouse
โหลดทรัพยากรที่สำคัญล่วงหน้า
Lighthouse จะแสดงการตรวจสอบที่ไม่ผ่านต่อไปนี้ หากทรัพยากรบางรายการได้รับการแยกวิเคราะห์และ ดึงข้อมูลล่าช้า:
โหลดล่วงหน้า
เป็นคำขอดึงข้อมูลแบบประกาศที่บอกเบราว์เซอร์ให้ขอทรัพยากรที่เครื่องสแกนการโหลดล่วงหน้าของเบราว์เซอร์ไม่พบ เช่น รูปภาพที่พร็อพเพอร์ตี้ background-imageอ้างอิง โหลดทรัพยากรที่ค้นพบล่าช้าล่วงหน้าด้วยการเพิ่มแท็ก <link> ด้วย rel="preload" ที่ส่วนหัวของเอกสาร HTML ดังนี้
<link rel="preload" as="image" href="hero-image.jpg">
การเพิ่มคำสั่ง <link rel="preload"> จะเริ่มคำขอสำหรับทรัพยากรนั้นและจัดเก็บไว้ในแคช จากนั้นเบราว์เซอร์จะเรียกดูข้อมูลได้เมื่อจำเป็น
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการโหลดทรัพยากรที่สำคัญล่วงหน้า โปรดดูที่ คู่มือโหลดเนื้อหาที่สำคัญล่วงหน้า
แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด
Lighthouse จะแสดงคำเตือนหากมีทรัพยากรที่ทำให้ First Paint ล่าช้า ช่วงเวลาที่เว็บไซต์แสดงพิกเซลบนหน้าจอ
Lighthouse ขอแนะนำให้ใช้การแทรก JavaScript ที่สำคัญและ
เลื่อนส่วนที่เหลือโดยใช้
async
รวมถึงการใช้ CSS ที่สำคัญในครึ่งหน้าบน ซึ่งจะช่วยปรับปรุงประสิทธิภาพ
ด้วยการขจัดการไป-กลับไปยังเซิร์ฟเวอร์เพื่อดึงข้อมูลเนื้อหาที่บล็อกการแสดงผล
อย่างไรก็ตาม โค้ดแบบในหน้าจะรักษาระดับของการพัฒนาและ
และไม่สามารถแคชแยกต่างหากโดยเบราว์เซอร์
อีกแนวทางหนึ่งในการปรับปรุง First Paint คือแสดงผลฝั่งเซิร์ฟเวอร์ HTML ของหน้าเว็บ ตัวเลือกนี้จะแสดงเนื้อหาต่อผู้ใช้ทันทีขณะที่สคริปต์ ยังคงมีการดึงข้อมูล แยกวิเคราะห์ และดำเนินการ อย่างไรก็ตาม วิธีนี้สามารถเพิ่ม เพย์โหลดของไฟล์ HTML อย่างมีนัยสำคัญ ซึ่งอาจส่งผลเสียต่อเวลาในการโต้ตอบ หรือเวลาที่แอปพลิเคชันใช้ในการมีการโต้ตอบและตอบสนอง ถึงข้อมูลจากผู้ใช้
ไม่มีวิธีแก้ไขวิธีหนึ่งที่ถูกต้องในการลดจำนวน First Paint ใน และคุณควรพิจารณาเฉพาะรูปแบบในบรรทัดและฝั่งเซิร์ฟเวอร์เท่านั้น แสดงผลหากประโยชน์มีน้ำหนักมากกว่าข้อเสียสำหรับแอปพลิเคชันของคุณ คุณสามารถ ดูข้อมูลเพิ่มเติมเกี่ยวกับทั้ง 2 แนวคิดนี้ได้จากแหล่งข้อมูลต่อไปนี้
แคชเนื้อหาล่วงหน้า
โปรแกรมทำงานของบริการสามารถดึงข้อมูลเนื้อหาจากแคชได้โดยตรงโดยทำหน้าที่เป็นพร็อกซี แทนที่จะเป็นเซิร์ฟเวอร์ในการเข้าชมซ้ำ ซึ่งนอกจากจะทำให้ผู้ใช้สามารถใช้ เมื่ออยู่ในสถานะออฟไลน์ แต่ยังช่วยให้เวลาในการโหลดหน้าเว็บเร็วขึ้นด้วย การเข้าชมซ้ำ
ใช้ไลบรารีของบุคคลที่สามเพื่อลดความซับซ้อนของกระบวนการสร้าง Service Worker ยกเว้นกรณีที่คุณมีข้อกำหนดการแคช ที่ซับซ้อนกว่าที่ไลบรารีทำได้ ให้ไว้ ตัวอย่างเช่น Workbox จะมี ชุดเครื่องมือที่ช่วยให้คุณสร้างและดูแลรักษาโปรแกรมทำงานของบริการเพื่อ เนื้อหาแคช ดูข้อมูลเพิ่มเติมเกี่ยวกับ Service Worker และความเสถียรแบบออฟไลน์ โปรดดูคำแนะนำสำหรับโปรแกรมทำงานของบริการในเส้นทางการเรียนรู้เกี่ยวกับความเสถียร
การโหลดแบบ Lazy Loading
Lighthouse จะแสดงการตรวจสอบที่ล้มเหลวหากคุณส่งข้อมูลผ่านเครือข่ายมากเกินไป
ซึ่งรวมถึงชิ้นงานทุกประเภท แต่เพย์โหลด JavaScript ขนาดใหญ่จะ มีราคาสูงเนื่องจากเบราว์เซอร์ใช้เวลาแยกวิเคราะห์และคอมไพล์ Lighthouse ยังแสดงคำเตือนตามความเหมาะสมด้วย
เพื่อส่งเพย์โหลด JavaScript ขนาดเล็กที่มีเฉพาะโค้ดที่จำเป็นเมื่อ ผู้ใช้จะโหลดแอปพลิเคชันของคุณในตอนแรก แยกทั้งแพ็กเกจและส่วนการโหลดแบบ Lazy Loading ตามคำขอ
เมื่อคุณแยกกลุ่มได้แล้ว ให้โหลดกลุ่มที่มีมากกว่านั้นล่วงหน้า สำคัญ (ดูคู่มือโหลดเนื้อหาที่สำคัญล่วงหน้า) การโหลดล่วงหน้าช่วยให้มั่นใจได้ว่าระบบจะดึงข้อมูลทรัพยากรที่สำคัญกว่าและดาวน์โหลดได้เร็วขึ้น ตามเบราว์เซอร์
นอกจากการแยกและโหลดกลุ่ม JavaScript ต่างๆ ตามต้องการแล้ว Lighthouse ยังมีการตรวจสอบรูปภาพที่ไม่สำคัญด้วยการโหลดแบบ Lazy Loading ด้วย
หากคุณโหลดรูปภาพจำนวนมากบนหน้าเว็บ ให้เลื่อนภาพทั้งหมดที่อยู่ครึ่งหน้าล่างออกไป หรือ นอกวิวพอร์ตของอุปกรณ์ เมื่อหน้าเว็บโหลด (ดูใช้ขนาด Lazysize เพื่อโหลดรูปภาพแบบ Lazy Loading)
ขั้นตอนถัดไป
ตอนนี้คุณเข้าใจแนวคิดพื้นฐานบางประการเบื้องหลังรูปแบบ PRPL แล้ว ไปที่คำแนะนำถัดไปในส่วนนี้เพื่อดูข้อมูลเพิ่มเติม โปรดอย่าลืมว่า บางเทคนิคไม่จำเป็นต้อง เข้าด้วยกัน ความพยายามใดๆ ก็ตามต่อไปนี้จะ ประสิทธิภาพที่ดีขึ้นอย่างเห็นได้ชัด
- โหลดทรัพยากรที่สำคัญไว้ล่วงหน้า
- แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด
- แคชล่วงหน้าเนื้อหาที่เหลือ
- การโหลดแบบ Lazy Loading เส้นทางอื่นๆ และชิ้นงานที่ไม่สำคัญ
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับรูปแบบ PRPL