การเปรียบเทียบความเร็ว: สำรวจตัวสร้างภาพ Divi 5 ที่เร็วสุดขีด

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

ในโพสต์นี้ ฉันจะอธิบายการปรับปรุงประสิทธิภาพภายใน Visual Builder ที่ทำให้ Divi 5 เร็วกว่าเวอร์ชันก่อนๆ ทุกอย่างเกี่ยวกับ Divi 5 Visual Builder ได้รับการปรับให้เหมาะสมเพื่อความเร็ว

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

เขียนใหม่ทุกอย่าง: อะไรทำให้ Divi 5 แตกต่าง?

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

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

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

ดาวน์โหลด Divi 5 Alpha ลองใช้รายงานสาธิต Divi 5 Divi 5 Bug

1. ปรับปรุงความเร็วในการเรนเดอร์ Visual Builder ใหม่

เมื่อคุณทำงานกับเครื่องมือทั้งวัน ความเร็วเป็นสิ่งสำคัญ แม้แต่สารประกอบความล่าช้าที่น้อยที่สุดเมื่อเวลาผ่านไป ใน Divi เวอร์ชันก่อนหน้า บางครั้งนักออกแบบต้องรอเสี้ยววินาทีเพื่อให้ Visual Builder ตอบสนองเมื่อเพิ่มองค์ประกอบใหม่หรือปรับสไตล์ สิ่งนี้สังเกตได้ชัดเจนเป็นพิเศษเมื่อทำงานกับเอกสารขนาดยาว (โดยมีหลายสิบส่วนที่เต็มไปด้วยโมดูลและสไตล์ที่กำหนดเอง)

สังเกตเห็นการสั่นไหวของสไตล์บน D4 (ซ้าย) โดยที่ปุ่มจะใช้เวลาเป็นมิลลิวินาทีเพื่อใช้สไตล์จากส่วนที่ทำซ้ำอย่างสมบูรณ์ ซึ่งช้ากว่า D5 (ขวา) เพื่อทำซ้ำส่วนนี้

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

แต่จริงๆ แล้วมีอะไรเปลี่ยนแปลงไปบ้างที่ทำให้ผู้สร้างเร็วขึ้นมาก?

เทคโนโลยีเบื้องหลังการเรนเดอร์ซ้ำที่เร็วขึ้น

วิธีเดียวที่จะบรรลุการปรับปรุงระดับนี้คือการเริ่มต้นจากศูนย์ เรานำทุกสิ่งที่เราเรียนรู้ในช่วงทศวรรษที่ผ่านมาของการพัฒนา Divi และสร้างแอปพลิเคชันใหม่โดยใช้เทคโนโลยีที่ทันสมัย ​​ซึ่งช่วยขจัดภาระทางเทคนิคหลายปี เราใช้เวลาตรวจสอบปฏิสัมพันธ์ต่างๆ และระบุจุดคอขวด เรา ยังคง ทำเช่นนั้นอยู่ และ Divi 5 ก็เร็วขึ้นในการอัปเดตแต่ละครั้ง

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

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

2. เวลาโหลดเร็วขึ้น (อ่าน: ไม่ต้องโหลดซ้ำสองครั้งอีกต่อไป)

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

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

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

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

3. เราลบแอนิเมชั่นอินเทอร์เฟซทั้งหมดออก

การเปลี่ยนแปลงที่โดดเด่นที่สุดอย่างหนึ่งในอินเทอร์เฟซใหม่ของ Divi 5 (นอกเหนือจากการออกแบบใหม่ที่ทันสมัย) คือการลบแอนิเมชั่นทั้งหมด

ในเวอร์ชันก่อนหน้านี้ แอนิเมชันให้การตอบรับด้วยภาพเมื่อมีการโต้ตอบกับตัวสร้าง (เช่น การเพิ่มโมดูลใหม่หรือสลับโหมดมุมมอง) แม้ว่าแอนิเมชั่นเหล่านี้จะเพิ่มความสนุกสนานในระดับหนึ่ง แต่ก็ยังทำให้เกิดความล่าช้าเล็กน้อยในกระบวนการออกแบบ โดยเฉพาะอย่างยิ่งในระบบที่ช้ากว่า

ปรัชญาการออกแบบของ Divi 5 นั้นแตกต่างออกไป อินเทอร์เฟซพร้อมไว้ให้บริการคุณ ไม่มีอะไรเพิ่มเติม มันน้อยที่สุด มันไม่ได้ขวางทางคุณ มันไม่แข่งขันกับการออกแบบของคุณ มันไม่สนใจว่าจะดูเท่ UI/UX มีรากฐานมาจากความเร็วและประสิทธิภาพ

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

Divi 5 ไปจากที่นี่ที่ไหน?

Public Alpha เปิดตัวอย่างเป็นทางการแล้ว ก่อนอื่น เราขอขอบคุณสำหรับความอดทนของคุณในขณะที่เราทำงานอย่างขยันขันแข็งในช่วงหลายเดือนที่ผ่านมาเพื่อนำ Public Alpha ของ Divi 5 ออกสู่ตลาด ไม่ใช่งานเล็กๆ—และงานของเราเพิ่งเริ่มต้น

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

ดาวน์โหลด Divi 5 Alpha Report Divi 5 Bug

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

ลองใช้การสาธิต Divi 5

อนาคตของ Divi นั้นรวดเร็ว

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

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

ในอีกไม่กี่วันข้างหน้า เราจะพูดถึงความหมายที่ Divi 5 กำลังก้าวออกจากรหัสย่อ เจาะลึกระบบการย้ายไซต์ และข้อได้เปรียบที่เกี่ยวข้องกับนักพัฒนา อย่าลืมติดตามและสมัครรับข้อมูลอัปเดตเหล่านี้และอีกมากมาย