8 cách loại bỏ các tài nguyên chặn hiển thị hiệu quả (Cơ bản + Nâng cao)

Ngày đăng: 08/02/2022

Tác giả: Vũ Việt Hoàng

8 cách loại bỏ các tài nguyên chặn hiển thị hiệu quả (Cơ bản + Nâng cao)

Khi gặp các tài nguyên chặn hiển thị, trình duyệt sẽ ngừng tải xuống phần còn lại của tài nguyên cho đến khi các tệp quan trọng này được xử lý. Trong thời gian chờ đợi, toàn bộ quá trình kết xuất được tạm dừng. Ngoài phương pháp biến những tài nguyên chặn hiển thị thành những tài nguyên chặn không hiển thị, bạn cũng có thể giảm số lượng hoặc kích thước của các tài nguyên chặn hiển thị đó. Hãy cùng tìm hiểu cách xác định và loại bỏ các tài nguyên chặn hiển thị trong bài viết dưới đây!

Mục Lục

I - Tài nguyên chặn hiển thị là gì?
II - Xác định các tài nguyên chặn hiển thị
III - Cách loại bỏ tài nguyên, loại bỏ javascript và css chặn hiển thị
IV - Sử dụng một plugin loại bỏ css, xóa javascript chặn hiển thị Wordpress

I - Tài nguyên chặn hiển thị là gì?

Tài nguyên chặn hiển thị là các phần mã trong tệp trang web, có thể bao gồm các biểu định kiểu CSS, tệp JavaScript, phông chữ, tệp HTML, hình ảnh, tệp phương tiện và thẻ

Để biết được tài nguyên chặn hiển thị ảnh hưởng như thế nào trong SEO thì hãy cùng Ori tìm hiểu về cách SEO website hiệu quả cho doanh nghiệp của bạn.

II - Xác định các tài nguyên chặn hiển thị

Công cụ PageSpeed Insights của Google

Cách tốt nhất để xác định các tài nguyên chặn hiển thị là kiểm tra tốc độ trực tuyến miễn phí như công cụ PageSpeed Insights của Google. Dán URL của trang web và nhấp vào “Phân tích”.

Khi quá trình quét hoàn tất, Google sẽ ấn định điểm tốc độ tổng hợp cho trang web, từ 0 (chậm nhất) đến 100 (nhanh nhất). Điểm trong phạm vi 50 đến 80 là mức trung bình.

Để xác định các tệp chặn hiển thị đang làm chậm trang, hãy cuộn xuống “Cơ hội”, sau đó mở tùy chọn “Loại bỏ tài nguyên chặn hiển thị”.

Bạn sẽ thấy danh sách các tệp làm chậm, chúng ảnh hưởng đến thời gian tải của tất cả nội dung xuất hiện trong cửa sổ trình duyệt ở lần tải trang đầu tiên. Đây còn được gọi là nội dung "trong màn hình đầu tiên".

Hãy lưu ý đến bất kỳ tệp nào kết thúc bằng phần mở rộng .css và .js, vì đây là những tệp bạn sẽ muốn tập trung vào.

Công cụ DevTools của Chrome

Ở công cụ DevTools của Chrome, mở tab Coverage để xác định thẻ CSS và Javascript không quan trọng.

Kiểm tra thẻ CSS

Click chuột phải, chọn Inspect hoặc bấm tổ hợp phím tắt Command + Option + C (đối với Mac) hoặc Control + Shift + C (đối với Windows, Linux, Chrome OS).

Kiểm tra thẻ Javascript

Sử dụng tổ hợp phím tắt Command + Option + J (đối với Mac) hoặc Control + Shift + J (đối với Windows, Linux, Chrome OS).

Sau khi load trang, tab Coverage sẽ thông báo dung lượng code đã sử dụng và các code đã được load trên trang:

Bạn có thể giảm dung lượng của trang bằng cách chỉ tải code và các kiểu thẻ cần thiết.

Thẻ style trong file CSS và code Javascript được đánh dấu theo 2 màu chính:

Xanh lá (quan trọng): Các kiểu thẻ này yêu cầu cho lần phản hồi nội dung đầu tiên trên trang.
Đỏ (không quan trọng): Các kiểu thẻ này không hiển thị ngay lập tức trên nội dung trang, không hỗ trợ cho chức năng chính của website.

III - Cách loại bỏ tài nguyên, loại bỏ javascript và css chặn hiển thị

1. Tối ưu hóa các tệp CSS của trang web

1.1. Không thêm CSS bằng quy tắc @import

Bạn có thể thêm CSS vào một trang bằng cách sử dụng:

● Thêm thẻ sau vào tệp HTML: <link rel="stylesheet">

● Thêm vào tệp CSS bằng quy tắc @import

Mặc dù quy tắc @import giữ cho tệp HTML sạch hơn và cho phép bạn giữ tất cả các phụ thuộc CSS của mình ở cùng một vị trí, nhưng đó không phải là lựa chọn tốt nhất về hiệu suất. Chúng khiến trình duyệt xử lý tệp CSS chậm hơn vì trình duyệt cũng phải tải xuống các tệp đã nhập.

Nếu muốn thêm nhiều tệp CSS vào trang web, bạn có thể sử dụng thẻ <link> vào phần tử vào <head> của trang HTML theo cách sau:

< head > < link href = "style.css" rel = "stylesheet" > </ head >

1.2. Sử dụng thuộc tính media cho CSS có điều kiện

Theo mặc định, trình duyệt coi tất cả các tệp CSS là tài nguyên chặn hiển thị. Tuy nhiên, nếu thêm thuộc tính media vào thẻ <link>, bạn có thể cho biết sự hiện diện của tệp CSS có điều kiện đối với trình duyệt, cho phép bạn chỉ định các tệp phương tiện cho từng tệp CSS có điều kiện cụ thể chịu trách nhiệm hiển thị nội dung đúng cách trên trang web. Điều này sẽ đặt ra các điều kiện về các tệp phương tiện khó tải cho tất cả các loại khách truy cập trên trang web. Ví dụ: người dùng di động có thể không nhìn thấy hình ảnh lớn, chất lượng cao chỉ dành cho người dùng trên máy tính để bàn có kết nối internet nhanh.

Bạn có thể sử dụng bất kỳ giá trị nào mà bạn sẽ sử dụng cho truy vấn phương tiện trong tệp CSS. Ví dụ:

< 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)" >

2. Tối ưu hóa JavaScript chặn hiển thị

Sử dụng các thuộc tính defer và async

Bạn có thể xóa javascript chặn hiển thị khỏi đường dẫn hiển thị quan trọng bằng cách đặt các thẻ <script> ngay trước </body>, thay vì đặt phần <head>. Trong trường hợp này, họ chỉ bắt đầu tải xuống sau khi toàn bộ HTML đã được tải xuống. Tuy nhiên, vì quá trình tải xuống các tập lệnh này bắt đầu muộn hơn, các phần tử như quảng cáo, hoạt ảnh hoặc chức năng động, có thể tải muộn hơn phần còn lại của giao diện người dùng. Điều này có thể dẫn đến sự chậm trễ về giao diện, có hại cho trải nghiệm người dùng.

Defer cung cấp giải pháp cho vấn đề này. Sử dụng thuôc tính defer này có thể giúp tối ưu hóa các phần tử JavaScript chặn hiển thị trên 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, do đó, khi cần, chúng sẽ không gây ra sự chậm trễ trong việc hiển thị các phần tử DOM quan trọng trên trang web.

Ngoài ra, 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 trang web và giúp giảm các vấn đề chặn hiển thị. Bằng cách này, bạn có thể thông báo cho trình duyệt về các tập lệnh cần được tải xuống một cách độc lập, không gây ảnh hưởng đến việc hiển thị các phần tử DOM trên trang web.

● Đối với thẻ <script>, hãy thêm async hoặc defer:

● Đối với thẻ <link rel="import">, hãy thêm async:

Điều quan trọng cần lưu ý là bạn sẽ cần hiểu liệu tập lệnh của bạn có được thiết kế để hoạt động với async hoặc defer hay không. Nếu áp dụng chúng cho các tập lệnh không được thiết kế để hoạt động với async hoặc defer, bạn có thể phá vỡ trang web của mình.

Ngoài ra, async và defer chỉ nên được áp dụng cho các tài nguyên không quan trọng, tức là những thuộc tính không được yêu cầu trong việc hiển thị các thành phần quan trọng của trang.

3. Nhóm và giảm thiểu CSS, JavaScript

Một cách tuyệt vời khác để giảm các vấn đề về tài nguyên chặn hiển thị trên trang web là "nhóm" các tệp CSS và JavaScript lại với nhau. Điều này có nghĩa là bạn có thể tạo các gói tệp trên trang web sử dụng các quy tắc tải giống nhau.

Sau đó, bạn có thể thu nhỏ các gói hoặc nhóm tệp để chúng nhẹ và dễ tải xuống hơn. Điều này giúp tất cả các loại khách truy cập trang web dễ dàng truy cập nội dung trên các trang web.

Thu nhỏ tức là loại bỏ các ký tự không cần thiết trong mã nguồn, bao gồm khoảng trắng, ngắt dòng, nhận xét và dấu phân cách giúp trình duyệt web có thể đọc chúng nhanh hơn.

Có rất nhiều công cụ có sẵn để giúp bạn thực hiện thu nhỏ, bao gồm Minify, CSS Minifier, Minify Code và PostCSS. Các công cụ xây dựng như webpack, Parcel và Rollup đi kèm với các chức năng thu nhỏ, gói và tách mã được tích hợp sẵn cho phép bạn nhanh chóng giảm số lượng tài nguyên chặn hiển thị.

4. Tải phông chữ tùy chỉnh cục bộ

Vì phông chữ tùy chỉnh ở phần <head> của tài liệu, chúng cũng là tài nguyên chặn hiển thị. Ví dụ:

< link href = "https://fonts.googleapis.com/css2?family=Lato&display=swap" rel = "stylesheet" >

Nếu thêm phông chữ cục bộ, bạn cũng có thể giảm thiểu CSS liên quan đến phông chữ của mình và nhóm nó lại với phần còn lại của CSS. Bạn có thể sử dụng Trình trợ giúp Phông chữ Web của Google để tạo các quy tắc cục bộ cho Phông chữ Google một cách nhanh chóng.

Bạn cũng có thể sử dụng font display với thuộc tính swap trong tệp mã như một cách để hướng dẫn trình duyệt sử dụng phông chữ hệ thống trong khi phông chữ tùy chỉnh vẫn đang được tải xuống. Khi phông chữ tùy chỉnh đã sẵn sàng để sử dụng, trình duyệt sau đó sẽ hoán đổi nó với phông chữ hệ thống trên trang web mà không gây ra sự chậm trễ trong việc hiển thị nội dung.

5. Một số cách khác để loại bỏ các tài nguyên chặn hiển thị

● Tách các tệp CSS theo loại phương tiện: Việc chia nhỏ các tệp CSS theo loại phương tiện có thể giúp trình duyệt nhanh chóng lấy các tài nguyên quan trọng khi cần, tùy thuộc vào thiết bị của người dùng.

● Di chuyển các thẻ xuống dưới cùng: Di chuyển tất cả các thẻ <script> và <link> xuống cuối HTML của trang web có thể là một cách tuyệt vời để loại bỏ bất kỳ việc chặn tài nguyên nào.

● Nén tài nguyên dựa trên hình ảnh: Mặc dù hình ảnh không phải là tài nguyên chặn hiển thị, nhưng điều quan trọng là phải nén chúng để tăng tốc độ trang. Nó cũng quan trọng để giải phóng tài nguyên cho các quy trình kết xuất quan trọng khác để tải các trang web một cách nhanh chóng.

IV - Sử dụng một plugin loại bỏ css, xóa javascript chặn hiển thị Wordpress

Một số plugin có thể làm giảm tác dụng, loại bỏ javascript và css chặn hiển thị wordpress ví dụ:

● WP Rocket: WP Rocket cho phép người dùng nâng cao trang web của họ bằng cách giảm thiểu các tệp CSS cùng với các tệp JavaScript phức tạp hơn. Người dùng cũng có tùy chọn tải hình ảnh lười biếng, trì hoãn các yêu cầu JavaScript từ xa.

● Autoptimize: Autoptimize là một plugin miễn phí sửa đổi các tệp trang web để tải nhanh hơn. Autoptimize hoạt động bằng cách tổng hợp các tệp, rút gọn mã (tức là giảm kích thước tệp bằng cách xóa các ký tự thừa hoặc không cần thiết) và trì hoãn việc tải các tài nguyên chặn hiển thị.

● Async JavaScript: Plugin này giúp dễ dàng loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên. Nó cũng cung cấp cho bạn quyền kiểm soát các tập lệnh nào để thêm các thuộc tính async hoặc defer.

● Speed Booster Pack: Speed Booster Pack là một plugin WordPress mạnh mẽ có thể giúp giảm các vấn đề liên quan đến các yếu tố chặn hiển thị trên trang web. Nó cung cấp các tính năng như tối ưu hóa CSS và JavaScript, tải hình ảnh, tính năng loại bỏ lộn xộn và tính năng tích hợp CDN.

● JCH Optimize: JCH Optimize cung cấp giải pháp nâng cao hơn nhiều để cải thiện tốc độ tải trang trên trang web WordPress.

Khắc phục lỗi "loại bỏ tài nguyên chặn hiển thị" có thể là một thách thức, đặc biệt nếu bạn không biết bắt đầu từ đâu. Các tài nguyên chặn hiển thị có thể ảnh hưởng đến tốc độ hiển thị nội dung DOM trên khung nhìn của người dùng khi họ truy cập trang web. Bạn có thể tối ưu hóa các tệp CSS và JavaScript của trang web để giảm tốc độ tải trang, nhóm các tệp đó lại với nhau để giúp tải trang web nhanh và sạch hơn, đồng thời sử dụng phông chữ tùy chỉnh cục bộ trên trang web cũng như một số phương pháp khác mà Ori đã đề cập.

Trên đây là tổng hợp 8 cách loại bỏ các tài nguyên chặn hiển thị giúp website của doanh nghiệp tối ưu hơn, cũng như tăng lưu lượng traffic. Hãy cùng Ori tìm hiểu cách đối thủ tối ưu website và traffic thông qua Hướng dẫn phân tích website đối thủ nhé.