WP Rocket 3.17: ปรับปรุงการวัด INP ของคุณด้วย Lazy Rendering อัตโนมัติ

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

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

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

เรารู้สึกตื่นเต้นที่จะเปิดตัว WP Rocket 3.17 ด้วยเหตุผลสองประการ

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

นอกจากนี้ WP Rocket ยังเป็นปลั๊กอินตัวแรกที่นำเสนอการเพิ่มประสิทธิภาพอัตโนมัติที่ทรงพลังและอัตโนมัติในทุกหน้าเว็บไซต์อย่างแม่นยำ

ค้นพบทุกสิ่งในบล็อกโพสต์ของเรา หรือชมวิดีโอ

การเรนเดอร์คืออะไรและผลกระทบต่อประสิทธิภาพ

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

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

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

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

การเรนเดอร์และประสิทธิภาพ

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

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

ตอนนี้คุณรู้แล้วว่าการเรนเดอร์เป็นสิ่งสำคัญสำหรับความเร็วและจำเป็นต้องได้รับการปรับปรุง เรามาเรียนรู้วิธีทำให้เป็นไปได้กันดีกว่า

พบกับคุณสมบัติ CSS การมองเห็นเนื้อหา

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

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

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

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

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

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

ด้วยการใช้คุณสมบัติการมองเห็นเนื้อหาใน WP Rocket 3.17 เรากำลังแนะนำคุณสมบัติการเรนเดอร์แบบอัตโนมัติ อ่านต่อเพื่อเรียนรู้ว่ามันเกี่ยวข้องกับอะไร

3.17: ขอแนะนำ Lazy Rendering อัตโนมัติ

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

เรามุ่งเน้นไปที่คุณสมบัติที่สามารถส่งผลกระทบอย่างมีนัยสำคัญต่อความเร็วและประสบการณ์ผู้ใช้ และ WP Rocket 3.17 ก็ไม่มีข้อยกเว้น

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

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

ฟีเจอร์นี้มีความเสี่ยงต่ำสำหรับเว็บไซต์ของคุณด้วย ซึ่งไม่น่าจะเสียหายอะไรเลย

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

การเรนเดอร์ Lazy อัตโนมัติทำงานอย่างไร

กลับไปที่การเปรียบเทียบวิดีโอเกมของเรากัน

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

การแนะนำการเรนเดอร์แบบอัตโนมัตินั้นเกิดขึ้นได้ ต้องขอบคุณ WP Rocket 3.16 รุ่นก่อนหน้า เวอร์ชันก่อนหน้านี้ของเรานำเสนอการปรับปรุงที่สำคัญ 2 ประการ:

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

และนี่คือสิ่งที่จะเกิดขึ้นเมื่อเปิดใช้งาน WP Rocket 3.17

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

นั่นเป็นเหตุผลว่าทำไมรุ่นใหม่จึงมีประโยชน์อย่างยิ่งสำหรับ:

1. หน้าเว็บยาวๆ ที่มีเนื้อหามากมาย เช่น โพสต์ในบล็อกหรือรายการผลิตภัณฑ์
2. หน้าที่มีองค์ประกอบที่ซับซ้อนซึ่งใช้เวลาในการแสดงผลมากกว่า เช่น แอนิเมชั่นที่ไม่คอมโพสิต (เช่น แอนิเมชั่นแคนวาสและพื้นหลังวิดีโอ)

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

ไม่มีตัวเลือกในการตั้งค่าสถานะ คุณไม่จำเป็นต้องดำเนินการใดๆ เพื่อเปิดใช้งาน ทันทีที่ WP Rocket ได้รับการอัพเดตเป็น 3.17 มันจะใช้งานได้

การเรนเดอร์แบบ Lazy สามารถปรับปรุงการโต้ตอบกับเกรดสีถัดไปได้อย่างไร

ตอนนี้เรามาดูกันว่า WP Rocket 3.17 สามารถปรับปรุงเกรด INP ของคุณได้อย่างไร

สิ่งแรกอันดับแรก: จากข้อมูลของ Google การตอบสนองที่ดีหมายความว่าคะแนน INP ของคุณควรต่ำกว่า 200 มิลลิวินาที

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

ในการวัดการปรับปรุงประสิทธิภาพ INP เราขอแนะนำให้ใช้เครื่องมือ เช่น INP Debugger จาก DebugBear ซึ่งจะให้ภาพที่ชัดเจนเกี่ยวกับการตอบสนองของไซต์ของคุณก่อนและหลังเปิดใช้งาน WP Rocket 3.17 และฟีเจอร์ Lazy Rendering อัตโนมัติ

หากคุณสงสัยว่าเหตุใดครั้งนี้เราจะไม่ใช้เครื่องมือ PageSpeed ​​Insights ซึ่งใช้ Lighthouse นั่นเป็นเพราะว่า INP เป็นเมตริกภาคสนามและคำนวณตามการโต้ตอบ และ Lighthouse ก็ไม่ได้วัดผล อย่างน้อยก็ในตอนนี้

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

นี่คือสิ่งที่เราพบ

ก่อนเปิดใช้งาน WP Rocket 3.17 พร้อม Automatic Lazy Rendering

ผลลัพธ์ INP คือ 204ms อย่างที่คุณเห็น ผลลัพธ์ที่ได้เน้นย้ำถึงความจำเป็นในการปรับปรุง:

จากจุดยืนทางเทคนิคเพิ่มเติม เรายังวิเคราะห์การแสดงผลของเบราว์เซอร์ในแท็บประสิทธิภาพของ Chrome DevTool ภาพหน้าจอเน้นงานที่ใช้เวลานานและเวลาที่ใช้ในการเรนเดอร์: 2610 ms

หลังจากเปิดใช้งาน WP Rocket 3.17 พร้อม Automatic Lazy Rendering

ผลลัพธ์ INP อยู่ที่ 146ms คราวนี้เกรด INP จะเป็นสีเขียว

คราวนี้ แท็บประสิทธิภาพของ Chrome DevTool จะแสดงระยะเวลาในการเพิ่มประสิทธิภาพงานที่ใช้เวลานาน และเวลาการแสดงผลลดลงเหลือ 2,325 มิลลิวินาที

อย่างที่คุณเห็น เราได้ทดสอบหน้าเดียวกันทุกประการ ข้อแตกต่างเพียงอย่างเดียวคืออันที่สองเปิดใช้งาน Automatic Lazy Rendering และอันแรกไม่ได้เปิดใช้งาน

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

ห่อขึ้น

ไม่ว่าคุณจะใช้งานบล็อก ร้านค้าออนไลน์ หรือเว็บไซต์ที่มีเนื้อหาหลากหลายประเภท WP Rocket 3.17 และคุณสมบัติการเรนเดอร์แบบ Lazy ก็สามารถปรับปรุงเกณฑ์ชี้วัดหลัก เช่น INP ได้โดยอัตโนมัติ

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

ทำไมไม่ลองดูด้วยตัวเองว่าเกรด INP จะสามารถปรับปรุงได้อย่างไร? อัปเดต WP Rocket เป็นเวอร์ชัน 3.17 หรือลองดู เราอยากทราบว่าการเปิดตัวเวอร์ชันหลักใหม่นี้ทำงานอย่างไรสำหรับคุณ แจ้งให้เราทราบในความคิดเห็นเกี่ยวกับประสบการณ์ของคุณกับ WP Rocket 3.17 และการปรับปรุงใดบ้างที่คุณได้รับ!