PRPL คือคำย่อที่อธิบายรูปแบบที่ใช้เพื่อทำให้หน้าเว็บโหลดและกลายเป็นแบบอินเทอร์แอกทีฟได้เร็วขึ้น ดังนี้
- โหลดล่วงหน้าทรัพยากรที่ค้นพบล่าสุด
- แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด
- แคชล่วงหน้าชิ้นงานที่เหลือ
- การโหลดแบบเลื่อนเส้นทางอื่นๆ และชิ้นงานที่ไม่ใช่ข้อมูลสําคัญ
ในคู่มือนี้ คุณจะได้เรียนรู้ว่าเทคนิคแต่ละเทคนิคเข้ากันได้อย่างไร แต่ยังคงนำมาใช้ได้อย่างอิสระเพื่อให้ได้ผลลัพธ์ด้านประสิทธิภาพ
ตรวจสอบหน้าเว็บด้วย 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 เพื่อปรับปรุงการแสดงผล ซึ่งจะช่วยปรับปรุงประสิทธิภาพด้วยการลดจำนวนครั้งที่ต้องส่งข้อมูลไปมาระหว่างเซิร์ฟเวอร์เพื่อดึงข้อมูลชิ้นงานที่บล็อกการแสดงผล
อย่างไรก็ตาม โค้ดแบบอินไลน์จะรักษาไว้ยากกว่าจากมุมมองของการพัฒนา และจะไม่สามารถแคชแยกต่างหากโดยเบราว์เซอร์
อีกวิธีในการปรับปรุง First Paint คือการแสดงผลฝั่งเซิร์ฟเวอร์ HTML เริ่มต้นของหน้า ซึ่งจะแสดงเนื้อหาต่อผู้ใช้ทันทีขณะที่ระบบยังดึงข้อมูล สับเปลี่ยน และเรียกใช้สคริปต์อยู่ อย่างไรก็ตาม การดำเนินการนี้อาจทำให้เพย์โหลดของไฟล์ HTML เพิ่มขึ้นอย่างมาก ซึ่งอาจส่งผลเสียต่อเวลาในการตอบสนอง หรือเวลาที่แอปพลิเคชันของคุณใช้ในการโต้ตอบและตอบสนองต่ออินพุตของผู้ใช้
ไม่มีวิธีแก้ไขที่ถูกต้องวิธีเดียวที่จะลด First Paint ในแอปพลิเคชัน และคุณควรพิจารณาการใช้รูปแบบในบรรทัดและการแสดงผลฝั่งเซิร์ฟเวอร์เฉพาะเมื่อประโยชน์ที่จะคุ้มค่ากับผลต่างสำหรับแอปพลิเคชันของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับทั้ง 2 แนวคิดนี้ได้ที่แหล่งข้อมูลต่อไปนี้
แคชเนื้อหาล่วงหน้า
Service Worker จะทำหน้าที่เป็นพร็อกซีเพื่อดึงข้อมูลชิ้นงานจากแคชโดยตรงแทนเซิร์ฟเวอร์เมื่อมีการเข้าชมซ้ำ ซึ่งไม่เพียงช่วยให้ผู้ใช้ใช้แอปพลิเคชันของคุณเมื่อออฟไลน์ได้ แต่ยังทำให้หน้าเว็บโหลดเร็วขึ้นเมื่อเข้าชมซ้ำ
ใช้ไลบรารีของบุคคลที่สามเพื่อลดความซับซ้อนของการสร้าง Service Worker เว้นแต่คุณจะมีข้อกำหนดการแคชที่ซับซ้อนกว่าที่ไลบรารีมีให้ ตัวอย่างเช่น Workbox มีชุดเครื่องมือที่ช่วยให้คุณสร้างและดูแลรักษา Service Worker เพื่อแคชชิ้นงานได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Service Worker และความน่าเชื่อถือแบบออฟไลน์ได้ในคู่มือ Service Worker ในเส้นทางการเรียนรู้เกี่ยวกับความน่าเชื่อถือ
การโหลดแบบ Lazy Loading
Lighthouse จะแสดงการตรวจสอบที่ล้มเหลวหากคุณส่งข้อมูลผ่านเครือข่ายมากเกินไป
ซึ่งรวมถึงชิ้นงานทุกประเภท แต่โดยเฉพาะอย่างยิ่งเพย์โหลด JavaScript ขนาดใหญ่ที่ส่งผลเสียต่อประสิทธิภาพเนื่องจากเวลาเบราว์เซอร์ใช้ในการแยกวิเคราะห์และคอมไพล์ Lighthouse ยังแสดงคำเตือนตามความเหมาะสมด้วย
หากต้องการส่งเพย์โหลด JavaScript ที่เล็กลงซึ่งมีเฉพาะโค้ดที่จําเป็นเมื่อผู้ใช้โหลดแอปพลิเคชันเป็นครั้งแรก ให้แยกกลุ่มทั้งหมดและโหลดแบบเลื่อนตามคําขอ
เมื่อแยกกลุ่มแล้ว ให้โหลดส่วนที่สำคัญกว่าไว้ล่วงหน้า (ดูคู่มือโหลดชิ้นงานที่สำคัญไว้ล่วงหน้า) การโหลดล่วงหน้าช่วยให้เบราว์เซอร์ดึงข้อมูลและดาวน์โหลดทรัพยากรที่สำคัญได้เร็วขึ้น
นอกจากการแยกและโหลดกลุ่ม JavaScript ต่างๆ ตามคําขอแล้ว Lighthouse ยังตรวจสอบการโหลดแบบ Lazy Loading สําหรับรูปภาพที่ไม่สําคัญด้วย
หากคุณโหลดรูปภาพจำนวนมากในหน้าเว็บ ให้เลื่อนรูปภาพทั้งหมดที่อยู่ด้านล่างของหน้าจอหรืออยู่นอกวิวพอร์ตของอุปกรณ์ไว้เมื่อโหลดหน้าเว็บ (ดูใช้ Lazysizes เพื่อโหลดรูปภาพแบบ Lazy Loading)
ขั้นตอนถัดไป
เมื่อเข้าใจแนวคิดพื้นฐานบางอย่างที่อยู่เบื้องหลังรูปแบบ PRPL แล้ว ให้ไปที่คำแนะนำถัดไปในส่วนนี้เพื่อดูข้อมูลเพิ่มเติม โปรดอย่าลืมว่าไม่จำเป็นต้องใช้เทคนิคทั้งหมดร่วมกัน การดำเนินการใดๆ ต่อไปนี้จะช่วยปรับปรุงประสิทธิภาพได้อย่างชัดเจน
- โหลดทรัพยากรสําคัญล่วงหน้า
- แสดงผลเส้นทางเริ่มต้นโดยเร็วที่สุด
- แคชล่วงหน้าชิ้นงานที่เหลือ
- การโหลดแบบเลื่อนเส้นทางอื่นๆ และชิ้นงานที่ไม่ใช่ข้อมูลสําคัญ
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับรูปแบบ PRPL