เพิ่มความเร็วไซต์ Divi ของคุณด้วยคุณสมบัติป้องกันการบวม

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

วันนี้จะพูดถึง 4 คุณสมบัติป้องกันการบวม -

• กรอบงานโมดูลไดนามิก
• CSS แบบไดนามิก
• ไอคอนไดนามิก
• การเพิ่มประสิทธิภาพ JavaScript ด้วยไลบรารี JavaScript แบบไดนามิก

อย่าเสียเวลามากขึ้นและดูว่า Divi มีสำหรับเรามากแค่ไหน

Divi Solution สำหรับปัญหา Bloat

คำจำกัดความของการขยายเว็บไซต์

หน้าเว็บแบบสแตติกใดๆ ที่สร้างจาก HTML และ CSS ทั่วไปที่มีโค้ด JavaScript ที่ซับซ้อนซึ่งทำให้หน้าเว็บหนักกว่าที่ควรจะเป็น เรียกว่า web bloat เนื่องจากหน้าเว็บเป็นเพียงข้อความที่มาร์กอัป จึงควรใช้พื้นที่เพียงไม่กี่กิโลไบต์ แต่รายการในหน้าที่สำคัญ เช่น ป๊อปอัป เอฟเฟกต์การเคลื่อนไหว และแอนิเมชั่นกราฟิกทำให้หน้านั้นหนัก

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

ธีม WordPress เช่น Divi ใช้หน้า HTML ที่แสดงบนไฟล์ PHP แบบไดนามิก ดังนั้นที่นี่เราต้องพิจารณาขนาดและประสิทธิภาพของไฟล์ PHP ว่าเป็นการขยายเว็บ

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

ส่งผลต่อความเร็วของเว็บไซต์อย่างไร

หากหน้าต้องโหลดไฟล์แบ็คเอนด์ที่ผิดปกติมากกว่าที่อยู่ในหน้า จะต้องโหลดนานขึ้น ตัวอย่างเช่น มีเพจที่ต้องการ CSS เพียง 100 บรรทัด แต่หน้านั้นมีโค้ดมากกว่า 2,000 บรรทัด ซึ่งหมายความว่าเวลาในการโหลด 1800 บรรทัดเป็นการสิ้นเปลืองทั้งหมด

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

นอกจาก CSS และ Js แล้ว หน้าเว็บของคุณยังทำงานบนไฟล์ PHP ที่มีฟังก์ชันมากมาย สมมติว่า function.php ของคุณมีโค้ด 20,000 บรรทัดและฟังก์ชันนับร้อย ดังนั้น การนำส่งเนื้อหาไปยังหน้าใดหน้าหนึ่งจึงดำเนินการทั้งหมดนี้ ซึ่งไม่จำเป็นอย่างยิ่งเมื่อต้องการเพียงบางส่วนเท่านั้น

แก้ปัญหาบวมใน Divi

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

มีอะไรอยู่ในคุณสมบัติป้องกันการบวมนี้

คุณสมบัติ "ป้องกันการบวม" ของ Divi ทำหน้าที่หลัก 4 ประการสำหรับหน้าที่แน่นอน -

Dynamic Module Framework: แก้ไขปัญหาที่สร้างผ่านไฟล์ PHP โดยการเพิ่มประสิทธิภาพ ดังนั้น เฉพาะฟังก์ชันและโค้ดที่จำเป็นในการเรียกใช้เพจเท่านั้นที่ใช้งานได้จริงสำหรับเพจนั้น

CSS แบบไดนามิก: จะสร้างสไตล์ชีตแบบกำหนดเองที่ประกอบด้วยโค้ด CSS ที่จำเป็นสำหรับการโหลดหน้าเท่านั้น ไม่มีเวลาโหลดไฟล์ CSS เพิ่มเติม

ไลบรารี Javascript แบบไดนามิก: จะเพิ่มประสิทธิภาพและสร้างไฟล์ script.js แบบไดนามิกซึ่งจะโหลดไลบรารี JS ภายนอกที่จำเป็นสำหรับหน้า

ไอคอนไดนามิก: มันจะโหลดชุดย่อยของไอคอนที่ใช้ในหน้า ไม่ใช่ไอคอนทั้งหมดที่ใช้สำหรับเว็บไซต์

เปิดใช้งานคุณสมบัตินี้โดยไปที่ Divi

ฟีเจอร์ Anti Bloat ทำงานอย่างไร

อย่างที่เราทราบกันดีอยู่แล้วว่า Divi ได้เปิดตัวคุณลักษณะใหม่ที่เรียกว่า "anti-bloat" เพื่อลดเวลาในการโหลดหน้าเว็บที่เกิดขึ้นผ่านบรรทัดโค้ดที่ไม่เกี่ยวข้อง มาดูกันว่าฟีเจอร์นี้ทำงานอย่างไร

กรอบงาน PHP แบบไดนามิก: ฟังก์ชัน

Divi ปฏิบัติตามกฎง่ายๆ ที่นี่ ซึ่งดำเนินการเฉพาะฟังก์ชันที่จำเป็นเท่านั้น เป็นตรรกะที่พิสูจน์ได้อย่างสมบูรณ์ซึ่งดำเนินการนี้

การตรวจสอบก่อนดำเนินการ

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

โมดูลตามความต้องการ

ด้วยคุณสมบัติใหม่นี้ เพจสามารถโหลดโมดูลได้อย่างยืดหยุ่น เนื่องจากตรรกะการป้องกันอาการท้องอืดของ PHP Divi จึงประมวลผลเฉพาะรหัสย่อที่หน้าต้องการเท่านั้น ตัวอย่างเช่น หากคุณมี 5 โมดูลในหน้าเดียว Divi จะประมวลผลเฉพาะห้าโมดูลเท่านั้น ไม่ใช่ทั้งหมด และแสดงและส่งออกโมดูลทั้งห้าดังกล่าว

คุณสมบัติตามความต้องการ

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

Daynamic CSS

สไตล์ชีต Divi ยังรักษาตรรกะป้องกันการบวมที่ใช้ในกรอบงาน PHP ฟังก์ชัน Divi CSS ค่อนข้างใหญ่และมักจะสร้างการบวมที่ไม่จำเป็นบนหน้าเว็บ

กำลังโหลด CSS ตามหน้า

นี่คือสิ่งที่เกิดขึ้นเมื่อหน้าโหลด CSS แบบไดนามิก

• โหลดเฉพาะไฟล์ CSS ที่ต้องการจัดรูปแบบธีม Divi ขนาดไฟล์ไม่เกิน 50kb
• จากนั้นจะโหลดไฟล์ CSS ที่มีไดอะแกรมการออกแบบสำหรับหน้า โดยจะเปิดเฉพาะไฟล์แบบไดนามิกที่ใช้ในส่วนต่างๆ ของหน้า ตัวอย่างเช่น สำหรับหน้าแรกทั่วไป จะมีไฟล์เพียง 30kb

ที่นี่ตอนนี้เป็นไฟล์ CSS ขนาด 80kb โดยไม่มีการขยาย ก่อนหน้านี้มีขนาด 900kb และเกือบจะเต็มไปหมด

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

ไดนามิก JavaSript

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

ต่อไปนี้คือตัวอย่างเล็กๆ น้อยๆ เกี่ยวกับวิธีดูแลไลท์บ็อกซ์และฟังก์ชันเหนียวหนึบโดยฟีเจอร์ป้องกันการบวมของ Divi

ไอคอนไดนามิก

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

• ฐาน - ไอคอนปิดใช้งานธีม Divi จากโมดูล
• โซเชียล - โซเชียลมีเดียติดตามไอคอนจากชุดไอคอนฐาน
• ทั้งหมด - ชุดไอคอนทั้งหมดที่เครื่องมือเลือกไอคอนสามารถเลือกและใช้ไอคอนที่ต้องการได้

หากหน้าใดไม่ได้ใช้โมดูลโซเชียลมีเดียหรือไอคอนใดๆ ที่เลือกโดยเครื่องมือเลือกไอคอน หน้านั้นจะใช้ชุดไอคอนพื้นฐานที่ใช้พื้นที่ 6kb ขนาดจะสูงขึ้นเล็กน้อยหากเราใส่ไอคอนโซเชียลมีเดีย

หากเราใช้โมดูลการเลือกไอคอน/การนำเสนอ ขนาดชุดไอคอนทั้งหมดสามารถไปได้มากถึง 90kb

ห่อ

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