Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Eliminate render-blocking resources là gì? Tối ưu nó trong Lighthouse thế nào

5/5 - (1 bình chọn)

Google lighthouse đưa ra các chỉ số cần tối ưu đặc biệt là trong Performance, đối với nhiều anh em Code và SEO ở Việt Nam thường nghĩ rằng Google Page Speed – Tối ưu Tốc độ 🙂 và mặc định nghĩ là Tối ưu tốc độ Load trang web và nó cứ load nhanh là được.

Điều này hoàn toàn sai lầm cho đến khi Google Lighthouse hoàn thiện và Google ra lò Báo cáo Core Web Vitals trong search console để fix những lỗi về trải nghiệm người dùng trên website của bạn.

Hơn nữa khi bạn chạy quảng cáo, nếu chỉ số Performance này quá thấp thì Google còn không cho phép bạn “Lên CAMP” hoặc giá “BID” sẽ cao hơn tốn chi phí hơn.

Xem thêm: Cách tối ưu tốc độ Google Page Speed, Googe Lighthouse 100 Điểm

Trong quá trình bạn tối ưu Google Lighthouse thì một chỉ số quan trọng bạn hay gặp đó là Eliminate render-blocking resources

Vậy Eliminate render-blocking resources là gì?

Đây là một báo cáo mà liên quan đến việc liệt kê tất cả các URL trong trang web của bạn hoặc CDN ngoài mà làm ngăn chặn, làm chậm quá trình tải trang web của bạn ở màn hình đầu tiên, khi bạn tải 1 trang web, việc load các nội dung ở màn hình đầu tiên một cách nhanh nhất rất quan trọng để người dùng có thể yên tâm là họ có thứ họ cần và không thoát khỏi trang web bạn.

Eliminate render-blocking resources là gì? Tối ưu nó trong Lighthouse thế nào Eliminate-render-blocking-resources

Nói nôm na là các liên kết đến các file mà làm chậm quá trình tải trang, các file này bao gồm:

Các <script> mà có:

  • Nằm trong thẻ <head> trong HTML
  • Không có defer
  • hoặc không có async

Các <link rel=”stylesheet”> mà có:

  • Không chứa disabled: vì khi chứa nó thì trình duyệt sẽ không load các file này
  • Không chứa các media phù hợp với các loại thiết bị trình duyệt

Như vậy cứ theo bảng định dạng trên thì ta chỉ cần làm rất đơn giản

Xem thêm: Điểm Số Xanh (Google Lighthouse) và Những Hệ Lụy

Làm thế nào để Fix Eliminate render-blocking resources

Thu thập tất cả các file nằm trong thẻ <head> có định dạng là <script> kiểm tra xem đã có defer hay async chưa, nếu chưa có thì thêm nó vào.

Kiểm tra tất cả các <link rel=”stylesheet”> và gom nó lại, nén và tối ưu nó nhỏ nhất, đặt Cache cho nó.

Đối với các web dùng WordPress các bạn nên cân nhắc sử dụng các plugin sau

Autoptimize: đây là plugin rất tốt cho việc thu thập và gom nén, cache cho các file JS, CSS đồng thời tối ưu HTML, ngoài ra nó còn cho phép người dùng bật lazyload cho ảnh và vài chức năng hữu ích khác.

LiteSpeed Cache: Plugin Cache rất tiện dụng gọn nhẹ, giúp web bạn chạy nhanh mượt mà hơn

Như các bạn thấy trong hình sau Lamvt thường dùng 2 plugin này kể cả cho website của mình lẫn cho các web khách hàng

Eliminate render-blocking resources là gì? Tối ưu nó trong Lighthouse thế nào cache

Xem thêm: Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021

Các bạn nhớ active và cài đặt các plugin trên rồi kiểm tra lại Google Lighthouse nhé.
Nếu bạn gặp vấn đề với nó, đừng ngần ngại liên hệ mình sẽ giúp đỡ bạn

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Khi các bạn đọc trong các thiết kế web của các nhà cung cấp chuyên nghiệp hay các nhà cung...
    7 giây trước
  2. Nếu bạn đang cân nhắc để xây dựng website cho doanh nghiệp của bạn đặc biệt muốn tham gia vào...
    9 giây trước
  3. Một trong những mục tiêu lớn nhất của bất kỳ người khởi động blogger hoặc quản trị trang web là...
    23 giây trước
  4. Google AdSense là một chương trình quảng cáo cho phép bạn đặt quảng cáo trên trang web hoặc blog của...
    4 giây trước
  5. Mỗi một trang web (Webpage) sẽ là một nhân tố quan trọng trong một website, nó giống như một trang...
    9 giây trước
  6. Bạn có biết, nội dung bài viết rất quan trọng trong SEO cũng như Kinh doanh online, một bài viết...
    3 giây trước
  7. Bước vào kỷ nguyên công nghệ số 4.0. Nhu cầu hội nhập, quảng cáo hình ảnh, thương hiệu, tên tuổi...
    24 giây trước
  8. Bài viết này là cập nhật mới nhất vào tháng 9/2017. Bao gồm rất nhiều blog mới và đặc biệt...
    18 giây trước
  9. Tại sao bạn nên sử dụng trang đích thay vì trang web của bạn. Hãy cùng tìm hiểu 5 lý...
    12 giây trước
  10. Cải thiện tốc độ tải trang web Hiện nay có nhiều người sử dụng điện thoại để đọc và tìm...
    23 giây trước