หรือใน GTmetrix "ลดจำนวนองค์ประกอบ DOM":
DOM คืออะไร?
เมื่อเบราว์เซอร์ของคุณได้รับเอกสาร HTML จะต้องถูกแปลงเป็นโครงสร้างแบบต้นไม้ ซึ่งใช้สำหรับการแสดงผลและการวาดภาพด้วย CSS และ JavaScript
โครงสร้างแบบต้นไม้นี้เรียกว่า DOM หรือ Document Object Model
- นอต องค์ประกอบ HTML ทั้งหมดใน DOM เรียกว่าโหนด (หรือที่เรียกว่า "ใบ" บนต้นไม้)
- ความลึก - “กิ่งก้าน” ยาวเท่าใดในต้นไม้เรียกว่าความลึก ตัวอย่างเช่น ในแผนภาพด้านบน แท็ก img มีความลึก 3 (HTML -> body -> div -> img)
- องค์ประกอบลูก – โหนดย่อยทั้งหมดของโหนด (ไม่มีการแตกแขนงเพิ่มเติม) เป็นโหนดย่อย
Lighthouse และ Google PageSpeed Insights เริ่มตั้งค่าสถานะหน้าเว็บหากตรงตามเงื่อนไขข้อใดข้อหนึ่งต่อไปนี้:
- รวมแล้วมีมากกว่า 1,500 โหนด
- มีความลึกมากกว่า 32 นอต
- โหนดหลักมีโหนดย่อยมากกว่า 60 โหนด
ขนาด DOM ส่งผลต่อประสิทธิภาพอย่างไร
ขนาด DOM ที่มากเกินไปอาจส่งผลต่อประสิทธิภาพในรูปแบบต่างๆ
- เวลาแยกวิเคราะห์และเรนเดอร์ที่สูงขึ้น (FCP) . ต้นไม้ DOM ขนาดใหญ่และกฎรูปแบบที่ซับซ้อนทำงานได้ดีสำหรับเบราว์เซอร์ เบราว์เซอร์ต้องแยกวิเคราะห์ HTML สร้างแผนผังการแสดงผล ฯลฯ ทุกครั้งที่ผู้ใช้โต้ตอบหรือบางอย่างในการเปลี่ยนแปลง HTML เบราว์เซอร์จะต้องคำนวณอีกครั้ง
- เพิ่มการใช้หน่วยความจำ - รหัส JavaScript ของคุณอาจมีฟังก์ชันในการเข้าถึงองค์ประกอบ DOM แผนผัง DOM ที่ใหญ่ขึ้นบังคับให้ JavaScript ใช้หน่วยความจำมากขึ้นในการประมวลผล ตัวอย่างจะเป็นตัวเลือกแบบสอบถามใน
document.querySelectorAll('img')ซึ่งแสดงรายการรูปภาพทั้งหมดที่ใช้กันทั่วไปโดยไลบรารีโหลดแบบสันหลังยาว - เพิ่ม TTFB – เมื่อขนาดของ DOM เพิ่มขึ้น ขนาดของเอกสาร HTML จะเพิ่มขึ้น (เป็น KB) เนื่องจากจำเป็นต้องถ่ายโอนข้อมูลมากขึ้นผ่านเครือข่าย สิ่งนี้จะเพิ่ม TTFB
วิธีการลดขนาด DOM ในทางเทคนิค?
ตัวอย่างเช่น การลดขนาดของ DOM ในทางเทคนิคทำได้ง่ายมาก:
การใช้งาน:
<ul id="navigation-main">etc..</ul>แทน:
<div id="navigation-main"><ul>etc..</ul></div>โดยทั่วไป ให้กำจัดองค์ประกอบ HTML ที่เป็นไปได้ทั้งหมด คุณยังสามารถใช้ Flexbox หรือ Grid เพื่อลดขนาด DOM ได้อีก
แต่เนื่องจากคุณใช้ WordPress สิ่งนี้ไม่ได้ช่วยอะไรคุณมากนัก!
จะลดขนาด DOM ใน WordPress ได้อย่างไร?
แบ่งหน้าใหญ่ออกเป็นหลายหน้า
คุณมีหน้าที่มีทุกอย่างในไซต์หรือไม่? เช่น บริการ แบบฟอร์มติดต่อ ผลิตภัณฑ์ บล็อกโพสต์ คำรับรอง ฯลฯ ?
ลองแยกออกเป็นหลายหน้าและเชื่อมโยงจากส่วนหัว/แถบนำทาง
ขี้เกียจโหลดและแบ่งหน้าทุกอย่างที่เป็นไปได้
ขี้เกียจโหลดองค์ประกอบทุกชนิด นี่คือตัวอย่างบางส่วน:
- วิดีโอ YouTube ขี้เกียจโหลด - ใช้ WP YouTube Lyte หรือ Lazy Load โดย WP Rocket
- จำกัดจำนวนบล็อกโพสต์/ผลิตภัณฑ์ต่อหน้า – ฉันมักจะพยายามเก็บโพสต์บล็อกสูงสุด 10 รายการต่อหน้า และแบ่งหน้าส่วนที่เหลือ
- ขี้เกียจโหลดบล็อกโพสต์/ผลิตภัณฑ์ – เพิ่มปุ่ม Load More หรือการเลื่อนแบบไม่มีที่สิ้นสุดเพื่อโหลดโพสต์บล็อกหรือผลิตภัณฑ์เพิ่มเติม
- ขี้เกียจโหลดความคิดเห็น - ฉันใช้การโหลดแบบมีเงื่อนไข Disqus เนื่องจากฉันใช้ Disqus หากคุณกำลังใช้ความคิดเห็นของคุณเอง ให้ใช้ปลั๊กอินเช่น Lazy Load for Comments
- การแบ่งหน้าความคิดเห็น - หากคุณมีความคิดเห็นหลายร้อยรายการ สิ่งนี้อาจส่งผลต่อขนาด DOM ได้เช่นกัน หากต้องการแบ่งหน้าความคิดเห็น ให้ไปที่การตั้งค่า -> การสนทนา -> แบ่งหน้าความคิดเห็น
- จำกัดจำนวนโพสต์ที่เกี่ยวข้อง – ลองจำกัดจำนวนโพสต์ที่เกี่ยวข้องไว้ที่ 3 หรือ 4 โพสต์
หมายเหตุ: รูปภาพที่โหลดแบบ Lazy Loading จะไม่ลดขนาดของ DOM
อย่าซ่อนองค์ประกอบที่ไม่ต้องการด้วย CSS
บางครั้ง คุณอาจต้องลบองค์ประกอบที่ธีม/ผู้ออกแบบแนะนำ ตัวอย่างเช่น เพิ่มปุ่มไปยังตะกร้าสินค้าในหน้าสินค้า ปุ่มอัตรา ข้อมูลผู้เขียน วันที่ตีพิมพ์ ฯลฯ
การแก้ไขอย่างรวดเร็วคือการซ่อนด้วย CSS:
.cart-button {แสดง:ไม่มี;}แม้ว่าโซลูชันนี้จะดูเรียบง่าย แต่คุณกำลังทำให้ผู้ใช้เห็นโค้ดที่ไม่ต้องการ (ซึ่งรวมถึงมาร์กอัป HTML และการจัดรูปแบบ CSS)
ตรวจสอบการตั้งค่าธีม/ปลั๊กอินของคุณเพื่อดูว่ามีตัวเลือกในการลบหรือไม่ มิฉะนั้น ให้ค้นหาโค้ด PHP ที่เกี่ยวข้องและลบ/แสดงความคิดเห็น
ใช้ธีมและตัวสร้างเพจที่เขียนอย่างดี
ธีมที่ดีมีบทบาทสำคัญในขนาด DOM ใช้ธีมที่เขียนดีเช่นGeneratePress หรือAstra .
ผู้สร้างเพจยังแนะนำ divs มากเกินไป ใช้ตัวสร้างเช่นออกซิเจน ซึ่งไม่แนะนำบล็อก div ที่ไม่ต้องการและควบคุมโครงสร้าง HTML ได้มากขึ้น
บทสรุป
อาจมีปลั๊กอินหรือการตั้งค่าธีมเพิ่มเติมที่แนะนำ div มากเกินไป ตัวอย่างจะเป็นปลั๊กอิน "เมนูเด่น" เช่น UberMenu
บางครั้งสิ่งเหล่านี้มีความสำคัญต่อประสบการณ์การใช้งานเว็บไซต์ของคุณ แต่บางครั้งผู้ใช้ก็ไม่เคยใช้
บางทีลิงก์ส่วนท้ายของคุณอาจไม่เคยคลิกเพราะผู้เยี่ยมชมส่วนใหญ่เลื่อนได้ถึง 75% เท่านั้น
ใช้เครื่องมือเช่น HotJar หรือ Google Analytics Events เพื่อค้นหาว่าผู้เยี่ยมชมกำลังใช้งานอะไรอยู่จริงและไม่ได้ใช้อะไรวิเคราะห์ วัดผล และทำซ้ำ
