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

Văn Ký
31/08/2021 08:26
D

DOM là một trong những yếu tố quyết định đến chỉ số đo lường về khả năng đáp ứng của máy chủ web, đây là chỉ số rất quan trọng trong việc tối ưu hóa tải trang cho website. Giảm được số dom là giảm được thời gian trình duyệt người dùng tải web, giúp web của bạn 'chạy' nhanh hơn.

Dom elements

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

Khi bạn phân tích trang bạn thường sử dụng Google PageSpeed Insights hoặc GTmetrix để kiểm tra website đã tối ưu hay chưa: VD:

Sử dụng 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”:

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

Avoid an excesive DOM size

DOM là gì?

Document Object Model thường được gọi là DOM, là một phần quan trọng trong việc làm các website tương tác. Nó như là 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 website... 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, 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 cây của DOM

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

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ố 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 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ư:

document.querySelectorAll('img')

Lệnh thực hiện 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">

     'Code...'

</ul>

//Thay vì

<div id="navigation-main">

    <ul>

         'Code...'   

    </ul>

</div>

Về cơ bản 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

Chẳng hạn như trên website của bạn gồm có: thông tin dịch vụ, form liên hệ, sản phẩm, bài đăng blog,... Bạn có dồn tất cả mọi thứ vào một trang bất kỳ nào đó.

Nhưng điều đó là không nên, bạn hãy 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) 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 các bài đăng blog/sản phẩm trên mỗi trang –  Bạn 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 kiểm tra 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 trong vấn đề tốc độ và tính khả dụng;

Cho dù bạn dùng hệ thống bình luận mặc định hay của bên thứ ba lúc nào cũng nên cân nhắc biện pháp giảm tải như là phân chia trang, trì hoãn tải - lazy load, tải về hosting các ảnh đại diện;

Mỗi trang web đều có đặ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 cỡ DOM

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

Trong nhiều trường hợp bạn 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. 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...Cách nhanh chóng để ẩn chúng là sử dụng CSS, ví dụ:

.name-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ã các mã nguồn tương ứng để loại bỏ hoặc để nó ở trạng thái chú thích.  Tuy nhiên để làm điều này bạn phải hiểu rõ 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 quá nhiều 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.

Tóm tắt

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 người dùng lại không bao giờ sử dụng chúng.

Sử dụng công 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.

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

Bình luận

Tối thiểu 10 chữ Tiếng việt có dấu Không chứa liên kết

Gửi bình luận

Tin cùng chuyên mục

Cách sửa lỗi các ứng dụng trên windows 11 thiếu file DLL

Cách sửa lỗi các ứng dụng trên windows 11 thiếu file DLL

Tìm hiểu, hướng dẫn sử dụng bộ điều khiển lò sấy Helios 2

Tìm hiểu, hướng dẫn sử dụng bộ điều khiển lò sấy Helios 2

Xử lý mã lỗi Windows 10 Store: 80072EFF, 80072EFD, 0X80072EE7, 801901F7, 0x80131500

Xử lý mã lỗi Windows 10 Store: 80072EFF, 80072EFD, 0X80072EE7, 801901F7, 0x80131500

Những vấn đề xung quanh Windows 11 và cách khắc phục

Những vấn đề xung quanh Windows 11 và cách khắc phục

Hướng dẫn cách cấu hình kết nối tên miền với CloudFlare

Hướng dẫn cách cấu hình kết nối tên miền với CloudFlare

Tổng hợp và cách khắc phục lỗi khi sử dụng HomePod

Tổng hợp và cách khắc phục lỗi khi sử dụng HomePod

Hướng dẫn khắc phục lỗi tải ứng dụng trên App Store

Hướng dẫn khắc phục lỗi tải ứng dụng trên App Store

Một loạt website không thể truy cập do lỗi SSL LetsEncrypt

Một loạt website không thể truy cập do lỗi SSL LetsEncrypt

Cách khắc phục và mở khoá iPhone bị vô hiệu hoá

Cách khắc phục và mở khoá iPhone bị vô hiệu hoá

Mẹo và thủ thuật về iPhone 11 mà bạn nên biết

Mẹo và thủ thuật về iPhone 11 mà bạn nên biết

Cách tắt nguồn iPhone khi bị liệt cảm ứng

Cách tắt nguồn iPhone khi bị liệt cảm ứng

Top War: Battle Game - Trò chơi chiến thuật đỉnh cao của thời đại

Top War: Battle Game - Trò chơi chiến thuật đỉnh cao của thời đại

Tin mới cập nhật

Ranh giới giữa phim Squid Game và đời sống thực của Hàn Quốc

Ranh giới giữa phim Squid Game và đời sống thực của Hàn Quốc

Kỳ điều chỉnh giá xăng dầu hôm nay 26/10: Đạt đỉnh của hơn 7 năm qua

Kỳ điều chỉnh giá xăng dầu hôm nay 26/10: Đạt đỉnh của hơn 7 năm qua

Ra mắt hệ thống Trung tâm điều hành hoá đơn điện tử  

Ra mắt hệ thống Trung tâm điều hành hoá đơn điện tử  

Phân tích kỹ thuật chứng khoán phiên chiều 26/10: 'Ì ạch' đi lên

Phân tích kỹ thuật chứng khoán phiên chiều 26/10: 'Ì ạch' đi lên

Phú Quốc vận hành xe buýt điện thông minh đầu tiên phục vụ du khách

Phú Quốc vận hành xe buýt điện thông minh đầu tiên phục vụ du khách

VMware Edge - Giải pháp kết nối toàn diện trên nền tảng đá mây trong thế giới số

VMware Edge - Giải pháp kết nối toàn diện trên nền tảng đá mây trong thế giới số

Keysight IoT Security Assessement - Giải pháp an ninh toàn diện cho thiết bị tự động hoá

Keysight IoT Security Assessement - Giải pháp an ninh toàn diện cho thiết bị tự động hoá

Phát hiện mã độc dựa vào học máy và thông tin PE Header

Phát hiện mã độc dựa vào học máy và thông tin PE Header

Việt Nam tăng 25 bậc trong bảng xếp hạng chỉ số an toàn thông tin mạng toàn cầu

Việt Nam tăng 25 bậc trong bảng xếp hạng chỉ số an toàn thông tin mạng toàn cầu

Lao động cần bổ sung gì trong kỷ nguyên số?

Lao động cần bổ sung gì trong kỷ nguyên số?

Bản tin cổ phiếu công nghệ 26/10: PayPal hưởng lợi khi từ chối mua Pinterest

Bản tin cổ phiếu công nghệ 26/10: PayPal hưởng lợi khi từ chối mua Pinterest

Ứng phó dịch COVID-19 cần chiến lược linh hoạt phù hợp với diễn biến thực tế

Ứng phó dịch COVID-19 cần chiến lược linh hoạt phù hợp với diễn biến thực tế

Tin đọc nhiều

Một loạt website không thể truy cập do lỗi SSL LetsEncrypt

Một loạt website không thể truy cập do lỗi SSL LetsEncrypt

Mẹo và thủ thuật về iPhone 11 mà bạn nên biết

Mẹo và thủ thuật về iPhone 11 mà bạn nên biết

Thủ thuật cài đặt và tải ứng dụng bị chặn trên CH Play cho HĐH Android

Thủ thuật cài đặt và tải ứng dụng bị chặn trên CH Play cho HĐH Android

Hướng dẫn chơi Google Doodle đảo quán quân khởi tranh!

Hướng dẫn chơi Google Doodle đảo quán quân khởi tranh!

Sửa lỗi máy in không in được trên Windows 11

Sửa lỗi máy in không in được trên Windows 11

Tăng tốc Windows 11: Cách tối ưu hóa hiệu năng mới nhất

Tăng tốc Windows 11: Cách tối ưu hóa hiệu năng mới nhất

Đề thi và đáp án vào lớp 6 trường Lương Thế Vinh, Hà Nội năm 2020-2021

Đề thi và đáp án vào lớp 6 trường Lương Thế Vinh, Hà Nội năm 2020-2021

Cách chụp ảnh đẹp trên iPhone 11, iPhone 11 Pro, và iPhone 11 Pro Max

Cách chụp ảnh đẹp trên iPhone 11, iPhone 11 Pro, và iPhone 11 Pro Max

Cách xoá và lưu trữ hàng loạt các bài đã đăng Facebook nhanh nhất

Cách xoá và lưu trữ hàng loạt các bài đã đăng Facebook nhanh nhất

Hàng loạt điện thoại Samsung gặp lỗi phần mềm, nguyên nhân, cách khắc phục

Hàng loạt điện thoại Samsung gặp lỗi phần mềm, nguyên nhân, cách khắc phục

Video xem nhiều

Công ty điện tử Samsung hôm nay tuyên bố đã đạt được tốc độ 5G nhanh nhất trong ngành

Công ty điện tử Samsung hôm nay tuyên bố đã đạt được tốc độ 5G nhanh nhất trong ngành

Clip: Khuyến cáo đối với người lao động, người làm việc, người bán hàng tại khu dịch vụ trong dịch Covid-19

Clip: Khuyến cáo đối với người lao động, người làm việc, người bán hàng tại khu dịch vụ trong dịch Covid-19

Clip: Những lưu ý khi sử dụng phương tiện công cộng trong đại dịch Covid-19

Clip: Những lưu ý khi sử dụng phương tiện công cộng trong đại dịch Covid-19

Vô địch F1, Lewis Hamilton thử cảm giác lái siêu mô tô Yamaha YZR-M1 của Valentino Rossi

Vô địch F1, Lewis Hamilton thử cảm giác lái siêu mô tô Yamaha YZR-M1 của Valentino Rossi

Cỗ xe lai phản lực tăng tốc từ 0 - 1010 km/h trong 50 giây tham vọng phá kỷ lục thế giới

Cỗ xe lai phản lực tăng tốc từ 0 - 1010 km/h trong 50 giây tham vọng phá kỷ lục thế giới

“Rắn tiên tri” dự đoán đội tuyển Việt Nam thắng Thái Lan

“Rắn tiên tri” dự đoán đội tuyển Việt Nam thắng Thái Lan

Pretzel - Bánh quy cây: Biểu tượng văn hoá châu Âu với nhiều tranh cãi về nguồn gốc

Pretzel - Bánh quy cây: Biểu tượng văn hoá châu Âu với nhiều tranh cãi về nguồn gốc

Làm thế nào để nâng cao tương tác giữa loa và phòng nghe hiệu quả

Làm thế nào để nâng cao tương tác giữa loa và phòng nghe hiệu quả

Trực tiếp: Apple ra mắt Iphone 11 tại Cupertino, California, Mỹ

Trực tiếp: Apple ra mắt Iphone 11 tại Cupertino, California, Mỹ

Mây vờn đỉnh núi Chu Va

Mây vờn đỉnh núi Chu Va

Hé lộ những hình ảnh thiết kế của Galaxy Fold trong sự kiện ra mắt Galaxy Note 10

Hé lộ những hình ảnh thiết kế của Galaxy Fold trong sự kiện ra mắt Galaxy Note 10

5G thay đổi tương lai của bạn như thế nào?

5G thay đổi tương lai của bạn như thế nào?

Chip xử lý A15 Bionic của Apple có gì mới
15/09/2021
Sex Education mùa 3 được Netflix công chiếu vào 17/9
14/09/2021
iPhone 13 không thay đổi nhiều về ngoại hình, camera được nâng cấp mạnh
13/09/2021
Cách xem trực tiếp sự kiện ra mắt iPhone 13 và Apple Watch 7
10/09/2021
VNEID của Bộ Công an khác các ứng dụng đang được vận hành?
10/09/2021
'Cái tôi' thời 4.0 và tính hai mặt của mạng xã hội
04/09/2021
'Muôn màu' cảm xúc của trẻ trong ngày khai giảng online
24/08/2021
Chủ tịch Chu Ngọc Anh giải toả 'ách tắc' về Giấy đi đường cho người dân Thủ đô
10/08/2021
Hà Nội: Người dân cần nhiều giấy tờ hơn là 'Giấy đi đường'
10/08/2021
Hàng loạt Macbook M1 tự dưng vỡ màn hình, Apple có đồng ý bảo hành?
02/08/2021
6 bộ phim hay nhất để xem trên VieON
29/01/2021
Bắc Ninh: Không ký kết triển khai dự án Owifi 5G với CSE Singapore
27/06/2020
Bị World Bank cấm dự thầu 7 năm, công ty Sao Bắc Đẩu thừa nhận sai sót
27/06/2020
Wefinex - Mô hình hoạt động đa cấp "đội lốt" đầu tài chính trên mạng internet
10/06/2020
Khai trừ MISA khỏi Câu lạc bộ Chữ ký số và Giao dịch điện tử Việt Nam
27/05/2020
Chuyển đổi số - Nên hiểu như thế nào cho đúng
25/05/2020
Cách chuyển tập tin sang máy tính mới
10/11/2019
VNPT, MobiFone, VTC sẽ hoàn thành cổ phần hóa trước năm 2021
20/08/2019
5G thay đổi tương lai của bạn như thế nào?
26/07/2019
Nhận diện hành vi lừa đảo trên không gian mạng
25/07/2019
Truyền hình OTT - Hướng đi mới của các “nhà Đài”
24/07/2019
Tiến sĩ Trần Văn Mạnh (Trung tâm Khuyến nông Quốc gia) đánh giá, việc phát triển sản xuất rau ứng dụng công nghệ cao nói riêng và sản xuất nông nghiệp ứng dụng công nghệ cao nói chung là hướng đi đúng, tạo động lực mới cho ngành nông nghiệp Việt Nam.
Kinh nghiệm quá hữu ích. Cần phổ biến ngay cho các cháu nhỏ.
Chúc mừng ngày thành lập ngành Bưu điện Việt Nam
Bài viết rất hay và ý nghĩa về eKGIS và hội thảo CNTT. Cảm ơn tác giả
Tình yêu , cống hiến ,nổ lực đã vượt qua những trở ngại tưởng chừng như không bao giờ qua được. Chúc Mừng Con người Đẹp , chúng tôi luôn tự hào !
Giờ mình mới biết - Chúc mừng chúc mừng con người Đẹp
Một con người dùng cả một cuộc đời cho tình yêu thiên nhiên . Ông đã đóng góp cống hiến cho nghành thực vật học nước nhà bảo tồn phát triển những loài lan quí hiếm . Xin chúc ngài có một sinh nhật ngài ấm áp hạnh phúc bên người thân . Mong xã hội và trên toàn thế giới có nhiều người tâm huyết như ông . Xin chúc cho tình cảm hữu nghị giữa hai đất nước TL & VN luôn bền chặt và thắm thiết . VN luôn yêu quí các bạn !
Con này chắc không bằng con Netgear Orbi RBS40 đâu mình đã dùng thử và đã lắp đặt nhiều nhà , cơ quan, resort , văn phòng , showroom . Con netgear Orbi có app kiểm tra từ xa và loại đối tượng thông qua tắt ip đối tượng đó
Nhu cầu tuyển dụng tăng gấp đột biến 4 lần trong một thời gian ngắn điều đó phản ánh tỉ lệ thất nghiệp trong những tháng đầu năm là 3/4 do ảnh hưởng của đại dịch covid-19 đây là một điều đáng buồn, rồi các cử nhân, kỹ sư sẽ đi đâu về đâu trong giai đoạn bất ổn này. Để cân bằng lại có thể mất một thời gian dài.