เปิดตัว Breeze v1.2: ดูคุณสมบัติใหม่ในการอัพเดทครั้งใหญ่นี้
เผยแพร่แล้ว: 2021-05-11
Cloudways ได้เปิดตัว Breeze v1.2 โดยมุ่งเน้นที่การปรับปรุงความเข้ากันได้ของ Core Web Vitals ของคุณและส่งมอบคะแนน PageSpeed Insights ที่ดีขึ้นสำหรับเว็บไซต์ของคุณในที่สุด
หากคุณยังไม่เคยได้ยิน Google จะเปิดตัวการอัปเดตประสบการณ์หน้าเว็บใหม่ในเดือนนี้ เราเพิ่งเปิดตัว Google Page Experience Checker ฟรี เพื่อช่วยคุณวัดประสิทธิภาพของไซต์และปัจจัยอื่นๆ ของประสบการณ์การใช้งานหน้าเว็บกับการอัปเดต อันที่จริง ตั้งแต่ต้นปี 2021 เรามุ่งเน้นอย่างมากในการปรับปรุงผลิตภัณฑ์และการเปิดตัวการอัปเดตที่มอบประสบการณ์หน้า Google ที่ดีที่สุด
ก่อนที่จะอัปเดต Breeze เป็นเวอร์ชันล่าสุด ขอแนะนำให้สำรองข้อมูลไซต์ WordPress ทั้งหมดของคุณหรือทดสอบเวอร์ชันใหม่ในสภาพแวดล้อมการแสดงละคร ความเข้ากันไม่ได้ของรุ่นใหม่กว่ากับปลั๊กอินอื่น ๆ อาจทำให้เกิดปัญหาและข้อผิดพลาดแบบสุ่มในบางครั้ง ดังนั้นหากคุณมีข้อมูลสำรองพร้อม คุณสามารถกู้คืนไซต์ WordPress ของคุณได้อย่างรวดเร็ว
มีอะไรใหม่ใน Breeze v1.2
ตอนนี้เรามาดูกันสั้น ๆ ว่าฟีเจอร์ใหม่ที่น่าตื่นเต้นที่ Breeze นำเสนอในเวอร์ชัน 1.2 นั้นมีอะไรบ้าง
ลิงค์ที่ปลอดภัยข้ามแหล่งกำเนิด
หากคุณคุ้นเคยกับแนวทางปฏิบัติ SEO คุณจะเข้าใจถึงความสำคัญของแอตทริบิวต์ "noopener noreferrer" ในครั้งนี้ Breeze มาพร้อมกับคุณสมบัติใหม่ที่จะเพิ่มแอตทริบิวต์ "noopener noreferrer" ให้กับลิงก์ที่มีค่าเป้าหมายเป็น "_blank" โดยอัตโนมัติ
หมายเหตุ: อย่าเพิ่มลงในตัวแก้ไข WordPress เนื่องจากตัวแก้ไขจะเพิ่ม noopener noreferrer โดยอัตโนมัติ เพิ่มลิงก์ในไฟล์ธีมของคุณ หลังจากเพิ่มลิงก์แล้ว ให้กลับไปที่ wp-admin และบันทึกการตั้งค่า Breeze หรือล้างแคช
– ลิงค์ที่ปลอดภัยข้ามแหล่งกำเนิดใน Breeze
บางกรณีการใช้งาน
- _blank ค่าเป้าหมายและไม่มีแอตทริบิวต์ rel คุณลักษณะจะเพิ่มโดยตรง rel=“ noopener noreferrer ”
- _blank แต่แอตทริบิวต์ rel มีค่า noopener เท่านั้น จากนั้น ระบบ จะเพิ่ม noreferrer ตัวอย่างเช่น ลิงก์มีแอตทริบิวต์ noopener เท่านั้น: noreferrer คุณลักษณะนี้เพิ่มแอตทริบิวต์ noreferrer ด้วย: <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _ blank แต่ rel มีค่า noreferrer แล้ว noopener จะถูกเพิ่ม
- _blank ค่าเป้าหมายและ rel มีทั้ง noopener noreferrer จะไม่มีการเปลี่ยนแปลงใดๆ
- href มี # ลิงค์ (ID) ซึ่งจะถูกละเว้น ซึ่งหมายความว่าไม่มีการเปลี่ยนแปลง
ใส่รหัส:
– ใส่รหัสในตัวแก้ไขธีม
ผลลัพธ์ของรหัส:
– ผลลัพธ์ของรหัส
แบบอักษรยังคงมองเห็นได้ในระหว่างการโหลด
แบบอักษรจะโหลดเมื่อคุณเยี่ยมชมไซต์ และข้อความจะไม่ปรากฏให้เห็นในระหว่างการโหลด เพื่อปรับปรุงประสบการณ์ผู้ใช้ คุณควรใช้เทคนิคที่แสดงเนื้อหาข้อความของคุณ (แบบอักษรสำรอง) ในขณะที่แบบอักษรของคุณกำลังดาวน์โหลด (ระยะเวลาการโหลดแบบอักษร) ตอนนี้ Breeze มีคุณสมบัติใหม่ที่จะช่วยให้คุณทำเช่นนั้นได้
คุณลักษณะนี้จะมองเห็นได้เมื่อคุณตรวจสอบการลดขนาด CSS และใช้ได้กับตัวเลือกการลดขนาด CSS และกลุ่ม CSS เท่านั้น ในการผนวกแอตทริบิวต์ font-display:swap เข้ากับคลาส CSS เราจำเป็นต้องแก้ไขเนื้อหา
– การย่อขนาดใน Breeze
หากต้องการทดสอบคุณลักษณะนี้ คุณสามารถตรวจสอบไฟล์ .css ในแหล่งที่มาของหน้าดู และค้นหา @font-face เพิ่มการแสดง แบบอักษร แอตทริบิวต์ หากการกำหนดแบบอักษรนั้นมีการแสดงแบบอักษรแอตทริบิวต์อยู่แล้ว จะไม่มีอะไรเปลี่ยนแปลง
– การแสดงแบบอักษรใน CSS
ขี้เกียจโหลดรูปภาพ
Lazy Loading เป็นเทคนิคการเพิ่มประสิทธิภาพความเร็วที่โหลดเฉพาะภาพที่มองเห็นได้บนหน้าจอ แทนที่จะโหลดภาพทั้งหน้าพร้อมกันทั้งหมด ซึ่งสามารถปรับปรุงเวลาในการโหลดและประสบการณ์ของผู้ใช้ได้อย่างมาก
รีลีสใหม่ของ Breeze มีฟีเจอร์ Lazy Load Images ในตัวเลือก ขั้นสูง หากคุณเปิดใช้งานตัวเลือกนี้ รูปภาพจะถูกแทนที่ด้วยรูปภาพโปร่งใสจำลองเป็นตัวยึดตำแหน่ง และเมื่อถึงเวลาแสดง รูปภาพต้นฉบับจะถูกโหลด
– รูปภาพโหลดขี้เกียจใน Breeze
รหัสรู้จักขนาดข้อมูลและแอตทริบิวต์ data-srcset ที่ใช้สำหรับแสดงขนาดภาพที่ถูกต้องตามความละเอียด แอตทริบิวต์ต่อไปนี้จะแทนที่แอตทริบิวต์เดิม:
data-breeze= src
data-brsrcset= data-srcset
data-brsizes= data- ขนาด
หากคุณต้องการตรวจสอบว่ารูปภาพที่โหลดแบบ Lazy Loading ทำงานหรือไม่ ให้กด “CTRL + Shift+ I” → Network → เลือก img → เลื่อนลงทั้งหน้า
– ตรวจสอบ Lazy Loading ในเบราว์เซอร์ของคุณ
โหลดลิงค์ล่วงหน้า
ลิงก์โหลดล่วงหน้าเป็นคุณลักษณะใหม่อีกอย่างที่เราเพิ่มลงในเมนู ตัวเลือกขั้นสูง เพื่อเพิ่มความเร็วให้กับไซต์ของคุณและปรับปรุงผลลัพธ์ความเร็วหน้าเว็บ เมื่อคุณวางเมาส์บนลิงก์ คุณลักษณะนี้จะสร้างแคช และหน้าเว็บจะโหลดเร็วขึ้นเมื่อคุณเปิดหรือไปที่ลิงก์นั้นอีกครั้ง
เมื่อเปิดใช้งานตัวเลือกที่ส่วนหลัง ไฟล์ JavaScript จะโหลดในส่วนหน้า ซึ่งไม่ขึ้นอยู่กับไลบรารีอื่นๆ
เมื่อผู้ใช้วางเมาส์เหนือลิงก์เป็นเวลานานกว่า 150 มิลลิวินาที ระบบจะเปิดใช้การดึงข้อมูลล่วงหน้าสำหรับลิงก์นั้น และแคชของหน้าจะถูกสร้างขึ้น ดังนั้นเมื่อผู้ใช้คลิกลิงก์ หน้าก็พร้อมที่จะแสดงเนื้อหาทันที
– โหลดลิงค์ล่วงหน้าใน Breeze
คุณลักษณะนี้ไม่แคชทั้งหน้าถัดไปเมื่อวางเมาส์เหนือ แต่จะแคชคำขอเพื่อเพิ่มความเร็วไซต์เล็กน้อย
หมายเหตุ: โดยค่าเริ่มต้น เวลาหน่วงของการวางลิงก์จะถูกตั้งค่าเป็น 150 มิลลิวินาที URL ที่รวมอยู่ใน Never Cache URL เหล่านี้ จะถูกแยกออกจากการโหลดล่วงหน้า
โหลดแบบอักษรเว็บของคุณล่วงหน้า
คุณลักษณะ โหลดแบบอักษรเว็บล่วงหน้า มีอยู่ใน ตัวเลือกขั้นสูง และใช้งานง่าย สิ่งที่คุณต้องทำคือระบุ URL ฟอนต์ในเครื่องหรือไฟล์ CSS (URL) ที่ โหลดเฉพาะฟอนต์ บ่อยครั้ง แบบอักษรของเว็บทำให้ความเร็วเว็บไซต์ของคุณช้าลงและทำให้เกิดความล่าช้า ดังนั้นจึงแนะนำให้เลือกวิธีแก้ปัญหาที่ดีกว่าซึ่งจะช่วยคุณจัดการกับปัญหานี้
ด้วยการอัปเดตนี้ เรานำคุณลักษณะ Preload Your Web Fonts ที่จะช่วยคุณปรับปรุงประสิทธิภาพของไซต์และขจัดปัญหาคำขอคีย์โหลดล่วงหน้า
– โหลดแบบอักษรเว็บล่วงหน้าใน Breeze
ฟีเจอร์นี้จะโหลดฟอนต์เฉพาะ (เพิ่มในฟิลด์) ก่อนเวลา แทนที่จะโหลดฟอนต์ในตอนท้าย ดังนั้นคุณจะได้สัมผัสกับประสิทธิภาพไซต์ที่ดีขึ้นและคะแนน Web Vital ที่ดี
หน่วงเวลาสคริปต์อินไลน์ JS
Delay JS Inline Scripts เป็นคุณลักษณะใหม่ที่มีอยู่ในตัวเลือกขั้นสูง สิ่งนี้ออกแบบมาเพื่อโหลด inline JS ของคุณในตอนท้าย ดังนั้นผู้ใช้และผู้ทดสอบความเร็วไซต์ของคุณจะไม่เห็นเวลาในการโหลด
แนวคิดเบื้องหลังนี้คือ Lazy Loading ซึ่งสคริปต์ inline js ของคุณจะปรากฏขึ้นเมื่อคุณโต้ตอบ (เลื่อนลง เลื่อนเคอร์เซอร์ ฯลฯ) กับเว็บไซต์ของคุณ นี่เป็นเทคนิคที่ยอดเยี่ยมในการปรับปรุงประสิทธิภาพเว็บไซต์ของคุณและคะแนน Web Vital
– หน่วงเวลาสคริปต์อินไลน์ JS ใน Breeze
ที่นี่ คุณต้องระบุคีย์เวิร์ดที่สำคัญสำหรับสคริปต์ inline js เช่น Google Ads และสคริปต์จะโหลดสคริปต์เฉพาะในตอนท้ายโดยอัตโนมัติ
สรุป!
ทีมงาน Cloudways กำลังทำงานตลอดเวลาเพื่อให้ Breeze เป็นปลั๊กอินแคชของคุณ นี่เป็นการเปิดตัวครั้งแรกที่สำคัญซึ่งมีคุณลักษณะใหม่ที่น่าตื่นเต้น 6 ประการ ซึ่งจะช่วยให้คุณปรับปรุงประสบการณ์ความเร็วหน้าเว็บและคะแนน Web Vital
เมื่อ Google เปิดตัวการอัปเดต Page Experience ในเดือนนี้ หวังว่าเว็บไซต์ของคุณจะพร้อมที่จะใช้ประโยชน์จากการอัปเดตใหม่
หากคุณมีคำถามหรือข้อเสนอแนะเกี่ยวกับ Breeze v1.2 โปรดแจ้งให้เราทราบในส่วนความคิดเห็น