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!

Tham gia cuộc thảo luận

23 Bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

  1. Trả lời

  2. Mình vẫn chưa hiểu lắm, có nghĩa khi tập tin CSS nhỏ thì mình bỏ trực tiếp code CSS trong đoạn mã chứ không phải tạo file .css riêng đúng không?
    Nếu vậy khi tập tin CSS lớn thì giải quyết thê nào cho tối ưu. Bạn thử kiểm tra trang của mình cần nhiều tối ưu hơn không?

    Trả lời

    1. Cái nào tối ưu được thì tối ưu, còn không được thì không tối ưu để vậy sẽ tốt. Nhiều khi tối ưu lại mất đi những yếu tố tốt đẹp khác.

      Trả lời
  3. Trả lời
    1. Trả lời
  4. Trả lời
    1. Trả lời
  5. Trả lời

  6. 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?

    Trả lời

    1. 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é.

      Trả lời
      1. Trả lời
      2. Trả lời
        1. Trả lời

          1. 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 !

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

  7. Trả lời