Cách giảm kích thước DOM tăng tốc độ tải cho Website

Tối ưu, tăng tốc độ trải nghiệm người dùng là một yếu tố rất quan trọng ảnh hưởng đến thứ hạng Web của bạn. Bạn thường sử dụng các công cụ hỗ trợ trong quá trình SEO web để tìm ra các vấn đề chưa được tối ưu. Một trong những khía cạnh quan trọng của điều này là làm thế nào để tối ưu kích thước DOM cho trang của bạn.

Khi phân tích trang, bạn thường sử dụng Google PageSpeed Insights hoặc GTmetrix để xem trang đã hoạt động tốt hay chưa: VD:

Sử dụng công cụ Google PageSpeed Insights, bạn có thể gặp các lỗi như "Avoid an DOM Size / Tránh kích thước DOM quá lớn":

Hay Trên GTmetrix "Giảm số lượng các phần từ DOM: Reduce the number of DOM elements"

DOM là gì?

Một thành phần quan trọng trong việc tạo các trang web tương tác là Document Object Model, còn được gọi là DOM. Nó phục vụ như một giao diện cho phép ngôn ngữ lập trình thao tác nội dung, cấu trúc và định dạng của một trang web. JavaScript là một ngôn ngữ kịch bản phía client có thể kết nối với DOM trong trình duyệt.

Khi trình duyệt phía client tiếp nhận tài liệu HTML, nó được chuyển đổi thành cấu trúc hình cây, sau đó đượ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).

• 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ẻ “” có độ sâu là ba (HTML (1) => body (2) => (3) => "Link text").
• 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.

Nếu bất kỳ điều kiện nào được liệt kê bên dưới mãn, Lighthouse và Google PageSpeed Insights bắt đầu gắn cờ "cảnh báo" các trang:

• Có tổng số nút lớn hơn 1500.
• Có độ sâu lớn hơn 32 nút.
• Có một nút cha với nhiều 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 thướ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 Time to First Byte - 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 kết cấu cây thư mục.v.v... 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ư:

Thư viện lazy loading thường sử dụng các lệnh liệt kê tất cả hình ảnh.

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

Về mặt kỹ thuật, đây là một minh đơn giản để giảm kích thước DOM:

Về bản chất, nguyên lý là loại bỏ mọi phần tử HTML khi có thể.

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

Ví dụ, bạn có thể dồn tất cả mọi thứ vào một trang duy nhất, chẳng hạn như thông tin dịch vụ, form liên hệ, sản phẩm, bài đăng blog, v.v.

Tuy nhiên, điều đó là không nên; thay vào đó, bạn nên chia chúng thành nhiều trang con và liên kết chúng với nhau bằng menu điều hướng (navbar), như vậy kích thước của DOM sẽ được giảm đáng kể.

Sử dụng Lazy load để chia tách các phần tử khi có thể

Giới hạn số lượng bài đăng blog/sản phẩm trên mỗi trang - Bạn chỉ nên thiết kế mỗi trang tối đa chỉ 10 bài đăng tức 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 –  Sử dụng Lazy load ở những khu vực bình luận sử dụng plugin Disqus Conditional Load hoặc Lazy Load for Comments. 

Khi cài ứng dụng của bên thứ ba, bạn nên xem nó tải thêm bao nhiêu tài nguyên, và điều đó có khả năng ảnh hưởng đến tốc độ như thế nào để cân nhắc thiệt hơn về vấn đề tốc độ và tính khả dụng;

Các kỹ thuật giảm tải như phân chia trang, trì hoãn tải - lazy load, tải về hosting các ảnh đại diện - lazy load và tải về các ảnh đại diện nên được xem xét bất kể bạn sử dụng hệ thống bình luận mặc định hay của bên thứ ba khi nào.

Mặc dù mỗi trang web đều có những đặc điểm riêng, nhưng điều quan trọng là phải phù hợp với trang của bạn.

• 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 thành các trang vừa phải.
• 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ỉ có một bài duy nhất.

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

Không nên sử dụng CSS để che giấu các yếu tố không mong muốn.

Bạn thường muốn loại bỏ một số thành phần trên giao diện chưa sử dụng đến hoạc chưa cần thiết. Ví dụ, sử dụng CSS để ẩ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... Cách nhanh chóng để làm điều này là sử dụng CSS.

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

Điều tốt hơn mà bạn có thể làm là kiểm tra các thiết lập trong plugin và theme để xem có lựa chọn 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ã nguồn tương ứng để loại bỏ hoặc đặt nó ở trạng thái chú thích. Tuy nhiên, để làm điều này, bạn cần hiểu rõ về mặt kỹ thuật. Ngoài ra, khi một theme hoặc plugin được cập nhật, tác động của bạn có thể bị thu hồi.

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à nguyên nhân gây ra tình trạng thừa quá nhiều thẻ div. Bạn có thể hạn chế thêm các div không mong muốn và có nhiều khả năng chỉnh hơn với cấu trúc HTML bằng cách sử dụng các công cụ xây dựng nhẹ nhàng như Oxygen.

Tóm tắt

Việc thêm quá nhiều thẻ div có thể là kết quả của việc có quá nhiều plugin hoặc cài đặt trong theme. Một ví dụ điển hình là các plugin "mega menu" giống như UberMenu.

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

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

Theo Tạp chí Điện tử

Cập nhật tin tức công nghệ mới nhất tại fanpage Công nghệ & Cuộc sống