vi.allworldrating.com
Bài viết

Cách giảm kích thước DOM trong WordPress

Hoặc trong GTmetrix "Giảm số lượng phần tử DOM":

DOM là gì?

Khi trình duyệt của bạn nhận được một tài liệu HTML, nó phải được chuyển đổi thành cấu trúc cây, được sử dụng để hiển thị và vẽ bằng CSS và JavaScript.

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

  • Knots Tất cả các phần tử HTML trong DOM được gọi là các nút. (hay còn gọi là "lá" trên cây).
  • Chiều sâu - Độ sâu của một “nhánh” trên cây được gọi là độ sâu. Ví dụ, trong sơ đồ trên, thẻ img có độ sâu là 3. (HTML -> body -> div -> img).
  • Phần tử con - tất cả các nút con của một nút (không phân nhánh thêm) đều là nút con.

Lighthouse và Google PageSpeed ​​Insights bắt đầu gắn cờ các trang nếu một trong các điều kiện sau được đáp ứng:

  • Tổng cộng có hơn 1500 nút.
  • Có độ sâu hơn 32 hải lý / giờ.
  • Nút cha có hơn 60 nút con.

Kích thước DOM ảnh hưởng đến hiệu suất như thế nào?

Kích thước DOM quá mức có thể ảnh hưởng đến hiệu suất theo những cách khác nhau.

  • Thời gian phân tích cú pháp và kết xuất cao hơn (FCP) . Một cây DOM lớn và các quy tắc kiểu phức tạp làm rất tốt cho trình duyệt. Trình duyệt phải phân tích cú pháp HTML, xây dựng cây kết xuất, v.v. Mỗi khi người dùng tương tác hoặc một cái gì đó trong HTML thay đổi, trình duyệt phải tính toán lại.
  • Tăng mức sử dụng bộ nhớ - Mã JavaScript của bạn có thể có các chức năng để truy cập các phần tử DOM. Cây DOM lớn hơn buộc JavaScript sử dụng nhiều bộ nhớ hơn để xử lý chúng. Một ví dụ sẽ là một bộ chọn truy vấn, trongdocument.querySelectorAll ('img')trong đó liệt kê tất cả các hình ảnh thường được sử dụng bởi các thư viện tải lười.
  • Tăng TTFB - Khi kích thước của DOM tăng lên, kích thước của tài liệu HTML cũng tăng lên (tính bằng KB). Vì cần nhiều dữ liệu hơn được truyền qua mạng, điều này làm tăng TTFB.

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

Ví dụ: về mặt kỹ thuật, thật dễ dàng để giảm kích thước của DOM:

cách sử dụng:

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

thay vì:

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

Về cơ bản, hãy loại bỏ tất cả các phần tử HTML có thể có. Bạn cũng có thể sử dụng Flexbox hoặc Grid để giảm thêm kích thước DOM.

Nhưng vì bạn đang sử dụng WordPress, điều này sẽ không giúp bạn nhiều!

Làm cách nào để giảm kích thước DOM trong WordPress?

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

Bạn có một trang với tất cả mọi thứ trên trang web? Thích dịch vụ, biểu mẫu liên hệ, sản phẩm, bài đăng trên blog, lời chứng thực, v.v.?

Hãy thử chia chúng thành nhiều trang và liên kết đến chúng từ tiêu đề / thanh điều hướng.

Tải và phân trang chậm mọi thứ có thể

Tải lười biếng của tất cả các loại yếu tố. Dưới đây là một số ví dụ:

  • Tải chậm video trên YouTube - Sử dụng WP YouTube Lyte hoặc Lazy Load của WP Rocket.
  • Giới hạn số lượng bài đăng / sản phẩm blog trên mỗi trang - Tôi thường cố gắng giữ tối đa 10 bài đăng trên blog mỗi trang và phân loại phần còn lại.
  • Lười biếng tải các bài đăng / sản phẩm trên blog - Thêm nút Tải thêm hoặc cuộn vô hạn để tải thêm các bài đăng trên blog hoặc sản phẩm.
  • Nhận xét tải chậm - Tôi đang sử dụng tải có điều kiện Disqus vì tôi đang sử dụng Disqus. Nếu bạn đang sử dụng nhận xét của riêng mình, hãy sử dụng các plugin như Lazy Load cho Nhận xét.
  • Phân trang các bình luận - nếu bạn có hàng trăm nhận xét, điều này cũng có thể ảnh hưởng đến kích thước DOM. Để phân loại các nhận xét, hãy chuyển đến Cài đặt -> Thảo luận -> Phân trang các Nhận xét.
  • Giới hạn số lượng bài viết liên quan - Hãy thử giới hạn số lượng bài viết liên quan đến 3 hoặc 4.

Lưu ý: hình ảnh tải chậm sẽ không làm giảm kích thước của DOM

Không ẩn các phần tử không mong muốn bằng CSS

Đôi khi bạn có thể cần xóa các phần tử được giới thiệu bởi một chủ đề / nhà thiết kế. Ví dụ: thêm nút vào giỏ hàng trên các trang sản phẩm, nút xếp hạng, thông tin tác giả, ngày xuất bản, v.v.

Một cách khắc phục nhanh chóng là ẩn chúng bằng CSS:

.cart-button {display: none;}

Mặc dù giải pháp này trông đơn giản, nhưng bạn đang để người dùng tiếp xúc với mã không mong muốn (bao gồm cả đánh dấu HTML và tạo kiểu CSS).

Kiểm tra cài đặt chủ đề / plugin của bạn để xem liệu có tùy chọn để xóa nó hay không. Nếu không, hãy tìm mã PHP có liên quan và xóa / bình luận nó ra.

Sử dụng các chủ đề được viết tốt và trình tạo trang

Một chủ đề tốt đóng một vai trò quan trọng trong kích thước DOM. Sử dụng các chủ đề được viết tốt nhưGeneratePress hoặc làAstra .

Các nhà xây dựng trang cũng giới thiệu quá nhiều div. Sử dụng các hàm tạo nhưôxy, không tạo ra các khối div không mong muốn và có nhiều quyền kiểm soát hơn đối với cấu trúc HTML.

Sự kết luận

Có thể có nhiều plugin hoặc cài đặt chủ đề giới thiệu quá nhiều div. Một ví dụ sẽ là các plugin "mega menu" chẳng hạn như UberMenu.

Đôi khi chúng 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 đôi khi chúng không bao giờ được người dùng sử dụng.

Có lẽ các liên kết chân trang của bạn không bao giờ được nhấp vì hầu hết khách truy cập chỉ cuộn đến 75%.

Sử dụng các công cụ như HotJar hoặc Google Analytics Events để tìm hiểu những gì khách truy cập thực sự đang sử dụng và những gì họ không sử dụng.Phân tích, đo lường và lặp lại.

Bài ViếT Thú Vị