5 Cách loại bỏ tài nguyên chặn hiển thị đơn giản


Ads_ngang
Website basoncomplexcity.org Công ty chuyên bất động sản cho thuê nhà đất, căn hộ có bài 5 Cách loại bỏ tài nguyên chặn hiển thị đơn giảnLà một nhà quản trị web (webmaster), chắc hẳn 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 tâm. Và nếu bạn đã từng
()

https://hoc11.vn/wp-content/uploads/2020/11/loai-bo-cac-tai-nguyen-chan-hien-thi.jpg

    Trang chủ
    /

    SEO
    /

    5 Cách loại bỏ tài nguyên chặn hiển thị dễ dàng

5 Cách loại bỏ tài nguyên chặn hiển thị dễ dàng

Là một nhà quản trị web (webmaster), có lẽ rằng chỉ số pagespeed của website vẫn là một trong những yếu tố bạn cần phải đặc biệt quan tâm. 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ẽ bạn sẽ không mấy xa lạ với cảnh báo “Eliminate render-blocking resources” tựa 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ũng đều 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à lời giải đáp cho bạn. 

Cùng tôi tìm hiểu 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, tỉ dụ như font chữ, HTML, CSS và JavaScript. 

Khi trình duyệt truy cập 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 ái giải quyết 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 bắt đầu tải xuống phần còn sót 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ì trệ việc hiện trên trang. Trình duyệt vẫn có thể tải chúng xuống một cách 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à vấn đề nằm ở đây. Không phải mọi thứ các tài nguyên mà trình duyệt cho rằng 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. Tất cả phụ thuộc vào đặc điểm riêng của từng trang khác nhau. 

Do kia sẽ gây ra lỗi như hình ảnh tôi giới thiệu ở đầ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 tiếp nào!

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 của Google dùng làm phân tích, đo lường và cải thiện 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 những trường hợp.

– Đối với thẻ :

  • Nằm trong thẻ của trang
  • Không có tính chất defer
  • Không có thuộc tính async

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

  • Không có tính chất disabled – phần tử bị vô hiệu hóa. Khi có tính chất này, trình duyệt sẽ không tải thẻ stylesheet.
  • Không có thuộc tính media thích 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 mọi thứ các tài nguyên mà trình duyệt nghĩ rằng chặn hiển thị đều cần có cho thời gian phản hồi nội dung trước mắt trên trang. Vậy tài nguyên nào mới thực thụ quan trọng và làm cách nào để định vị tài nguyên quan trọng trên trang? 

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

Bước trước mắt để giảm sự ảnh hưởng của tài nguyên chặn hiện trên trang là bạn phải phải xác định rõ rệt tài nguyên nào đích thực 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ỏ.

#Cách 1: Mở công cụ DevTools kiểm tra thẻ CSS

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

#Cách 2: Mở công cụ DevTools 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 cho bạn dung lượng code đã sử dụng và các code đã được load trên trang:

công cụ DevTools
công cụ DevTools

Bạn có thể giảm dung lượng của trang bằng phương pháp chỉ tải code và các thẻ style mà bạn cần. Nhấp vào các URL hiện trên bảng Source để dò tìm các file:

Các thẻ style trong file CSS và code Javascript sẽ có đánh dấu theo 2 màu sắc chính:

  • Xanh lá (quan trọng): Các thẻ style này được đòi hỏi 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.

Sau khi đã định vị được những nguồn tài nguyên quan trọng trên trang, đã đến lúc bạn tìm cách để xóa khỏi nó rồi đấy. Có 5 cách cơ bản giúp bạn loại bỏ hoặc giảm con số 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 con số tài nguyên chặn hiển thị, 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ũng có thể giảm thời gian tải trang rất nhiều. Từ đó, cũng đều có thể nâng lên trải nghiệm người dùng trên trang và tối ưu hóa công cụ kiếm tì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 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 chỉn chu hơn, tránh mã code thừa và sẽ cho phép bạn giữ toàn bộ các dependencies biên dịch file CSS ở cùng một nơi. Tuy nhiên đó không cần là một sự lựa chọn khôn ngoan trong việc trình bày/ hiển thị.

Luật @import cho bạn nhập file CSS từ những stylesheet khác tuy nhiên phương pháp này sẽ làm cho trình duyệt xử lý file CSS chậm hơn bởi vì nó phải tải mọi thứ các file được nhập vào.

Cho đến khi công đoạn này diễn ra thì công đoạn 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 nhân tố vào thẻ của page HTML tựa như như cách sau:

xóa javascript chặn hiển thị wordpress
thẻ

2. Sử dụng tính chất 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ũng đều có thể thông báo cho trình duyệt về sự hiện diện của file CSS có điều kiện. 

File CSS có điều kiện chỉ được áp dụng trong các trường hợp nhất định. Như: cao/ thấp hơn kích cỡ 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 tính chất meta, bạn cũng có thể có thể định vị điều kiện của từng thiết bị riêng biệt đối với file CSS.

Ví dụ cụ thể:

Và bạn cũng có thể có thể sử dụng bất kỳ giá trị nào cho media query trong file CSS để xử lý vấn đề 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 lắng, ở 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 toàn bộ 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 đáp ứng đúng điều kiện trong thẻ CSS.

Và tất nhiên, các thẻ này vẫn là tài nguyên chặn hiển thị nếu đảm bảo đúng điều kiện.

#Ví dụ tiếp theo:

Để tôi lấy thí 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 trên thiết bị mobile với phạm vi viewport tối đa là 600px. Nhưng nếu đối với thiết bị có phạm vi viewport lớn hơn 600px thì thẻ stylesheet mobile.css ở tỉ 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 riêng cho một hoặc một vài queries, hãy bung file tất cả các luật @media và lưu chúng thành các file biệt lập 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 đề cập trong conjunction với JavaScript nhưng bạn cũng 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 tinh giảm 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 đầu trang tiên.

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

File JavaScript được thêm vô 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 cũng có thể xóa chúng ra khỏi công đoạn hiển thị các tài nguyên quan trọng bằng cách:

Chèn thẻ

Chia sẻ

  • Facebook
  • Twitter
  • linkedIn

Tôi là Vincent Do, hiện đang là CEO, Co-Founder của Hoc11.vn SEO. Tôi đã từng gặp hơi nhiều khó khăn trong công đoạn tìm hiểu SEO & Inbound Marketing. Với hiểu biết thực chiến nhiều dự án ở các lĩnh vực khác nhau và niềm đam mê S.E.O & Inbound Marketing, tôi kỳ vọng những kiến thức miễn phí tôi chia sẻ cũng đều có thể giúp mọi người đạt nhiều thành đạt hơn trong quá trình tiến hành SEO.


Vincent Do

Nguồn: https://gtvseo.com/loai-bo-cac-tai-nguyen-chan-hien-thi/

Bài viết này hữu ích như ra sao?

Hãy nhấn vào ngôi sao để đánh giá!

Đánh giá trung bình / 5. Số phiếu bầu:

Không có phiếu bầu cho đến nay! Hãy là người trước mắt đánh giá bài viết này.

Post Views: 31

Từ khóa bài viết:

Bài viết 5 Cách loại bỏ tài nguyên chặn hiển thị đơn giản được tổng hợp và biên tập bởi sửa máy tính PCI – PCI Group Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho chúng tôi để điều chỉnh. Xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Ads_ngang