Hiệu suất của một trang web không chỉ ảnh hưởng đến trải nghiệm người dùng mà còn đóng vai trò quan trọng trong việc cải thiện xếp hạng SEO. Người dùng hiện nay yêu cầu sự nhanh chóng và mượt mà khi truy cập vào các trang web. Do đó, một trong những yếu tố tiên quyết trong việc tối ưu hóa trang web là nhận diện và giảm thiểu các tài nguyên chặn hiển thị (render-blocking resources). Bài viết này, MangoAds sẽ đưa ra những yếu tố khiến nội dung trang bị trì hoãn hiển thị, gây ra trải nghiệm không tốt cho người dùng.
1. Tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị (render-blocking resources) là các tệp tĩnh như font chữ, HTML, CSS hoặc JavaScript dùng để định dạng và hiển thị nội dung của trang web. Khi trình duyệt truy cập vào website và gặp các tài nguyên này, nó sẽ tạm dừng việc tải những nội dung khác cho đến khi các file này được xử lý xong, dẫn đến việc quá trình hiển thị trang web cũng bị chậm lại.
Hình 1: Tài nguyên chặn hiển thị có vai trò hiển thị nội dung của một website (Nguồn: Internet)
1.1. Tác động của CSS chặn hiển thị
CSS (Cascading Style Sheets) là thành phần không thể thiếu trong quá trình tải trang web. Khi trình duyệt tải một trang web, nó phải tải và xử lý toàn bộ tệp CSS trước khi bắt đầu hiển thị bất kỳ nội dung nào. Nhờ đó, mọi thành phần trên trang đều được trình bày đúng định dạng và bố cục theo thiết kế.
Hình 2: Trang ví dụ có và không có CSS (Nguồn: Search Engine Journal)
Tuy nhiên, nếu quá trình tải CSS mất quá nhiều thời gian, người dùng có thể chỉ nhìn thấy một trang trắng trong khi chờ nội dung xuất hiện. Điều này tạo ra trải nghiệm không tốt cho người dùng, đặc biệt là trong thời đại mà họ mong muốn các trang web tải nhanh chóng. Do đó, việc tối ưu hóa và giảm thiểu thời gian tải các tệp CSS là vô cùng quan trọng.
1.2. Tác động của JavaScript chặn hiển thị
JavaScript cũng là một tài nguyên có thể cản trở quá trình hiển thị trang, nhưng không nhất thiết phải tải toàn bộ trước khi nội dung xuất hiện. Tuy nhiên, nếu trình duyệt gặp một đoạn mã JavaScript ở phần đầu của tệp HTML, nó sẽ tạm dừng quá trình tải trang để thực thi đoạn mã đó, dẫn đến sự chậm trễ trong việc hiển thị nội dung chính.
Hình 3: Ví dụ về JavaScript chặn hiển thị (Nguồn: Search Engine Journal)
Với các trang web hiện đại, JavaScript thường được sử dụng để tương tác và cập nhật nội dung trang. Và tất nhiên nếu không được tối ưu hóa, JavaScript có thể làm chậm quá trình tải trang và gây cản trở đến việc hiển thị các nội dung quan trọng.
2. Tại sao việc giảm tài nguyên chặn hiển thị lại quan trọng?
Tốc độ tải trang ảnh hưởng đồng thời trực tiếp đến trải nghiệm của người dùng và thứ hạng SEO của website. Google đã liên tục cải tiến các thuật toán tìm kiếm và nhấn mạnh tầm quan trọng của việc tối ưu hóa tốc độ tải trang. Một trong những thước đo quan trọng được Google sử dụng là Core Web Vitals, bao gồm ba yếu tố chính: Largest Contentful Paint (LCP), First Input Delay (FID) và Cumulative Layout Shift (CLS). Trong đó, LCP là yếu tố đánh giá trực tiếp hiệu suất tải trang.
2.1 Các yêu cầu của Google về tốc độ tải trang
Google đã đặt ra tiêu chuẩn Core Web Vitals để đánh giá trải nghiệm người dùng trên website, bao gồm ba chỉ số chính: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) và Cumulative Layout Shift (CLS). Những chỉ số này có tác động tương đối đến thứ hạng của website trên công cụ tìm kiếm. Hiểu đơn giản, chúng phản ánh mức độ tương tác và sự hài lòng của người dùng.
Do đó, việc giảm bớt các tài nguyên gây chặn hiển thị sẽ cải thiện trực tiếp các chỉ số trên. Và khi website đạt hiệu suất tốt trong Core Web Vitals, chúng sẽ tối ưu hóa trải nghiệm của người dùng song song đó đảm bảo tuân thủ các tiêu chuẩn quan trọng của Google, góp phần cải thiện thứ hạng trên trang kết quả tìm kiếm.
2.2 Tác động của tốc độ tải trang đến trải nghiệm người dùng
Người dùng ngày nay đòi hỏi trải nghiệm trực tuyến nhanh chóng và liền mạch. Để đáp ứng điều này, việc xác định và giảm thiểu các tài nguyên gây chặn hiển thị là rất quan trọng, giúp nội dung trang web hiển thị sớm nhất có thể.
Ngày nay, người dùng mong đợi một trải nghiệm trực tuyến nhanh chóng và liền mạch. Để đáp ứng nhu cầu này, việc xác định và giảm thiểu các tài nguyên gây cản trở hiển thị trang là điều thiết yếu, giúp nội dung website xuất hiện sớm nhất có thể.
Điều này đã buộc các nhà phát triển phải liên tục tối ưu hóa hiệu suất trang, giảm thiểu các tài nguyên gây cản trở quá trình hiển thị. Các kỹ thuật như tối ưu hóa hình ảnh, giảm tải các script không cần thiết, và áp dụng phương pháp tải nội dung không đồng bộ đã trở nên phổ biến để đáp ứng kỳ vọng này.
Google vẫn duy trì tầm quan trọng của tốc độ tải trang thông qua bộ chỉ số Core Web Vitals. Chỉ số Largest Contentful Paint (LCP) được khuyến nghị cần dưới 2,5 giây để được đánh giá là "Tốt."
Mặc dù nhờ sự ra đời của các công nghệ tiên tiến như HTTP/3, mạng phân phối nội dung (CDN) hiện đại và các giải pháp caching hiệu quả, thời gian tải trang trung bình trên thiết bị di động đã được cải thiện đáng kể, giảm xuống còn khoảng 5 giây so với mức 8,6 giây ở những năm trước. Tuy nhiên, con số này vẫn còn xa so với kỳ vọng của người dùng hiện nay.
Hình 4: Ví dụ về kết xuất được tối ưu hóa so với chưa được tối ưu hóa từ Google (Nguồn: Web.dev)
Việc tối ưu hóa hiệu quả hiển thị trang là rất cần thiết. Điều này được thực hiện bằng cách tối ưu hóa đường dẫn kết xuất quan trọng, giúp trang hiển thị nội dung càng sớm càng tốt, giảm thiểu thời gian người dùng phải nhìn vào màn hình trắng.
3. Các công cụ để nhận diện tài nguyên chặn hiển thị
Để tối ưu hóa trang web, việc đầu tiên bạn cần làm là xác định rõ ràng các tài nguyên chặn hiển thị đang làm chậm quá trình tải trang. Có nhiều công cụ hỗ trợ bạn trong việc này, giúp bạn xác định nhanh chóng các tài nguyên cần tối ưu hóa.
3.1. Sử dụng công cụ PageSpeed Insights
PageSpeed Insights là công cụ do Google cung cấp, giúp kiểm tra hiệu suất trang web và đề xuất cách cải thiện tốc độ tải trang. Công cụ này sẽ đưa ra đánh giá tổng quan và liệt kê các yếu tố gây chậm trang, bao gồm cả các tài nguyên chặn hiển thị.
Khi bạn kiểm tra một URL với PageSpeed Insights, mục “Eliminate render-blocking resources” sẽ hiển thị danh sách các tệp CSS và JavaScript đang chặn quá trình hiển thị trang. Bạn có thể dựa vào danh sách này để biết được những tài nguyên nào cần được tối ưu hóa hoặc loại bỏ khỏi quá trình tải ban đầu của trang.
Hình 5: Kết quả mẫu từ thử nghiệm PageSpeed Insights (Nguồn: Search Engine Journal)
3.2. Cách sử dụng WebPageTest để kiểm tra
WebPageTest là một công cụ khác giúp bạn kiểm tra hiệu suất trang web một cách chi tiết hơn. Công cụ này cung cấp một biểu đồ gọi là "waterfall" hiển thị quy trình tải tài nguyên trên trang. Dựa vào biểu đồ này, bạn có thể dễ dàng xác định những tài nguyên nào đang gây chặn hiển thị và cần được tối ưu hóa.
Một trong những lợi ích của WebPageTest là nó cho phép bạn xem rõ ràng thứ tự mà các tài nguyên được tải xuống và xác định những tệp nào đang gây ra sự chậm trễ trong việc hiển thị nội dung quan trọng. Quá trình này giúp bạn có cái nhìn rõ ràng hơn về quy trình tải trang và tập trung tối ưu hóa những phần cần thiết.
Hình 6: Kết quả mẫu từ WebPageTest.org (Nguồn: Search Engine Journal)
4. Giải pháp tối ưu hóa tài nguyên chặn hiển thị
Sau khi xác định các tài nguyên chặn hiển thị, bước tiếp theo là áp dụng các phương pháp tối ưu hóa để giảm thiểu tác động của chúng đến tốc độ tải trang. Dưới đây là một số phương pháp phổ biến và hiệu quả.
4.1. Sử dụng thuộc tính async và defer cho JavaScript
JavaScript là một trong những tài nguyên chặn hiển thị phổ biến nhất trên các trang web. Tuy nhiên, không phải tất cả các tệp JavaScript đều cần thiết cho việc hiển thị nội dung ban đầu của trang. Bằng cách sử dụng các thuộc tính async và defer, bạn có thể kiểm soát cách JavaScript được tải và thực thi, từ đó giảm thiểu tác động của chúng đến quá trình hiển thị.
- Thuộc tính async
Khi một tệp JavaScript được tải với thuộc tính async, trình duyệt sẽ tải tệp đó song song với việc phân tích HTML. Khi tệp JavaScript đã được tải xong, nó sẽ được thực thi ngay lập tức mà không cần đợi HTML được phân tích xong. Điều này giúp tăng tốc độ tải các tệp JavaScript mà không làm gián đoạn quá trình phân tích HTML.
Hình 7: Trình duyệt xử lý JavaScript bằng thuộc tính async (Nguồn: Search Engine Journal)
- Thuộc tính defer
Khác với async, thuộc tính defer yêu cầu trình duyệt tải tệp JavaScript song song với việc phân tích HTML nhưng chỉ thực thi nó sau khi toàn bộ HTML đã được phân tích xong. Điều này giúp tránh tình trạng gián đoạn quá trình hiển thị nội dung khi các tệp JavaScript không cần thiết cho quá trình ban đầu.
Hình 8: Trình duyệt xử lý JavaScript bằng thuộc tính defer(Nguồn: Search Engine Journal)
Cả hai thuộc tính này đều giúp giảm thiểu thời gian chờ đợi của người dùng và đảm bảo rằng JavaScript không gây cản trở quá trình hiển thị nội dung trên màn hình. Bằng cách tối ưu hóa cách tải JavaScript, bạn có thể cải thiện đáng kể tốc độ tải trang và trải nghiệm người dùng.
4.2 Đặt JavaScript ở cuối HTML
Nếu bạn từng tham gia khóa Thiết kế Web 101, thì phương pháp này có thể quen thuộc: Đặt liên kết đến các bảng kiểu CSS ở đầu phần <head> của HTML và đặt liên kết đến các script bên ngoài ở cuối phần <body> của HTML.
Trong ví dụ, khi sử dụng hàm alert của JavaScript, vị trí đặt hàm trong HTML ảnh hưởng đến thứ tự tải và thực thi của trình duyệt.
Nếu hàm alert được đặt ở đầu tài liệu HTML, trình duyệt sẽ tải và thực thi nó sớm, dẫn đến việc hiển thị trang bị chặn và không xuất hiện bất kỳ nội dung trực quan nào. Ngược lại, nếu hàm alert được đặt ở cuối HTML, một số nội dung của trang sẽ được hiển thị trước khi quá trình chặn xảy ra.
Mặc dù việc đặt các tài nguyên JavaScript ở cuối HTML là một phương pháp hay tiêu chuẩn, nhưng bản thân phương pháp này không tối ưu để loại bỏ các script chặn hiển thị khỏi đường dẫn tới nội dung quan trọng.
Hình 9: JavaScript được đặt ở đầu HTML hiển thị trang sẽ bị chặn ngay lập tức bởi hàm cảnh báo và không có nội dung trực quan nào được hiển thị (Nguồn: Search Engine Journal)
4.3 Sử Dụng CSS Media Queries
CSS media queries tránh được việc chặn hiển thị bằng cách chỉ định các tài nguyên CSS chỉ được sử dụng trong một số điều kiện nhất định (chế độ in, hướng màn hình, kích thước trang). Mặc dù tất cả các tài nguyên CSS vẫn được tải xuống, tuy nhiên những tài nguyên không quan trọng sẽ được xử lý sau với mức ưu tiên thấp hơn.
Ví dụ về CSS media query
CSS media query có thể yêu cầu trình duyệt chỉ xử lý một stylesheet khi trang được in.
Khi có thể, hãy sử dụng CSS media queries để xác định rõ tài nguyên nào quan trọng cho việc hiển thị trang.
Hình 10: Truy vấn CSS media chỉ định trình duyệt không phân tích bảng kiểu này trừ khi trang đang được in (Nguồn: Search Engine Journal)
Ở ví dụ trên đưa ra là một thẻ <link> trong HTML dùng để liên kết với một file CSS bên ngoài có tên print.css. Điểm đặc biệt ở đây là thuộc tính media="print", có nghĩa là stylesheet này chỉ áp dụng khi trang được in.
Từng phần của đoạn mã bạn có thể hiểu như sau:
- href="print.css": Chỉ định đường dẫn đến file CSS cần sử dụng.
- rel="stylesheet": Xác định rằng đây là một stylesheet.
- media="print": Chỉ định rằng file CSS này chỉ được áp dụng khi trang web được in.
5. Các bước tiếp theo sau khi nhận diện tài nguyên chặn hiển thị
Sau khi đã nhận diện và tối ưu hóa các tài nguyên chặn hiển thị, cần thực hiện một số bước tiếp theo để đảm bảo rằng trang web của bạn luôn đạt hiệu suất tốt nhất.
5.1. Phân loại và giảm kích thước tài nguyên
Sau khi xác định các tài nguyên chặn hiển thị, bạn cần phân loại chúng thành hai nhóm: tài nguyên cần thiết và tài nguyên không cần thiết.
Tài nguyên cần thiết là những tài nguyên ảnh hưởng trực tiếp đến quá trình hiển thị nội dung, chẳng hạn như CSS cho nội dung phía trên màn hình. Tài nguyên không cần thiết là những tài nguyên có thể trì hoãn hoặc loại bỏ hoàn toàn mà không ảnh hưởng đến trải nghiệm người dùng.
Sau khi phân loại, bước tiếp theo là giảm kích thước của các tài nguyên cần thiết bằng cách nén, minify hoặc loại bỏ các đoạn mã không cần thiết. Hoạt động này giúp hỗ trợ số lượng dữ liệu mà trình duyệt phải tải, từ đó cải thiện tốc độ tải trang.
5.2. Xem xét tải tài nguyên theo thứ tự ưu tiên
Tải tài nguyên theo thứ tự ưu tiên giúp đảm bảo rằng các tài nguyên quan trọng nhất, chẳng hạn như CSS cho nội dung phía trên màn hình, được tải trước tiên. Bạn có thể sử dụng các kỹ thuật như "resource hints" (gợi ý tài nguyên) để hướng dẫn trình duyệt tải trước các tài nguyên quan trọng.
Resource hints bao gồm các thuộc tính như preload, prefetch, và dns-prefetch, cho phép bạn điều khiển thứ tự tải của các tài nguyên. Ví dụ, bằng cách sử dụng thuộc tính preload cho các tệp CSS hoặc hình ảnh lớn, bạn có thể đảm bảo rằng chúng được tải trước khi trình duyệt bắt đầu hiển thị nội dung. Điều này giúp tăng tốc độ tải trang và cung cấp trải nghiệm mượt mà hơn cho người dùng.
Một bước quan trọng khác là xem xét việc inline các tài nguyên quan trọng vào HTML. Inline các đoạn mã CSS hoặc JavaScript quan trọng giúp trình duyệt không phải thực hiện thêm các yêu cầu HTTP để tải chúng, từ đó rút ngắn thời gian tải trang.
6. Kết luận
Việc nhận diện và tối ưu hóa tài nguyên chặn hiển thị là một phần quan trọng của chiến lược tối ưu hóa tốc độ tải trang và trải nghiệm người dùng. Thông qua các công cụ như PageSpeed Insights, Lighthouse và WebPageTest.org, bạn có thể dễ dàng xác định các tài nguyên gây chậm trang và áp dụng các giải pháp như sử dụng thuộc tính async, defer, hoặc nén CSS để tối ưu hóa.
Việc thực hiện các phương pháp MangoAds đã hướng dẫn không chỉ giúp trang web của bạn tải nhanh hơn mà còn cải thiện thứ hạng trên các công cụ tìm kiếm, tăng cường hiệu quả SEO và mang lại trải nghiệm tốt hơn cho người dùng.
Xem thêm:
>>> Tối ưu tốc độ website trong tích tắc!
>>> Ảnh hưởng của tốc độ website đến thứ hạng Google?
>>> Mẹo tăng tốc website nhanh chóng