CƠ HỘI ĐẦU TƯ TRONG LỊCH SỬ KHÔNG THỂ BỎ QUA?

HƯỚNG DẪN TOÀN TẬP ĐẦU TƯ VỚI THỊ TRƯỜNG BITCOIN 2021

>> Xem tại đây <<

Trang chủ / Wordpress / Thủ thuật di chuyển đường dẫn Javascript xuống Footer tăng tốc WordPress

Thủ thuật di chuyển đường dẫn Javascript xuống Footer tăng tốc WordPress

Di chuyển JavaScript xuống bên dưới cùng website (footer) hoặc loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên giúp trang web của bạn tải nhanh hơn (Cải thiện việc hiển thị các nội dung load đầu tiên mà không bị trì hoãn, tăng trải nghiệm người dùng)

Tại sao nên di chuyển JavaScript xuống footer?

Di chuyển JavaScript (JS) sẽ giúp bạn giảm thời gian tải First Paint (FP) hoặc First Contentful Paint (FCP) của PageSpeed ​​Insights. Do đó, nó sẽ cải thiện tốc độ tải trang web của bạn và mang lại lợi ích cho SEO. Điều này hiển nhiên, nội dung của trang web không tải cho đến khi tải xong tệp JavaScript và CSS. Mặc dù đây chỉ là cảnh báo, việc sửa lỗi này giúp trang web của bạn tải nhanh hơn.

Để khắc phục lỗi này, bạn chỉ cần di chuyển tải JavaScript ở cuối (chân trang) hoặc tải theo cách không đồng bộ ((Loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên)). Di chuyển JS sang chân trang giúp blog / trang web của bạn hoạt động ổn định hơn, trong khi JS vẫn tải ở cuối quá trình. Nó khác với kỹ thuật không đồng bộ (các tệp JS có thể được đặt ở tiêu đề nhưng bị trì hoãn, chỉ có thể được tải cho đến khi các phần khác tải xong, dẫn đến lỗi trong các trình duyệt không hỗ trợ không đồng bộ). Do đó nó giúp trang web hiển thị các từ (nội dung) trước rồi tiếp tục tải JavaScript. Trang của bạn xuất hiện trống sẽ bị tránh sau quá trình tải (nội dung trong màn hình đầu tiên), khiến mọi người cảm thấy tải trang nhanh hơn.

báo cáo tốc độ load website wordpress

Dưới đây là hướng dẫn về cách di chuyển JavaScript sang footer trong WordPress.

Di chuyển JS sang chân trang mà không cần plugin (sử dụng đoạn mã)

Để thực hiện điều này, bạn cần phải thêm đoạn mã này vào cuối tệp tin functions.php (wp-content/themes/your-theme /):

function oiw_remove_head_scripts () {
remove_action ('wp_head', 'wp_print_scripts');
remove_action ('wp_head', 'wp_print_head_scripts', 9);
remove_action ('wp_head', 'wp_enqueue_scripts', 1);
 
add_action ('wp_footer', 'wp_print_scripts', 5);
add_action ('wp_footer', 'wp_enqueue_scripts', 5);
add_action ('wp_footer', 'wp_print_head_scripts', 5);
}
add_action ('wp_enqueue_scripts', 'oiw_remove_head_scripts');

Sau đó, bạn Lưu và tải lên lại tệp. Sau đó tải lại trang của bạn và xem nguồn trang (Ctrl + U với Window OS) để kiểm tra.

Di chuyển JS xuống footer bằng plugin

Nếu bạn thích sử dụng plugin thì bạn có thể tìm và sử dụng plugin Scripts To Footer để thực hiện việc này. Chỉ việc cài đặt và với một số bước đơn giản, bạn có thể di chuyển tệp JS sang chân trang mà không mất nhiều thời gian.

Scripts To Footer

Bonus (JavaScript tải không đồng bộ bằng cách sử dụng async và defer)

Nếu bạn sử dụng phương thức tải tài nguyên không đồng bộ (async và defer) thì bạn không cần phải di chuyển JS sang chân trang nữa.

Thuộc tính async của JavaScript cho phép bạn tải các tài nguyên JS một cách không đồng bộ. Nội dung HTML sẽ được lưu giữ khi tải mà không phải đợi tài nguyên CSS.

Sử dụng thuộc tính của async:

<script async type = "text/javascript" src = "yourjs.js"> </ script>

thuộc tính defer của JavaScript cho phép bạn trì hoãn tải các tài nguyên của JS cho đến khi nội dung HTML hoàn tất tải. Tài nguyên của JavaScript sẽ tải sau khi tất cả nội dung tải xong HTML. Sử dụng defer như sau:

<script defer type = "text/javascript" src = "yourjs.js"> </ script>

Mặc dù phương pháp này giúp nội dung trang web của bạn hiển thị nhanh nhất, có một bất lợi: nếu bạn không biết JavaScript hoạt động như thế nào, phương pháp trên không an toàn và lý tưởng. Bởi vì đây là một phương pháp không đồng bộ, nó có thể dẫn đến trang web không hoạt động đúng cách.

Lưu ý: Đối với các trình duyệt cũ, bạn có thể kết hợp async và defer trong khi tải tập lệnh để tránh trình duyệt không nhận ra thuộc tính không đồng bộ. Nếu bạn quyết định sử dụng thuộc tính async thì hãy thêm defer

Mình hy vọng bài viết sẽ giúp bạn bằng cách nào đó tìm ra vấn đề về lỗi thời gian tải First Paint (FP) hoặc First Contentful Paint (FCP). Lưu ý rằng, tốc độ chỉ là một điều nhỏ; do đó không cần thiết phải hy sinh mọi thứ cho nó, bao gồm cả các chức năng của trang web về tốc độ. Nếu cảnh báo chặn hiển thị vẫn tồn tại trên Google, đừng lo lắng về điều đó nữa bởi vì bạn đã tối ưu hóa nó tốt nhất rồi.


Bình luận trực tiếp ↓

Trả lời

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 *