Gần đây, một độc giả có đặt câu hỏi cho chúng tôi về việc làm thể nào để chuyển JavaScrips xuống footer trong WordPress để tăng điểm tốc độ Google cho trang của họ. Chúng tôi rất vui vì họ đã đưa ra câu hỏi, bởi vì thành thật mà nói, chúng tôi cũng đang muốn viết về vấn đề này. Trước đây, chúng ta đã từng bàn đến việc làm thế nào để thêm các style Javascrips và CSS trong WordPress một cách chuẩn xác. Còn trong bài viết này, chúng tôi sẽ chỉ cho bạn thấy cách để chuyển JavaScripts xuống footer WordPress, nhờ đó bạn sẽ tăng tốc độ tải trang cũng như Google page speed cho trang của bạn.

Những lợi ích của việc chuyển JavaScripts xuống footer

JavaScript là ngôn ngữ lập trình dạng client-side, tức là nó chạy và hoạt động dựa trên trình duyệt web của người dùng, chứ không phải server của web. Khi bạn đặt JavaScript lên đầu, các trình duyệt có thể phân tích và tiến hành chạy JavaScript trước khi tải phần trang web còn lại của bạn. Còn khi chuyển JavaScript xuống footer, server của web sẽ ngay lập tức hiển thị trang và các trình duyệt của người dùng sẽ xử lý phần JavaScripts. Khi toàn bộ các server đã thực hiện xong nhiệm vụ của mình, JavaScript sẽ chỉ tải trong phần nền và làm tốc độ tải trang trên tổng thể sẽ trở nên nhanh hơn.

Nhờ đó, điểm tốc độ cho trang của bạn sẽ tăng khi thử nghiệm với Google page speed hoặc Yslow. Google và các công cụ tìm kiếm khác bây giờ coi tốc độ trang là một trong số các yếu tố quan trong để đánh giá hiệu suất khi hiện thị kết quả tìm kiếm. Điều đó có nghĩa là trang web nào tải nhanh hơn trang web đó sẽ nổi bật hơn trong số các kết quả tìm kiếm hiển thị.

Cách tối nhất để thêm Scripts trong WordPress

WordPress có một cơ chế làm việc tuyệt vời, cho phép tất cả các developer có thể thêm các scripts cho theme và plug in ở trạng thái chờ và tải chúng bất cứ khi nào họ cần. Để các scripts và style ở trạng thái chờ về cơ bản có thể tăng tốc độ tải trang của bạn.

Chúng tôi sẽ cho bạn một ví dụ đơn giản bằng cách thêm một đoạn JavaScripts nhỏ vào trong theme của WordPress. Lưu đoạn JavaScripts của bạn dưới dạng .js và lưu trong .js directory của mục theme. Nếu theme của bạn chưa có directory cho JavaScripts, bạn hãy tạo một file. Sau đó, sửa file functions.php của theme và thêm đoạn code sau:

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Trong đoạn code này, chúng tôi sử dụng chức năng wp_register_script() . Chúc năng này có một số thông số sau:

Để thêm đoạn scrip này xuống cuối trang WordPress, tất cả những gì bạn cần làm là đặt chế độ $in_footer sang trạng thái true.

Chúng tôi cũng sử dụng một chức năng khác là get_template_directory_uri() cho phép trả lại địa chỉ URL cho danh mục mẫu. Chức năng này sẽ được sử dụng để chờ và đăng ký các scripts và sytle trong WordPress theme. Còn đối với plugin thí chúng tôi sử dụng chức năng plugins_url() function.

Vấn đề:

Vấn đề ở đây là đôi khi các plug in WordPress sẽ tự thêm JavaScripts của chính nó cho phần

hoặc nội dung trang. Để chuyển các script này xuống dưới, bạn cần phải sửa cả các file plugin và chuyển scripts xuống dưới.

Tìm kiếm nguồn JavaScript

Mở trang của bạn bằng trình duyệt web và xem phần page source. Bạn sẽ tìm thấy link đến file JavaScript, bao gồm cả vị trí và nguồn gốc của file. Ví dụ, màn hình dưới đây cho chúng ta biết đoạn script của bạn thuộc về một plug in có tên ‘test-plugin101’. File script này được đặt tại vị trí js directory.

Đôi khi, bạn sẽ thấy JavaScript được thêm trực tiếp vào trang mà không qua file .js riêng. Trong trường hợp đó, bạn phải tắt toàn bộ từng plug in một. Sau đó, refresh lại trang cho tới khi bạn tìm ra script này. Tìm hiểu xem đoạn JavaScript đó có được add vào bởi theme của bạn hay không.

Đăng ký và thêm Scripts vào hàng chờ

Khi bạn nhận ra plug in hoặc theme của bạn đã được thêm JavaScript trong phần header, bước tiếp theo là tìm ra lệnh gọi của plug in được đặt ở đâu. Ở một trong số các file theme hoặc PHP của plugin, bạn sẽ tìm thấy lệnh gọi dó thực hiện trên một file .js riêng biệt.

Nếu plug in hay theme của bạn đã sử dụng chức năng chờ để thêm file JavaScript, thì tất cả những gì bạn cần phải làm là đổi chức năng wp_register_script trong plugin hoặc theme và đặt t$in_footer sang trạng thái true. Ví dụ như sau:

wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

Chúng ta hãy mặc định rằng plug in hoặc theme của bạn đã được thêm một đoạn JavaScript trong phần header phía trên nội dung. Tìm đoạn code JavaScript đó trong file plug in hoặc theme, sau đó sao chép và lưu lại dưới dạng .js. Tiếp theo, sử dụng chức năng wp_register_script() như đã chỉ ra ở trên để chuyển đoạn JavaScript xuống dưới.

Lời tác giả: Quan trọng nhất bạn phải hiểu được khi nào bạn nên thay đổi các file cơ sở và cập nhật plug in, như thế các thay đổi của bạn mới thực sự có hiệu quả mà không bị quá tải. .Cách tốt nhất để làm được điều này là xóa tên trong script và sau đó đăng ký lại trong file functions.php của thêm. Bạn có thể tham khảo thêm trong hướng dẫn.

Cùng với việc chuyển các đoạn scripts xuống footer, bạn cũng cần cân nhắc sử dụng một plug in cho mạng xã hội nhanh hơn các kỹ thuật lazy loading (một kỹ thuật trong lập trình hướng đối tượng, cho phép tiết kiệm các thao tác gọi nạp file khi sử dụng) cho phần hình ảnh. Ngoài ra, bạn cũng nên sử dụng W3 Total Cache và MaxCDN để tăng tốc độ tải trang.