» » Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên của PageSpeed Insights giúp trang web của bạn tải nhanh hơn và tốt cho SEO. Điều này là tất nhiên, nội dung của trang web sẽ không được tiếp tục tải cho tới khi các tập tin JavaScript và CSS được tải xong. Vì vậy, nội dung trên trang web của bạn đã bị trì hoãn để chờ đợi các tập tin JavaScript và CSS.

Loại bỏ JavaScript và CSSLoại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Eliminate render-blocking JavaScript and CSS in above-the-fold content) là cảnh bảo của PageSpeed Insights. Đây chỉ là cảnh báo, tuy nhiên việc sửa lỗi này sẽ làm cho trang web của bạn tải nhanh hơn. Để sửa được lỗi này, bạn chỉ cần cho các tập tin JavaScript và CSS tải ở cuối cùng hoặc tải không đồng bộ.

  1. Tối ưu hóa phân phối CSS
  2. Xóa JavaScript chặn hiển thị

Tối ưu hóa phân phối CSS (Optimize CSS Delivery)

Đối với các tập tin CSS nhỏ, các bạn có thể đặt nội dung CSS vào thẻ <style></style> và nhúng vào <head></head>.

Ví dụ bạn có 1 tập tin CSS small.css rất nhỏ như sau:

.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }

Thay vì nhúng tập tin CSS đó như sau:

<html>
<head>
<link rel=”stylesheet” href=”small.css”>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>

Thì bạn có thể inline nội dung CSS vào <style></style> và nhúng vào <head></head> như sau:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>

Như bạn thấy ở trên, chúng ta chỉ cần inline class “blue” thay vì tải nguyên một tập tin CSS không cần thiết. Tuy nhiên, bạn không nên sử dụng phương pháp trên cho một tập tin CSS quá lớn.

Các bạn cũng có thể sử dụng Javascript để tải các tập tin CSS sau khi trang web được tải xong. Như sau:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
<script>
var cb = function() {
var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
l.href = ‘small.css’;
var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener(‘load’, cb);
</script>
</body>
</html>

Mình nghĩ rằng bạn không nên sử dụng phương pháp Javascript. Nó không được hỗ trợ trên nhiều trình duyệt, điều đó có thể phá vỡ giao diện của bạn.

Kết luận: Bạn hoàn toàn có thể tối ưu hóa phân phối cho CSS. Nhưng điều đó không an toàn. Vì vậy chúng ta có thể vui lòng chấp nhận cảnh báo trên.

Xóa JavaScript chặn hiển thị (Remove Render-Blocking JavaScript)

Không giống như CSS, Javascript là dễ dàng hơn để loại bỏ chặn hiển thị.

Cũng như CSS, các bạn có thể chèn trực tiếp nội dung Javascript vào thẻ <script></script> và nhúng vào <head></head>. Phương pháp này cũng chỉ nên áp dụng đối với các tập tin Javascript nhỏ.

Đối với các tập tin Javascript nhỏ, các bạn sử dụng:

<html>
<head>
<script type=”text/javascript”>
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

Thay vì:

<html>
<head>
<script type=”text/javascript” src=”small.js”></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

Tải không đồng bộ các tài nguyên JavaScript

Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên CSS.

Sử dụng thuộc tính async như sau:

<script async type=”text/javascript” src=”myjs.js”></script>

Thuộc tinh defer của JavaScript cho phép bạn trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong.

Sử dụng thuộc tính defer như sau:

<script defer type=”text/javascript” src=”myjs.js”></script>

Mặc dù phương pháp này giúp nội dung trên trang web được hiển thị nhanh nhất. Nhưng nếu bạn không có một chút kiến thức về cách mà JavaScript làm việc, phương pháp trên cũng không an toàn. Vì đây là phương pháp tải không đồng bộ, nó có thể dẫn đến việc trang web hoạt động không đúng cách.

Đưa các tập tin JavaScript xuống dưới footer của trang web

Đây là cách tốt nhất để giải quyết vấn đề “Xóa JavaScript chặn hiển thị“, các bạn có thể đưa các thẻ <script></script> xuống trước thẻ </body>.

Đối với WordPress, bạn có thể sử dụng function “wp_enqueue_script” với biến $in_footer = true.

Chúc bạn thành công!

Thích hoặc chia sẽ bài này

  • Administrator

    Cảnh báo cho vui 😀

  • Tùng

    var cb = function () {
    var l = document . createElement ( ‘link’ ); l . rel = ‘stylesheet’ ;
    l . href = ‘small.css’ ;
    var h = document . getElementsByTagName ( ‘head’ )[ 0 ]; h . parentNode . insertBefore ( l , h );
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame ;
    if ( raf ) raf ( cb );
    else window . addEventListener ( ‘load’ , cb );

    Cho mình hỏi với đoạn Code này mình muốn chèn nhiều file js thì phải làm sao bạn?

    • Nguyễn Tứ

      Nhiều file js hay nhiều file css vậy bạn?
      Nếu mà nhiều file css như small.css như trên thì bạn có thể lặp lại đoạn này

      var cb = function() {
      var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
      l.href = ‘small.css’;
      var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
      var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
      l.href = ‘small1.css’;
      var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
      var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
      l.href = ‘small2.css’;
      var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);

      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener(‘load’, cb);

      Bạn chỉ cần thêm 1 file css bằng cách thêm 1 đoạn được in đậm ở trên đó và thay đổi tên file small.css là được.
      Nhưng mà cách này không hoạt động trên 1 số trình duyệt như Safari, IE hoặc những trình duyệt cũ nhé.

      • Tùng

        Cảm ơn Admin nhiều nha ^^!

      • cho em hỏi code này để tối ưu css gốc của mình hả anh

        • Đúng rồi bạn

          • Web em có cái này chặn hiển thị http://phulyshop.com/…revslider/public/assets/css/settings.css
            . giờ em thêm vào như này hả anh

            var cb = function() {
            var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
            l.href = ‘http://phulyshop.com/…revslider/public/assets/css/settings.css’;
            var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
            };
            var raf = requestAnimationFrame || mozRequestAnimationFrame ||
            webkitRequestAnimationFrame || msRequestAnimationFrame;
            if (raf) raf(cb);
            else window.addEventListener(‘load’, cb);

            Em mới làm wp anh giúp em mới !

          • Bạn phải hiểu mới được, nếu không mà làm linh tinh là nó lỗi luôn
            Chờ sau khi bạn hiểu CSS và JS nó hoạt động thế nào đã nhé

          • hướng dẫn em luôn đi anh, em mới làm chưa biết nhiều, vậy em có cái file css bị chặn hiển thị thì e copy cả cái link đó vào thay cái small.css ak anh

          • Nếu mà bạn dùng Javascript thì nó không tương thích trên một số trình duyệt cũ đâu, ngay cả Safari trên Windows cũng không chạy được
            Cái cảnh báo chặn hiển thị này bỏ qua cũng được bạn

          • vậy làm thế nào để chuyển js xuống cuối được không anh

          • Được bạn, bạn chuyển theo thứ tự nhé, chứ lộn xộn dễ lỗi lắm

          • có code gì để làm hả anh, em tìm trong header không có

          • Bạn phải hiểu về Javascript thì mới làm được bạn ạ
            Nếu không thì dễ bị lỗi, cái này làm thủ công thôi
            Sau này có thời gian mình sẽ hướng dẫn

          • ok ad

  • Tùng

    Cám ơn Admin nhiều nha ^^!

  • bạn có thể hướng dẫn bằng video được không

    • Cái này cũng phức tạp lắm bạn ơi
      Phải hiểu cơ bản về HTML, JS thì mới được chứ không là dễ bị lỗi