Trang chủ Kinh doanhKiến thức kinh doanh 5 Cách loại bỏ tài nguyên & Xóa Javascript chặn hiển thị

5 Cách loại bỏ tài nguyên & Xóa Javascript chặn hiển thị

Tác giả: tranthang
Là một nhà quản trị web ( Webmaster ), chắc rằng chỉ số PageSpeed của website luôn là một trong những yếu tố bạn cần phải đặc biệt quan trọng chăm sóc. Và nếu bạn đã từng test pagespeed của website trên chính công cụ Google PageSpeed Insights thì có lẽ rằng bạn sẽ không mấy lạ lẫm với cảnh báo nhắc nhở “ Eliminate render-blocking resources ” tương tự như như thế này :
loại bỏ các tài nguyên chặn hiển thịCảnh báo

Những dòng cảnh báo đỏ này có thể khiến bạn bối rối. Render blocking resources – loại bỏ các tài nguyên chặn hiển thị là gì và làm cách nào để loại bỏ tài nguyên chặn hiển thị này nhanh chóng. Bài viết này sẽ là câu trả lời cho bạn. 

Cùng tôi tìm hiểu và khám phá nhé !

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 file tĩnh quan trọng trong quá trình hiển thị trang của website, ví dụ như font chữ, HTML, CSS và JavaScript.

Khi trình duyệt truy vấn vào một trang của website và gặp tài nguyên chặn hiển thị này, trình duyệt sẽ ưu tiên giải quyết và xử lý các tệp quan trọng của tài nguyên chặn hiển thị này trước. Sau đó, trình duyệt mới khởi đầu tải xuống phần còn lại của tài nguyên để 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 ) sẽ không làm trì hoãn việc hiển thị trên trang. Trình duyệt vẫn hoàn toàn có thể tải chúng xuống một cách bảo đảm an toàn sau khi hiển thị các tài nguyên chặn hiển thị ( render blocking resources ) này trên trang .

Và yếu tố nằm ở đây. Không phải tổng thể các tài nguyên mà trình duyệt cho là chặn hiển thị đều thiết yếu cho thời hạn phản hồi nội dung tiên phong trên trang. Tất cả nhờ vào vào đặc thù riêng của từng trang khác nhau .
Do đó sẽ gây ra lỗi như hình ảnh tôi ra mắt ở đầu bài viết. Vậy có phải URL nào bị gắn cờ là tài nguyên chặn hiển thị ?
Cùng tôi tìm hiểu và khám phá tiếp nào !

Xem thêm:   Tối ưu hóa công cụ tìm kiếm cục bộ – Wikipedia tiếng Việt

URL nào được gắn cờ là tài nguyên chặn hiển thị?

Bạn đã từng nghe nhắc đến công cụ Google Lighthouse chưa ? Đây là công cụ mã nguồn mở tự động hóa của Google dùng để nghiên cứu và phân tích, đo lường và thống kê và cải tổ chất lượng của website .
Lighthouse gắn cờ cho 2 loại url chặn hiển thị chính : script và stylesheet trong các trường hợp .
– Đối với thẻ

:

  • Nằm trong thẻ của trang
  • Không có thuộc tính Defer
  • Không có thuộc tính Async

– Hoặc đối với thẻ:

  • Không có thuộc tính Disabled – thành phần bị vô hiệu hóa. Khi có thuộc tính này, trình duyệt sẽ không tải thẻ Stylesheet.
  • Không có thuộc tính media phù hợp với thiết bị của người dùng.

Như tôi có đề cập ở trên, không phải toàn bộ các tài nguyên mà trình duyệt cho là chặn hiển thị đều thiết yếu cho thời hạn phản hồi nội dung tiên phong trên trang. Vậy tài nguyên nào mới thực sự quan trọng và làm cách nào để xác lập tài nguyên quan trọng trên trang ?

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

Bước tiên phong để giảm sự tác động ảnh hưởng của tài nguyên chặn hiển thị trên trang là bạn cần phải xác lập rõ ràng tài nguyên nào thực sự quan trọng, tài nguyên nào không .

Bạn có thể sử dụng công cụ DevTools của Chrome, mở tab Coverage để xác định thẻ CSS và Javascript không quan trọng và loại bỏ.

Click chuột phải vào bất kỳ vị trí trên trang, 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).

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 tin cho bạn dung tích code đã sử dụng và các code đã được load trên trang :
Công cụ DevToolsCông cụ DevToolsBạn hoàn toàn có thể giảm dung tích của trang bằng cách chỉ tải code và các thẻ style mà bạn cần. Nhấp vào các URL hiển thị trên bảng Source để dò tìm các file :
Các thẻ style trong file CSS và code Javascript sẽ được lưu lại theo 2 sắc tố chính :

  • Xanh lá (quan trọng): Các thẻ style này được yêu cầu cho lần phản hồi nội dung đầu tiên trên trang. Các thẻ code này vô cùng quan trọng cho chức năng chính của trang web.
  • Đỏ (không quan trọng): Các thẻ style này không hiển thị ngay lập tức trên nội dung trang, không được sử dụng để hỗ trợ cho chức năng chính của trang web.
Xem thêm:   Content marketing là gì? 45 xu hướng content marketing 2021

Sau khi đã xác định được các nguồn tài nguyên quan trọng trên trang, đã đến lúc bạn tìm cách để xóa bỏ nó rồi đấy. Có 5 cách cơ bản giúp bạn loại bỏ hoặc giảm số lượng và sự ảnh hưởng của tài nguyên chặn hiển thị. Để tôi hướng dẫn chi tiết!

5 Thủ thuật loại bỏ/giảm tài nguyên chặn hiển thị đơn giản

Về cơ bản, nếu giảm số lượng tài nguyên chặn hiển thị, bạn hoàn toà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 hoàn toàn có thể giảm thời hạn tải trang rất nhiều. Từ đó, hoàn toàn có thể nâng cao thưởng thức người dùng trên trang và tối ưu hóa công cụ tìm kiếm ( SEO ) .

Cách để loại bỏ hoặc giảm tài nguyên chặn hiển thị?

1. Không thêm thẻ CSS theo quy luật @import

Bạn hoàn toàn có thể thêm thẻ CSS vào trang bằng cách :

  • Chèn thẻ vào file HTML
  • Thêm luật @import vào file CSS

Mặc dù luật @ import giúp cho file HTML ngăn nắp hơn, tránh mã code thừa và cho phép bạn giữ hàng loạt các dependencies biên dịch file CSS ở cùng một nơi. Tuy nhiên đó không phải là một sự lựa chọn khôn ngoan trong việc trình diễn / hiển thị .
Luật @ import cho bạn nhập file CSS từ các Stylesheet khác nhưng cách này sẽ khiến cho trình duyệt giải quyết và xử lý file CSS chậm hơn chính do nó phải tải toàn bộ các file được nhập vào .
Cho đến khi quy trình này diễn ra thì quy trình hiển thị vẫn bị chặn .

Nếu bạn muốn thêm nhiều file CSS cho trang web cho mình, bạn có thể dùng thẻ hoặc dùng các công cụ nén/ rút gọn file để gộp các file CSS lại.

Bạn cần thêm yếu tố vào thẻ của page HTML tương tự như cách sau:

Thẻ headThẻ head

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

Các trình duyệt mặc định xem toàn bộ các file CSS là các tài nguyên chặn hiển thị. Tuy nhiên nếu thêm thuộc tính media vào thẻ, bạn có thể thông báo cho trình duyệt về sự tồn tại của file CSS có điều kiện. 

File CSS có điều kiện kèm theo chỉ được vận dụng trong những trường hợp nhất định. Như : cao / thấp hơn size viewport ( thẻ meta viewport cho biết giao diện website hiển thị trên từng thiết bị / khung hình ) .
Với thuộc tính meta, bạn hoàn toàn có thể xác lập điều kiện kèm theo của từng thiết bị riêng không liên quan gì đến nhau so với file CSS .

Xem thêm:   Hoàn thuế thu nhập cá nhân: Không biết 4 điều sau sẽ không được hoàn

Ví dụ cụ thể:

Và bạn hoàn toàn có thể sử dụng bất kể giá trị nào cho truyền thông query trong file CSS để giải quyết và xử lý yếu tố hiển thị cho từng giao diện thiết bị .
Có thể hơi khó hiểu với bạn. Nhưng đừng lo ngại, ở bên dưới tôi có lấy ví dụ cho bạn dễ hiểu hơn .



Mặc dù các file này vẫn được tải trên hàng loạt các thiết bị nhưng chúng sẽ trở thành tài nguyên chặn không hiển thị nếu không phân phối đúng điều kiện kèm theo trong thẻ CSS .
Và tất yếu, các thẻ này vẫn là tài nguyên chặn hiển thị nếu phân phối đúng điều kiện kèm theo .

#Ví dụ tiếp theo:

Để tôi lấy ví dụ cho bạn dễ hiểu. Thẻ Stylesheet mobile.css ở ví dụ trên sẽ trở thành tài nguyên chặn hiển thị trên thiết bị mobile với độ rộng viewport tối đa là 600px. Nhưng nếu đối với thiết bị có độ rộng Viewport lớn hơn 600px thì thẻ stylesheet mobile.css ở ví dụ trên sẽ lại trở thành tài nguyên chặn không hiển thị. 

Giờ chắc dễ hiểu hơn chút rồi đúng không ?

Nếu bạn có file CSS sẵn chỉ dành cho một hoặc một vài Queries, hãy giải nén tất cả các luật @media và lưu chúng thành các file riêng biệt bằng plugin PostCSS.

Thủ thuật tối ưu hiển thị này được gọi là phân tách code. Mặc dù cách phân tách code này thược được nhắc đến trong Conjunction với JavaScript nhưng bạn cũng có thể phân tách các file CSS lớn hơn. Hoặc cũng có thể load từng file riêng nếu bạn cần rút ngắn thời gian tải các tài nguyên hiển thị quan trọng và giảm thời gian tải trang đầu tiên.

3. Sử dụng thuộc tính defer và async để loại bỏ thẻ JavaScript chặn hiển thị

File JavaScript được thêm vào thẻ của trang web luôn bị các trình duyệt mặc định xem là các tài nguyên chặn hiển thị.

Bạn hoàn toàn có thể xóa chúng ra khỏi quy trình hiển thị các tài nguyên quan trọng bằng cách :

Chèn thẻ

Bài viết liên quan

Tham gia bình luận