Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung của PageSpeed Insights

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à 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ộ.

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!

TAGS

© 2015 Vinastar Ltd - All rights reserved. Designed by Vinastar.net