การเปรียบเทียบประสิทธิภาพของ Divi กับ Avada (2021): อันไหนเร็วกว่ากัน?

กำลังพยายามเลือกระหว่าง Divi กับ Avada เพื่อสร้างไซต์ WordPress ของคุณหรือไม่

สองธีมนี้เป็นธีม WordPress ระดับพรีเมียมที่ได้รับความนิยมสูงสุดตลอดกาล – ธีมที่หรูหรา (ผู้พัฒนาของ Divi) อ้างว่ามีลูกค้ามากกว่า 806,000 ราย และ Avada มีการซื้อมากกว่า 747,000 ครั้งที่ ThemeForest ตัวเลขเหล่านี้เป็นตัวเลขที่น่าประทับใจอย่างไม่น่าเชื่อและเป็นข้อพิสูจน์ว่าแต่ละธีมมีผู้ใช้ที่มีความสุขมากมาย

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

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

นี่เป็นเรื่องจริงมากยิ่งขึ้นตั้งแต่การอัปเดต Page Experience ของ Google ซึ่ง Google เริ่มแยก Core Web Vitals เข้าในการจัดอันดับ

ด้วยเหตุนี้ เราจึงตัดสินใจสร้างการเปรียบเทียบระหว่าง Divi กับ Avada โดยเน้นที่เมตริกเฉพาะอย่างใดอย่างหนึ่ง: ประสิทธิภาพ

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

หมายเหตุ – ตอนแรกเราเผยแพร่โพสต์นี้และทำการทดสอบเหล่านี้ในเดือนกรกฎาคม 2021 อย่างไรก็ตาม Elegant Themes ได้เผยแพร่การอัปเดตพร้อมการอัปเดตประสิทธิภาพส่วนหน้าที่สำคัญในเดือนสิงหาคม 2021 (Divi 4.10) ที่สร้างความแตกต่างอย่างมากต่อประสิทธิภาพของ Divi ด้วยเหตุผลดังกล่าว เราจึงทำการทดสอบเหล่านี้ใหม่ทั้งหมดและรวบรวมข้อมูลและข้อสรุปใหม่ทั้งหมดในเดือนพฤศจิกายน 2021

เราจะทดสอบประสิทธิภาพของธีม Divi vs Avada อย่างไร

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

ก่อนอื่น เราจะทดสอบสถานการณ์ระดับสูงสองสถานการณ์:

• การทดสอบ #1 – เราจะทดสอบเฉพาะธีม นั่นคือเราจะไม่ใช้เครื่องมือสร้างภาพแบบรวมของพวกเขา แต่เราจะทดสอบ "หน้าตัวอย่าง" เริ่มต้นที่สร้างด้วยตัวแก้ไขบล็อกแทน
• การทดสอบ #2 – เราจะทดสอบหน้าง่ายๆ ที่สร้างด้วยตัวสร้างธีมแต่ละธีม เนื่องจากตัวสร้างภาพเป็นส่วนสำคัญที่ทำให้ Divi และ Avada เป็นที่นิยม เราจะพยายามใช้โมดูลที่เปรียบเทียบได้เพื่อทำให้การเปรียบเทียบมีความเท่าเทียมกันมากที่สุด

สำหรับแต่ละสถานการณ์การทดสอบระดับสูง เราจะทดสอบการตั้งค่าที่แตกต่างกันสองแบบ:

• การตั้งค่าแรกใช้เฉพาะกับธีมเท่านั้น ไม่มีการเพิ่มประสิทธิภาพอื่นๆ
• การตั้งค่าที่สองคือการติดตั้งและกำหนดค่า WP Rocket เพื่อให้คุณสามารถดูว่าสิ่งต่าง ๆ จะมีลักษณะอย่างไรหากคุณใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพของ WordPress

นอกจากการแคชหน้าและแนวทางปฏิบัติที่ดีที่สุดพื้นฐานอื่นๆ แล้ว WP Rocket ยังมีคุณลักษณะเฉพาะบางอย่างที่สามารถเพิ่มประสิทธิภาพโค้ดของแต่ละธีมและปรับปรุงเมตริก Core Web Vitals

• ลบ CSS . ที่ไม่ได้ใช้ – สิ่งนี้ช่วยให้คุณลบ CSS ที่ไม่จำเป็นออกจากไซต์ของคุณแบบทีละหน้า การลดขนาดหน้าของธีมอย่าง Divi และ Avada สามารถทำได้ดีมาก

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

ไซต์ทดสอบของเราโฮสต์ด้วยหยด DigitalOcean ราคา $ 5 ต่อเดือนที่ขับเคลื่อนโดย RunCloud และสแต็ก Nginx ทั้งหมด เราไม่ได้ทำการปรับปรุงประสิทธิภาพใด ๆ นอกเหนือจากการเพิ่ม WP Rocket ในการทดสอบบางรายการดังที่กล่าวไว้ข้างต้น

ในการทดสอบและวัดข้อมูลประสิทธิภาพของ WordPress เราจะใช้ WebPageTest เพื่อรวบรวมข้อมูลประสิทธิภาพที่เน้นมือถือ:

• อุปกรณ์ทดสอบ – iPhone 8 อุปกรณ์ที่ทันสมัยกว่านั้นจะมีโปรเซสเซอร์ที่แข็งแกร่งกว่าเพื่อประมวลผล JavaScript ได้เร็วขึ้น ซึ่งอาจนำไปสู่การโหลดเร็วขึ้นเล็กน้อย อาจเป็นสิ่งที่ตรงกันข้ามกับอุปกรณ์รุ่นเก่า/ใช้พลังงานต่ำ
• ความเร็ว ในการเชื่อมต่อ – การเชื่อมต่อ LTE แบบควบคุมปริมาณ (12 Mbps, 70 ms RTT) เวลาในการโหลดในโลกแห่งความเป็นจริงจะเร็วขึ้นหากผู้เยี่ยมชมใช้งาน Wifi หรือช้าลงหากผู้ใช้มีบางอย่างเช่นการเชื่อมต่อ 3G

สำหรับการทดสอบแต่ละครั้ง เราจะให้ WebPageTest ทำการทดสอบแยกกัน 9 รายการและนำค่ามัธยฐานมา ซึ่งช่วยให้เราหลีกเลี่ยงความแปรปรวนของการทดสอบครั้งเดียวและได้ผลลัพธ์ที่สม่ำเสมอมากขึ้น

ต่อไปนี้คือตัวชี้วัดสี่ตัวที่เราจะเน้น:

1. Largest Contentful Paint (LCP) – ส่วนหนึ่งของเมตริก Core Web Vitals ใหม่ของ Google และปัจจัยการจัดอันดับ SEO ในการอัปเดต Page Experience
2. เวลาถึงไบต์แรก (TTFB) – วัดความเร็วที่เซิร์ฟเวอร์สามารถตอบสนองด้วยไบต์แรกของข้อมูลหลังจากประมวลผล PHP ของไซต์/ธีม (หรือส่งจากแคช ในกรณีของการทดสอบ WP Rocket ของเรา)
3. ขนาดหน้า – อย่างอื่นเท่ากัน ขนาดหน้าที่เล็กกว่าย่อมดีกว่าเสมอ
4. คำขอ HTTP – อย่างอื่นเท่ากัน คำขอ HTTP น้อยลงย่อมดีกว่าเสมอ

สุดท้าย ต่อไปนี้คือหมายเลขเวอร์ชันสำหรับทุกอย่างที่เรากำลังทดสอบ:

• ธีมอวาดา – 7.5
• Avada Builder – 3.5
• ธีม Divi – 4.13.1
• WP Rocket – 3.10.3.

การทดสอบความเร็ว Divi กับ Avada

ตอนนี้ มาดูการทดสอบประสิทธิภาพของ Divi กับ Avada แบบลงมือปฏิบัติกัน

ทดสอบ #1: แค่ธีม

ในการทดสอบครั้งแรกนี้ เรากำลังทดสอบเฉพาะธีม โดยไม่ต้อง ใช้ตัวสร้างภาพ:

• Divi – แค่ธีม Divi เนื่องจาก Divi รวมอยู่ใน Divi Builder แล้ว
• Avada – เรายังติดตั้งปลั๊กอิน Avada Core และ Avada Builder เนื่องจากเป็นปลั๊กอินหลักที่จำเป็น เราไม่ได้ติดตั้งปลั๊กอินเสริมใดๆ

เนื้อหาจริงคือ “หน้าตัวอย่าง” ที่มาพร้อมกับการติดตั้ง WordPress ใหม่ มันถูกสร้างขึ้นด้วยตัวแก้ไขบล็อกดั้งเดิม

นี่คือข้อมูลสำหรับธีมด้วยตัวเอง:

คุณจะเห็นว่า Divi เป็นผู้ชนะที่ค่อนข้างชัดเจนในเรื่องนี้ เมื่อพูดถึงเวลาระบายสีเนื้อหาที่ใหญ่ที่สุด เนื่องจากเวลาของ Avada สูงขึ้น 50%

ทำไมความแตกต่าง?

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

ทีนี้มาดูข้อมูลหลังจากเพิ่ม WP Rocket:

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

ยิ่งไปกว่านั้น WP Rocket สามารถลดขนาดหน้าของทั้งสองธีมได้อย่างมาก ต้องขอบคุณคุณสมบัติในการลบ CSS ที่ไม่ได้ใช้และทำให้การเรียกใช้ JavaScript ล่าช้า คุณจะเห็นได้ว่าขนาดหน้าของ Divi ลดลงมากกว่าครึ่งหนึ่งในขณะที่ขนาดหน้าของ Avada ลดลงมากกว่า 200 KB

การปรับปรุงเหล่านี้ควบคู่ไปกับแคชและการปรับแต่งอื่นๆ เป็นสาเหตุที่ทำให้เวลา LCP ดีขึ้น

การทดสอบ #2: กับผู้สร้าง

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

• โปรแกรมแก้ไขข้อความที่มีเนื้อหา lorem ipsum เหมือนกัน
• ปุ่ม
• วงกลมเคาน์เตอร์

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

นี่คือข้อมูลสำหรับธีม/ผู้สร้างเท่านั้น:

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

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

นี่คือข้อมูลหลังจากเพิ่ม WP Rocket:

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

ความคิดสุดท้ายเกี่ยวกับประสิทธิภาพของ Divi กับ Avada

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

อย่างไรก็ตาม ในขณะที่ทั้งคู่ให้การควบคุมนั้นแก่คุณ ตอนนี้ Divi นั้นเร็วขึ้นอย่างเห็นได้ชัดในแง่ของประสิทธิภาพที่พร้อมใช้งานทันที

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

อย่างไรก็ตาม หากคุณใช้ WP Rocket ด้วยการแคชและคุณลักษณะใหม่ ๆ เพื่อลบ CSS ที่ไม่ได้ใช้และทำให้การเรียกใช้ JavaScript ล่าช้า คุณสามารถทำการปรับปรุงอย่างมากสำหรับทั้งสองธีม

ในขณะที่ Divi ยังเร็วขึ้นเล็กน้อยเมื่อเปิดใช้งาน WP Rocket ความแตกต่างนั้นน้อยมากและ Avada ยังคงทำงานได้ดี

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

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

คุณสามารถหาธีมที่เร็วกว่าสองธีมนี้ รวมถึงธีม Astra ซึ่งทำงานได้ดีในการเปรียบเทียบประสิทธิภาพของ Divi กับ Astra ( แม้ว่าความแตกต่างจะไม่มากเท่าด้วยการปรับปรุงประสิทธิภาพใหม่ของ Divi )

คุณยังมีคำถามใด ๆ เกี่ยวกับ Divi vs Avada เกี่ยวกับความเร็วและประสิทธิภาพหรือไม่? ถามเราในความคิดเห็น!