Di chuyển JavaScripts xuống footer WordPress

Tại Sao Nên Di Chuyển JavaScript Xuống Footer Trong WordPress?

Trong thế giới phát triển web, tốc độ tải trang là yếu tố then chốt ảnh hưởng đến trải nghiệm người dùng, thứ hạng SEO và tỷ lệ chuyển đổi. WordPress, một nền tảng quản lý nội dung phổ biến, thường gặp vấn đề về tốc độ tải trang do nhiều yếu tố, trong đó có việc tải các tệp JavaScript ở header.

Khi các tệp JavaScript được tải ở phần header của trang web, trình duyệt sẽ ngừng phân tích cú pháp HTML để tải và thực thi các tệp JavaScript. Quá trình này có thể làm chậm quá trình hiển thị nội dung cho người dùng, gây ra trải nghiệm người dùng không tốt. Di chuyển các tệp JavaScript xuống footer (chân trang) cho phép trình duyệt tải nội dung HTML trước, sau đó mới tải các tệp JavaScript. Điều này giúp trang web hiển thị nhanh hơn, cải thiện trải nghiệm người dùng và có thể giúp cải thiện thứ hạng SEO.

Lợi Ích Của Việc Di Chuyển JavaScript Xuống Footer

Việc di chuyển JavaScript xuống footer mang lại nhiều lợi ích đáng kể, bao gồm:

• Cải thiện tốc độ tải trang: Trang web tải nhanh hơn vì nội dung HTML được hiển thị trước.
• Cải thiện trải nghiệm người dùng: Người dùng thấy trang web hoạt động nhanh hơn, giảm tỷ lệ thoát trang.
• Tối ưu hóa SEO: Google ưu tiên các trang web có tốc độ tải nhanh, giúp cải thiện thứ hạng tìm kiếm.
• Giảm thời gian blocking render: Trình duyệt không cần phải đợi JavaScript tải trước khi hiển thị nội dung.

Các Phương Pháp Di Chuyển JavaScript Xuống Footer Trong WordPress

Có nhiều phương pháp để di chuyển JavaScript xuống footer trong WordPress. Chúng ta sẽ xem xét một số phương pháp phổ biến và hiệu quả nhất:

1. Sử Dụng Functions.php Của Theme

Phương pháp này là phổ biến và thường được khuyến nghị vì nó cho phép bạn kiểm soát hoàn toàn các tệp JavaScript được tải và cách chúng được tải. Bạn sẽ cần chỉnh sửa tệp functions.php của theme đang hoạt động.

Quan Trọng: Trước khi chỉnh sửa bất kỳ tệp nào trong theme của bạn, hãy tạo bản sao lưu (backup) để tránh mất dữ liệu nếu có sự cố xảy ra. Bạn cũng nên sử dụng child theme để tránh mất các thay đổi khi theme được cập nhật.

Để di chuyển JavaScript xuống footer bằng cách sử dụng functions.php, bạn có thể sử dụng hàm wp_enqueue_scripts và chỉ định vị trí tải script.

Ví dụ:

<?php
function theme_enqueue_scripts() {
    // Deregister script nếu nó đã được đăng ký ở header
    wp_deregister_script('jquery');

    // Đăng ký lại script jQuery và tải nó ở footer
    wp_register_script('jquery', includes_url( '/js/jquery/jquery.js' ), false, null, true);
    wp_enqueue_script('jquery');

    // Đăng ký và tải script tùy chỉnh của bạn ở footer
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
?>

Trong ví dụ trên:

• wp_deregister_script('jquery');: Loại bỏ đăng ký script jQuery mặc định của WordPress nếu nó đã được đăng ký ở header.
• wp_register_script('jquery', includes_url( '/js/jquery/jquery.js' ), false, null, true);: Đăng ký lại script jQuery và chỉ định true cho tham số thứ năm để tải nó ở footer.
• wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );: Đăng ký và tải script tùy chỉnh của bạn (custom.js) ở footer. Tham số array('jquery') chỉ định rằng script này phụ thuộc vào jQuery.

2. Sử Dụng Plugin WordPress

Nếu bạn không thoải mái khi chỉnh sửa code trực tiếp, có nhiều plugin WordPress có thể giúp bạn di chuyển JavaScript xuống footer. Một số plugin phổ biến bao gồm:

• Async JavaScript: Cho phép bạn tải JavaScript không đồng bộ hoặc trì hoãn (defer).
• Autoptimize: Tối ưu hóa JavaScript, CSS và HTML, bao gồm cả việc di chuyển JavaScript xuống footer.
• Speed Booster Pack: Cung cấp nhiều tùy chọn tối ưu hóa tốc độ, bao gồm cả việc di chuyển JavaScript.

Để sử dụng plugin, hãy làm theo các bước sau:

1. Truy cập trang Plugins trong bảng điều khiển WordPress của bạn.
2. Nhấp vào Add New.
3. Tìm kiếm plugin bạn muốn sử dụng.
4. Nhấp vào Install Now và sau đó Activate.
5. Cấu hình plugin theo hướng dẫn của nhà phát triển.

Các plugin này thường cung cấp giao diện người dùng thân thiện, giúp bạn dễ dàng cấu hình các tùy chọn tối ưu hóa mà không cần phải viết code.

3. Sử Dụng Thuộc Tính defer và async

Thuộc tính defer và async là các thuộc tính HTML5 cho phép bạn kiểm soát cách trình duyệt tải và thực thi các tệp JavaScript. Chúng có thể được sử dụng để cải thiện tốc độ tải trang mà không cần di chuyển JavaScript xuống footer một cách vật lý.

Thuộc tính defer: Chỉ thị cho trình duyệt tải tệp JavaScript song song với việc phân tích cú pháp HTML, nhưng chỉ thực thi script sau khi toàn bộ tài liệu HTML đã được phân tích cú pháp. Điều này đảm bảo rằng script sẽ có quyền truy cập vào tất cả các thành phần DOM.

Thuộc tính async: Chỉ thị cho trình duyệt tải tệp JavaScript song song với việc phân tích cú pháp HTML, và thực thi script ngay khi nó được tải xuống, ngay cả khi tài liệu HTML chưa được phân tích cú pháp hoàn tất. Điều này có nghĩa là script có thể không có quyền truy cập vào tất cả các thành phần DOM.

Bạn có thể thêm các thuộc tính này vào thẻ <script> trong theme của bạn. Ví dụ:

<script src="script.js" defer></script>
<script src="another-script.js" async></script>

Lưu ý: Thuộc tính async phù hợp hơn cho các script không phụ thuộc vào DOM hoặc các script được sử dụng cho các mục đích như theo dõi hoặc phân tích. Thuộc tính defer phù hợp hơn cho các script cần truy cập vào DOM sau khi nó đã được tải hoàn tất.

Kiểm Tra Kết Quả

Sau khi bạn đã di chuyển JavaScript xuống footer bằng một trong các phương pháp trên, điều quan trọng là phải kiểm tra kết quả để đảm bảo rằng mọi thứ hoạt động chính xác.

• Sử dụng Google PageSpeed Insights: Công cụ này sẽ cung cấp cho bạn thông tin chi tiết về hiệu suất trang web của bạn và đề xuất các cải tiến.
• Sử dụng WebPageTest: Công cụ này cho phép bạn kiểm tra tốc độ tải trang từ nhiều vị trí khác nhau trên thế giới.
• Kiểm tra trang web của bạn trên nhiều thiết bị và trình duyệt: Đảm bảo rằng trang web của bạn hoạt động tốt trên tất cả các thiết bị và trình duyệt phổ biến.

Nếu bạn gặp bất kỳ vấn đề nào sau khi di chuyển JavaScript xuống footer, hãy xem xét lại các bước bạn đã thực hiện và đảm bảo rằng bạn đã làm theo hướng dẫn một cách chính xác. Nếu bạn vẫn gặp khó khăn, hãy tìm kiếm sự trợ giúp từ cộng đồng WordPress hoặc thuê một nhà phát triển web chuyên nghiệp.

Lưu Ý Quan Trọng

Việc di chuyển JavaScript xuống footer có thể gây ra một số vấn đề nếu các script của bạn phụ thuộc vào các phần tử DOM chưa được tải. Đảm bảo rằng bạn đã giải quyết bất kỳ sự phụ thuộc nào trước khi di chuyển script.

Nếu bạn đang sử dụng một theme hoặc plugin được phát triển bởi bên thứ ba, hãy kiểm tra tài liệu hoặc liên hệ với nhà phát triển để được hướng dẫn cụ thể về cách di chuyển JavaScript xuống footer.

Luôn tạo bản sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào đối với code.