Cách loại bỏ các tài nguyên chặn hiển thị: Javascript và CSS
Một trong những cách giúp website của bạn có tốc độ tải trang nhanh hơn từ đó giúp cải thiện thứ hạng SEO đó là loại bỏ javascript và css chặn hiển thị trong nội dung trong màn hình đầu tiên. Dường như đây là một cách rất hiển nhiên bởi vì nội dung của trang web sẽ chỉ được tải sau khi các tập tin JavaScript và CSS được tải xong. Chính vì vậy, nội dung trên trang web đã bị trì hoãn chỉ để chờ đợi các tập tin JavaScript và CSS. Hãy cùng Bizfly Cloud tìm hiểu thêm thông tin qua bài viết dưới đây.
Eliminate render-blocking JavaScript and CSS in above-the-fold content chính là Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên, đây cũng là cảnh bảo của PageSpeed Insights. Việc sửa lỗi này sẽ làm tăng tốc độ tải trang một cách đáng kể. Lỗi này sửa khá đơn giản bằng cách 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 (Optimize CSS Delivery)
Đối với các tập tin CSS nhỏ, các bạn hãy đặ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ư dưới đây:
<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> div> Thực ra, bạn không nên sử dụng phương pháp Javascript này bởi vì nó không được hỗ trợ trên nhiều trình duyệt khác nhau, từ đó nó 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 này lại không hề an toàn. Vì vậy hãy lưu ý cảnh báo phía trên!
2. Xóa JavaScript chặn hiển thị (Remove Render-Blocking JavaScript)
Không giống như CSS, Javascript khá dễ dàng để loại bỏ chặn hiển thị.
Cũng giống như CSS, bạn có thể inline small javascript/chèn trực tiếp nội dung Javascript nhỏ 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> 3. 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 tính defer của JavaScript cho phép bạn trì hoãn tải css không dùng 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 vẫn có điểm trừ đó là 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 hề an toàn và tối ưu chút nào. Do đâ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.
4. Đư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 cho vấn đề Xóa JavaScript chặn hiển thị, bạn có thể đưa các thẻ xuống trước thẻ.
Đối với WordPress, bạn có thể sử dụng function "wp_enqueue_script" với biến $in_footer = true.
Vậy là đã hoàn thành xong. Chúc các bạn thành công!
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang!
