Website luôn là một trong những yếu tố quan trọng cần được tối ưu hóa. Nếu bạn là quản trị viên web (webmaster), chắc hẳn bạn đã gặp phải cảnh báo “loại bỏ tài nguyên chặn hiển thị” và có thể khiến bạn bối rối. Để giải quyết vấn đề này, Công ty dịch vụ thiết kế website Nhật Nam Media sẽ hướng dẫn bạn cách xóa tài nguyên chặn hiển thị tốt nhất hiện nay. Cùng theo dõi bài viết dưới đây nhé!
Contents
Tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị là các tệp tĩnh quan trọng trong việc hiển thị các trang của trang web, chẳng hạn như phông chữ, HTML, CSS và JavaScript.
Khi trình duyệt truy cập một trang nhất định của trang web và gặp tài nguyên được bảo vệ, trình duyệt sẽ ưu tiên xử lý các tệp quan trọng của tài nguyên được bảo vệ. Sau đó, trình duyệt bắt đầu tải xuống các tài nguyên còn lại để hiển thị trên trang.
Tuy nhiên, các tài nguyên chặn không hiển thị (được tải sau) không làm chậm quá trình hiển thị trên trang. Sau khi hiển thị các tài nguyên chặn hiển thị (render blocking resources) này trên trang, trình duyệt vẫn có thể tải chúng xuống một cách an toàn.
Lưu ý: Không phải tất cả tài nguyên mà trình duyệt coi là chặn hiển thị đều cần thiết cho thời gian phản hồi nội dung đầu tiên trên trang. Nó cũng phụ thuộc vào đặc điểm riêng của từng trang web khác nhau.
Cách kiểm tra trang web liệu có tài nguyên chặn hiển thị
Bạn có thể nhập bất kỳ URL nào bạn muốn kiểm tra, chỉ cần sử dụng Google PageSpeed Insights để đánh giá xem trang web WordPress của bạn hiện đang có tài nguyên chặn hiển thị hay không.
Sau khi nhập URL, nếu phát hiện ra bạn đang gặp sự cố với tài nguyên chặn hiển thị. Tại thời điểm này, PageSpeed Insights hoặc Google Lighthouse trong Chrome sẽ tiếp tục liệt kê từng tài nguyên riêng lẻ để xóa tài nguyên chặn hiển thị. Kiểm tra các tài nguyên quan trọng của trang web.
Bước 1: Truy cập Google Chrome và mở Công cụ DevTools được tích hợp sẵn bằng Ctrl + Shift + J trên Window hoặc Command + Option + J trên MacOS.
Bước 2: Tại tab Coverage, tiếp tục nhấn load lại trang.
Bước 3: Lọc các tài nguyên quan trọng và lập kế hoạch cho các tài nguyên khác ít quan trọng hơn. Cụ thể, thẻ style CSS và mã javascript sẽ được chia thành 2 màu:
- Màu xanh lá cây (quan trọng): Các thẻ kiểu này là bắt buộc cho phản hồi nội dung đầu tiên trên trang. Các thẻ mã này cực kỳ quan trọng đối với chức năng chính của trang web.
- Màu đỏ (không quan trọng): Các thẻ kiểu này không hiển thị ngay lập tức trên nội dung trang và không được sử dụng để hỗ trợ chức năng chính của trang web.
Cách loại Bỏ tài Nguyên Chặn hiển Thị tốt Nhất 2021
Về cơ bản, bằng cách giảm số lượng tài nguyên chặn hiển thị, bạn có thể rút ngắn cách các tài nguyên quan trọng được hiển thị trên trang. Đồng thời, thời gian tải trang có thể được giảm đáng kể. Từ đó, trải nghiệm người dùng và tối ưu hóa công cụ tìm kiếm (SEO) trên trang có thể được nâng cao.
Sử dụng thuộc tính media cho thẻ CSS điều kiện
Việc loại bỏ màn hình CSS có thể hơi phức tạp vì bạn phải cẩn thận để không làm trễ CSS cần thiết để hiển thị nội dung trong màn hình đầu tiên. Sự sắp xếp hợp lý nhất là:
Xác định các kiểu cần thiết để hiển thị nội dung trong màn hình đầu tiên và phân phối các kiểu đó dựa trên HTML.
Sử dụng thuộc tính đa phương tiện của phần tử liên kết kéo trong tệp CSS để xác định tài nguyên CSS theo điều kiện, tức là chỉ cần thiết trên một thiết bị hoặc tình huống cụ thể.
Các phần tử CSS không tải lại đồng hồ, trạng thái bình thường được thực hiện bằng cách thêm chúng bằng cách sử dụng JavaScript đang chờ xử lý hoặc không có đồng hồ.
Ví dụ 1:
Và bạn có thể sử dụng bất kỳ giá trị nào cho truy vấn phương tiện trong tệp CSS để xử lý vấn đề hiển thị cho từng giao diện thiết bị.
<link href=”print.css” rel=”stylesheet” media=”print”>
<link href=”large.css” rel=”stylesheet” media=”screen and (min-width: 1500px)”>
<link href=”mobile.css” rel=”stylesheet” media=”screen and (max-width: 600px)”>
Mặc dù các tệp này sẽ được tải trên tất cả các thiết bị, nhưng chúng sẽ trở thành tài nguyên chặn hiển thị nếu các điều kiện trong thẻ CSS không được đáp ứng.
Và tất nhiên, các thẻ này vẫn là tài nguyên chặn hiển thị nếu đáp ứng các điều kiện thích hợp.
Ví dụ 2:
Thẻ Stylesheet mobile.css trong ví dụ trên sẽ trở thành tài nguyên chặn hiển thị trên thiết bị di động có chiều rộng chế độ xem (viewport) tối đa là 600 pixel. Nhưng nếu đối với các thiết bị có chiều rộng viewport lớn hơn 600 pixel, thì Stylesheet mobile.css trong ví dụ trên sẽ lại trở thành tài nguyên chặn không hiển thị.
Nếu bạn có một tệp CSS cho một hoặc một vài truy vấn, hãy trích xuất tất cả các quy tắc @media và lưu chúng thành các tệp riêng biệt bằng cách sử dụng plugin PostCSS.
Thủ thuật tối ưu hóa màn hình này được gọi là tách mã. Mặc dù cách tách mã này thường được đề cập cùng với JavaScript, bạn cũng có thể chia nhỏ các tệp CSS lớn hơn. Ngoài ra, bạn có thể tải từng tệp riêng lẻ nếu bạn cần rút ngắn thời gian tải của các tài nguyên hiển thị quan trọng và giảm thời gian tải trang đầu tiên.
Không thêm thẻ CSS theo quy luật @import
Bạn có thể thêm thẻ CSS vào trang bằng cách:
- Chèn thẻ <link rel=”stylesheet”> vào file HTML
- Thêm luật @import vào file CSS
Lưu ý: Tránh mã code thừa và cho phép bạn giữ tất cả các dependencies biên dịch tệp CSS ở một nơi chung. Tuy nhiên, đó không phải là một lựa chọn khôn ngoan trong cách trình bày / hiển thị.
Quy tắc @import cho phép bạn nhập tệp CSS từ các Stylesheet kiểu khác, nhưng điều này sẽ khiến trình duyệt xử lý tệp CSS chậm hơn vì nó phải tải tất cả các tệp đã nhập. Cho đến khi điều đó xảy ra, quá trình hiển thị vẫn bị chặn.
Nếu bạn muốn thêm nhiều tệp CSS hơn vào trang web của mình, bạn có thể sử dụng thẻ <link> hoặc sử dụng các công cụ nén / thu nhỏ tệp để hợp nhất các tệp CSS như sau:
Nén hoặc gộp file CSS và JavaScript
Bạn có thể nén hoặc kết hợp các tài nguyên chặn không hiển thị và chặn hiển thị trên một trang, đồng thời xóa các tệp CSS và JavaScript không cần thiết trong quá trình hiển thị các phần tử quan trọng trên trang.
Ví dụ: bạn có thể kết hợp các tệp có cùng quy tắc tải xuống và nén các tệp riêng biệt. Bởi vì các tệp nén nhẹ hơn, việc hợp nhất tệp có nghĩa là ít tệp hơn trong quá trình hiển thị các phần tử quan trọng trên trang. Việc hiển thị trang đầu tiên sẽ được thực hiện nhanh hơn.
Ngoài ra, mất ít thời gian hơn để tải các tài nguyên chặn không hiển thị.
Thực tế có nhiều công cụ có thể giúp bạn nén hoặc hợp nhất các tệp, chẳng hạn như: Minify, CSS Minifier, Minify Code và PostCSS.
Bạn hoàn toàn có thể kết hợp việc sử dụng các công cụ webpack, Parcel và Rollup với các khả năng gộp, nén và phân tách để nhanh chóng giảm số lượng nội dung chặn hiển thị.
Sử dụng thuộc tính defer và async để loại bỏ thẻ JavaScript chặn hiển thị
Trình duyệt mặc định luôn coi các tệp JavaScript được thêm vào thẻ <head> của các trang web là tài nguyên chặn hiển thị.
Bạn có thể xóa chúng khỏi chế độ hiển thị của các tài nguyên quan trọng bằng cách:
Chèn thẻ <script> trước thẻ đóng </body> thay vì thẻ <head> thông thường.
Tại thời điểm này, trình duyệt sẽ bắt đầu tải tệp JavaScript sau khi tất cả mã HTML đã được tải. Vì JavaScript được tải sau nên các phần tử mà nó tải, chẳng hạn như quảng cáo, chức năng động, hiệu ứng,…, cũng được tải sau đó. Đặc biệt là nếu tệp JavaScript dài, bạn sẽ phải đợi một thời gian dài để tải toàn bộ trang.
Tất nhiên, vấn đề này có thể dẫn đến vấn đề kết nối chậm và ảnh hưởng xấu đến trải nghiệm người dùng.
Thuộc tính Defer và Async:
Thuộc tính defer và async của thẻ <Script> là giải pháp cho vấn đề này. Cả hai thuộc tính này đều là thuộc tính boolean – thuộc tính được sử dụng trong JavaScript để so sánh và điều kiện.
Sử dụng thuộc tính defer có thể giúp tối ưu hóa các phần tử JavaScript chặn hiển thị trên các trang web. Điều này hướng dẫn trình duyệt tải xuống các tập lệnh trong nền để không bị chậm trễ trong việc hiển thị các phần tử DOM quan trọng trên trang web khi cần thiết.
Bên cạnh đó, bạn có thể sử dụng thuộc tính async để nâng cao hơn nữa các tệp JavaScript trên các trang web của mình và giúp giảm các vấn đề về chặn hiển thị. Điều này cho phép trình duyệt được thông báo về các tập lệnh cần được tải xuống một cách độc lập mà không ảnh hưởng đến việc hiển thị các phần tử DOM trên trang web.
Các thuộc tính này khiến <script> được chèn vào thẻ <head> của trang web chặn để ngăn hiển thị. Và thuộc tính defer hướng dẫn trình duyệt tải thẻ <script> để trình duyệt không chặn hiển thị trên trang.
Ví dụ: thẻ defer <script> cho phép tải tuần tự, thẻ script chỉ được hiển thị theo mặc định nếu nondefer được đặt. Tại thời điểm này, script01.js sẽ được thực thi đầu tiên, ngay cả khi bất kỳ tệp script nào được tải trước. Thuộc tính defer chỉ có thể được thêm vào thẻ script inline (nội tuyến) mà không chèn thẻ Script External (ngoại tuyến) trong đó thẻ script sử dụng thuộc tính SRC.
Tuy nhiên, thuộc tính ASYNC cho trình duyệt biết rằng thẻ script hoàn toàn độc lập với trang web. Trình duyệt sẽ tải thẻ script và coi nó như một tài nguyên chặn hiển thị giống như một thẻ <script> defer. Tuy nhiên, thuộc tính ASYNC này khác ở chỗ nó không chỉ định thứ tự tải như thuộc tính defer. Do đó, thuộc tính này thực thi ngay sau khi trang web tải xong.
Ví dụ: Đối với trường hợp này, tôi không chắc thẻ script nào script03.js hoặc script04.js sẽ tải đầu tiên. Thẻ script tải nhanh hay chậm không quan trọng. Bạn nên nhớ rằng thẻ <script> chứa một thuộc tính ASYNC riêng biệt, vì vậy thứ tự tải tệp sẽ không bị ảnh hưởng.
Nếu thứ tự tải tệp quan trọng đối với việc hiển thị trang, thì thuộc tính defer sẽ được sử dụng cho các thẻ script.
Nếu bạn có các thẻ script của bên thứ 3 riêng biệt, chẳng hạn như thẻ script quảng cáo, theo dõi dữ liệu và phân tích, hãy sử dụng thuộc tính ASYNC cho các thẻ script của bạn. Ví dụ: các công cụ Google Analytics thường khuyên bạn nên thêm thuộc tính ASYNC vào thẻ script khi tải trang trong trình duyệt.
Tải font chữ tùy chỉnh theo vị trí
Vì font chữ tùy chỉnh được gọi từ trong thẻ <head> của trang web, chúng cũng được coi là tài nguyên chặn hiển thị.
Ví dụ: bạn có thể giảm tác động của các phông chữ tùy chỉnh này được hiển thị ở đầu trang bằng cách thêm phần tử vị trí thay vì tìm nạp dữ liệu từ CDN (Content Delivery Network / Mạng phân phối nội dung) chẳng hạn như Google CDN. Đôi khi có rất nhiều quy tắc @font-face mà bạn không thực sự cần, nhưng người ta vẫn thêm chúng vào.
Ví dụ 1:
Google Font bổ sung quy tắc @font-face cho tất cả các mẫu ký tự như Latin, Cyrillic, Trung Quốc, Việt Nam,… Khi bạn thêm thẻ <link> với quy tắc @font-face vào tệp CSS của mình, có 7 chế độ ký tự khác nhau, nhưng bạn chỉ muốn sử dụng một (như tiếng Latinh). Tuy nhiên, Google Fonts không tải tất cả các tệp phông chữ này cho tất cả các chế độ ký tự, chúng chỉ thêm quy tắc @font-face vào tệp CSS.
Nếu bạn thêm phông chữ theo vị trí, bạn có thể nén hoặc hợp nhất các tệp CSS liên quan đến phông chữ vào tệp CSS của mình. Bằng cách này, bạn có thể sử dụng công cụ Google Web Fonts Helper để tạo nhanh các quy tắc @font-face cho phông chữ Google.
Ví dụ 2:
Mẫu bên dưới đây là tất cả những gì bạn cần thêm vào, kể cả @font-face Lato ở thể thông thường (Regular).
/* lato-regular – latin */
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Lato Regular’), local(‘Lato-Regular’),
url(‘../fonts/lato-v16-latin-regular.woff2’) format(‘woff2’),
url(‘../fonts/lato-v16-latin-regular.woff’) format(‘woff’);
}
Tuy nhiên, bạn nên cẩn thận. Công cụ Google Web Fonts Helper/ Trình trợ giúp phông chữ Web của Google không thêm quy tắc font-display: swap cho bạn. Điều này được thêm vào bởi chính tôi.
Bằng cách sử dụng hiển thị phông chữ với giá trị hoán đổi, bạn có thể hướng dẫn trình duyệt sử dụng nhanh phông chữ hệ thống và hoán đổi nó với phông chữ tùy chỉnh khi trình duyệt tải.
Quy tắc này cũng được thêm vào khi bạn kéo phông chữ từ CDN của Google. Phương pháp này sẽ giúp bạn tránh trường hợp văn bản không được hiển thị trên trang trong khi phông chữ tùy chỉnh vẫn đang tải.
Khi bạn tải xuống phông chữ từ nơi này sang nơi khác, hãy đảm bảo rằng bạn nén định dạng phông chữ trong trình duyệt của mình, chẳng hạn như WOFF hoặc WOFF2.
Lưu ý:
Các tệp nhẹ hơn cũng sẽ làm giảm tác động xấu của các tài nguyên chặn hiển thị. Vì vậy, ngoài việc tạo quy tắc @font-face, Google Web Fonts Helper cho phép bạn tải xuống tệp zip chứa tất cả các định dạng phông chữ mà bạn cần.
Những URL nào bị gắn cờ là tài nguyên chặn hiển thị?
Lighthouse có ba kiểu gán cờ cho URL chặn hiển thị: scripts (JS), stylesheets (CSS) và HTML imports:
Đối với thẻ </script>:
- Nằm trong các tab của tài liệu.
- Không có thuộc tính trì hoãn (defer).
- Không có thuộc tính không đồng bộ (async).
Đối với thẻ <link rel=”import”> :
- Không có thuộc tính async.
Hoặc đối với thẻ <link rel=”stylesheet”>:
- Không có tính chất disabled. Khi thuộc tính này hiện diện, trình duyệt sẽ không tải stylesheet.
- Không có thuộc tính media khớp với thiết bị của người dùng.
Trên đây là tất cả những gì bạn cần biết về cách xóa tài nguyên chặn hiển thị khỏi khái niệm, tài nguyên chặn hiển thị là gì và các mẹo giúp bạn xóa hoặc giảm số lượng tài nguyên chặn hiển thị trên trang của mình để tối ưu hóa tốc độ tải trang Pagespeed cho trang web của bạn. Nhật Nam Media chúc bạn thành công!
Bài viết liên quan
