Elementor 3.21 มีอะไรใหม่

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

Elementor 3.21

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

เพราะฉะนั้นไฮไลท์สำคัญของเวอร์ชั่นนี้นอกเหนือจากการปับปรุง Performance ต่างๆ ก็คือ… เพิ่ม Taxonomy Query ใน Loop Grids & Loop Carousels ครับ เดี๋ยวเราจะมาไล่ดูว่ามีอะไรที่น่าสนใจในเวอร์ชั่นนี้กันบ้าง

ปรับปรุงประสิทธิภาพการใช้งาน

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

TTFB ที่ไวขึ้น

ปรับปรุง Time To First Byte (TTFB) บน Frontend โดย Elementor จะเพิ่มประสิทธิภาพและปรับปรุง Controls Rendering Engine อย่างต่อเนื่อง กลไกใช้ทรัพยากรเซิร์ฟเวอร์จำนวนมาก ส่งผลต่อส่วนหน้า TTFB

เวอร์ชั่นก่อนหน้านี้คือ Elementor 3.20 ได้มุ่งเน้นไปที่การเพิ่มประสิทธิภาพ Controls Rendering Engine โดยการถอดการควบคุมที่ไม่จำเป็นใน Frontend ออกตามเงื่อนไข แต่ใน Elementor 3.21 ได้ปรับปรุงลักษณะของกลไกที่รวมข้อมูลจากส่วนควบคุมในแท็บ “Advanced” ของวิดเจ็ต การรวม JSON ข้อมูลขนาดใหญ่เหล่านี้ใช้เวลานาน ดังนั้นการแยกสิ่งเหล่านี้ออกเป็นการควบคุมส่วนของเนื้อหาและสไตล์ และโหลดแบบเลือกเองได้ จะลดเวลาประมวลผลของเซิร์ฟเวอร์ ส่งผลให้ TTFB ส่วนหน้าเว็บ ลดลง 20%-30%

การลด TTFB 100 มิลลิวินาทีทางทีม Elementor ถือเป็นการปรับปรุงที่สำคัญ การทดสอบภายในในหน้าพื้นฐานที่มีการเพิ่มประสิทธิภาพด้วยกลไกใหม่นี้ ได้แสดงการลดขนาด TTFB จาก 1.1 วินาทีเป็น 700 มิลลิวินาที ถ้าหน้าเว็บที่มีขนาดใหญ่และมีข้อมูลมากขึ้นจะแสดงผลลัพธ์ที่ดียิ่งขึ้นครับ

ขนาด DOM เล็กลง

DOM (Document Object Model) แสดงถึงโครงสร้างของ HTML ของหน้าเว็บ ยิ่ง DOM ที่มีขนาดใหญ่ กระบวนการเรนเดอร์เพจก็จะยิ่งนานขึ้น หน้าที่มีองค์ประกอบ HTML จำนวนมากมีแนวโน้มที่จะโหลดช้ากว่าและอาจส่งผลต่อภาพเคลื่อนไหวและการโต้ตอบอื่นๆ ของผู้ใช้

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

รูปภาพพื้นหลังแบบ Lazy Load

ภาพพื้นหลังหรือ Background เป็นหนึ่งในเนื้อหาที่ใหญ่ที่สุดที่เว็บไซต์ Elementor โหลด หากโหลดแบบ Lazy Load จะช่วยปรับปรุงประสิทธิภาพของเพจได้อย่างมาก เราสามารถใช้แอตทริบิวต์ HTML ‘loading’ กับแท็ก ‘<img>’ ที่ไม่ใช่แท็ก ‘<div>’ ได้ นี่คือเหตุผลที่ Elementor 3.9 ได้เพิ่มการแนะนำ “Lazy Load Background Images” หรือ รูปภาพพื้นหลังแบบ Lazy Load แบบทดลองไว้ ซึ่งจะใช้ JS เพื่อโหลดภาพพื้นหลังแบบ Lazy Load

ภาพพื้นหลังหรือ Background เป็นหนึ่งในเนื้อหาที่ใหญ่ที่สุดที่เว็บไซต์ Elementor โหลด หากโหลดแบบ Lazy Load จะช่วยปรับปรุงประสิทธิภาพของเพจได้อย่างมาก เราสามารถใช้แอตทริบิวต์ HTML ‘loading’ กับแท็ก ‘<img>’ ที่ไม่ใช่แท็ก ‘<div>’ ได้ นี่คือเหตุผลที่ Elementor เวอร์ชั่น 3.9 มีการเพิ่มการแนะนำ “Lazy Load Background Images” หรือ รูปภาพพื้นหลังแบบ Lazy Load แบบทดลองไว้ ซึ่งจะใช้ JS เพื่อโหลดภาพพื้นหลังแบบ Lazy Load

แต่เมื่อเวลาผ่านไป เมตริกที่รวบรวมโดยคำค้นหาสำคัญของ Google แสดงให้เห็นว่าการใช้งานการทดสอบขั้นอัลฟ่านี้ไม่ได้ปรับปรุงประสิทธิภาพ แถมในบางกรณีก็ลดประสิทธิภาพของหน้าเว็บลง เราต้องเข้าใจว่าฟีเจอร์ “Lazy Load Background Images” ยังอยู่ในการทดลองระยะ Alpha ซึ่งถือเป็นฟีเจอร์ระยะเริ่มต้นที่อาจต้องมีการพัฒนาเพิ่มเติมและแก้ไขปัญหา ซึ่งเป็นกรณีที่เกิดขึ้นไม่บ่อยนักที่การทดสอบประสิทธิภาพของทาง Elementor จะส่งผลเสียต่อประสิทธิภาพของหน้าเว็บ

แน่นอนครับว่าครั้งนี้ Elementor พลาด นั่นคือเหตุผลที่การทดลองทั้งหมดถูกเขียนใหม่และทำให้ดีขึ้น โดยใช้แนวทางที่แตกต่างในการโหลดภาพพื้นหลังแบบ Lazy Load การทดสอบใหม่นี้ใช้กับภาพพื้นหลังของ Container เท่านั้น ไม่ใช่กับ Sections หรือ Columns นะครับ

การปรับปรุงการเข้าถึง

Elementor ได้แก้ไขปัญหาความสามารถในการเข้าถึงวิดเจ็ต 3 วิดเจ็ตที่ส่งผลต่อส่วนหน้าของเว็บไซต์

– Portfolio widget สามารถเข้าถึงด้วยคีย์บอร์ด วิดเจ็ต “Portfolio” ช่วยให้แสดงโพสต์ เพจ และประเภทโพสต์ที่กำหนดเองในตารางกริดที่สวยงามและใช้ Filter กรองได้ ผู้ใช้ที่ใช้แป้นพิมพ์เพื่อเลื่อนดูโพสต์ต่างๆ อาจไม่เห็นภาพว่าโพสต์ใดกำลังถูกเน้นอยู่ Elementor 3.21 เปลี่ยนวงแหวนโฟกัสรอบๆ องค์ประกอบปัจจุบัน โดยเพิ่มวงแหวนโฟกัสสำหรับผู้ใช้คีย์บอร์ดเท่านั้น

– Profile image ALT ใน Post วิดเจ็ต “Author” และ “Post info” มีตัวเลือกในการแสดงรูปโปรไฟล์ของผู้เขียนโพสต์ อย่างไรก็ตาม แอตทริบิวต์ ALT บนรูปภาพมีข้อความเหมือนกับชื่อผู้ใช้ ผู้ใช้โปรแกรมอ่านหน้าจอสับสนเนื่องจากข้อความเกิดขึ้นสองครั้ง ข้อความ ALT ใหม่จะไม่ใช้ข้อความเดิมอีกต่อไป โดยจะลบความยุ่งเหยิงออกไป

คุณสมบัติที่ได้รับการอัพเกรด

มีฟีเจอร์ทดลอง 3 รายการที่ได้รับการอัปเกรดสถานะ

– Editor Top Bar ได้รับการอัปเกรดจากสถานะ Alpha เป็น Beta

– Lazy Load Background Images ได้รับการอัปเกรดจากสถานะ Alpha เป็น Beta

– Grid Container อัพสถานะจาก Beta เป็นค่าปกติ โดยจะเปิดใช้งานตามค่าเริ่มต้นในการติดตั้งใหม่

ผสานฟีเจอร์

ฟีเจอร์ “Improved Asset Loading”, “Optimize Image Loading”, “Optimized Gutenberg Loading”, และ “Notes” จะถูกผสานเป็น Core หลักของค่าเริ่มต้นของระบบของ Elementor และ Elementor Pro

Taxonomy Queries และ Filter taxonomy terms

ปกติ Elementor มีความสามารถในการ Query posts, pages, products, และ custom post types อื่นๆ อยู่แล้ว แต่เวอร์ชั่น Elementor 3.21 ได้เพิ่มความสามารถในกา Query taxonomies หรือการจัดหมวดหมู่เข้ามาอีก ซึ่ง Taxonomy Query แบบใหม่จะเพิ่มตัวเลือกเพื่อแสดงหมวดหมู่และแท็กเป็นรายการภายใน “Loop Grids” และ “Loop Carousels”

นอกจากนี้ยังเพิ่มฟีเจอร์เกี่ยวกับ Filter taxonomy terms สามารถกรองเงื่อนไข Taxonomy terms จากรายการที่กำหนดไว้ล่วงหน้าหรือเลือกด้วยตนเอง สามารถเรียงลำดับตามตัวอักษรหรือเรียงตามตัวอักษรแบบย้อนกลับได้ และยังสามารถกรองตามความลึกได้อีกด้วย

ความเข้ากันได้กับปลั๊กอิน 3rd Party

ฟีเจอร์ใหม่นี้เข้ากันได้อย่างสมบูรณ์กับปลั๊กอิน เช่น Advanced Custom Fields (ACF), Custom Post Type UI และปลั๊กอินอื่น ๆ ที่ให้ความสามารถในการจัดการ taxonomies

ใครที่ใช้ Elementor เตรียมรอการอัพเกรดในครั้งนี้ได้เลยครับ

รายละเอียดเพิ่มเติม