Khi các bạn phân tích trang qua hiện tượng Google Pagefashionssories.com Insights, bạn có thể thấy lỗi dạng hình như “Avoid an excessive DOM kích cỡ / Tránh kích thước DOM quá lớn”:
DOM là gì?
Khi trình coi sóc của bạn đón nhận tài liệu HTML, nó được biến hóa thành cấu trúc hình cây, chiếc được sử dụng để render (kết xuất) với sự trợ giúp của CSS và JavaScript.
Bạn đang xem: Tránh kích thước dom quá lớn
Cấu trúc hệt như cây này được hotline là DOM hoặc mô hình Đối tượng tài liệu (Document Object Model).
Nút (nodes) – toàn bộ các bộ phận HTML trong DOM được gọi là các nút (ngoài ra nó còn tồn tại biệt danh là “các lá” trên cây).Độ sâu (depth) – con số “cành nhánh” trên cây được hotline là độ sâu. Ví dụ, trong hình trên, thẻ “img” tất cả độ sâu là ba (HTML (1) > toàn thân (2) > div (3) > img).Phần tử con (child elements) – toàn bộ các nút nhỏ của một nút (không tính các cành nhánh thêm mặt dưới) được điện thoại tư vấn là phần tử con.
Lighthouse với Google Pagefashionssories.com Insights bắt đầu gắn cờ (cảnh báo) các trang nếu bất kỳ điều khiếu nại 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 phụ thân với rộng 60 nút con.Tại sao kích thước DOM ảnh hưởng đến công 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 thức khác nhau.
Tăng thời gian phân tích cú pháp và xuất trang – Một cây DOM to và style tinh vi làm trình ưng chuẩn phải vận động vất vả. Trình duyệt yêu cầu phân tích HTML, gây ra cây kết cấu, vân vân. Từng lần người dùng tương tác hoặc gồm điều gì đó biến đổi trong HTML, trình chăm sóc sẽ phải thống kê giám sát lại lần nữa.Tăng áp dụng bộ nhớ – Mã JavaScript của bạn cũng có thể có các chức năng truy cập vào phần tử DOM. Một cây DOM to là nguyên nhân khiến cho JavaScript thực hiện nhiều bộ nhớ lưu trữ để cách xử lý chúng. Ví dụ, có thể là một truy vấn cỗ chọn loại như:document.querySelectorAll("img")trong đó liệt kê tất cả hình ảnh, thường được áp dụng bởi thư viện lazy loading.
Làm gắng nào để giảm form size DOM về mặt kỹ thuật?
Một ví dụ đơn giản và dễ dàng để giảm kích thước DOM về phương diện 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 tất cả thể. Chúng ta cũng có thể sử dụng Flexbox hoặc Grid để gia công giảm hơn nữa size DOM.
Nhưng vì bạn đang sử dụng CMS dựng sẵn là WordPress, vấn đề này sẽ chẳng giúp sức gì nhiều!
Làm cụ nào để giảm size DOM vào WordPress?
Chia những trang to thành nhiều trang con
Bạn tất cả dồn toàn bộ mọi thứ vào một trang nào đấy trên trang web không? chẳng hạn như thông tin dịch vụ, size liên hệ, sản phẩm, bài bác đăng blog, lời bệnh thực, vân vân?
Hãy thử chia chúng ra thành các trang con và links chúng cùng với nhau thông qua menu điều phối (navbar).
Lazy load cùng Chia tách mọi lắp thêm khi tất cả thể
Lazy load mọi bộ phận khi có thể. Một số ví dụ là:
Lưu ý: Lazy loading hình ảnh không có tác dụng giảm kích cỡ DOM
Đừng ẩn những 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ố trong những thành phần bên trên giao diện. đem ví dụ, ẩn reviews bài viết, review bình luận, tin tức tác giả, ngày tháng đăng bài, vân vân.
Cách gấp rút để ẩn chúng là áp 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, chúng ta vẫn đưa đến cho người dùng những đoạn mã không hề mong muốn (bao có cả mã lưu lại HTML cùng style CSS).
Điều tốt hơn mà bạn cũng có thể làm là hãy kiểm soát các thiết lập trong plugin và theme, nhằm xem tất cả lựa chọn cấu hình thiết lập nào chất nhận được loại bỏ những yếu tố không muốn hay không. Nếu như không hãy tìm kiếm mã PHP tương ứng và một số loại bỏ/hoặc nhằm nó nghỉ ngơi trạng thái chú giải (tuy nhiên bạn nên làm làm vấn đề đó nếu tất cả hiểu biết về mặt kỹ thuật, ngoại trừ ra, tác động của chúng ta có thể bị tịch thu khi theme hoặc plugin được cập nhật).
Sử dụng các bộ lý lẽ xây dựng trang dịu nhàng, chẳng hạn như Oxygen
Các mức sử dụng xây dựng trang (page buiders) hay là thủ phạm mang đến trạng thái vượt mứa thẻ div. Sử dụng các công cố xây dựng thanh thanh như Oxygen sẽ giúp đỡ bạn tiêu giảm thêm những div không muốn và có nhiều khả năng cấu hình thiết lập hơn với kết cấu HTML.
Nếu các bạn mới biết tới Oxygen, hãy xem clip về cách bắt đầu xây dựng Website trong Oxygen.
Kết luận
Có thể có không ít plugin hoặc thiết đặt trong theme là lý do chèn thêm rất nhiều thẻ div. Một ví dụ nổi bật là plugin “mega menu” dạng hình như UberMenu.
Đôi khi phần đông thứ này rất quan trọng cho trải nghiệm người tiêu dùng trên trang web của bạn. Nhưng nhiều lúc người dùng không lúc nào 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 mang đến 75% trang nhưng thôi.
Xem thêm: " Ý Nghĩa Rồng Ngậm Ngọc ? Rồng Ngọc Hoàng Long Ngậm Ngọc
Sử dụng các công cụ như HotJar hoặc google analytics events để xem người tiêu dùng thực sự làm những gì và không làm cái gi trên trang. Phân tích, đo lường và lặp đi lặp lại quy trình này.