Loại bỏ các tài nguyên chặn hiển thị sẽ giúp cho website của chúng ta được tối ưu hơn và khách hàng cũng sẽ thấy nhiều tài nguyên của chúng ta hơn. Trong bài viết này, lamweb.vn sẽ viết bài Hướng dẫn loại bỏ các tài nguyên chặn hiển thị mới nhất 2020.
Xem thêm: Plugin wordpress là gì? Tổng hợp các plugin cần thiết cho website mới nhất 2019
Mục lục
Hướng dẫn loại bỏ các tài nguyên chặn hiển thị mới nhất 2021
Loại bỏ JavaScript và CSS chặn hiển thị trong content trong màn hình trước nhất của PageSpeed Insights giúp web của bạn tải nhanh hơn và tốt cho SEO. Điều này là tất nhiên, content của web sẽ k được tiếp tục tải cho tới khi các tập tin JavaScript và CSS được đăng xong. vì thế, nội dung trên website của bạn đang bị trì hoãn để mong muốn các tập tin JavaScript và CSS.
Loại bỏ JavaScript và CSS chặn hiển thị trong content trong màn ảnh trước nhất (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, ngoài ra việc sửa lỗi này sẽ làm cho web của bạn tải mau 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 đăng k đồng bộ.
- tăng cao hóa cung cấp CSS
- Xóa JavaScript chặn hiển thị
Tối ưu hóa cung cấp CSS (Optimize CSS Delivery)
Đối với các tập tin CSS nhỏ, các bạn đủ sức đặt nội dung CSS vào thẻ và nhúng vào
.
ví dụ bạn có 1 tập tin CSS small.css rất nhỏ giống 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 đó giống như sau:
<html>
<head>
<link rel=”stylesheet” href=”small.css”>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>
Thì bạn đủ nội lực inline content CSS vào và nhúng vào
như sau:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>
Gống như bạn thấy ở trên, chúng ta chỉ cần inline class “blue” thay vì đăng nguyên một tập tin CSS không cần thiết. không những thế, bạn không nên dùng phương thức trên cho một tập tin CSS quá lớn.
Các bạn cũng đủ sức dùng Javascript để đăng các tập tin CSS sau khi trang web được đăng 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 k nên sử dụng bí quyết Javascript. Nó k được support trên nhiều trình duyệt, điều đó có thể phá vỡ giao diện của bạn.
Kết bàn 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 đó k an toàn. do đó chúng ta đủ sức vui lòng chấp thuận cảnh báo trên.
Xem thêm: Top 5 plugin chống copy wordpress cho nhà phát triển website
Xóa JavaScript chặn hiển thị (Remove Render-Blocking JavaScript)
không giống như CSS, Javascript là không khó khăn hơn để loại bỏ chặn hiển thị.
Cũng giống như CSS, các bạn đủ nội lực chèn trực tiếp content Javascript vào thẻ và nhúng vào
. Bí quyết này cũng chỉ nên ứng dụng so 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>
Đăng không đồng bộ các tài nguyên JavaScript
tính chất async của JavaScript cho phép bạn đăng k đồng bộ các tài nguyên JavaScript. nội dung HTML sẽ được tiếp tục tải mà k cần chờ đợi các tài nguyên CSS.
sử dụng tính chất async như sau:
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 đăng xong. Tài nguyên JavaScript sẽ được đăng sau khi tất cả HTML được đăng xong.
dùng tính chất defer như sau:
Mặc dù công thức này giúp nội dung trên website được hiển thị mau nhất. Nhưng nếu bạn k có một chút văn hóa về cách mà JavaScript sử dụng việc, phương thức trên cũng không an toàn. Vì đây là mẹo tải không đồng bộ, nó đủ nội lực dẫn đến việc trang web hoạt động k đúng hướng dẫn.
Đây là cách tốt nhất để khắc phục vấn đề “Xóa JavaScript chặn hiển thị“, các bạn đủ sức mang các thẻ xuống trước thẻ .
đối với WordPress, bạn đủ nội lực dùng function “wp_enqueue_script” với biến $in_footer = true.
Chúc bạn thành công!
Nguồn: sitecuatui.com
Xem thêm: Tổng hợp plugin social cho wordpress mới nhất 2019