กุญแจสำคัญในการลดขนาด DOM ของเว็บไซต์

แง่มุมหนึ่งที่มีอิทธิพลต่อการบรรลุตำแหน่ง SEO ที่ดีบนหน้าเว็บคือประสิทธิภาพการโหลด และนี่เป็นหัวข้อที่ ขนาด DOM ของเพจมีบทบาทสำคัญ

นั่นเป็นเหตุผลที่เราจะอธิบายว่า DOM นั้นมีขนาดใหญ่เกินไปได้อย่างไรและจะลดได้อย่างไร

เอาล่ะ!

DOM คืออะไร?

พูดง่ายๆ เมื่อเราพูดถึง DOM เราหมายถึง โครงสร้างของวัตถุที่เบราว์เซอร์สร้างขึ้นทุกครั้งที่โหลด หน้า มีชื่อย่อมาจาก Document Object Model

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

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

ทุก ครั้งที่เบราว์เซอร์ได้รับเอกสาร HTML เบราว์เซอร์จะต้องแปลงเป็นโครงสร้างแบบต้นไม้ ซึ่งเราเรียกว่า DOM หรือ DOM tree รหัส JavaScript สามารถเข้าถึง DOM นั้นและแก้ไขได้

ขนาด DOM ส่งผลต่อประสิทธิภาพเว็บของคุณอย่างไร

ความจริงก็คือขนาดของ DOM ส่งผลต่อประสิทธิภาพของเพจ DOM ที่มีขนาดใหญ่เกินไปอาจทำให้ความเร็วของเว็บไซต์ช้าลง เนื่องจากมีผลกระทบดังต่อไปนี้:

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

จะลดขนาดของ DOM ในทางเทคนิคได้อย่างไร

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

แทนที่จะใช้รหัสนี้

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

มันจะดีกว่าถ้าใช้อันอื่นนี้

 <ul id = ”navigation-main”>   etc .. </ul>

เกี่ยวกับโครงสร้างต้นไม้ เราต้องรู้คำศัพท์ต่อไปนี้:

• โหนด : องค์ประกอบ HTML ทั้งหมดของ DOM พวกเขายังเป็นที่รู้จักกันในนาม 'ใบไม้' ของต้นไม้
• โหนดรอง : โหนดเหล่านั้นที่ไม่มีกิ่งก้านอีกต่อไป

ที่กล่าวว่าสิ่งที่ดีที่สุดคือ ความลึกของต้นไม้นั้นเกิดจาก :

• น้อยกว่า 32 โหนด
• โหนดรองน้อยกว่า 60 โหนดต่อโหนด

Google ขอแนะนำว่าเมื่อพัฒนาเว็บไซต์ หน้าต่างๆ จะมี โหนด DOM น้อยกว่า 1,500 โหนด ซึ่งหมายความว่าการออกแบบไม่ควรซับซ้อนเกินไป

วิธีลดขนาด DOM ใน WordPress

มีหลายวิธีในการลดขนาดของ DOM ใน WordPress:

แบ่งหน้าขนาดใหญ่ออกเป็นหลาย ๆ หน้า

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

ในกรณีดังกล่าว เป็นการดีกว่าที่จะ จัดประเภทองค์ประกอบทั้งหมดในหน้าต่างๆ และเชื่อมโยงผ่านแถบนำทาง

เปิดใช้งานปลั๊กอินโหลดแบบสันหลังยาวและแยกองค์ประกอบที่เป็นไปได้ทั้งหมดออกเป็นหน้าต่างๆ

คุณสามารถ เปิดใช้งานโมดูลการโหลดแบบ Lazy Loading ในองค์ประกอบทั้งหมดที่อนุญาตได้ คุณสามารถทำเช่นนี้กับวิดีโอจาก YouTube โดยใช้ Youtube Lite หรือ Lazy Load จาก WordPress WP-Rocket

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

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

นอกจากนี้เรายังแนะนำให้จำกัดจำนวนสิ่งพิมพ์ที่เกี่ยวข้องเป็นจำนวนสูงสุดสามหรือสี่

ลบรายการที่ไม่จำเป็นซึ่งรวมอยู่ในธีม WP เริ่มต้นออก

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

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

ใช้ธีมที่มีโค้ดอย่างดีหรือตัวสร้างเพจ

คุณภาพ ของธีม WordPress ส่งผลโดยตรงต่อขนาดของ DOM ดังนั้นจึงขอแนะนำให้ใช้ธีมที่มีการเข้ารหัสอย่างดี เช่น Astra หรือ GeneratePress

ตัวสร้างเพจมักจะแทรกแท็ก div มากเกินไป ดังนั้นควรใช้โซลูชันเช่น Oxygen Builders ซึ่งไม่ฉีดองค์ประกอบที่ไม่ต้องการและอนุญาตให้ควบคุมโครงสร้าง HTML ได้มากขึ้น

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

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

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

Google จะพิจารณาขนาด DOM อย่างไม่ต้องสงสัยในการ อัปเดต Page Experience ซึ่งจะเปิดตัวในเดือนต่อๆ ไป ตรวจสอบให้แน่ใจว่ามีอย่างเพียงพอ จึงไม่ส่งผลต่อประสิทธิภาพเว็บของคุณ