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

Một trong những cách giúp website của bạn có tốc độ tải trang nhanh hơn và giúp cải thiện thứ hạng SEO trên Google Search đó 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.

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

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

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

1. Cách loại bỏ JavaScript và CSS chặn hiển thị

Để loại bỏ Javascript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên có một plugin cho điều đó. Nhưng bạn cần hiểu những gì đang diễn ra trước khi bạn bắt đầu cắm plugin. Nhiều plugin có cấu hình cao và biết cách loại bỏ tài nguyên chặn kết xuất sẽ giúp bạn làm việc hiệu quả hơn với plugin bạn chọn.

1.1. Xóa JS khỏi đường dẫn kết xuất quan trọng

Đầu tiên, hãy nói về JavaScript . Ý tưởng cơ bản là di chuyển các tài nguyên JavaScript và jQuery không cần thiết ra khỏi đường dẫn kết xuất quan trọng . Điều này thường được thực hiện bằng cách thêm defer hoặc async thuộc tính vào các script phần tử HTML gọi tài nguyên JavaScript.

Các thuộc tính defer và async không được tạo ra bằng nhau,và sự khác biệt có thể quan trọng để hiểu.

  • Các thuộc tính async cho trình duyệt để bắt đầu tải các tài nguyên ngay lập tức mà không làm chậm phân tích cú pháp HTML. Khi tài nguyên có sẵn, phân tích cú pháp HTML được tạm dừng để tài nguyên có thể được tải.
  • Các thuộc tính Hoãn cho trình duyệt để tổ chức off trên tải tài nguyên cho đến khi phân tích cú pháp HTML hoàn tất. Khi trình duyệt kết thúc với HTML, nó sẽ tải xuống và hiển thị tất cả các tập lệnh bị trì hoãn theo thứ tự xuất hiện trong tài liệu.

Sự khác biệt lớn giữa hai điều này là defer đảm bảo rằng các tập lệnh được tải xuống và áp dụng cho trang web theo thứ tự chúng xuất hiện trong tài liệu HTML, trong khi async thì không. Kết quả là nếu async được sử dụng trên tất cả các tài nguyên JavaScript, nó thường có thể phá vỡ các tài nguyên phụ thuộc vào các tài nguyên xuất hiện trước đó trong tài liệu. Vấn đề phổ biến nhất async tạo ra là tài nguyên jQuery bị hỏng mà cố tải trước đó jquery.js đã được thêm vào tài liệu.

Đố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=”https://ladigi.vn/small.js”></script>

</head>

<body>

<div>

Hello, world!

</div>

</body>

</html>

1.2. Tối ưu hóa phân phối tài nguyên CSS

Kết xuất chặn CSS cũng có thể khó khăn nếu không thể loại bỏ hoàn toàn. Sự sắp xếp lý tưởng là:

  • Xác định các kiểu được yêu cầu để hiển thị nội dung trong màn hình đầu tiên và phân phối các kiểu đó theo dòng HTML .
  • Sử dụng mediathuộc tính trên các linkphần tử kéo theo tệp CSS để xác định tài nguyên CSS có điều kiện, nghĩa là chỉ cần cho các thiết bị hoặc tình huống cụ thể.
  • Các tài nguyên CSS còn lại phải được tải không đồng bộ, một động thái thường được thực hiện bằng cách thêm chúng bằng JavaScript hoãn lại hoặc không đồng bộ. Đây chắc chắn là lãnh thổ kỹ sư mặt trước. Thật tuyệt nếu bạn là một kỹ sư đầu cuối, nhưng hầu hết chúng ta thì không. Tin vui là đây là một bài viết về WordPress và bạn có thể loại bỏ hoặc ít nhất là giảm đáng kể số lượng tài nguyên JS và CSS chặn kết xuất ảnh hưởng đến trang web của bạn bằng (các) plugin phù hợp.

Đố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=”https://ladigi.vn/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 = “https://ladigi.vn/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. Khắc phục Render Blocking Script và CSS bằng Tự động thu nhỏ

Phương pháp này đơn giản hơn và được khuyến nghị cho hầu hết người dùng.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Autoptimize (Tự động tối đa hóa)

Sau khi kích hoạt, bạn cần truy cập trang Settings » Autoptimize để định cấu hình cài đặt plugin.

Cài đặt tự động tối đa hóa

Bạn có thể bắt đầu bằng cách chọn hộp bên cạnh JavaScript Options và CSS Options và sau đó nhấp vào nút SAVE.

Bây giờ bạn có thể kiểm tra trang web của mình bằng công cụ PageSpeed. Nếu vẫn còn các tập lệnh chặn kết xuất, thì bạn cần quay lại trang cài đặt của plugin và nhấp vào nút ‘Show Advanced Settings’ ở trên cùng.

Tùy chọn JavaScript nâng cao

Tại đây, bạn có thể cho phép plugin bao gồm JS nội tuyến và xóa các tập lệnh được loại trừ theo mặc định như seal.js hoặc jquery.js.

Tiếp theo, cuộn xuống tùy chọn CSS và cho phép plugin tổng hợp CSS nội tuyến.

Nhấp vào nút ‘Save changes and Empty Cache’ để lưu các thay đổi và bộ đệm của bộ đệm trống.

Khi bạn đã hoàn tất, hãy tiếp tục và kiểm tra lại trang web của bạn với công cụ PageSpeed .

Hãy chắc chắn rằng bạn đã kiểm tra kỹ lưỡng trang web của mình để thấy rằng không có gì bị hỏng bằng cách tối ưu hóa JavaScripts hoặc CSS của bạn.

3. Khắc phục kết xuất JavaScript chặn bằng W3 Total Cache

Phương pháp này đòi hỏi nhiều công sức hơn và được khuyến nghị cho người dùng đã sử dụng plugin W3 Total Cache trên trang web của họ.

Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin W3 Total Cache . Nếu bạn cần trợ giúp, hãy xem hướng dẫn của chúng tôi về cách cài đặt và thiết lập W3 Total Cache cho người mới bắt đầu .

Tiếp theo, bạn cần truy cập trang Performance » General Settings và cuộn xuống phần Minify section.

W3 Total Cache cho phép giảm thiểu

Trước tiên, bạn cần kiểm tra ‘Enable’ bên cạnh tùy chọn Minify và sau đó chọn ‘Manual’ cho tùy chọn chế độ thu nhỏ.

Nhấp vào nút lưu tất cả cài đặt để lưu trữ cài đặt của bạn.

Tiếp theo, bạn cần thêm các tập lệnh và CSS mà bạn muốn thu nhỏ.

Bạn có thể nhận được URL của tất cả các tập lệnh và biểu định kiểu được kết xuất chặn từ công cụ Google PageSpeed ​​Insights.

Trong các đề xuất có nội dung: ‘Loại bỏ JavaScript và CSS chặn kết xuất trong nội dung trong màn hình đầu tiên’, nhấp vào ‘Hiển thị cách khắc phục’. Nó sẽ hiển thị cho bạn danh sách các tập lệnh và biểu định kiểu.

Nhận URL JavaScript và Biểu định kiểu từ công cụ Google PageSpeed

Đưa chuột đến một tập lệnh và nó sẽ hiển thị cho bạn URL đầy đủ. Bạn có thể chọn URL này và sau đó sử dụng các phím CTRL + C (Command + C trên Mac) trên bàn phím để sao chép URL.

Bây giờ hãy đi tới khu vực quản trị WordPress của bạn và đi đến trang Performance »Minify .

Trước tiên, bạn cần thêm các tệp JavaScript mà bạn muốn được thu nhỏ. Cuộn xuống phần JS và sau đó trong phần ‘Operations in areas’ đặt  thành ‘Non-blocking async’ cho phần <head>.

Thêm tập lệnh để thu nhỏ

Tiếp theo, bạn cần nhấp vào nút ‘Add script’ và sau đó bắt đầu thêm URL tập lệnh mà bạn đã sao chép từ công cụ Google PageSpeed.

Khi bạn đã hoàn tất, hãy cuộn xuống phần CSS và sau đó nhấp vào nút ‘Add a stylesheet’. Bây giờ hãy bắt đầu thêm URL biểu định kiểu bạn đã sao chép từ công cụ Google PageSpeed.

Thêm biểu định kiểu để thu nhỏ

Bây giờ bấm vào nút ‘Save settings and purge cache’ để lưu trữ cài đặt của bạn.

Truy cập công cụ Google PageSpeed ​​và kiểm tra lại trang web của bạn.

Hãy chắc chắn rằng bạn cũng kiểm tra trang web của mình kỹ lưỡng để thấy rằng mọi thứ đều hoạt động tốt.

Tổng kết

Vậy là đã hoàn thành xong. Chúc các bạn có thể loại bỏ javascript và css chặn hiển thị trong nội dung trong màn hình đầu tiên thành công!

Nguồn: Internet

Có thể bạn quan tâm
x