[PageSpeed] Cách thức trình duyệt tạo ra trang web

Là một chuyên gia SEO kỹ thuật, nắm rõ cách trình duyệt tạo ra một trang web là điều rất quan trọng. Hiểu biết này về sau sẽ giúp bạn phân biệt sự khác nhau giữa cách con người và bot công cụ tìm kiếm diễn giải một trang web, hoặc để chẩn đoán các vấn đề về tốc độ tải trang, cùng nhiều tác dụng khác. Tôi sẽ xem xét vấn đề này dưới góc độ cải thiện tốc độ tải trang.

Đây là bài đầu tiên trong loạt 4 bài viết về các giai đoạn trình duyệt thực hiện để tạo trang, và cách điều đó ảnh hưởng đến PageSpeed (tốc độ trang).

Để hiển thị nội dung, mỗi trình duyệt phải hoàn thành các quy trình DOM và CSSOM trước khi tạo ra cây kết xuất (rendering tree) để làm nên trang web.

DOM, viết tắt của Document Object Model (Mô hình đối tượng tài liệu) được xây dựng từ cấu trúc đánh dấu HTML. DOM là một cách biểu diễn dữ liệu của các thành phần tạo nên cấu trúc và nội dung của trang web. Biểu diễn này được sử dụng bởi các chương trình khác, như tập lệnh JavaScript, vốn có thể sửa đổi cấu trúc, nội dung hoặc cả hai.

Tương tự, CSSOM được tạo ra từ cấu trúc đánh dấu CSS như hoạt ảnh, khung hình chính (keyframe), truy vấn đa phương tiện (media queries), cùng với các bộ chọn, thuộc tính và giá trị có ngữ nghĩa song hành với DOM.

Đây là ảnh chụp màn hình từ trình duyệt web đầu tiên trong lịch sử. Nó không thể hiển thị Javascript và không có nhiều thuộc tính CSS. Nó cũng không thể sử dụng các quy tắc HTML hiện đại. Trải nghiệm các loại trình duyệt web nguyên thủy này (như Lynx) có thể giúp bạn hiểu rõ hơn về công cụ trình duyệt (browser engine) và bản chất của chúng về mặt hiệu suất web. Bạn có thể ghé thăm trang này!

Cách trình duyệt tạo DOM

Trình duyệt không nhìn thấy nội dung hay mã nguồn của một trang web theo cách con người nhìn. Đầu tiên, trình duyệt sẽ thu thập mọi thứ trên preDOM dưới dạng các byte dữ liệu. Sau đó, nó sẽ chuyển đổi các byte này thành các ký tự cụ thể và phân tích ý nghĩa của chúng để hình thành cấu trúc trang web theo dạng phân cấp.

Chú ý: preDOM là phiên bản của DOM xuất hiện trong mã nguồn và chưa được trình duyệt đọc và xử lý. Sau đó preDOM được trình duyệt phân tích:

• Sử dụng mã ‘charset’ của tập tin, trình duyệt sẽ chuyển đổi các byte thành ký tự.
• Quá trình ‘tokenizing’ (phân tách mã) được bắt đầu để tạo ra các lệnh có ý nghĩa từ các ký tự liền kề nhau.
• Các token được tạo sẽ chuyển đổi thành các đối tượng (object) và quy tắc, thuộc tính của chúng được gán dựa theo tiêu chuẩn HTML5. (Nói cách khác, trình duyệt chuyển chúng thành các nút – node).
• Quá trình xây dựng DOM chính thức bắt đầu. Mỗi thẻ HTML được lồng vào các thẻ khác, tạo thành một cấu trúc phân cấp và hình thành nên bộ khung của trang web.

Tầm quan trọng của việc tối ưu hiệu năng DOM

Trước khi đi vào một số mẹo tối ưu, bạn cần hiểu các loại Sự kiện tải DOM (DOM Load Event) và ý nghĩa của chúng.

Một số loại Sự kiện DOM trong quá trình tạo trang web:

• domLoading: Điểm bắt đầu của quá trình xử lý DOM.
• domInteractive: Điểm kết thúc của quá trình xử lý DOM.
• domContentLoaded: Điểm kết thúc quá trình xử lý DOM và CSSOM. Lúc này, trình duyệt đã sẵn sàng để tạo cây hiển thị (rendering tree). Thông thường, việc thực thi JavaScript cũng nên được bắt đầu từ thời điểm này.
• domComplete: Tất cả tài nguyên của trang đã được tải xuống hoàn tất.
• loadEvent: Sau khi hoàn tất tải tài nguyên và tạo cấu trúc trang, các sự kiện JavaScript “onload” (nếu có) sẽ được kích hoạt.

Nếu bạn chỉ muốn tính toán Thời Gian Xử Lý DOM, bạn nên tập trung vào sự kiện domInteractive. Tuy nhiên, sự kiện này không được hiển thị trong công cụ DevTools của Chrome. Bạn có thể sử dụng hoặc tham khảo nhóm IT của mình về API PerformanceNavigationTiming, API này có thể tính toán tất cả các sự kiện này, cũng như các sự kiện con bổ sung khác như domContentLoadedEventStart.

Bạn cũng có thể xem các tùy chọn domInteractive trong Google Analytics > Hành vi > Tốc độ Trang Web > Thời gian Trang > DOM. Tuy nhiên, thông tin ở đây không thực sự ổn định và đáng tin cậy. Dù vậy, nó có thể cung cấp cho bạn một điểm khởi đầu.

Giải thích thêm:

• DOM (Document Object Model): Là mô hình đại diện cho cấu trúc của một trang web.
• DOM Process Time: Thời gian cần thiết để trình duyệt xây dựng DOM.
• domInteractive: Sự kiện được kích hoạt khi trình duyệt đã phân tích cú pháp xong tài liệu HTML, nhưng các tài nguyên bên ngoài (ảnh, CSS, v.v…) có thể vẫn đang tải.
• PerformanceNavigationTiming API: Cung cấp thông tin chi tiết về quá trình tải trang của trình duyệt.
• Google Analytics: Công cụ phân tích web cho phép bạn theo dõi hiệu suất trang web, bao gồm cả các số liệu thời gian DOM.

Bạn cũng có thể tính toán Thời gian tương tác DOM (DOM Interactive Timing) bằng DevTools nhưng chỉ với các đoạn mã trên bảng điều khiển (console). Cách này hơi chậm một chút nhưng bạn có thể thử sử dụng thư viện mã “performance.timing”. Ở phía trên, bạn sẽ thấy ở phía bên trái, performance.timing hiển thị hầu hết các số liệu hiệu suất. Chỉ có ba hoặc bốn chữ số cuối cùng là quan trọng ở đây. Nếu bạn muốn xem một số liệu tùy chỉnh, ví dụ như DOMInteractive, bạn có thể viết performance.timing.domInteractive – performance.timing.responseStart. Ở bên phải, DOMInteractive (Thời gian tương tác DOM), DOMComplete (DOM hoàn thành), Total Page Load Time (Tổng thời gian tải trang) được cung cấp theo thứ tự. Ví dụ đến từ cùng một trang web tin tức.

Trong bài viết này, sự kiện domContentLoaded và các công cụ DevTools (Công cụ nhà phát triển) sẽ đáp ứng đủ nhu cầu của chúng ta.

Hãy lưu ý rằng khi các tài nguyên được tổ chức và tải một cách hợp lý, khoảng thời gian giữa sự kiện domInteractive và domContentLoaded sẽ không có khác biệt quá lớn. Bởi vì thử thách thực sự là tách rời các tập tin JS và các tập tin CSS khỏi nhau mà không làm gián đoạn quá trình phân tích cú pháp HTML hoặc tạo ra tắc nghẽn trong luồng chính (main thread). Nếu bạn có thể thực hiện điều này thành công, khả năng cao là cả DOM và CSSOM (sự kiện domContentLoaded) đều sẽ được kích hoạt một cách nhanh chóng nhất.

Tối ưu hóa quá trình DOM và các mẹo

Nếu là vào năm 2019 hoặc trước đó, với tư cách là một Chuyên gia SEO Kỹ thuật, có thể bạn không cần phải biết cách viết mã.

Nhưng từ năm 2020 trở đi, bạn thực sự cần biết một số kiến thức lập trình cơ bản. Để hiểu cách tối ưu hóa Mô hình Đối tượng Tài liệu (DOM) hoặc cấu trúc Nút HTML, bạn cần kiểm tra cấu trúc này với đủ kinh nghiệm để có thể tạo ra cấu trúc mã mới.

Dưới đây là một số mẹo để tối ưu hóa kích thước DOM:

1. Kiểm tra Cây Nút DOM hiện có và cố gắng tìm bất kỳ nút HTML không cần thiết nào. Ví dụ: nếu bạn thấy bất kỳ thẻ <div> hoặc <span> nào có class là ‘display: none’, bạn nên xóa chúng.
2. Bạn có thể đề xuất với nhóm IT của mình sử dụng nhiều thành phần giả (pseudo-element) ::before và ::after hơn thay vì tạo các nút HTML mới.
3. Cố gắng tập trung vào các phần tử HTML chính (parent element) có nhiều phần tử con (child element). Kiểm soát các Class CSS và các tác động của chúng để tạo ra cấu trúc HTML ngắn gọn hơn trong khi vẫn đảm bảo tính đồng bộ giữa các phần tử HTML.
4. Nếu bạn thao tác với cấu trúc nút HTML bằng JavaScript, bạn cũng có thể sử dụng hoặc đề xuất nhóm IT sử dụng các Điểm ngắt Thay đổi DOM Cây con (Subtree Modification DOM Change Breakpoints) để xác định nút nào đang thay đổi, và yếu tố nào khởi tạo sự thay đổi đó.
5. Nếu bạn không thể giảm kích thước nút HTML, bạn có thể cân nhắc sử dụng Shadow DOM hoặc, tùy thuộc vào thư viện JS và công nghệ render của bạn, sử dụng Virtual DOM.
6. Bạn cũng nên sử dụng các công nghệ nén như gzip, brotli hoặc deflate ở phía máy chủ.
7. Bạn có thể nén tài liệu HTML của mình bằng cách xóa các khoảng trắng để hỗ trợ tốc độ duyệt web tốt hơn, nhanh hơn.

Bạn có thể sử dụng các kiểu DOM khác nhau để cải thiện tốc độ trang, trải nghiệm người dùng (UX) và ngân sách thu thập thông tin (crawl budget). Một ví dụ cụ thể là Virtual DOM (DOM Ảo).

Virtual DOM chỉ tải các phần của DOM bị thay đổi khi một trang mới được mở, thay vì tải lại tất cả các phần tử DOM. Điều này giúp việc hiển thị trang nhanh hơn và nhẹ hơn cho cả người dùng lẫn các bot của công cụ tìm kiếm.

Virtual DOM hoạt động hiệu quả với các thư viện JavaScript như Vue hoặc React.

Tại sao hiệu suất DOM lại quan trọng đối với SEO kỹ thuật?

Kích thước DOM có liên quan trực tiếp đến tốc độ trang và tương tác ban đầu với người dùng.

Nếu bạn có kích thước DOM lớn và không sử dụng Shadow DOM hoặc các phương pháp ngăn chặn tương tự để tránh tải và tạo kiểu cho tất cả các nút HTML không hiển thị trong quá trình tải trang ban đầu, nhiều khả năng bạn sẽ làm chậm chỉ số tốc độ và tốc độ tiếp xúc ban đầu đối với người dùng.

Nếu kích thước DOM của bạn lớn, bạn có thể sẽ gặp phải tình trạng “reflow” của trình duyệt.

“Reflow” đề cập đến việc thay đổi kích thước, style hoặc vẽ và định vị một phần tử HTML trong quá trình hiển thị lại. Nếu một phần tử HTML cha thay đổi, các phần tử con cũng bị ảnh hưởng. Độ dài và số lượng của chuỗi phần tử HTML này có thể làm giảm tốc độ trang của bạn.

Vòng lặp “reflow” có thể ảnh hưởng tiêu cực đến ngân sách thu thập dữ liệu của bạn, tăng tải cho máy chủ và mạng. Do đó, nó có thể ảnh hưởng đến tỷ lệ chuyển đổi và thậm chí cả thứ hạng.

Google thực sự đã xuất bản một video thuyết trình ngắn gọn và hay về chủ đề này:

Trình duyệt tạo CSSOM và Cây kết xuất (rendering tree) như thế nào?

Các trình duyệt thường bắt đầu quá trình xử lý CSSOM sau khi hoàn thành quá trình xử lý DOM.

Vì các trình duyệt hiện đại hiểu rằng DOM sẽ không có ý nghĩa gì cho đến khi CSSOM được hoàn tất, một số phần tử HTML sẽ không được trình duyệt hiển thị cho đến khi nó đọc xong các mã định kiểu (style code). Ví dụ điển hình cho điều này là thuộc tính background-image trong CSS.

Trên đây là một ví dụ về đoạn mã CSS cần được refactor (cấu trúc lại). Thuộc tính ‘zoom’ được sử dụng lặp lại hơn 19 lần cho các bộ chọn (selector) khác nhau. Điều này có thể được hợp nhất để tối ưu hóa.

Quá trình CSSOM được trình duyệt hiện đại bắt đầu và hoàn thành như thế nào?

1. Trình duyệt phân tích dữ liệu HTML thô, chuyển đổi thành các thành phần ngữ nghĩa và xây dựng nên the DOM (Document Object Model).

2. Quá trình tương tự diễn ra với CSS. Trình duyệt phân tích CSS, tạo ra CSSOM (CSS Object Model).

3. Tiếp theo, trình duyệt kết hợp DOM và CSSOM để xây dựng nên một cây kết xuất (render tree). Cây này bao gồm các thông tin về cách thức hiển thị từng thành phần và mối quan hệ giữa chúng.

4. Bước ‘Layout’ bắt đầu. Trình duyệt tính toán kích thước và vị trí của các thành phần trên màn hình dựa theo CSSOM. Do kích thước của các phần tử cha có thể ảnh hưởng đến phần tử con, cấu trúc CSS phân cấp hỗ trợ tốt cho tốc độ trang.

5. Sau đó, trình duyệt tiến hành ‘vẽ’ giao diện. Quá trình này bao gồm hiển thị hình ảnh, đường viền, màu sắc theo chỉ dẫn trong CSS. Việc sắp xếp các thành phần này trên nhiều lớp khác nhau góp phần tăng hiệu suất.

6. Cuối cùng, giai đoạn ‘Composite’ xảy ra. Trình duyệt hợp nhất các hình ảnh và lớp lại với nhau, tạo ra giao diện hoàn chỉnh cho trang web

Bạn có thể kiểm tra các thuộc tính CSS và chi phí của chúng đối với công cụ trình duyệt thông qua CSS Triggers (Trình kích hoạt CSS) xét trên các công cụ trình duyệt khác nhau.

Cách tối ưu hóa quy trình CSSOM

1. Là một chuyên gia SEO Kỹ thuật, đầu tiên bạn nên tập trung vào các bộ chọn CSS phức tạp và các thuộc tính có tác động lẫn nhau. Nói cách khác, nếu một bộ chọn CSS có hơn 3 phần tử con, bạn nên cố gắng rút ngắn nó hoặc báo cáo với Nhóm IT của mình để cải tổ lại CSS cho phù hợp hơn. Các thuộc tính có tác động lẫn nhau có nghĩa là Nhóm IT của bạn có thể đang sử dụng cùng một thuộc tính CSS trên các lớp (class) và id khác nhau. Bạn nên cố gắng hợp nhất chúng để có kích thước tệp CSS nhỏ hơn.
2. Hãy tìm hiểu xem Nhóm IT của bạn có nén các tệp CSS hay không.
3. Đối với từng danh mục và phần nội dung trên trang web, hãy thử tìm mã CSS được sử dụng phổ biến và mã CSS ít được sử dụng. Khuyên Nhóm IT của bạn phân chia các tệp CSS để sử dụng tài nguyên hiệu quả hơn.
4. Tìm các đoạn mã quan trọng (cụ thể là “!important”) trong tệp CSS của bạn. Chúng có thể khiến một số đoạn mã kế tiếp trở nên không cần thiết.
5. Cố gắng xác định xem các tệp CSS của bạn có cấu trúc phân cấp song song với các nút HTML của bạn hay không. Nếu chúng song song, cây kết xuất của bạn sẽ dễ dàng hơn cho các trình duyệt xây dựng.
6. Cố gắng giảm số lượng phần tử HTML cần được thay đổi kiểu dáng (style) hoặc kích thước. Hình ảnh là một ví dụ điển hình về điều này.
7. Bạn có thể khuyên Nhóm IT của mình sử dụng các tính năng và thuộc tính ‘Contain’, ‘Will-change’, ‘CSS Scope’ để có hiệu suất trình duyệt tốt hơn. Thuộc tính ‘Contain’ xác định phạm vi của phần tử HTML và các hiệu ứng CSS mà nó sẽ nhận được. Bằng cách này, nó sẽ không ảnh hưởng đến phần còn lại của DOM. Thuộc tính ‘Will-change’ cho trình duyệt biết những phần tử nào thay đổi và theo cách nào để trình duyệt có thể thực hiện tối ưu ngay cả trước khi quá trình bắt đầu.
8. Cố gắng đưa mã CSS quan trọng vào (“inline”) trước khi chặn kết xuất các tệp CSS.
9. Cố gắng khuyên Nhóm IT không sử dụng mã kiểu (style) trong các thẻ HTML. Điều này ảnh hưởng đến cả quy trình DOM/CSSOM cũng như ngân sách thu thập dữ liệu.
10. Không đặt địa chỉ nguồn hình ảnh của bạn vào các tệp CSS. Điều này đi ngược lại các nguyên tắc lập chỉ mục của Google (Chrome DevSummit 2019, How to Make Your Content Shine on Google Search, Martin Splitt).
11. Không sử dụng tính năng @import trong tệp CSS. Điều này tạo ra một yêu cầu CSS thứ hai lồng vào nhau.
12. Cố gắng sử dụng ít tệp CSS bên ngoài hơn để rút ngắn CSSOM hoặc cố gắng đóng gói chúng lại để giảm thời gian tra cứu DNS và kết nối tài nguyên.
13. Bạn cũng có thể kiểm tra các bộ chọn dài và độ cụ thể của chúng. Nếu chúng quá dài, bạn cần báo cáo chúng với Nhóm IT hoặc bạn có thể tự mình cải thiện chúng với tư cách là một chuyên gia SEO kỹ thuật. Các bộ chọn dài và các thuộc tính CSS không cần thiết lặp lại với các giá trị giống nhau là gánh nặng cho trình duyệt và CPU của điện thoại.

Hãy nhớ rằng, CSSOM có cấu trúc cây phân cấp giống như DOM. Nó áp dụng các quy tắc hiện tại cho phần tử lớn nhất trước, và các phần tử con vẫn bị ảnh hưởng cho đến khi trình duyệt đọc mã được viết riêng cho chúng.

Trong CSSOM, tất cả các thành phần ID, Class, Thuộc tính, và Giá trị CSS đều được liệt kê theo cấu trúc ngữ nghĩa (semantic) của các thành phần HTML DOM. CSSOM được lấy từ cùng một tài liệu HTML với DOM. Lý do chính khiến tôi không chỉ ra các nút HTML trong CSSOM là để tập trung vào cấu trúc phân cấp của Mã CSS.

Trình duyệt hiển thị trang như thế nào?

Xử lý CSSOM không đồng nghĩa với việc hiển thị (render). Khi DOM và CSSOM được đọc theo cùng một thứ bậc, rendering là quá trình kết hợp hai cây mã này từ trên xuống trong khung nhìn (viewport).

Trong quá trình rendering, một số đoạn mã tồn tại trong quá trình xử lý DOM và CSSOM có thể bị vô hiệu hóa. Lý do chính cho việc này là chúng không hiển thị hoặc bị vô hiệu hóa bởi một đoạn mã khác. Vì vậy, việc tối ưu hóa mã không được đưa vào cây rendering nhưng xuất hiện trong DOM và CSSOM sẽ hữu ích cho tốc độ trang.

Phía trên, dữ liệu DOMContentLoaded trong Chrome DevTools hiển thị thời gian cần để tải và phân tích cú pháp các tài liệu HTML và CSS.

Do đó, tính nhất quán giữa luồng chính (main thread) của hiệu suất và phần danh sách hàm gọi (call tree) cho kết quả gần giống nhau. Tất cả các ví dụ đều xuất phát từ cùng một trang web.

Nếu bạn muốn tính toán riêng phần DOM, bạn cần kiểm tra thời gian domInteractive, thời gian này không được hiển thị bởi DevTools nhưng có thể được đo bằng API Navigation Timing.

Một vài lưu ý để bản dịch sát nghĩa hơn trong ngữ cảnh công nghệ:

• Phân tích cú pháp: Cụm này thường được dịch sát nghĩa hơn là “parsing” trong lĩnh vực phát triển web.
• Luồng chính của hiệu suất: Thay thế bằng “luồng hiệu suất chính” sẽ chuẩn hơn về mặt thuật ngữ.

Sau sự kiện DomContentLoaded, trình duyệt của bạn sẽ bắt đầu quá trình dựng cây hiển thị (rendering tree) và bạn sẽ thấy rằng các điểm ảnh trên màn hình của mình được tô màu với thông tin và thiết kế có ý nghĩa. Trong thời gian này, quá trình kết xuất Javascript cũng sẽ tham gia và ngay lập tức phân chia, thay đổi và vẽ lại cây hiển thị.”

Điều gì tiếp theo?

Thứ tự tài nguyên được cấu trúc hợp lý, số lượng yêu cầu tài nguyên và mối quan hệ giữa cây hiển thị và quá trình kết xuất Javascript giúp giảm chi phí về tốc độ trang.

Bài viết tiếp theo trong loạt bài này sẽ xem xét cách điều này liên quan đến các số liệu tốc độ trang nâng cao và cách Google đánh giá tốc độ trang.