Xóa Javascript chặn hiển thị theo 6 phương pháp đơn giản 2023

Trong lĩnh vực phát triển trang web, việc gặp phải tài nguyên quá tải và lỗi hiển thị JavaScript có thể gây ra những vấn đề khó khăn và ảnh hưởng đến trải nghiệm người dùng. Điều này có thể khiến cho trang web trở nên chậm chạp và khó sử dụng, dẫn đến mất cơ hội tiềm năng và tổn thất doanh thu.

Bạn đã từng gặp phải tình huống khi trang web của bạn không hoạt động mượt mà do tải lượng tài nguyên quá lớn? Hay bạn đã bị xoá khỏi danh sách trên các trình duyệt vì lỗi JavaScript chặn hiển thị? Điều này có thể làm giảm uy tín của trang web và làm mất đi cơ hội tiếp cận đối tượng khách hàng tiềm năng.

Đừng lo lắng, chúng tôi đã sưu tầm và tổng hợp 6 cách đơn giản để giải quyết vấn đề này. Bằng cách xoá tài nguyên không cần thiết và xóa JavaScript chặn một cách thông minh, bạn có thể cải thiện hiệu suất và trải nghiệm người dùng trên trang web của mình. Với các phương pháp này, bạn sẽ tiết kiệm thời gian và công sức, đồng thời tăng khả năng tương tác và tăng cường hiệu quả kinh doanh.

Hãy tiếp tục đọc bài viết để khám phá 6 cách xoá tài nguyên và xóa JavaScript chặn hiển thị một cách đơn giản và hiệu quả cho năm 2023.

Javascript chặn hiển thị là gì?

Bạn có biết Javascript chặn là những tệp file tĩnh quan trọng trong quá trình hiển thị trang web, như font chữ, HTML, CSS và JavaScript? Nhưng liệu bạn đã hiểu rõ vai trò của chúng?

Ưu tiên và tải xuống Javascript chặn hiển thị

Cách trình duyệt xử lý tài nguyên chặn Khi trình duyệt truy cập vào một trang web, tài nguyên chặn hiển thị sẽ được ưu tiên xử lý trước. Trình duyệt sẽ tải xuống và hiển thị các tệp file quan trọng này trên trang trước khi tiếp tục tải xuống phần còn lại.

• Tự động tải xuống tài nguyên không chặn hiển thị

Tài nguyên không chặn và quá trình tải xuống Tuy nhiên, các tài nguyên không chặn hiển thị sẽ được trình duyệt tải xuống một cách tự động, sau khi đã hiển thị các tài nguyên chặn trước. Điều này không làm trì hoãn việc hiển thị trang web.

Xác định Javascript chặn hiển thị

Tìm tài nguyên bị chặn Vấn đề nằm ở đây. Không phải tất cả các tài nguyên bị chặn đều cần thiết cho việc hiển thị nội dung đầu tiên trên trang web. Điều này phụ thuộc vào từng trang và các tài nguyên riêng biệt.

Vậy làm sao để xác định được URL nào là tài nguyên bị chặn ? Hãy cùng tìm hiểu trong phần tiếp theo.

Xác định tài nguyên quan trọng trên trang

Cách xác định tài nguyên quan trọng và xoá tài nguyên chặn hiển thị

Sử dụng công cụ DevTools kiểm tra thẻ CSS và Javascript

• Cách 1: Kiểm tra thẻ CSS Sử dụng công cụ DevTools, bạn có thể kiểm tra và xoá thẻ CSS không quan trọng trên trang. Đơn giản bằng cách click chuột phải và chọn Inspect hoặc sử dụng tổ hợp phím tắt.
• Cách 2: Kiểm tra thẻ Javascript Sử dụng công cụ DevTools, bạn cũng có thể kiểm tra thẻ Javascript không cần thiết trên trang. Bạn chỉ cần sử dụng tổ hợp phím tắt tương ứng.

Sử dụng tab Coverage để giảm dung lượng trang

Tab Coverage trong công cụ DevTools cung cấp thông tin về dung lượng code và các file đã được load trên trang.

Bạn có thể giảm dung lượng trang bằng cách chỉ tải xuống code và các thẻ style cần thiết. Bằng cách nhấp vào các URL hiển thị trên bảng Source, bạn có thể dễ dàng xác định các file liên quan.

Xanh lá và đỏ

Các thẻ style và code Javascript được đánh dấu bằng màu xanh lá hoặc đỏ để xác định sự quan trọng.

• Xanh lá (quan trọng): Các thẻ style và code này là cần thiết cho việc hiển thị nội dung đầu tiên trên trang web.
• Đỏ (không quan trọng): Các thẻ style và code này không ảnh hưởng trực tiếp đến nội dung trang và không cần thiết cho chức năng chính của trang.

Sử dụng Google PageSpeed Insight để tìm tài nguyên chặn hiển thị

• Cách 3: Sử dụng Google PageSpeed Insight Bạn có thể sử dụng Google PageSpeed Insight để kiểm tra tốc độ trang web và xác định các lỗi tài nguyên chặn hiển thị. Đơn giản bằng việc truy cập vào trang và nhập URL website.

Google PageSpeed Insight sẽ cung cấp gợi ý và đề xuất xoá các tài nguyên chặn để tối ưu tốc độ trang web của bạn.

6 Cách xóa Javascript chặn hiển thị WordPress 2023

Về cơ bản, nếu xóa Javascript chặn, bạn có thể rút ngắn chặng đường hiển thị các tài nguyên quan trọng trên trang. Đồng thời, bạn có thể giảm thời gian tải trang rất nhiều. Từ đó, có thể nâng cao trải nghiệm người dùng trên trang và tối ưu hóa công cụ tìm kiếm (SEO).

Thêm thẻ CSS vào trang web

Khi bạn muốn thêm CSS vào trang web của mình, có hai cách thực hiện:

1. Chèn thẻ <link rel=”stylesheet”> vào file HTML

Bạn có thể thêm CSS vào trang web bằng cách chèn thẻ <link rel="stylesheet"> vào phần <head> của file HTML.

2. Sử dụng luật @import trong file CSS

Một cách khác là sử dụng luật @import trong file CSS để nhập các file CSS khác. Tuy nhiên, việc sử dụng luật @import có thể làm cho trang web chậm hơn và gây chặn.

Luật @import cho phép bạn nhập các file CSS từ các stylesheet khác, nhưng điều này yêu cầu trình duyệt tải tất cả các file đó trước khi hiển thị trang web. Điều này có thể làm cho quá trình hiển thị bị chậm lại.

Nếu bạn muốn thêm nhiều file CSS cho trang web của mình, tốt hơn hết là sử dụng thẻ <link> hoặc các công cụ nén/gộp file CSS lại.

Ví dụ:

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

Mặc định, trình duyệt xem tất cả các file CSS là các tài nguyên chặn hiển thị. Tuy nhiên, bạn có thể sử dụng thuộc tính media để chỉ định rằng file CSS chỉ áp dụng trong một số trường hợp cụ thể, ví dụ như kích thước viewport.

Thuộc tính media cho phép bạn xác định điều kiện áp dụng file CSS cho từng thiết bị riêng biệt.

Ví dụ:
Mặc dù các file CSS này vẫn được tải trên tất cả các thiết bị, nhưng chúng sẽ chỉ áp dụng và hiển thị nếu đáp ứng được các điều kiện trong thuộc tính media.

Tối ưu hiển thị tài nguyên bằng Plugin PostCSS

Nếu bạn có một số file CSS chỉ áp dụng cho một số trường hợp cụ thể, bạn có thể sử dụng Plugin PostCSS để giải nén và tạo ra các file CSS riêng biệt.

Phân tách code là một thủ thuật tối ưu cho phép bạn tách các file CSS lớn thành các file nhỏ hơn. Điều này giúp giảm thời gian tải trang web và tối ưu hóa quá trình hiển thị.

Plugin PostCSS cung cấp nhiều tiện ích để tối ưu tài nguyên của bạn.

Sử dụng thuộc tính defer và async để tải JavaScript không chặn hiển thị

Khi thêm file JavaScript vào trang web, trình duyệt mặc định xem nó là một tài nguyên chặn. Tuy nhiên, bạn có thể sử dụng thuộc tính defer và async để xoá tác động của JavaScript đến quá trình hiển thị.

1. Thuộc tính defer

Thuộc tính defer cho phép bạn tải file JavaScript sau khi trình duyệt hoàn tất việc tải toàn bộ code HTML. Điều này đảm bảo các tài nguyên khác được tải trước JavaScript, giúp tăng tốc độ hiển thị trang web.

2. Thuộc tính async

Thuộc tính async cho phép tải file JavaScript mà không chặn các phần còn lại của trang web. Trình duyệt sẽ tải và thực thi JavaScript song song với việc hiển thị các phần khác của trang. Điều này giúp tăng tốc độ hiển thị trang web.

Ví dụ:
Với ví dụ trên, thẻ script có thuộc tính defer sẽ được thực thi trước bất kể thứ tự tải của các file script khác. Thẻ script có thuộc tính async sẽ được thực thi ngay sau khi hoàn tất tải trang web.

Khi sử dụng thuộc tính defer và async, hãy cân nhắc thứ tự tải file script và sử dụng thuộc tính phù hợp để tối ưu  trang web của bạn.

Đối với các thẻ script từ các bên thứ ba, ví dụ như mã theo dõi và các công cụ phân tích dữ liệu, hãy sử dụng thuộc tính async để không ảnh hưởng đến hiển thị trang web.

Ví dụ: Công cụ Google Analytics thường đề xuất sử dụng thuộc tính async trong thẻ script khi tải trang trên trình duyệt.

Nén và gộp file CSS và JavaScript

Để tối ưu hiển thị trang web và giảm thời gian tải, bạn có thể nén và gộp các file CSS và JavaScript. Quá trình này giúp xoá các tài nguyên không cần thiết ,giảm số lượng file trong quá trình hiển thị trang.

Có nhiều công cụ giúp bạn nén và gộp file, chẳng hạn như Minify, CSS Minifier, Minify Code và PostCSS. Đồng thời, bạn cũng có thể sử dụng các công cụ như webpack, Parcel ,Rollup để kết hợp nén, gộp và phân tách file CSS ,JavaScript, giúp giảm số lượng tài nguyên chặn.

Tải font chữ tùy chỉnh theo vị trí

Khi tải font chữ tùy chỉnh vào trang web, các font này được xem như là các tài nguyên chặn hiển thị. Tuy nhiên, bạn có thể giảm ảnh hưởng của các font chữ này lên thời gian hiển thị trang bằng cách tải chúng từ một vị trí cụ thể thay vì sử dụng CDN như Google CDN.

Thay vì tải toàn bộ các font chữ từ các mẫu ký tự khác nhau, bạn có thể nén hoặc gộp các file CSS liên quan đến font chữ. Điều này giúp giảm kích thước của file CSS và tối ưu hóa trang web.

Công cụ Google Web Fonts Helper cung cấp một cách nhanh chóng để tạo luật @font-face cho Google Fonts. Bằng cách sử dụng công cụ này, bạn có thể tạo ra các luật @font-face chỉ cho các mẫu ký tự mà bạn thực sự cần sử dụng.

Đảm bảo rằng bạn sử dụng định dạng font chữ như WOFF hoặc WOFF2 khi tải font chữ theo từng vị trí.

Dùng plugin giúp loại xóa Javascript chặn hiển thị trong WordPress

Trong WordPress, có một plugin có tên WP Rocket được sử dụng để tối ưu hiệu suất và bộ nhớ đệm cao. Plugin này cung cấp các tính năng như xoá tài nguyên CSS, JS và các tác vụ khác. Bằng cách sử dụng WP Rocket, bạn có thể xóa Javascript chặn một cách đơn giản ,hiệu quả.

Bạn cũng có thể xoá các CSS không sử dụng thông qua WP Rocket để giảm tải các tài nguyên không cần thiết. Một cách khác là sử dụng plugin Autoptimize + Async, một công cụ hiệu quả để xóa Javascript chặn hiển thị trong WordPress.

Plugin này tạo ra các file CSS ,JavaScript được tối ưu và cung cấp các bản sao bộ nhớ đệm cho trang web ở dạng async hoặc defer.

Để sử dụng plugin Autoptimize + Async, bạn cần cài đặt cả hai plugin và điều chỉnh cài đặt trong phần cài đặt của chúng.

Kết luận

Trên đây là 6 cách xoá tài nguyên chặn hiển thị ,xóa JavaScript chặn hiển thị đơn giản và hiệu quả trong năm 2023. Bằng cách thực hiện những biện pháp này, bạn có thể cải thiện tốc độ tải trang, tối ưu hiển thị và trải nghiệm người dùng trên trang web của mình.

Việc xoá các tài nguyên không cần thiết tối ưu hóa việc tải các yếu tố quan trọng sẽ giúp trang web của bạn hoạt động mượt mà và tăng khả năng tương tác với người dùng. Hãy áp dụng những giải pháp này để đạt được hiệu quả tối ưu cho trang web của bạn trong thời gian tới.