WP Rocket 3.19: การปรับปรุงอย่างง่ายดายสำหรับการปรับปรุงความเสถียรของ LCP และเค้าโครง

จำได้ไหมว่าทีม Formula 1 ชนะการแข่งขันได้อย่างไร? มันไม่ใช่แค่การเปลี่ยนแปลงครั้งใหญ่เพียงครั้งเดียว แต่เป็นการปรับปรุงเล็ก ๆ น้อย ๆ มากมายที่เพิ่มขึ้นในระยะยาว การเปิดตัวครั้งใหญ่ใหม่ของเราสะท้อนให้เห็นถึงวิสัยทัศน์ของการเพิ่มประสิทธิภาพที่เพิ่มขึ้นและอัจฉริยะนี้อีกครั้ง: พบกับ WP Rocket 3.19!

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

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

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

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

สิ่งที่ WP Rocket 3.19 มี

WP Rocket 3.19 แนะนำการปรับปรุงสองรายการที่ทำงานเบื้องหลังเพื่อเพิ่มประสิทธิภาพของเว็บไซต์ของคุณ

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

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

ฟอนต์โหลดล่วงหน้าในคลิกเดียว

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

อธิบายการโหลดแบบอักษรล่วงหน้า

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

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

1. เบราว์เซอร์เริ่มแสดงข้อความของคุณโดยใช้แบบอักษรเริ่มต้น

2. จากนั้นจะค้นพบใน CSS ของคุณว่าจำเป็นต้องโหลดแบบอักษรที่กำหนดเอง - สิ่งที่คุณเลือก

3. เมื่อโหลดตัวอักษรที่กำหนดเองข้อความจะเปลี่ยนไปใช้แบบอักษรใหม่นี้แทนที่จะเป็นค่าเริ่มต้น

กระบวนการนี้อาจทำให้เกิดสิ่งที่เรียกว่าแฟลชของข้อความที่ไม่ได้รับการยกเว้น (fout) Fout เป็นช่วงเวลาสั้น ๆ เมื่อข้อความของคุณเปลี่ยนไปอย่างกะทันหันเมื่อโหลดแบบอักษรที่กำหนดเอง

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

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

ทำไมคุณต้องโหลดแบบอักษรล่วงหน้า?

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

ยิ่งไปกว่านั้นการโหลดล่วงหน้าแบบอักษรยังสามารถปรับปรุงเกรด Paintful Paint (LCP) ที่ใหญ่ที่สุดของคุณซึ่งเป็นเว็บสำคัญอีกอย่างหนึ่งที่วัดได้ว่าองค์ประกอบเนื้อหาที่ใหญ่ที่สุดในหน้าของคุณจะปรากฏเร็วแค่ไหน การดำน้ำในข้อมูลเฉพาะการโหลดล่วงหน้าแบบอักษรสามารถเพิ่มประสิทธิภาพการทำงานของ LCP เมื่อองค์ประกอบ LCP เป็นโหนดข้อความ - ซึ่งเป็นกรณีสำหรับค่าเฉลี่ย 20% ของเว็บไซต์ระหว่างมือถือและเดสก์ท็อป

3.19: พบกับฟีเจอร์ฟอนต์ preload ใหม่

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

และที่นี่เราคือ: WP Rocket 3.19 ทำให้แบบอักษรล่วงหน้าเป็นกระบวนการอัตโนมัติที่คุณสามารถเปิดใช้งานได้ในคลิกเดียว

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

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

โปรดทราบว่าตอนนี้คุณจะพบฟีเจอร์ฟอนต์ preload ใหม่ในแท็บสื่อ:

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

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

preconnect ไปยังโดเมนภายนอก: กระบวนการอัตโนมัติใหม่เอี่ยม

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

preconnect กับโดเมนภายนอกเป็นภาษาอังกฤษธรรมดา

Preconnect ไปยังโดเมนภายนอกเป็นเทคนิคการเพิ่มประสิทธิภาพที่ทรงพลังซึ่งส่งผลกระทบในเชิงบวกต่อการโหลดทรัพยากร

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

Preconnect ระบุปัญหานี้โดยบอกเบราว์เซอร์ล่วงหน้าว่าจะต้องมีการเชื่อมต่อใด สิ่งนี้ช่วยให้เบราว์เซอร์ตั้งค่าการเชื่อมต่อเหล่านี้ก่อนลดเวลาที่ใช้ในการโหลดทรัพยากรภายนอกเมื่อจำเป็น

การเพิ่มประสิทธิภาพนี้นำมาซึ่งประโยชน์สองประการ:

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

2. ประสิทธิภาพของ LCP ที่ได้รับการปรับปรุง : หากองค์ประกอบสีที่มีความพึงพอใจที่ใหญ่ที่สุดของคุณเป็นแบบอักษรจากโดเมนของบุคคลที่สาม Preconnect สามารถช่วยให้โหลดได้เร็วขึ้นซึ่งอาจปรับปรุงคะแนน LCP

3.19: จากการร้องขอ DNS prefetch ไปยัง preconnect ไปยังโดเมนภายนอก

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

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

นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับการปรับปรุงนี้:

1. มันเป็นกระบวนการอัตโนมัติเต็มรูปแบบ : คุณไม่จำเป็นต้องระบุด้วยตนเองอีกต่อไปว่าโดเมนใดที่จะรวมเมื่อใช้การเพิ่มประสิทธิภาพ ตอนนี้ WP Rocket จัดการนี้โดยอัตโนมัติ

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

ตามที่อธิบายไว้ข้างต้นคุณลักษณะนี้สามารถนำไปสู่เวลาโหลดหน้าเว็บได้เร็วขึ้นและคะแนน LCP ที่ได้รับการปรับปรุง - ทั้งหมดโดยไม่ต้องยกนิ้ว

หากคุณต้องการปิดใช้งานคุณสมบัติที่คุณต้องใช้ในการใช้ตัวกรองต่อไปนี้:

 add_filter('rocket_preconnect_external_domains_optimization', '__return_false');

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

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

ประสิทธิภาพการปรับแต่ง: การเพิ่มประสิทธิภาพอัตโนมัติในการดำเนินการ

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

• แคชหน้า (รวมถึงแคชมือถือ)

• เพิ่มประสิทธิภาพภาพที่สำคัญ

• การเรนเดอร์ขี้เกียจอัตโนมัติ

• การแคชเบราว์เซอร์

• การบีบอัด GZIP

• การสนับสนุนข้ามแหล่งกำเนิดสำหรับเว็บฟอนต์

• WooCommerce Refresh Cart Fragments Cache

• เพิ่มประสิทธิภาพไฟล์ Google Fonts

• ปิดใช้งาน WordPress Emoji

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

คุณสมบัติอัตโนมัติเหล่านี้อยู่ด้านบนของตัวเลือกที่เปิดขึ้นเมื่อคุณเปิดใช้งาน WP Rocket เป็นครั้งแรกเช่น Minify CSS และ JS, Cache อายุการใช้งาน, แคชล่วงหน้า, ลิงก์ล่วงหน้าและการควบคุมการเต้นของหัวใจ

ไม่น่าแปลกใจที่เว็บไซต์ของคุณได้รับการเพิ่มความเร็วทันทีที่คุณเปิดใช้งานปลั๊กอินของเรา!

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

ห่อหุ้ม

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

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

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