Cách tránh kích thước DOM quá lớn trong WordPress

Khi bạn phân tích trang qua công cụ Google PageSpeed Insights, bạn có thể thấy lỗi kiểu như “Avoid an excessive DOM size / Tránh kích cỡ DOM quá lớn”:

kích thước DOM quá lớn

Hoặc trên GTmetrix “Reduce the number of DOM elements / Giảm số lượng các phần từ DOM”:

kích cỡ DOM trên GTmetrix

DOM là gì?

Khi trình duyệt của bạn tiếp nhận tài liệu HTML, nó được chuyển đổi thành cấu trúc hình cây, cái được sử dụng để render (kết xuất) với sự trợ giúp của CSS và JavaScript.

Cấu trúc giống như cây này được gọi là DOM hoặc Mô hình Đối tượng Tài liệu (Document Object Model).

cấu trúc DOM
Nguồn ảnh: Google Developers
  • Nút (nodes) – Tất cả các phần tử HTML trong DOM được gọi là các nút (ngoài ra nó còn có biệt danh là “các lá” trên cây).
  • Độ sâu (depth) – Số lượng “cành nhánh” trên cây được gọi là độ sâu. Ví dụ, trong hình trên, thẻ “img” có độ sâu là ba (HTML (1) > body (2) > div (3) > img).
  • Phần tử con (child elements) –  Tất cả các nút con của một nút (không tính các cành nhánh thêm bên dưới) được gọi là phần tử con.

Lighthouse và Google PageSpeed Insights bắt đầu gắn cờ (cảnh báo) các trang nếu bất kỳ điều kiện nào bên dưới đây thỏa mãn:

  • Có tổng số hơn 1500 nút.
  • Có độ sâu lớn hơn 32 nút.
  • Có một nút cha với hơn 60 nút con.

Tại sao kích cỡ DOM ảnh hưởng đến hiệu suất của trang?

Kích cỡ DOM quá lớn có thể ảnh hưởng đến hiệu suất của trang theo nhiều cách khác nhau.

  • Làm tăng TTFB – Khi kích cỡ DOM của bạn tăng, kích cỡ tài liệu HTML tăng theo (KB). Khi có nhiều dữ liệu cần lưu chuyển hơn qua mạng, điều này làm tăng TTFB.
  • Tăng thời gian phân tích cú pháp và xuất trang – Một cây DOM lớn và style phức tạp làm trình duyệt phải hoạt động vất vả. Trình duyệt phải phân tích HTML, xây dựng cây kết cấu, vân vân. Mỗi lần người dùng tương tác hoặc có điều gì đó thay đổi trong HTML, trình duyệt sẽ phải tính toán lại lần nữa.
  • Tăng sử dụng bộ nhớ – Mã JavaScript của bạn có thể có các chức năng truy cập vào phần tử DOM. Một cây DOM lớn là nguyên nhân khiến JavaScript sử dụng nhiều bộ nhớ để xử lý chúng. Ví dụ, có thể là một truy vấn bộ chọn kiểu như:
    document.querySelectorAll('img')

    trong đó liệt kê tất cả hình ảnh, thường được sử dụng bởi thư viện lazy loading.

Làm thế nào để giảm kích cỡ DOM về mặt kỹ thuật?

Một ví dụ đơn giản để giảm kích cỡ DOM về mặt kỹ thuật là:

Sử dụng:

<ul id="navigation-main">
       mã...
</ul>

thay vì:

<div id="navigation-main"> 
    <ul> 
            mã...
    </ul> 
</div>

Về cơ bản nguyên lý là loại bỏ mọi phần tử HTML khi có thể. Bạn cũng có thể sử dụng Flexbox hoặc Grid để làm giảm hơn nữa kích cỡ DOM.

Nhưng vì bạn đang sử dụng CMS dựng sẵn là WordPress, điều này sẽ chẳng giúp đỡ gì nhiều!

Làm thế nào để giảm kích cỡ DOM trong WordPress?

Chia các trang lớn thành nhiều trang con

Bạn có dồn tất cả mọi thứ vào một trang nào đấy trên website không? Chẳng hạn như thông tin dịch vụ, form liên hệ, sản phẩm, bài đăng blog, lời chứng thực, vân vân?

Hãy thử chia chúng ra thành nhiều trang con và liên kết chúng với nhau thông qua menu điều hướng (navbar).

Lazy load và Chia tách mọi thứ khi có thể

Lazy load mọi phần tử khi có thể. Một số ví dụ là:

  • Lazy load các video Youtube – sử dụng WP YouTube lyte hoặc Lazy Load by WP Rocket.
  • Giới hạn số lượng các bài đăng blog/sản phẩm trên mỗi trang – Tôi thường cố gắng sử dụng tối đa chỉ 10 bài đăng blog mỗi trang (ý tác giả là các trang thư mục bạn không nên để trên 10 bài đăng).
  • Lazy load bài đăng blog/sản phẩm – Thêm nút “load more / xem thêm” hoặc nút cuộn chuột không giới hạn để tải thêm các bài đăng blog hoặc sản phẩm.
  • Lazy load bình luận – Tôi lazy load khu vực bình luận sử dụng plugin Disqus Conditional Load vì tôi dùng công cụ bình luận Disqus. Nếu bạn sử dụng công cụ bình luận mặc định của WordPress, hãy sử dụng plugin kiểu như Lazy Load for Comments. Xem thêm cách tăng tốc khu vực bình luận cho WordPress ở đây.
  • Phân chia khu vực bình luận – Nếu bạn có hàng trăm bình luận, điều đó có thể làm gia tăng kích cỡ DOM. Hãy chia bình luận bằng cách vào Settings > Discussion > Break comments into pages (tính năng có sẵn trong WordPress).
  • Giới hạn các bài đăng liên quan – Giới hạn số lượng bài viết liên quan thấp nhất có thể (nhưng bạn vẫn phải đảm bảo là người dùng có nhiều cơ hội xem tiếp các bài viết khác trên trang, đừng để bài viết liên quan chỉ là 1!)

Lưu ý: Lazy loading ảnh không làm giảm kích cỡ DOM

Đừng ẩn các yếu tố không mong muốn bằng cách sử dụng CSS

Đôi khi bạn muốn loại bỏ một số thành phần trên giao diện. Lấy ví dụ, ẩn đánh giá bài viết, đánh giá bình luận, thông tin tác giả, ngày tháng đăng bài, vân vân.

Cách nhanh chóng để ẩn chúng là sử dụng CSS, ví dụ:

.author-info { 
   display:none; 
}

Mặc dù giải pháp này trông có vẻ dễ dàng, bạn vẫn đưa đến cho người dùng các đoạn mã không mong muốn (bao gồm cả mã đánh dấu HTML và style CSS).

Điều tốt hơn mà bạn có thể làm là hãy kiểm tra các thiết lập trong plugin và theme, để xem có lựa chọn tùy chỉnh nào cho phép loại bỏ các yếu tố không mong muốn hay không. Nếu không hãy tìm mã PHP tương ứng và loại bỏ/hoặc để nó ở trạng thái chú thích (tuy nhiên bạn chỉ nên làm điều này nếu có hiểu biết về mặt kỹ thuật, ngoài ra, tác động của bạn có thể bị thu hồi khi theme hoặc plugin được cập nhật).

Sử dụng các bộ công cụ xây dựng trang nhẹ nhàng, chẳng hạn như Oxygen

Các công cụ xây dựng trang (page buiders) thường là thủ phạm cho trạng thái thừa mứa thẻ div. Sử dụng các công cụ xây dựng nhẹ nhàng như Oxygen sẽ giúp bạn hạn chế thêm các div không mong muốn và có nhiều khả năng tùy chỉnh hơn với cấu trúc HTML.

Nếu bạn mới biết tới Oxygen, hãy xem video về cách bắt đầu xây dựng Website trong Oxygen.

Kết luận

Có thể có nhiều plugin hoặc cài đặt trong theme là nguyên nhân chèn thêm quá nhiều thẻ div. Một ví dụ điển hình là plugin “mega menu” kiểu như UberMenu.

Đôi khi những thứ này rất quan trọng cho trải nghiệm người dùng trên trang web của bạn. Nhưng đôi khi người dùng không bao giờ sử dụng chúng.

Có thể các liên kết ở chân trang không bao giờ được click bởi vì hầu hết người dùng chỉ cuộn chuột đến 75% trang mà thôi.

Sử dụng các công cụ như HotJar hoặc Google Analytics events để xem người dùng thực sự làm gì và không làm gì trên trang. Phân tích, đo lường và lặp đi lặp lại quá trình này.

(Dịch từ bài viết: How to Avoid Excessive DOM Size in WordPress, tác giả: Gijo Varghese, website: WPSpeedMatters)

Leave a Comment