การเพิ่มประสิทธิภาพความเร็ว Divi: สุดยอดคู่มือ

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

คุณลักษณะการเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพในตัวของ Divi สามารถทำให้ไซต์ของคุณอยู่ในอันดับต้นๆ ของรายการในคะแนน Google PageSpeed ​​ได้อย่างง่ายดาย ด้วยคุณสมบัติอย่าง Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries และอื่นๆ ตอนนี้ Divi จึงเป็นทั้งตัวสร้างเพจที่แข็งแกร่งและธีมที่มีน้ำหนักเบา แต่ในทันทีที่ Divi มีปัจจัยพื้นฐานอื่น ๆ ที่จำเป็นต้องปรับให้เหมาะสม และหากไม่ได้รับการแก้ไข ความเร็วของไซต์ Divi ของคุณจะได้รับผลกระทบโดยไม่จำเป็น

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

• ประสิทธิภาพ WordPress เทียบกับประสิทธิภาพ Divi
• คุณสมบัติการเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพของ Divi ในตัว
• กรอบงานโมดูลไดนามิก
• ไลบรารี JavaScript แบบไดนามิก
• เลื่อน jQuery และ jQuery Migrate
• CSS แบบไดนามิก
• CSS ที่สำคัญ
• ความสูงของเกณฑ์วิกฤต
• โหลด Dynamic In-Line Stylesheet
• ปรับปรุงการโหลดแบบอักษรของ Google
• ปิดการใช้งาน WordPress Emojis
• Defer Gutenberg Block CSS
• ไอคอนไดนามิก
• Native Srcset รองรับภาพที่ตอบสนอง
• 14 สิ่งที่คุณสามารถทำได้เพื่อเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพของเว็บไซต์ Divi ของคุณ
• #1 อัปเกรดโฮสติ้งของคุณ
• #2 การเพิ่มประสิทธิภาพ TTFB
• #3 เพิ่มประสิทธิภาพฐานข้อมูลเว็บไซต์ของคุณ
• #4 เพิ่มประสิทธิภาพ DNS ของคุณ
• #5 ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)
• #6 เพิ่มแคช
• #7 เพิ่มการลดขนาดและการรวม
• #8 เปิดใช้งานการบีบอัด Gzip
• #9 การปรับภาพให้เหมาะสม
• #10 การเพิ่มประสิทธิภาพวิดีโอ
• #11 สร้างเพจ Divi ของคุณเพื่อความรวดเร็ว
• #12 ใช้ปลั๊กอินอย่างระมัดระวังและประหยัด
• #13 ทำการทดสอบความเร็ว
• #14 พิจารณาพิมพ์เขียวเพจความเร็วสูง Divi ของเรา
• การใช้ Divi และปลั๊กอินประสิทธิภาพบุคคลที่สามอื่น ๆ
• เคล็ดลับอื่นๆ

ประสิทธิภาพ WordPress เทียบกับประสิทธิภาพ Divi

Divi มักไม่ใช่ปัจจัยกำหนดประสิทธิภาพของเว็บไซต์ของคุณ มันเป็นเพียงชิ้นส่วนของปริศนา คุณต้องพิจารณาถึงความต้องการในการเพิ่มประสิทธิภาพพื้นฐานสำหรับไซต์ WordPress โดยทั่วไป Divi (ธีม Divi และ/หรือ Divi Builder) อยู่ด้านบนสุดของ WordPress (CMS) ซึ่งอยู่ด้านบนสุดของซอฟต์แวร์เซิร์ฟเวอร์จำนวนมาก ซึ่งอยู่ด้านบนของโครงสร้างพื้นฐานของโฮสติ้ง สิ่งเหล่านี้ต้องได้รับการปรับแต่งอย่างถูกต้อง สำหรับผู้เริ่มต้น สิ่งเหล่านี้รวมถึงสิ่งต่างๆ เช่น การโฮสต์ที่ดี การแคช และ CDN หากไม่มีการเพิ่มประสิทธิภาพพื้นฐานเหล่านี้ ไซต์ Divi จะช้าลงไม่ว่าเราจะเพิ่มประสิทธิภาพ Divi ได้ดีเพียงใด ดังนั้นหากเว็บไซต์ Divi ของคุณช้ามาก คุณต้องพิจารณาส่วนอื่นๆ ของปริศนาเหล่านี้ด้วย

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

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

คุณสมบัติการเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพของ Divi ในตัว

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

คุณสามารถจัดการคุณสมบัติการปรับประสิทธิภาพให้เหมาะสมได้โดยไปที่ Divi > ตัวเลือกธีม ภายใต้แท็บ ทั่วไป เลือกแท็บย่อย ประสิทธิภาพ

ตอนนี้เรามาดูคุณสมบัติที่ทำให้ง่ายต่อการสร้างเว็บไซต์ Divi ที่เร็วสุด ๆ กัน

กรอบงานโมดูลไดนามิก

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

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

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

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

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

ไลบรารี Javascript แบบไดนามิก

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

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

ตัวอย่าง: ไลบรารี JavaScript แบบไดนามิกสำหรับโมดูลรูปภาพโดยใช้ไลท์บ็อกซ์

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

เลื่อน jQuery และ jQuery Migrate

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

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

CSS แบบไดนามิก

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

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

วิธีนี้ช่วยแก้ปัญหา CSS bloat เพราะตอนนี้ไม่มีอยู่ ไม่มีการ ขยายตัวเนื่องจากไม่มีการโหลด CSS อื่น หากไม่มี Dynamic CSS สไตล์ชีตของ Divi จะอยู่ที่ประมาณ 900kb และจะโหลดได้ในทุกหน้าโดยไม่คำนึงถึงเนื้อหา ตอนนี้ ถ้าคุณต้องการเพียง 80kb ของ CSS สำหรับเพจ Dynamic CSS จะกำจัด 800+kb ที่คุณไม่ต้องโหลดหน้า นั่นหมายความว่าหน้าเว็บของคุณโหลดได้เร็วยิ่งขึ้น

CSS ที่สำคัญ

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

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

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

ความสูงของเกณฑ์วิกฤต

ที่เกี่ยวข้องกับ Critical CSS คือตัวเลือก Critical Threshold Height

เมื่อเปิดใช้งาน Critical CSS Divi จะกำหนด "เกณฑ์ครึ่งหน้าบน" และเลื่อนสไตล์ทั้งหมดสำหรับองค์ประกอบที่อยู่ครึ่งหน้าล่าง อย่างไรก็ตาม เกณฑ์นี้เป็นเพียงการประมาณการและอาจแตกต่างกันไปตามอุปกรณ์ต่างๆ ความสูงของเกณฑ์ที่เพิ่มขึ้นจะเลื่อนสไตล์น้อยลง ส่งผลให้เวลาในการโหลดช้าลงเล็กน้อยแต่โอกาสที่ Cumulative Layout Shifts (CLS) จะเกิดขึ้นน้อยกว่า หากคุณประสบปัญหา CLS คุณสามารถเพิ่มความสูงของเกณฑ์ได้

โหลด Dynamic In-Line Stylesheet

ตัวเลือก Load Dynamic In-Line Stylesheet เป็นการเพิ่มประสิทธิภาพ CSS ขั้นสุดท้ายที่จะลบคำขอ CSS ที่บล็อกการแสดงผลทั้งหมด

เนื่องจาก Dynamic CSS สไตล์ชีต Divi พื้นฐานจึงมีขนาดเล็กพอที่จะโหลดในหน้าจริงได้! การโหลด CSS ในบรรทัดนี้จะลบคำขอบล็อกการแสดงผลและปรับปรุงคะแนน Google PageSpeed เมื่อเปิดใช้งานตัวเลือก Critical CSS, Dynamic CSS และ Load Dynamic In-Line Stylesheet คำขอ CSS ที่บล็อกการแสดงผลทั้งหมดจะถูกลบออก

ปรับปรุงการโหลดแบบอักษรของ Google

ตัวเลือก Improve Google Fonts Loading เปิดใช้งานการแคชของ Google Fonts และโหลดแบบอินไลน์ในส่วนหัว ซึ่งจะช่วยลดคำขอบล็อกการแสดงผลและเพิ่มความเร็วในการโหลด

เรายังเพิ่มตัวเลือกจำกัดการสนับสนุนแบบอักษรของ Google สำหรับเบราว์เซอร์รุ่นเก่า

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

ปิดการใช้งาน WordPress Emojis

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

Defer Gutenberg Block CSS

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

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

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

มีชุดย่อยแบบอักษรของไอคอนสามชุดที่ใช้โดยพิจารณาจากสิ่งที่เพจต้องการ

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

นี่คือตัวอย่างชุดย่อยของฟอนต์ไอคอนโซเชียลที่โหลดแบบไดนามิกเนื่องจากโมดูลติดตามโซเชียลมีเดียที่มีอยู่ในเพจ

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

Native Srcset รองรับภาพที่ตอบสนอง

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

14 สิ่งที่คุณสามารถทำได้เพื่อเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพของเว็บไซต์ Divi ของคุณ

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

14 สิ่งที่คุณสามารถทำได้เพื่อเพิ่มประสิทธิภาพความเร็วและประสิทธิภาพของเว็บไซต์ Divi ของคุณ...

#1 อัปเกรดโฮสติ้งของคุณ

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

ใช้ Divi Optimized Hosting

หากคุณต้องการเว็บไซต์ Divi ที่รวดเร็ว คุณควรเลือกผู้ให้บริการโฮสติ้งที่ปรับให้เหมาะสมไม่เฉพาะสำหรับ WordPress เท่านั้น แต่ยังรวมถึง Divi ด้วย ดังนั้น หากคุณกำลังมองหาโฮสติ้ง WordPress ที่ยอดเยี่ยมซึ่งทำงานได้อย่างไม่มีที่ติกับ Divi และมาพร้อมกับการติดตั้ง Divi อัตโนมัติ Divi Hosting จึงเป็นโซลูชันใหม่ที่ยอดเยี่ยมสำหรับคุณ เราร่วมมือกับโฮสต์ WordPress ที่เราชื่นชอบ (Pressable, Flywheel และ SiteGround) เพื่อให้ลูกค้า Divi มีวิธีง่ายๆ ในการสร้างเว็บไซต์ Divi ที่รวดเร็ว โดยได้รับการสนับสนุนจากโครงสร้างพื้นฐานโฮสติ้งที่ทันสมัยซึ่งตรงตามข้อกำหนดของ Divi ทั้งหมด และได้รับการสนับสนุนจากผู้เชี่ยวชาญ WordPress ชั้นนำ .

ทำไมต้องเลือก Divi Hosting?

ในท้ายที่สุด ผู้ใช้ Divi ทุกคนจำเป็นต้องเลือกโฮสติ้ง การเลือกผิดอาจนำไปสู่ความเศร้าโศกมากมาย เราต้องการทำให้ทางเลือกนั้นง่าย นี่เป็นเพียงบางส่วนที่ทำให้ Divi Hosting ไม่เหมือนใคร:

• เมื่อคุณสร้างเว็บไซต์ของคุณ Divi จะติดตั้งโดยอัตโนมัติ
• เว็บไซต์ใหม่ของคุณจะเชื่อมต่อกับบัญชี Elegant Themes ของคุณโดยอัตโนมัติ และตั้งค่าด้วยรหัสใบอนุญาตของคุณ เพื่อให้คุณสามารถรับการอัปเดตและการสนับสนุนได้
• สภาพแวดล้อมการโฮสต์ของคุณจะถูกกำหนดค่าให้ตรงตามการตั้งค่า PHP ที่แนะนำของ Divi ทั้งหมดตั้งแต่แกะกล่อง ไม่จำเป็นต้องมีการปรับเปลี่ยนใดๆ
• เว็บไซต์ของคุณจะขับเคลื่อนโดยโครงสร้างพื้นฐานการโฮสต์ที่รวดเร็วและทันสมัย ​​ซึ่งหมายถึงเวลาในการโหลดที่รวดเร็วและเครื่องมือที่ทันสมัย ​​เช่น การแคชอัตโนมัติและ CDN
• คุณจะเป็นเจ้าภาพโดยบริษัทที่รู้จัก WordPress ทั้งภายในและภายนอก
• คุณจะเป็นเจ้าภาพโดยหนึ่งในพันธมิตรของเรา ซึ่งหมายความว่าพวกเขาทุ่มเทเพื่อให้มั่นใจว่าประสบการณ์ Divi ที่ยอดเยี่ยมในระบบของพวกเขา

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

ค้นหาโซลูชันโฮสติ้งที่เหมาะสมสำหรับไซต์ Divi ของคุณ

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

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

โฮสติ้งแบบดั้งเดิม (แชร์) (ไม่แนะนำ)

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

โฮสติ้งเฉพาะ

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

โฮสติ้ง VPS

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

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

คลาวด์โฮสติ้ง

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

ข้อแตกต่างหลักประการหนึ่งระหว่าง Cloud Hosting และ VPS โฮสติ้งคือ VPS โฮสติ้งมีทรัพยากรจำนวนเฉพาะ (หรือจำกัด) ที่จะดึงจากทรัพยากรที่อาจหมดลงหรือไม่ก็ได้ ในทางกลับกัน Cloud Hosting สามารถรักษาทรัพยากรของคุณให้พร้อมใช้งานโดยไม่ทำให้หมดเพราะสามารถดึงจากเซิร์ฟเวอร์อื่นในระบบคลาวด์ได้เสมอ ตามทฤษฎีแล้ว คลาวด์โฮสติ้งมีความเร็วสูงที่สม่ำเสมอและเชื่อถือได้มากกว่า ดังนั้น หากคุณจริงจังกับความเร็ว คลาวด์โฮสติ้งเป็นตัวเลือกที่ยอดเยี่ยม (อาจจะดีที่สุด)

โฮสติ้ง WordPress ภายใต้การจัดการ

Managed WordPress Hosting มักจะหมายถึงโฮสติ้งที่ใช้ร่วมกันซึ่งจัดการโดยผู้เชี่ยวชาญ WordPress โดยปกติแล้วจะมีค่าใช้จ่ายมากกว่าโฮสติ้งที่ใช้ร่วมกันแบบเดิมเล็กน้อย แต่ถ้าคุณต้องการไซต์ Divi ที่เร็วกว่า โฮสติ้ง WordPress ที่มีการจัดการอาจคุ้มค่า ไม่ใช่ "ส่วนตัว" เป็น VPS หรือมีประสิทธิภาพเท่ากับสภาพแวดล้อมการโฮสต์โดยเฉพาะ แต่มันช่วยเพิ่มความเร็วให้กับสภาพแวดล้อมที่ใช้ร่วมกันของคุณโดยให้ผู้เชี่ยวชาญ WordPress ทำงาน พวกเขาทำได้ดีเพราะพวกเขาปรับแต่งบริการและกำหนดค่าเซิร์ฟเวอร์สำหรับไซต์ WordPress อย่างเคร่งครัด และส่วนใหญ่มาพร้อมกับคุณสมบัติในตัวที่ยอดเยี่ยมและสะดวกมากมาย เช่น สภาพแวดล้อมการจัดเตรียมด้วยการคลิกเพียงครั้งเดียว การแคชไซต์ การปรับใช้ CDN ในคลิกเดียว การสำรองข้อมูลอัตโนมัติ SSL และอื่นๆ เหมาะสำหรับพวกเราที่ไม่ต้องการพึ่งพา (หรือจัดการ) ปลั๊กอินจำนวนมากสำหรับการเพิ่มประสิทธิภาพความเร็วพื้นฐาน ความปลอดภัย และการจัดการ

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

#2 เพิ่มประสิทธิภาพเวลาเป็นไบต์แรก (TTFB)

TTFB คืออะไร?

Time to First Byte (TTFB) คือระยะเวลาที่ผู้ใช้ใช้ในการรับข้อมูลเว็บไซต์ไบต์แรกจากโฮสต์/เซิร์ฟเวอร์ของคุณ ดังนั้นเมื่อผู้ใช้ส่งคำขอ HTTP (โหลดหน้าเว็บของคุณ) โดยพื้นฐานแล้ว TTFB จะเป็นระยะเวลารอนั้นก่อนที่เบราว์เซอร์จะได้รับข้อมูลใดๆ นี่เป็นสิ่งสำคัญเพราะยิ่ง TTFB ยาวเท่าไหร่ หน้าก็จะโหลดนานขึ้นเท่านั้น

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

TTFB ควรอยู่ที่ประมาณ 200ms (ตาม Google) แต่สำหรับไซต์ที่มีการโฮสต์ที่ไม่ดีและไม่ได้รับการปรับให้เหมาะสม TTFB อาจใช้เวลา 2 วินาทีขึ้นไปได้อย่างง่ายดาย

อะไรทำให้ TTFB ช้า

TTFB ล่าช้าในไซต์ Divi ของคุณมักเกิดจากสิ่งต่อไปนี้:

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

วิธีเพิ่มความเร็ว TTFB ของไซต์ Divi ของคุณ

TTFB เป็นหนึ่งใน Web Vitals (พร้อมกับ FCP, LCP และ CLS) ที่ Google ใช้เพื่อกำหนดอันดับเว็บไซต์ของคุณ ดังนั้นการเพิ่มประสิทธิภาพจึงเป็นสิ่งสำคัญ ข่าวดีก็คือ TTFB สามารถเพิ่มประสิทธิภาพได้ ต่อไปนี้เป็นเคล็ดลับสำคัญบางประการที่คุณสามารถใช้ในการลด TTFB

• อัพเกรดโฮสติ้งของคุณ วิธีที่มีประสิทธิภาพที่สุดในการเพิ่ม TTFB ของคุณคือการอัปเกรดโฮสติ้งของคุณ การจ่ายเงินเพิ่มอีกเล็กน้อยสำหรับโฮสติ้งที่มีการจัดการสำหรับ WordPress หรือ Divi Hosting จะมีผลกระทบมากที่สุดต่อ TTFB ทันที
• ใช้ CDN ซึ่งจะช่วยให้ผู้เข้าชมสามารถโหลดข้อมูลไซต์ของคุณจากเซิร์ฟเวอร์ที่ใกล้เคียงที่สุด คุณจึงสามารถลดเวลาในการตอบสนองและลด TTFB ได้
• ลบปลั๊กอินหรือธีมที่ไม่จำเป็น ปลั๊กอินและธีม (โดยเฉพาะที่ล้าสมัย) อาจทำให้เซิร์ฟเวอร์ของไซต์และเวลาในการโหลด (รวมถึง TTFB) ดังนั้น ควรใช้เฉพาะปลั๊กอิน (หรือธีม) ที่มีคุณภาพที่จำเป็นเท่านั้น และลบส่วนอื่นๆ ออก
• ใช้การแคช Divi มีการแคชในตัวสำหรับส่ง Divi JS และ CSS แต่การแคชเว็บไซต์ของคุณโดยรวม นอกจากการใช้ CDN แล้ว จะลด TTFB

ใช้ Cloudflare เพื่อเพิ่ม TTFB

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

หากต้องการเรียนรู้เพิ่มเติม โปรดอ่านบทความฉบับสมบูรณ์เกี่ยวกับ TTFB และวิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณ

#3 เพิ่มประสิทธิภาพฐานข้อมูลเว็บไซต์ของคุณ

เหตุใดไซต์ WordPress จึงต้องการฐานข้อมูลที่สะอาด

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

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

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

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

วิธีเพิ่มประสิทธิภาพฐานข้อมูลของไซต์ Divi ของคุณ

ฉันขอแนะนำให้ใช้ปลั๊กอินสำหรับสิ่งนี้ WP Optimize ดูเหมือนจะเป็นตัวเลือกที่น่าเชื่อถือ แต่มีปลั๊กอินฐานข้อมูล WordPress อื่น ๆ ที่ต้องพิจารณา

หรือถ้าคุณรู้ว่ากำลังทำอะไร คุณก็สามารถทำได้ด้วยตนเองใน MySQL

นอกจากการล้างฐานข้อมูล WordPress ของคุณแล้ว คุณอาจต้องการทำให้ WordPress มีน้ำหนักเบายิ่งขึ้นด้วยการลดข้อมูลที่เก็บไว้ ตัวอย่างเช่น WordPress จะเก็บรายการที่ถูกลบในถังขยะโดยอัตโนมัติเป็นเวลา 30 วัน คุณอาจต้องการลดช่วงเวลานั้นลงเหลือ 7

#4 เพิ่มประสิทธิภาพ DNS ของคุณ

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

สิ่งแรกที่ต้องเกิดขึ้นเมื่อผู้ใช้เข้าชม URL ของหน้าเว็บใดหน้าหนึ่งของคุณคือ DNS Lookup ทันทีที่ป้อน URL (หรือคลิก) ISP ของผู้เยี่ยมชมจะส่งข้อความค้นหา DNS ไปยังเนมเซิร์ฟเวอร์เพื่อค้นหาที่อยู่ IP ที่เชื่อมโยงกับโดเมนของคุณ (ทุกโดเมน/เว็บไซต์มีที่อยู่ IP เฉพาะ) โดยพื้นฐานแล้ว การค้นหา DNS นั้นเหมือนกับการค้นหาชื่อโดเมนของคุณในสมุดโทรศัพท์เพื่อค้นหาที่อยู่ IP สำหรับโดเมนนั้น

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

โดยทั่วไปแล้ว ผู้ให้บริการ DNS ฟรีส่วนใหญ่เช่น Godaddy และ Namecheap จะช้ากว่าที่คุณคิด

การใช้ Cloudflare สำหรับการเพิ่มประสิทธิภาพ DNS (และอื่น ๆ ถ้าคุณต้องการ)

ตัวเลือกฟรีที่ดีที่สุดที่จะเพิ่มความเร็วในการค้นหา DNS ของคุณน่าจะเป็น Cloudflare พวกเขามีประสิทธิภาพ DNS ที่เร็วที่สุดที่บันทึกไว้ใน DNSPerf.com ซึ่งจะเร็วกว่า GoDaddy และ Namecheap อย่างมาก และคุณยังสามารถเพิ่มประสิทธิภาพ Cloudflare เพื่อใช้กับ DNS ได้โดยไม่ต้องใช้บริการอื่นๆ (เช่น CDN หรือ WAF) หากคุณต้องการ

ตัวอย่างเช่น คุณอาจต้องการใช้ Cloudflare สำหรับ DNS และความปลอดภัย (การตรวจหา DDOS) และ KeyCDN (หรือ MaxCDN) สำหรับ CDN ของคุณ ดูเหมือนว่ามันจะเป็นการผสมผสานที่ยอดเยี่ยม

การตั้งค่า Cloudflare

Cloudflare นั้นง่ายต่อการติดตั้ง คุณไม่ต้องกังวลกับการเปลี่ยนโฮสติ้งหรืออะไรก่อนอื่น สิ่งที่คุณต้องทำคือเดินผ่านการตั้งค่า 5 นาทีที่เริ่มต้นด้วยการป้อนโดเมนของคุณ

พวกเขาจะดึงระเบียน DNS ปัจจุบันของคุณโดยอัตโนมัติ

สิ่งสำคัญที่คุณต้องทำเพื่อตั้งค่าให้เสร็จสิ้นคือเปลี่ยนเนมเซิร์ฟเวอร์เริ่มต้นบนผู้ให้บริการ DNS ปัจจุบันของคุณ (เช่น GoDaddy) เป็นเนมเซิร์ฟเวอร์ของ Cloudflare

จากนั้นคุณสามารถจัดการ DNS ของคุณได้อย่างง่ายดายจากแดชบอร์ด

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

เมื่อพูดถึง CDN คุณต้องใช้หนึ่งในนั้นอย่างแน่นอน

#5 ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

StackPath CDN PoPs

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

ลองคิดดูว่า เมื่อคุณต้องการส่งพิซซ่าไปส่งที่บ้าน คุณต้องไม่เลือกร้านพิซซ่าที่อยู่ห่างออกไป 30 ไมล์ คุณเลือกที่ที่อยู่ห่างออกไป 5 ไมล์เพราะคุณต้องการให้ส่งโดยเร็วที่สุด (ถ้าคุณเป็นมนุษย์ธรรมดาที่รักพิซซ่ามากเท่ากับฉัน) CDN ทำงานในลักษณะเดียวกัน เนื่องจากคุณต้องการให้เว็บไซต์ปรากฏในเบราว์เซอร์ของคุณโดยเร็วที่สุด CDN จะมีไฟล์เว็บไซต์ของคุณพร้อมสำหรับส่งจากเซิร์ฟเวอร์ที่ใกล้กับตำแหน่งของคุณมากที่สุด ดังนั้น หากไฟล์ไซต์ของคุณถูกจัดเก็บไว้ในเซิร์ฟเวอร์ในซานฟรานซิสโก และมีคนในลอนดอนดึงไซต์ของคุณขึ้นมา อาจต้องใช้เวลา 1 หรือ 2 วินาทีในการรับข้อมูลนั้นจากเซิร์ฟเวอร์ที่อยู่ห่างออกไปหลายพันไมล์ แต่ด้วย CDN คุณสามารถส่งข้อมูลเดียวกันนั้นจากเซิร์ฟเวอร์ในลอนดอนได้ในเวลาเพียงครึ่งเดียว นั่นเป็นความแตกต่างใหญ่!

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

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

ต่อไปนี้คือแพลตฟอร์ม CDN ที่น่าเชื่อถือที่ควรพิจารณา:

• Cloudflare CDN: นอกเหนือจากการเพิ่มประสิทธิภาพ DNS (ที่กล่าวถึงข้างต้น) Cloudflare ยังเสนอ CDN ทั่วโลกที่รวดเร็วและปลอดภัยซึ่งแคชเนื้อหาแบบคงที่และส่งมอบให้กับผู้ใช้อย่างรวดเร็ว ซึ่งรวมอยู่ในแผนบริการฟรีซึ่งยอดเยี่ยมสำหรับไซต์ส่วนใหญ่
• KeyCDN (คุณสามารถใช้กับปลั๊กอิน CDN Enabler WordPress เพื่อรวม KeyCDN การตั้งค่านี้จะทำงานได้ดีกับ Cache Enabler เช่นกัน)
• StackPath (ก่อนหน้านี้คือ MaxCDN)
• Amazon Cloudfront
• Sucuri

มีปลั๊กอินแคชบางตัวเช่น WP Total Cache หรือ CDN Enabler ที่มีตัวเลือกสำหรับการรวมผู้ให้บริการ CDN หลายรายโดยอัตโนมัติซึ่งสะดวกมาก

นี่คือปลั๊กอินบางตัวที่รองรับ CDN:

• WP แคชที่เร็วที่สุด
• WP Rocket
• เพิ่มประสิทธิภาพอัตโนมัติ
• W3 แคชทั้งหมด
• WP Super Cache
• ตัวเปิดใช้งาน CDN

#6 เพิ่มแคช

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

• การแคชหน้า – กระบวนการนี้เก็บแคชเวอร์ชัน HTML คงที่ของหน้าของคุณเพื่อการจัดส่งที่รวดเร็ว
• การแคชเบราว์เซอร์ – ช่วยให้คุณควบคุมเนื้อหาที่ เบราว์เซอร์สามารถแคชได้ มากขึ้นและนานเท่าใด มีเพียงปลั๊กอินบางตัวเท่านั้นที่สามารถทำได้ ดังนั้นควรทำด้วยตนเองเพื่อการควบคุมที่มากขึ้น ซึ่งจะช่วยดูแลเมตริกซ์ "Leverage Browser Caching" เมื่อทำการทดสอบความเร็ว
• การแคช CDN – ให้บริการหน้าเว็บไซต์/ไฟล์ที่แคชไว้จาก CDN ที่ใกล้กับผู้ใช้ของคุณมากที่สุด
• การแคชวัตถุ - การแคชวัตถุจะแคชผลลัพธ์การสืบค้นซ้ำที่ PHP เริ่มต้นเพื่อดึงข้อมูลจากฐานข้อมูลและให้บริการแก่ผู้ใช้ ซึ่งแตกต่างจากการแคช bytecode ซึ่งเก็บเวอร์ชันแคชของโค้ด PHP ที่คอมไพล์แล้วซึ่งใช้เพื่อแสดงเว็บไซต์ของคุณ

Divi ทำการแคชเมื่อให้บริการไฟล์ JS และ CSS ของ Divi เบื้องหลัง แต่นี่เป็นส่วนใหญ่สำหรับไฟล์ธีม Divi เพื่อฟังก์ชัน Divi Builder ที่ดีขึ้น

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

CDN ของ Cloudflare เป็นวิธีที่ยอดเยี่ยมในการเพิ่มแคชไปยังไซต์ Divi ของคุณ มันเก็บสำเนาของเนื้อหาของเว็บไซต์ (ทรัพยากรแบบคงที่) ในทางภูมิศาสตร์ใกล้กับผู้เยี่ยมชมเพื่อลดการโหลดหน้าและเวลาแฝง APO สำหรับ WordPress ของ Cloudflare ดูเหมือนจะเป็นโซลูชันที่ตรงเป้าหมายยิ่งขึ้นสำหรับการแคชหน้าเว็บและแบบอักษรของบุคคลที่สามสำหรับไซต์ WordPress/Divi โดยใช้ปลั๊กอิน WordPress

ปลั๊กอินแคชยอดนิยม ได้แก่ :

• WP Rocket
• Cache Enabler (อ่านรีวิวของเรา)
• W3 Total Cache (อ่านรีวิวของเรา)
• W3 Super Cache (อ่านรีวิวของเรา)
• Comet Cache (อ่านรีวิวของเรา)
• WP แคชที่เร็วที่สุด

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

#7 เพิ่มการย่อขนาดและการรวมเว็บไซต์

การลดขนาดทำให้ไฟล์ไซต์ของคุณเล็กลง การลดขนาดไฟล์ไซต์ของคุณ (CSS, JavaScript, HTML) จะลบอักขระที่ไม่จำเป็นทั้งหมดออก (เช่น การเว้นวรรคและตัวแบ่งหน้า) เพื่อให้ขนาดไฟล์เล็กลง ซึ่งจะช่วยลดเวลาที่เบราว์เซอร์ใช้ในการโหลดเนื้อหาของหน้า

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

ดังที่ได้กล่าวไว้ก่อนหน้านี้ Divi จะย่อขนาดและรวม Javascript และ CSS แบบไดนามิกตามค่าเริ่มต้น ดังนั้นในทางเทคนิคแล้ว คุณจึงไม่ต้องกังวลกับการใช้ปลั๊กอินของบุคคลที่สามเพื่อลดขนาดและรวม Javascript ของ Divi และ CSS อย่างไรก็ตาม Divi จะไม่ย่อขนาดเอาต์พุต HTML คุณจึงได้รับประโยชน์จากปลั๊กอินของบุคคลที่สามในการลดขนาด (และแคช) HTML ทั้งหมดของหน้า

นอกจากนี้ ไซต์ Divi เกือบทุกแห่งจะขึ้นอยู่กับไฟล์ที่อยู่นอกธีม Divi (เช่น ปลั๊กอินหรือไฟล์อื่นๆ ที่เพิ่มในธีมย่อย) ซึ่งจะได้รับประโยชน์จากการลดขนาดและการรวมไฟล์ CSS และ JS

วิธีหนึ่งที่ดีที่สุดในการเพิ่มการลดขนาดลงใน HTML, JS และ CSS ของทั้งเว็บไซต์ของคุณคือการใช้ Cloudflare Cloudflare ใช้ Auto Minify เพื่อลดขนาดไฟล์ของซอร์สโค้ดทั้งหมดบนเว็บไซต์ของคุณ นอกจากนี้ยังมาพร้อมกับรุ่นฟรีมาตรฐานอีกด้วย

ปลั๊กอินที่น่าเชื่อถือบางตัวที่จะย่อไฟล์ไซต์ของคุณ ได้แก่ :

• เพิ่มประสิทธิภาพอัตโนมัติ
• W3 Total Cache (อ่านรีวิวของเรา)
• W3 Super Cache (อ่านรีวิวของเรา)
• WP Rocket (จ่ายแล้ว)

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

และหากมีข้อขัดแย้ง คุณอาจต้องปิดการใช้งานตัวเลือกในตัวของ Divi และปล่อยให้ปลั๊กอินของบุคคลที่สามจัดการสิ่งต่างๆ

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

#8 เปิดใช้งานการบีบอัด GZIP

การบีบอัด Gzip ช่วยเร่งความเร็วไซต์ Divi ของคุณอย่างไร

การเปิดใช้งานการบีบอัด Gzip บนไซต์ Divi ของคุณสามารถเพิ่มความเร็วได้อย่างมาก (มากถึง 70% ในบางกรณี) หากคุณคุ้นเคยกับการสร้างไฟล์บีบอัด (หรือซิป) บนคอมพิวเตอร์ของคุณ แสดงว่าคุณมีความเข้าใจพื้นฐานแล้วว่าการบีบอัด Gzip ทำงานอย่างไร เราสร้างไฟล์ zip (หรือโฟลเดอร์) เพื่อทำให้เนื้อหาของไฟล์ (หรือโฟลเดอร์) เล็กลง ทำไม? เพื่อให้เราสามารถอัปโหลดและดาวน์โหลดไฟล์ได้รวดเร็วยิ่งขึ้น! การบีบอัด Gzip ทำสิ่งเดียวกันกับเว็บไซต์ของคุณ มันบอกให้เซิร์ฟเวอร์บีบอัดไฟล์ทั้งหมดที่สามารถทำได้เป็นเวอร์ชันที่เล็กกว่าเพื่อให้สามารถให้บริการแก่ลูกค้าได้เร็วยิ่งขึ้น สิ่งนี้สามารถเพิ่มความเร็วในการโหลดหน้าเว็บได้จริงๆ

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

การบีบอัด Gzip เป็นอัลกอริธึมการบีบอัดที่ใช้กันอย่างแพร่หลาย แต่ดูเหมือนว่าการบีบอัด Brotli เป็นอัลกอริธึมรุ่นต่อไปที่พยายามทำให้ขนาดไฟล์เล็กลงเพื่อการถ่ายโอนข้อมูลที่รวดเร็วยิ่งขึ้น มันถูกใช้งานโดยบริษัทที่ให้บริการพื้นที่เช่น SiteGround และ Cloudflare

วิธีเปิดใช้งานการบีบอัด Gzip บนไซต์ Divi ของคุณ

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

ดังที่ได้กล่าวไปแล้ว Cloudflare ให้การบีบอัด Brotli สำหรับโดเมนทั้งหมดในแผนฟรีของพวกเขา

ปลั๊กอินประสิทธิภาพของ WordPress จำนวนมาก (เช่น W3 Total Cache และ WP Super Cache) จะรวมการบีบอัด Gzip เป็นตัวเลือก อย่างไรก็ตาม ไม่จำเป็นต้องเพิ่มปลั๊กอินประสิทธิภาพสำหรับการเพิ่มประสิทธิภาพนี้

วิธีหนึ่งทั่วไปในการเปิดใช้งานการบีบอัด Gzip (บนเซิร์ฟเวอร์ Apache) คือการดำเนินการด้วยตนเองโดยใช้ mod_deflate และสิ่งที่คุณต้องทำคือเข้าถึงเว็บไซต์ของคุณ (รูท) ผ่าน FTP (ตรวจสอบให้แน่ใจว่าได้แสดงไฟล์ที่ซ่อนอยู่) จากนั้นคัดลอกและวางบล็อคโค้ดที่ด้านล่างของไฟล์ .htaccess ของคุณ

#9 การปรับภาพให้เหมาะสม

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

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

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

ใช้ประเภทไฟล์ที่ถูกต้อง

เมื่อพูดถึงรูปภาพบนเว็บ คุณควรยึดติดกับไฟล์รูปภาพประเภทต่อไปนี้:

• JPG – ไฟล์ประเภทนี้ควรเป็นประเภทไฟล์ที่คุณคุ้นเคยสำหรับรูปภาพ/ภาพถ่ายส่วนใหญ่ที่คุณใช้ในไซต์ของคุณ เนื่องจากคุณจะได้ภาพที่ดูดีในขนาดไฟล์ที่เล็กกว่า PNG หรือ GIF หลีกเลี่ยงการใช้รูปแบบ PNG สำหรับสิ่งต่างๆ เช่น ภาพพื้นหลังหรือภาพถ่าย เว้นแต่ว่าคุณต้องการพื้นหลังโปร่งใส
• PNG – ใช้ PNG สำหรับรูปภาพที่ต้องการพื้นหลังโปร่งใส JPG ไม่สนับสนุนความโปร่งใส
• SVG – นี่คือรูปแบบเวกเตอร์ที่ให้รายละเอียดที่คมชัดอย่างยิ่งโดยใช้โค้ด HTML SVG นั้นยอดเยี่ยมสำหรับโลโก้ ไอคอน และแอนิเมชั่นเวกเตอร์อื่นๆ

ปรับขนาดและครอบตัดรูปภาพของคุณ

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

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

บีบอัดขนาดไฟล์

คุณจะต้องลดขนาดไฟล์ภาพลงจนถึงจุดนั้นก่อนที่คุณจะสังเกตเห็นว่าคุณภาพลดลง ทำได้โดยการบีบอัดภาพ โปรแกรมแก้ไขภาพ ปลั๊กอิน และเว็บไซต์ส่วนใหญ่ เช่น tinypng.com บีบอัดภาพโดยใช้การบีบอัดแบบไม่สูญเสียข้อมูล (ซึ่งย่อขนาดไฟล์ภาพโดยไม่สูญเสียคุณภาพของภาพ) และการบีบอัดข้อมูลแบบสูญเสียข้อมูลอย่างชาญฉลาด (ซึ่งลดขนาดของไฟล์ภาพโดยการลดข้อมูลเมตาและคุณภาพของภาพใน แบบที่ผู้ใช้มองไม่เห็นจริงๆ)

ใช้ประโยชน์จากเครื่องมือเพิ่มประสิทธิภาพรูปภาพ

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

มีปลั๊กอินที่ยอดเยี่ยมที่จะบีบอัดรูปภาพให้คุณ ปลั๊กอินบางตัว (เช่น Imagify) จะบีบอัดรูปภาพที่ใช้อยู่แล้วในไซต์ของคุณ และบีบอัดรูปภาพโดยอัตโนมัติเมื่อคุณอัปโหลดไปยังไลบรารี WordPress Media โปรดทราบว่าการใช้ปลั๊กอินสำหรับสิ่งนี้อาจทำให้ไซต์ของคุณต้องเสียภาษีในขณะที่บีบอัดรูปภาพเหล่านั้น ดังนั้นจึงเป็นแนวทางปฏิบัติที่ดีที่สุดในการปรับภาพให้เหมาะสมล่วงหน้าหากเป็นไปได้

ต่อไปนี้คือเครื่องมือและปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่ยอดเยี่ยมที่คุณสามารถใช้ได้:

• เว็บไซต์:
  • Compressor.io
  • Tinypng.com
• ปลั๊กอิน:
  • จินตนาการ
  • Smush Image Compression และ Optimizaton
  • จรวด WP

สำหรับข้อมูลเพิ่มเติม โปรดดูการเปรียบเทียบปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพคุณภาพ 6 รายการ

รองรับ SRCSET ในตัวของ Divi

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์พร้อมการรองรับ Native SRCSET ก็รวมอยู่ใน Divi ด้วยเช่นกัน วิธีนี้ช่วยปรับปรุงการเพิ่มประสิทธิภาพของรูปภาพที่ใช้ใน Divi ให้ดียิ่งขึ้นด้วยการแสดงภาพที่ปรับขนาดซึ่งมีขนาดที่เหมาะสมสำหรับจอแสดงผลที่ตอบสนองแบบต่างๆ (เช่น แท็บเล็ตและโทรศัพท์)

#10 การเพิ่มประสิทธิภาพวิดีโอ

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

หากคุณกำลังจะโฮสต์วิดีโอด้วยตนเอง คุณจะต้องลดขนาดวิดีโอลงเพื่อให้โหลดเร็วขึ้น คุณสามารถย่อไฟล์วิดีโอได้อย่างง่ายดายโดยใช้เครื่องมือฟรี เช่น Handbrake (ซึ่งใช้งานง่าย)

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้วิดีโอใน Divi (เช่น การเพิ่ม URL ของวิดีโอที่โฮสต์โดยบุคคลที่สามไปยังโมดูลวิดีโอ) โปรดดูคู่มือขั้นสุดท้ายนี้

#11 สร้างเพจ Divi ของคุณเพื่อความรวดเร็ว

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

ต่อไปนี้คือเคล็ดลับสำคัญบางประการที่ควรคำนึงถึงเมื่อสร้างเพจของคุณ:

• ปรับเนื้อหาครึ่งหน้าบน ให้เหมาะสมกับ Critical CSS ในตัวของ Divi
• ใช้ Divi Presets เพื่อใช้ประโยชน์จากคุณสมบัติสไตล์อัจฉริยะในตัวของ Divi ซึ่งจะช่วยให้องค์ประกอบสามารถแชร์ข้อมูลโค้ด CSS ตามคลาสต่างๆ และไม่ต้องโหลดบล็อก CSS ที่ไม่ซ้ำกันสำหรับแต่ละคลาส
• เมื่อเป็นไปได้ ให้จำกัดประเภทของโมดูลที่คุณใช้สร้างเพจ เนื่องจากเฟรมเวิร์กไดนามิกของ Divi Divi จะไม่ประมวลผลหรือโหลดโมดูล (และ CSS เฉพาะของโมดูล) ที่คุณไม่ได้ใช้ ตัวอย่างเช่น หากคุณสามารถใช้โมดูลข้อความสองโมดูล (แทนโมดูลข้อความและโมดูลการนำเสนอ) เพื่อให้ได้ผลลัพธ์เดียวกัน วิธีที่ดีที่สุดคืออย่าใช้กระบวนการโดยไม่จำเป็นและโหลดโมดูลการนำเสนอบนหน้า
• ใช้แอนิเมชั่นสำหรับเพจของคุณอย่างชาญฉลาด เนื่องจากคุณสมบัติไดนามิกของ Divi Divi จะไม่ประมวลผลหรือโหลด JS หรือ CSS ที่จำเป็นสำหรับคุณสมบัติเช่น Motion Effects หากคุณไม่ได้ใช้ ตัวอย่างเช่น หากคุณใช้การตั้งค่าภาพเคลื่อนไหวปกติทั่วทั้งหน้า คุณอาจต้องการหลีกเลี่ยงการใช้เอฟเฟกต์การเคลื่อนไหวสำหรับองค์ประกอบเพียงองค์ประกอบเดียว ให้คงรูปแบบแอนิเมชั่นไว้อย่างสม่ำเสมอและเพลิดเพลินกับการโหลดหน้าเว็บที่เร็วขึ้น

#12 ใช้ปลั๊กอินอย่างระมัดระวังและประหยัด

ใช้ปลั๊กอินคุณภาพ

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

ลบปลั๊กอินที่ไม่ได้ใช้หรือล้าสมัย

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

ระวังข้อผิดพลาดในการบล็อกการแสดงผล

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

#13 ทำการทดสอบความเร็ว

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

ต่อไปนี้คือจุดเริ่มต้นที่ดีบางส่วน:

• GTMetrics
• Google Page Insights
• เครื่องมือ Chrome Dev
• Lighthouse (มีให้สำหรับเครื่องมือ Chrome Dev)

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

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

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

นี่คือคู่มือการเพิ่มประสิทธิภาพ WordPress ที่เป็นประโยชน์โดย GTMetrix ซึ่งจะเป็นประโยชน์

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

• เวลาเป็นไบต์แรก (TTFB)
• First Contentful Paint (FCP)
• Time to Interactive (TTI) – วัดเมื่อหน้าพร้อมสำหรับการโต้ตอบกับผู้ใช้
• ดัชนีความเร็ว (SI) – วัดความเร็วที่หน้าเว็บของคุณแสดงผลครึ่งหน้าบนได้รวดเร็วเพียงใด
• Total Blocking Time (TBT) – คล้ายกับเว็บที่สำคัญของ Google First Input Delay (FID) ซึ่งเป็นระยะเวลาระหว่างที่ผู้ใช้โต้ตอบกับไซต์ของคุณเป็นครั้งแรกและเมื่อเบราว์เซอร์ของพวกเขาตอบสนองต่อการกระทำนั้น
• Largest Contentful Paint – วัดระยะเวลาที่องค์ประกอบเนื้อหาที่ใหญ่ที่สุด (เช่น รูปภาพ) ใช้เวลาในการปรากฏแก่ผู้ใช้
• Cumulative Layout Shift – วัดการเปลี่ยนแปลงที่ไม่คาดคิด (หรือเคลื่อนที่ไปรอบๆ) ของเลย์เอาต์เมื่อผู้ใช้โหลดหน้า

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์ของเราเกี่ยวกับวิธีปรับปรุงคะแนนความเร็วของหน้า Google

เป้าหมายคือความเร็ว ไม่ใช่ความสมบูรณ์แบบ

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

#14 พิจารณาพิมพ์เขียวเพจความเร็วสูง Divi ของเรา

ในเว็บไซต์ทดสอบที่เราสร้างขึ้นนี้ เป็นเรื่องง่ายที่จะสร้างเว็บไซต์ Divi ที่ได้ 100 คะแนนใน Google PageSpeed ​​Desktop, 99 ใน Google PageSpeed ​​Mobile และ 100% ใน GTmetrix พิมพ์เขียวเว็บไซต์นี้ช่วยให้นักพัฒนาได้สัมผัสกับการเพิ่มประสิทธิภาพความเร็วในตัวของ Divi ด้วยตนเองบนไซต์จริง นอกจากนี้ยังสามารถใช้เป็นตัวอย่างที่ดีในการเพิ่มประสิทธิภาพเนื้อหาหน้า Divi ของคุณเพื่อความรวดเร็ว

ไซต์ทดสอบนี้ได้รับการปรับให้เหมาะสมดังนี้:

• โฮสต์บน SiteGround
• CloudFlare ที่ใช้สำหรับการแคช, CDN, การบีบอัด Brotli
• ไม่มีการใช้ปลั๊กอินเพิ่มเติม
• ใช้คุณสมบัติประสิทธิภาพในตัวของ Divi
• ปรับเนื้อหาหน้าให้เหมาะสม
  • ใช้ สไตล์อัจฉริยะ (Divi Presets) เพื่อลด CSS แบบไดนามิกที่สร้างขึ้นสำหรับแต่ละหน้า
  • ปรับครึ่งหน้าบนเพื่อให้แน่ใจว่า Critical CSS เป็นแบบลีน
  • ใช้แบบอักษรที่ปลอดภัยสำหรับเว็บ (Arial) เพื่อหลีกเลี่ยงการดาวน์โหลดแบบอักษรจากเซิร์ฟเวอร์บุคคลที่สาม
  • ใช้รูปภาพที่บีบอัด
  • ไม่ได้ใช้แอนิเมชั่นหรือเอฟเฟกต์การเคลื่อนไหว
  • จำกัดการใช้ไอคอนเพื่อโหลดชุดย่อยแบบอักษรของไอคอนที่มีขนาดเล็กลงซึ่งรวมถึงไอคอนโซเชียลที่จำเป็น

ผลลัพธ์:

• ขนาด CSS ลดลง 94%
• เนื้อหาการบล็อกการแสดงผลทั้งหมดถูกกำจัดโดยสมบูรณ์และขนาด JavaScript ของ Divi ลดลงครึ่งหนึ่ง
• ไม่มีการร้องขอทรัพยากรที่ไม่จำเป็น
• เนื้อหาครึ่งหน้าบนจะปรากฏขึ้นทันที
• ได้คะแนน 100% บน Google PageSpeed ​​Desktop, 99% บน Google PageSpeed ​​Mobile
• ได้คะแนน 100% ใน GTmetrix

เราสามารถเรียนรู้อะไรได้บ้างสำหรับไซต์ทดสอบ

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

เคล็ดลับอื่นๆ

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

• มีการตั้งค่าธีมลูก Divi ที่ถูกต้อง
• การเปลี่ยน URL เข้าสู่ระบบ WordPress ของคุณเพื่อป้องกันไม่ให้บอทเหล่านั้นทำงานหนักเกินไปบนเซิร์ฟเวอร์ของคุณ นี่จะเป็นโอกาสที่ดีในการสร้างหน้าเข้าสู่ระบบแบบกำหนดเองด้วย Divi
• หลีกเลี่ยงการเรียกบริการภายนอกโดยไม่จำเป็น ปลั๊กอินและการฝังบางอย่างต้องการให้คุณใช้ไฟล์ที่โฮสต์บนเซิร์ฟเวอร์ของตน การโทรเพิ่มเติมเหล่านี้จะทำให้การโหลดหน้าเว็บช้าลง
• รวมการโหลดแบบ Lazy Loading สำหรับรูปภาพและวิดีโอเพื่อความเร็วในการโหลดหน้าเว็บที่ดีขึ้น

การใช้ Divi และปลั๊กอินประสิทธิภาพบุคคลที่สามอื่น ๆ

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

การจัดการกับปลั๊กอินประสิทธิภาพที่ขัดแย้งกัน

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

ตัวอย่างเช่น ปลั๊กอินของบุคคลที่สามสามารถลดขนาดหรือย้ายไฟล์ JavaScript โดยอัตโนมัติในลักษณะที่อาจก่อให้เกิดข้อผิดพลาด/ปัญหา ดังนั้นโปรดทดสอบเว็บไซต์ของคุณอย่างละเอียดถี่ถ้วน

และหากมีข้อขัดแย้ง คุณอาจต้องปิดการใช้งานตัวเลือกในตัวของ Divi และปล่อยให้ปลั๊กอินของบุคคลที่สามจัดการสิ่งต่างๆ โปรดติดต่อทีมสนับสนุนของเราเพื่อขอความช่วยเหลือเกี่ยวกับปัญหาใดๆ ที่คุณอาจพบ เรายินดีที่จะช่วยจัดเรียง

ความคิดสุดท้าย

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

ฉันแน่ใจว่ามีคำแนะนำและแหล่งข้อมูลมากมายที่ไม่ได้กล่าวถึง ดังนั้นอย่าลังเลที่จะแบ่งปันคำแนะนำเหล่านั้นกับเราในความคิดเห็น

ฉันหวังว่าจะได้ยินจากคุณ.

ไชโย!

ภาพเด่นผ่าน Sammby / shutterstock.com