WP Rocket 3.11 – เปิดตัวใหม่เอี่ยมที่ไม่ได้ใช้ CSS

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

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

นั่นเป็นเหตุผลที่ WP Rocket 3.11 มุ่งเน้นไปที่คุณลักษณะ Remove Unused CSS ใหม่ล่าสุด ที่จะช่วยให้คุณบรรลุเป้าหมายด้านประสิทธิภาพได้ง่ายขึ้น

อ่านต่อไปและค้นหาว่าคุณลักษณะที่ได้รับการปรับปรุงมีความหมายต่อผลการปฏิบัติงานของคุณอย่างไร คุณจะได้เรียนรู้ว่า WP Rocket 3.11 จะเพิ่มความเร็วให้กับเว็บไซต์ของคุณได้อย่างไร และยังมีอะไรอีกมากมายที่จะตามมา!

มีอะไรใหม่ใน WP Rocket 3.11

WP Rocket 3.11 มุ่งเน้นไปที่การปรับปรุง Remove Unused CSS จากสามมุม: ความพร้อมใช้งาน ประสิทธิภาพ และความเข้ากันได้ Remove Unused CSS ใหม่ยังคงอยู่ในรุ่นเบต้าในตอนนี้ แต่เรามีไทม์ไลน์สำหรับมันแล้ว – อ่านจนจบบทความเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับมัน

เมื่อดาวน์โหลดเวอร์ชันหลักใหม่ คุณจะได้รับประโยชน์จากแง่มุมต่อไปนี้:

• ความพร้อมใช้งานที่ดีขึ้น – Remove Unused CSS มาพร้อมกับวิธีการแบบอะซิงโครนัสเพื่อป้องกันไม่ให้บริการหยุดทำงานเมื่อเพิ่มประสิทธิภาพการจัดส่ง CSS ของคุณ ด้วยเหตุนี้ คุณจะพบบางสิ่งที่แตกต่างออกไปเล็กน้อยใน UI
  
• ประสิทธิภาพที่ ดีขึ้น – รุ่นใหม่นี้นำเสนอการเปลี่ยนแปลงที่สำคัญในวิธีที่เราจัดการกับคุณลักษณะ Preload Font เมื่อลบ CSS ที่ไม่ได้ใช้ คุณควรเห็นผลในเชิงบวกต่อคะแนนของคุณ ไม่ว่าคุณจะเคยใช้ Remove Unused CSS มาก่อนหรือไม่!

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

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

ความพร้อมใช้งานที่ดีขึ้นหมายถึงอะไร

WP Rocket 3.11 มาพร้อมกับ Remove Unused CSS ที่สร้างขึ้นใหม่ตั้งแต่ต้น ทำไม เพราะการเอาใจใส่และความอ่อนน้อมถ่อมตนเป็นค่านิยมหลักสองประการของเรา และเรายึดมั่นในค่านิยมเหล่านี้

เนื่องจากเราเปิดตัว Remove Unused CSS ด้วย WP Rocket 3.9 เราจึงยังไม่สามารถกำจัดโหมดเบต้าได้ เราไม่พอใจกับคุณลักษณะนี้และวิธีการทำงาน ความพร้อมใช้งานไม่ดีและการบริการก็มักจะลดลง ดังนั้นเราจึงตัดสินใจสร้างคุณลักษณะนี้ใหม่และเปลี่ยนจากวิธีซิงโครนัสเป็นแบบอะซิงโครนัส โหมดอะซิงโครนัสจะแคชหน้า เรียก API และสร้าง CSS ที่ใช้หลังจาก 60 วินาที

สวิตช์วิธีการนี้เป็นตัวเปลี่ยนเกมด้วยเหตุผลสองประการ:

1. คุณจะได้รับประโยชน์จากความพร้อมใช้งานที่ดีขึ้น กล่าวอีกนัยหนึ่ง คุณจะไม่ติดขัดอีกต่อไปเมื่อ WP Rocket พยายามสร้าง CSS ที่ใช้ คุณจะสร้าง CSS ที่ใช้สำหรับ 100 URL ทุกๆ 60 วินาที

2. วิธีการแบบอะซิงโครนัสเปิดโอกาสให้มีการปรับปรุงใหม่ๆ มากมาย ที่เราไม่เคยคิดมาก่อนเมื่อใช้วิธีการซิงโครนัส ตอนนี้เราจะสามารถทำงานกับคุณลักษณะที่มีประสิทธิภาพใหม่ ๆ ที่เกิดขึ้นพร้อมกันกับที่เราประมวลผล CSS ที่ใช้ โดยอาศัยการเรียก API พิจารณา Remove Unused CSS ใหม่เพื่อดูอนาคตของ WP Rocket!

การเปลี่ยนวิธีการยังมีผลกระทบต่อวิธีการนำเสนอกระบวนการปรับให้เหมาะสม CSS ในส่วนต่อประสานผู้ใช้

จนถึง WP Rocket 3.10 ตัวเลือก Remove Unused CSS จะแสดงให้คุณเห็นว่ากระบวนการ CSS ดำเนินไปอย่างไร:

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

ประการแรก วิธีการแบบอะซิงโครนัสและโครงสร้างพื้นฐานของเซิร์ฟเวอร์ใหม่จะป้องกันการโอเวอร์โหลด และลดปัญหาที่เคยพบในอดีตได้อย่างมาก เมื่อหน้าแรกได้รับการประมวลผลแล้ว (นับ 90 วินาที) กระบวนการเพิ่มประสิทธิภาพ CSS จะทำแบบกลุ่มสำหรับหน้าที่เหลือของคุณ - ทุกๆ 60 วินาที หมายความว่าคุณไม่ต้องรอจนกว่ากระบวนการจะเสร็จสมบูรณ์เพื่อวัดการปรับปรุงประสิทธิภาพของคุณ ทุกๆ 60 วินาที คุณจะได้รับประโยชน์จากการเพิ่มประสิทธิภาพ CSS อย่างต่อเนื่อง และคุณจะเห็นผลการตรวจสอบ PageSpeed ​​Insights ทันที

สิ่งที่ทำให้การเปลี่ยนแปลงนี้ตรงไปตรงมามากกว่าที่เคยคือตัวนับเวลาถอยหลังที่คุณจะพบใน WP Rocket 3.11

เมื่อเปิดใช้งานตัวเลือก Remove Unused CSS ที่ด้านบนของเพจ คุณจะพบกับตัวจับเวลาที่บอกว่าต้องใช้เวลานานแค่ไหนสำหรับฟีเจอร์ในการประมวลผลหน้าแรกของคุณ

เมื่อหน้าแรกเสร็จสิ้น คุณจะได้รับข้อความใหม่เกี่ยวกับกระบวนการ Remove Unused CSS ที่เกิดขึ้นทั่วทั้งไซต์ของคุณ:

หากคุณยังไม่ได้เปิดใช้งาน Cache Preload คุณจะเห็นข้อความแนะนำให้คุณเปิดใช้งานตัวเลือก

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

สิ่งนี้จะทำให้การสร้าง CSS ที่ใช้สำหรับทั้งเว็บไซต์เร็วขึ้น

เราขอแนะนำอย่างยิ่งให้ใช้ Remove Unused CSS และ cache preload ร่วมกัน เนื่องจากคุณจะได้รับประโยชน์สองประการที่สัมพันธ์กัน:

1. คุณจะลดขนาด CSS ลงอย่างมาก
2. ด้วยเหตุนี้ คุณจะปรับปรุงคะแนน PageSpeed ​​Insights รวมถึงคะแนน Core Web Vitals ของคุณ

เราทำการทดสอบหลายครั้งกับเครื่องมือสร้างเพจยอดนิยมบางตัว เราเปิดใช้งานคุณลักษณะ Remove Unused CSS ใหม่และติดตามการปรับปรุง อย่างที่คุณเห็น การบันทึก CSS นั้นยิ่งใหญ่ และจะมีผลกระทบต่อประสิทธิภาพโดยรวม:

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

เราสร้างไซต์ทดสอบโดยใช้ Elementor และ Astra เราเปิดใช้งาน WP Rocket และเปิดใช้งาน LazyLoad เราทำการทดสอบ PageSpeed ​​Insights เบื้องต้นและได้เกรด 67

จากนั้น เราทำการทดสอบอีกครั้งหลังจากเปิดใช้งานคุณลักษณะ Delay JS เกรดประสิทธิภาพโดยรวมดีขึ้นมาก แต่คะแนนไม่เป็นสีเขียว หรือตัวชี้วัดของ Lighthouse บางส่วน:

ในที่สุด เราก็เปิดใช้งาน Remove Unused CSS และรันการทดสอบครั้งที่สาม คะแนน PageSpeed ​​Insights ของเราได้เกรด 94 และ First Contentful Paint และ Largest Contentful Paint ก็ได้คะแนนสีเขียวเช่นกัน

มีอะไรใหม่สำหรับประสิทธิภาพ

รีลีสหลักใหม่นี้ยังเปลี่ยนวิธีการทำงานของฟีเจอร์ฟอนต์โหลดล่วงหน้า จนถึง WP Rocket 3.10 เมื่อเปิด Remove Unused CSS ปลั๊กอินจะไม่สนใจข้อมูลที่รวมอยู่ในแท็บ Preload Fonts

ตอนนี้มีการเปลี่ยนแปลงที่สำคัญ เมื่อเปิดใช้งานตัวเลือก Remove Unused CSS และสร้าง CSS ที่ใช้ WP Rocket จะระบุแบบอักษรทั้งหมดโดยอัตโนมัติและโหลดล่วงหน้าโดยอัตโนมัติ ทำไม เนื่องจากจากการทดสอบของเรา เว็บไซต์จะได้รับคะแนน PageSpeed ​​Insights ที่ดีขึ้น

ดูผลการทดสอบของเราและดูว่าคะแนนประสิทธิภาพโดยรวมและเมตริกเฉพาะดีขึ้นเพียงใดด้วยตัวเลือกแบบอักษรโหลดล่วงหน้า:

สถานการณ์ #1 – ลบ Unused CSS ที่เปิดใช้งานโดยไม่มีฟอนต์ที่โหลดไว้ล่วงหน้า

สถานการณ์ #2 – ลบ CSS ที่ไม่ได้ใช้ที่เปิดใช้งานด้วยฟอนต์ที่โหลดไว้ล่วงหน้า

สิ่งที่มาพร้อมกับความเข้ากันได้ที่ดีกว่า

การเปิดตัวครั้งสำคัญนี้ไม่ได้เกี่ยวกับการนำ UI ใหม่และความพร้อมใช้งานที่ดีขึ้นสำหรับ Remove Unused CSS เท่านั้น หากคุณลองใช้คุณลักษณะ Remove Unused CSS ก่อนหน้านี้ และพบปัญหาหรือข้อบกพร่องใดๆ คุณควรรู้ว่า WP Rocket 3.11 มีความเข้ากันได้และความแม่นยำที่ดีกว่า

ในภาษาอังกฤษธรรมดา WP Rocket 3.11 จะแก้ไข 90% ของปัญหา Remove Unused CSS ที่ ทราบโดยอัตโนมัติ สิ่งที่เหลืออยู่และใหม่สามารถแก้ไขได้ง่ายโดยไม่ต้องใช้ WP Rocket รุ่นรอง นั่นเป็นก้าวที่ยิ่งใหญ่ใช่ไหม?

เวอร์ชันเบต้าจะมีอายุนานแค่ไหน?

เราพนันได้เลยว่าคุณสงสัยว่ามันจะเป็นอย่างไรกับ Remove Unused CSS รุ่นเบต้า กล่าวโดยเร็ว: เราจะเก็บไว้เป็นเวลา 3 หรือ 4 สัปดาห์เพื่อตรวจสอบเซิร์ฟเวอร์ของเราอย่างเต็มรูปแบบ เป้าหมายของเราคือให้ตัวเลือก Remove Unused CSS ทำงานโดยไม่มีปัญหาใดๆ ใน 95% ของกรณี เนื่องจากเป็นคุณสมบัติที่ทรงพลัง เราจึงตั้งเป้าที่จะเปิดใช้งาน Remove Unused CSS ตามค่าเริ่มต้นในอนาคตอันใกล้

แน่นอน เราพร้อมดูแลคุณแล้ว ในฐานะ Rocketeer คุณจะได้รับอีเมลเมื่อเราลบเวอร์ชันเบต้า

ห่อ

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

ต้องขอบคุณ Remove Unused CSS ใหม่และ Font Preload คุณจะเพิ่มความเร็วของไซต์และปรับเมตริกประสิทธิภาพของ Lighthouse ให้เหมาะสม - ไม่จำเป็นต้องกังวลเกี่ยวกับอะไรเลย!

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