ประสิทธิภาพของ Elementor: วิธีทำให้เว็บไซต์ Page Builder ของคุณเร็วขึ้น

ผู้สร้างหน้าเช่น Elementor เพิ่มความสามารถในการออกแบบแบบมองเห็นให้กับ WordPress แต่พวกเขายังนำ CSS, JavaScript และองค์ประกอบ DOM เพิ่มเติมที่อาจทำให้เวลาการโหลดหน้าช้าลง สำหรับเว็บไซต์ที่สร้างด้วย Elementor Pro การเพิ่มประสิทธิภาพประสิทธิภาพไม่ใช่ตัวเลือก—มันส่งผลโดยตรงต่อประสบการณ์ของผู้ใช้ คะแนน Core Web Vitals และการจัดอันดับในเครื่องมือค้นหา

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

การทำความเข้าใจเกี่ยวกับรอยเท้าประสิทธิภาพของ Elementor

ก่อนที่จะทำการปรับแต่ง จะเป็นประโยชน์ในการเข้าใจว่า Elementor เพิ่มอะไรให้กับหน้าเว็บของคุณ:

หน้า Elementor ทั่วไปสร้างทรัพย์สินด้านหน้าเพิ่มเติม 200-400 KB เมื่อเปรียบเทียบกับหน้าที่สร้างด้วยบล็อกเอดิเตอร์เริ่มต้น (Gutenberg) นี่แสดงถึงการเพิ่มขึ้น 3-5 เท่าในขนาด CSS/JS เป้าหมายของการเพิ่มประสิทธิภาพคือการลดภาระนี้โดยไม่สูญเสียคุณภาพการออกแบบที่ Elementor มอบให้

ขั้นตอนที่ 1: เปิดใช้งานฟีเจอร์ประสิทธิภาพในตัว

Elementor รวมการตั้งค่าประสิทธิภาพหลายอย่างที่ผู้ใช้หลายคนมักมองข้าม ไปที่ Elementor → การตั้งค่า → ประสิทธิภาพ (หรือ Elementor → การตั้งค่า → ฟีเจอร์ ในเวอร์ชันใหม่กว่า):

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

ขั้นตอนที่ 2: ใช้ Flexbox Containers แทน Sections

ระบบเลย์เอาต์เก่าของ Elementor ใช้ Section → Column → Widget nesting ซึ่งสร้างองค์ประกอบห่อหุ้มจำนวนมาก ระบบ Flexbox Container ใหม่ผลิต HTML ที่เบากว่าอย่างมีนัยสำคัญ:

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

ขั้นตอนที่ 3: ปรับแต่งภาพ

ภาพมักจะเป็นทรัพย์สินที่ใหญ่ที่สุดในหน้าเว็บใดๆ และหน้า Elementor ที่มีการออกแบบที่มีภาพมากจะได้รับผลกระทบเป็นพิเศษ แนวทางการปรับแต่งภาพที่สำคัญ:

• ปรับขนาดก่อนการอัปโหลด: อัปโหลดภาพในขนาดที่จะแสดง ผลภาพที่แสดงที่กว้าง 1400px ไม่ควรอัปโหลดที่ 4000px
• ใช้รูปแบบ WebP: รูปภาพ WebP มีขนาดเล็กกว่ารูป JPEG 25-35% ในคุณภาพที่เปรียบเทียบได้ WordPress 6.x รองรับ WebP โดยตรง
• เปิดใช้งานการโหลดแบบ Lazy: Elementor รวมการโหลดแบบ Lazy สำหรับภาพ ตรวจสอบให้แน่ใจว่าเปิดใช้งานในการตั้งค่า WordPress → สื่อ → การโหลดแบบ Lazy
• ใช้ภาพที่ตอบสนอง: Elementor สร้างแอตทริบิวต์ srcset โดยอัตโนมัติ ตรวจสอบให้แน่ใจว่าภาพที่คุณอัปโหลดมีหลายขนาด (WordPress สร้างสิ่งเหล่านี้โดยค่าเริ่มต้น)
• บีบอัดภาพ: ใช้ปลั๊กอินการปรับแต่งภาพ เช่น WP Smush Pro เพื่อบีบอัดภาพโดยไม่สูญเสียคุณภาพที่มองเห็นได้

สำหรับคู่มือที่ครอบคลุมเกี่ยวกับการปรับแต่งภาพ โปรดดูที่ คู่มือการปรับแต่งภาพของ WordPress.

ขั้นตอนที่ 4: ลดการโหลดฟอนต์

ฟอนต์ที่กำหนดเองเพิ่มคำขอ HTTP และน้ำหนักไฟล์ ครอบครัวฟอนต์ Google แต่ละตัวเพิ่ม 20-100 KB ขึ้นอยู่กับจำนวนของน้ำหนักที่โหลด เพื่อปรับแต่ง:

• จำกัดจำนวนฟอนต์ 2-3 ตัว: หนึ่งสำหรับหัวเรื่อง หนึ่งสำหรับเนื้อความเพียงพอสำหรับการออกแบบส่วนใหญ่
• จำกัดน้ำหนักฟอนต์: โหลดเฉพาะน้ำหนักที่คุณใช้จริง (เช่น 400 และ 700 แทนที่จะเป็น 100-900)
• โฮสต์ฟอนต์ Google เอง: ดาวน์โหลดฟอนต์และให้บริการจากเซิร์ฟเวอร์ของคุณเองเพื่อลดการค้นหา DNS ไปยัง fonts.googleapis.com ปลั๊กอินอย่าง OMGF หรือ Perfmatters สามารถทำสิ่งนี้โดยอัตโนมัติ
• ใช้ font-display: swap: ป้องกันข้อความที่มองไม่เห็นระหว่างการโหลดฟอนต์ Elementor ใช้สิ่งนี้โดยค่าเริ่มต้น
• พิจารณาฟอนต์ระบบ: สแต็คฟอนต์ระบบ (เช่น -apple-system, BlinkMacSystemFont, Segoe UI) โหลดทันทีโดยไม่มีคำขอเครือข่าย

ขั้นตอนที่ 5: ลดจำนวนวิดเจ็ต

ทุกวิดเจ็ตของ Elementor สร้าง HTML, CSS และอาจเป็น JavaScript การลดจำนวนวิดเจ็ตจะลดน้ำหนักของหน้าโดยตรง:

• รวมเนื้อหาข้อความ: ใช้วิดเจ็ต Text Editor ตัวเดียวที่มีหัวเรื่อง HTML แทนที่จะใช้วิดเจ็ต Heading + Text Editor แยกต่างหาก
• ใช้ CSS แทนวิดเจ็ต: วิดเจ็ต Spacer เพิ่มองค์ประกอบ DOM ใช้ padding/margins บนวิดเจ็ตที่อยู่ติดกันแทน
• หลีกเลี่ยงวิดเจ็ตซ้ำ: แทนที่จะซ่อน/แสดงวิดเจ็ตที่แตกต่างกันสำหรับมือถือ/เดสก์ท็อป ใช้ CSS ที่ตอบสนองเพื่อปรับแต่งวิดเจ็ตเดียว
• จำกัดการเคลื่อนไหว: การเคลื่อนไหวในการเข้ามาเพิ่มตัวฟังเหตุการณ์ JavaScript และ CSS ใช้เฉพาะในองค์ประกอบสำคัญ ไม่ใช่ในทุกวิดเจ็ต

ขั้นตอนที่ 6: ใช้ปลั๊กอินแคช

การแคชจะแปลงหน้า WordPress ที่มีพลศาสตร์ให้เป็นไฟล์ HTML แบบสแตติก ซึ่งจะกำจัดการประมวลผล PHP และการค้นหาฐานข้อมูลในครั้งถัดไปที่เข้าชม แนะนำปลั๊กอินแคชสำหรับเว็บไซต์ Elementor:

ฟีเจอร์ "ลบ CSS ที่ไม่ได้ใช้" และ "หน่วงการดำเนินการ JavaScript" ของ WP Rocket มีประสิทธิภาพโดยเฉพาะสำหรับเว็บไซต์ Elementor เพราะมันมุ่งเป้าไปที่ CSS/JS ที่เกินที่ Elementor สร้างขึ้น ในการทดสอบของเรา WP Rocket ลดน้ำหนัก CSS ที่มีประสิทธิภาพของหน้า Elementor ลงได้ 40-60%.

ขั้นตอนที่ 7: ลบ CSS และ JavaScript ที่ไม่ได้ใช้

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

• ลบ CSS ที่ไม่ได้ใช้ของ WP Rocket: วิเคราะห์แต่ละหน้าและสร้างไฟล์ CSS เฉพาะหน้าที่มีเฉพาะกฎที่ใช้
• หน่วง JavaScript: เลื่อน JavaScript ที่ไม่สำคัญ (การเคลื่อนไหว, คารูเซล) จนกว่าจะมีการโต้ตอบจากผู้ใช้ (คลิก, เลื่อน, กดปุ่ม)
• ปลั๊กอิน Asset Clean Up: ปิดการใช้งาน CSS/JS ของปลั๊กอินเฉพาะในหน้าที่ไม่ต้องการ

เทคนิคเหล่านี้สามารถลดน้ำหนัก CSS ได้ 50-70% และกำจัด JavaScript ที่ทำให้การเรนเดอร์ช้าออกไปทั้งหมด ส่งผลให้มีการปรับปรุงที่สำคัญต่อ Largest Contentful Paint (LCP) และ First Input Delay (FID).

ขั้นตอนที่ 8: ปรับแต่งเซิร์ฟเวอร์และโฮสติ้ง

การปรับแต่งด้านหน้าไม่สามารถไปได้ไกลหากเวลาตอบสนองของเซิร์ฟเวอร์ของคุณช้า สำหรับเว็บไซต์ Elementor:

• ใช้ PHP 8.2 ขึ้นไป: PHP 8.x เร็วกว่า PHP 7.4 15-25% สำหรับงาน WordPress
• เปิดใช้งาน OPcache: การแคช opcode ของ PHP จะกำจัดการคอมไพล์ PHP ใหม่
• ใช้ CDN: ให้บริการทรัพยากรที่เป็นสถิติ (CSS, JS, รูปภาพ) จากเซิร์ฟเวอร์ที่ใกล้กับผู้เข้าชมของคุณ
• พิจารณาโฮสติ้ง WordPress ที่จัดการ: ผู้ให้บริการเช่น Cloudways, SiteGround และ Kinsta ปรับแต่งโครงสร้างพื้นฐานของพวกเขาโดยเฉพาะสำหรับ WordPress

สำหรับคำแนะนำเกี่ยวกับโฮสติ้งและแนวทางการตั้งค่า ดูที่ คู่มือโฮสติ้ง WordPress.

การวัดผลลัพธ์การปรับแต่งของคุณ

ใช้เครื่องมือเหล่านี้ในการวัดผลกระทบของการปรับแต่งแต่ละครั้ง:

ทดสอบก่อนและหลังการปรับแต่งแต่ละครั้งเพื่อยืนยันการปรับปรุง มุ่งเน้นไปที่เมตริก Core Web Vitals เหล่านี้:

• LCP (Largest Contentful Paint): เป้าหมายต่ำกว่า 2.5 วินาที
• FID (First Input Delay): เป้าหมายต่ำกว่า 100 มิลลิวินาที
• CLS (Cumulative Layout Shift): เป้าหมายต่ำกว่า 0.1

คำถามที่พบบ่อย

Elementor ทำให้ WordPress ช้าลงอย่างมีนัยสำคัญหรือไม่?

Elementor เพิ่มทรัพยากรด้านหน้า 200-400 KB เมื่อเปรียบเทียบกับตัวแก้ไขเริ่มต้น ซึ่งสามารถสังเกตเห็นได้แต่สามารถจัดการได้ด้วยการปรับแต่งที่เหมาะสม เทคนิคในคู่มือนี้สามารถลดผลกระทบด้านประสิทธิภาพของ Elementor ลงได้ 50-70% ทำให้ความเร็วหน้าใกล้เคียงกับที่สามารถทำได้ด้วยตัวแก้ไขบล็อกในขณะที่ยังคงความยืดหยุ่นในการออกแบบของ Elementor

ฉันควรเปลี่ยนจาก Sections เป็น Flexbox Containers ในหน้าเดิมหรือไม่?

สำหรับหน้าที่คุณกำลังแก้ไขอยู่ การย้ายไปยัง Flexbox Containers เป็นสิ่งที่คุ้มค่า—การลด DOM มีความสำคัญ อย่างไรก็ตาม ไม่จำเป็นต้องสร้างหน้าใหม่ทั้งหมดในครั้งเดียว ให้จัดลำดับความสำคัญของหน้าที่มีผู้เข้าชมสูง (หน้าแรก, หน้าแลนดิ้ง, หน้าสินค้า) และค่อยๆ แปลงหน้าอื่นๆ

WP Rocket เข้ากันได้กับ Elementor หรือไม่?

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

จำนวนวิดเจ็ตของ Elementor ที่มากเกินไปในหน้าเดียวคือเท่าไหร่?

ไม่มีจำนวนที่แน่นอน แต่ควรพยายามรักษาขนาด DOM ให้อยู่ต่ำกว่า 1,500 องค์ประกอบเพื่อประสิทธิภาพที่ดี ตามแนวทาง 30-50 วิดเจ็ตในหน้าเป็นเรื่องปกติ; 100+ วิดเจ็ตมักบ่งบอกถึงโอกาสในการรวม (รวมวิดเจ็ตข้อความ, ลบช่องว่าง, ทำให้เลย์เอาต์เรียบง่าย)

การเคลื่อนไหวของ Elementor มีผลต่อประสิทธิภาพหรือไม่?

ใช่ การเคลื่อนไหวในการเข้ามาเพิ่ม JavaScript event listeners และ CSS transitions บนอุปกรณ์มือถือ การเคลื่อนไหวที่มากเกินไปอาจทำให้เกิดการกระตุก (การกระตุกที่มองเห็นได้ระหว่างการเลื่อน) ใช้การเคลื่อนไหวอย่างเลือกสรร—จำกัดให้กับองค์ประกอบสำคัญที่ได้รับประโยชน์จากการเคลื่อนไหว (CTAs, ไฮไลท์ฟีเจอร์) และหลีกเลี่ยงการเคลื่อนไหววิดเจ็ตทุกตัวในหน้า

ฉันสามารถใช้ Elementor และยังได้คะแนน 90+ บน PageSpeed ได้หรือไม่?

ใช่ ด้วยการปรับแต่งที่เหมาะสม โดยการเปิดใช้งานฟีเจอร์ด้านประสิทธิภาพของ Elementor, ใช้ Flexbox Containers, ปรับแต่งรูปภาพ, โฮสต์ฟอนต์ด้วยตนเอง และใช้ปลั๊กอินแคชเช่น WP Rocket เป็นไปได้ที่จะทำคะแนน PageSpeed 90+ บนหน้า Elementor ส่วนใหญ่ หน้าเนื้อหาภาพหนักอาจต้องการความพยายามในการปรับแต่งเพิ่มเติม