Làm Sao Chuyển JavaScripts Xuống Footer Trong WordPress [NEW]

Gần đây, một độc giả đã hỏi chúng tôi về cách di chuyển JavaScrips sang footer trong WordPress để tăng điểm tốc độ Google cho trang web 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 muốn viết về điều này. Trước đây, chúng ta đã thảo luận về cách thêm đúng kiểu JavaScript và CSS trong WordPress. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách di chuyển JavaScripts sang footer WordPress, nhờ đó bạn sẽ tăng tốc độ tải trang cũng như tốc độ trang Google của trang web của bạn.

Lợi ích của việc chuyển JavaScripts xuống chân trang

JavaScript là ngôn ngữ lập trình phía máy khách, có nghĩa là nó chạy và hoạt động trên trình duyệt web của người dùng, không phải máy chủ web. Khi bạn đặt JavaScript lên trên, 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 còn lại của trang web của bạn. Khi di chuyển JavaScript đến chân trang, máy chủ web sẽ ngay lập tức hiển thị trang và trình duyệt của người dùng sẽ xử lý JavaScripts. Khi tất cả các máy chủ đã hoàn thành công việc của mình, JavaScript sẽ chỉ tải ở chế độ nền và làm cho trang tải về tổng thể nhanh hơn.

Kết quả là, điểm tốc độ trang của bạn sẽ tăng lên khi thử nghiệm với tốc độ trang của Google hoặc Yslow. Google và các công cụ tìm kiếm khác hiện coi tốc độ trang là một trong những yếu tố quan trọng nhất để đá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 tải nhanh hơn trang web đó sẽ nổi bật hơn trong kết quả tìm kiếm hiển thị.

Cách tốt nhất để thêm tập lệnh trong WordPress

WordPress có một cơ chế hoạt động tuyệt vời, cho phép tất cả các nhà phát triển thêm các tập lệnh chủ đề và trình cắm thêm ở chế độ chờ và tải chúng bất cứ khi nào họ cần. Để các tập lệnh và kiểu ở chế độ chờ về cơ bản có thể tăng tốc độ tải trang của bạn.

Chúng tôi sẽ chỉ cho bạn một ví dụ đơn giản bằng cách thêm một JavaScripts nhỏ vào chủ đề WordPress của bạn. Lưu JavaScripts của bạn dưới dạng .js và lưu nó trong thư mục .js của thư mục chủ đề. Nếu chủ đề của bạn chưa có thư mục cho JavaScripts, hãy tạo một thư mục. Sau đó, chỉnh sửa tệp functions.php của chủ đề và thêm mã 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 mã này, chúng tôi sử dụng hàm wp_register_script (). Tính năng này có một số tham số sau:


Để thêm tập lệnh này vào cuối trang WordPress của bạn, tất cả những gì bạn cần làm là đặt chế độ $ in_footer thành true.

Chúng tôi cũng sử dụng một hàm khác, get_template_directory_uri () trả về URL cho danh mục mẫu. Chức năng này sẽ được sử dụng để chờ và đăng ký các tập lệnh và sytle trong chủ đề WordPress. Đối với plugin, chúng tôi sử dụng chức năng plugins_url ().

Vấn đề:

Vấn đề là đôi khi các plugin WordPress sẽ thêm các JavaScripts của riêng chúng cho hoặc nội dung trang. Để di chuyển các tập lệnh này xuống, bạn cần chỉnh sửa cả tệp plugin và di chuyển các tập lệnh xuống.

Tìm kiếm nguồn JavaScript

Mở trang của bạn trong trình duyệt web và xem phần nguồn trang. Bạn sẽ tìm thấy một liên kết đến tệp JavaScript, bao gồm vị trí và nguồn gốc của tệp. Ví dụ: màn hình bên dưới cho chúng tôi biết tập lệnh của bạn thuộc về một trình cắm có tên ‘test-plugin101’. Tập lệnh này nằm trong thư mục js.

tìm kiếm nguồn

Đôi khi bạn sẽ thấy JavaScript được thêm trực tiếp vào trang mà không cần thông qua tệp .js riêng biệt. Trong trường hợp đó, bạn phải tắt từng trình cắm một. Sau đó, làm mới trang cho đến khi bạn tìm thấy tập lệnh này. Tìm hiểu xem JavaScript đó có được thêm vào bởi chủ đề của bạn hay không.

Đăng ký và thêm Scripts vào hàng đợi

Khi bạn nhận ra plugin hoặc chủ đề của mình đã thêm JavaScript vào tiêu đề, bước tiếp theo là tìm ra vị trí của lệnh gọi trình cắm. Trong một trong các tệp PHP hoặc chủ đề của plugin, bạn sẽ tìm thấy lệnh gọi thực thi trên một tệp .js riêng biệt.

Nếu plugin hoặc chủ đề của bạn đã sử dụng chờ để thêm tệp JavaScript, thì tất cả những gì bạn cần làm là thay đổi hàm wp_register_script trong plugin hoặc chủ đề và đặt t $ in_footer thành true. Ví dụ như sau:

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

Hãy mặc định rằng plugin hoặc chủ đề của bạn có thêm đoạn mã JavaScript trong tiêu đề phía trên nội dung. Tìm mã JavaScript đó trong tệp plugin hoặc chủ đề, sau đó sao chép và lưu dưới dạng .js. Tiếp theo, sử dụng hàm wp_register_script () như hình trên để di chuyển JavaScript xuống.

Lưu ý của tác giả: Điều quan trọng nhất là hiểu khi nào bạn nên thay đổi tệp cơ sở và cập nhật trình cắm của mình, để những thay đổi của bạn có thể thực sự có hiệu lực mà không bị áp đảo. Cách tốt nhất để làm điều này là xóa tên trong tập lệnh và sau đó đăng ký lại tên đó trong tệp functions.php của phần bổ sung. Bạn có thể tìm thêm thông tin trong sách hướng dẫn.

Cùng với việc di chuyển các tập lệnh xuống chân trang, bạn cũng cần cân nhắc sử dụng một trình cắm thêm xã hội có tốc độ nhanh hơn so với kỹ thuật tải lười biếng (một kỹ thuật trong lập trình hướng đối tượng giúp tiết kiệm các cuộc gọi tải tệp 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.