Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi làm cách nào để họ có thể di chuyển các trang JavaScript đến cuối trong WordPress để tăng điểm số tốc độ của trang Google. Chúng tôi rất vui vì họ đã hỏi, bởi vì thật sự chúng tôi muốn viết về điều này. Trước đây, chúng ta đã nói về làm thế nào để thêm JavaScript và phong cách CSS trong WordPress. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách di chuyển các trang JavaScript đến cuối trong WordPress, vì vậy bạn có thể cải thiện thời gian tải trang và điểm số tốc độ trang Google của bạn.
Lợi ích của việc di chuyển JavaScript đến tận đáy
JavaScript là ngôn ngữ lập trình phía máy khách. Nó được thực hiện và chạy bởi trình duyệt web của người dùng chứ không phải bởi máy chủ web của bạn. Khi bạn đặt JavaScript ở trên cùng, trình duyệt có thể thực hiện hoặc xử lý JavaScript trước khi tải phần còn lại của trang. Khi JavaScript được di chuyển xuống cuối, máy chủ web của bạn sẽ nhanh chóng hiển thị trang, sau đó trình duyệt của người dùng sẽ thực hiện JavaScript. Vì tất cả các render phía máy chủ đã được thực hiện, JavaScript sẽ tải trong nền làm cho tổng thể tải nhanh hơn.
Điều này sẽ cải thiện điểm số tốc độ của bạ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 đang cân nhắc tốc độ của trang là một trong những ma trận thực hiện khi hiển thị kết quả tìm kiếm. Điều này có nghĩa là các trang web tải nhanh hơn sẽ xuất hiện nổi bật hơn trong kết quả tìm kiếm.
Cách thích hợp để Thêm các Script trong WordPress
WordPress có một hệ thống enqueuing mạnh mẽ cho phép các nhà phát triển các chủ đề và plugin để thêm các kịch bản của họ trong hàng đợi và tải chúng khi cần thiết. Các kịch bản và phong cách tiếp nhận đúng cách có thể cải thiện đáng kể tốc độ tải trang của bạn.
Để hiển thị cho bạn một ví dụ cơ bản, chúng tôi sẽ thêm một ít JavaScript vào một chủ đề WordPress. Lưu mã JavaScript của bạn trong một .js tập tin và địa điểm đó .js tập tin trong chủ đề của bạn js danh mục. Nếu chủ đề của bạn không có thư mục cho các JavaScript, sau đó tạo một. Sau khi đặt tập tin kịch bản của bạn, chỉnh sửa chủ đề của bạn functions.php tập tin và thêm mã này:
chức năng wpb_adding_scripts () {
wp_register_script ('my-amazing-script', get_template_directory_uri (). '/js/my-amazing-script.js','', '1.1', đúng);
wp_enqueue_script ('my-amazing-script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
Trong mã này, chúng tôi đã sử dụng hàm wp_register_script (). Hàm này có các thông số sau:
Để thêm tập lệnh vào chân trang hoặc cuối trang WordPress, tất cả những gì bạn cần làm là đặt $ in_footer tham số thật .
Chúng tôi cũng đã sử dụng một chức năng khác get_template_directory_uri () trả về URL cho thư mục mẫu. Chức năng này nên được sử dụng để enqueuing và đăng ký các kịch bản và phong cách trong WordPress chủ đề. Đối với các plugin mà chúng tôi sẽ sử dụng plugins_url () chức năng.
Vấn đề:
Vấn đề là một số lần bổ sung WordPress thêm mã JavaScript của họ vào các trang bên trong
hoặc bên trong trang. Để di chuyển các tập lệnh này xuống phía dưới, bạn cần chỉnh sửa các tệp plugin của bạn và di chuyển đúng các kịch bản xuống phía dưới.
Tìm mã nguồn JavaScript
Mở trang web của bạn trong trình duyệt web và xem mã nguồn trang. Bạn sẽ thấy liên kết đến tệp JavaScript cho biết vị trí và nguồn gốc của tệp. Ví dụ: ảnh chụp màn hình dưới đây cho chúng ta biết rằng tập lệnh của chúng tôi thuộc về một plugin gọi là ‘test-plugin101’. Tập tin kịch bản được đặt trong js danh mục.
Đôi khi bạn sẽ thấy JavaScript được thêm trực tiếp vào trang và không được liên kết qua một tệp .js riêng. Trong trường hợp đó, bạn sẽ cần phải hủy kích hoạt tất cả các plugin của bạn lần lượt. Làm mới lại trang sau khi tắt mỗi plugin cho đến khi bạn tìm thấy một trang thêm kịch bản vào các trang của bạn. Nếu JavaScript không biến mất ngay cả sau khi tắt tất cả các plugin, sau đó thử chuyển sang một chủ đề khác để xem liệu chủ đề của bạn có được thêm JavaScript hay không.
Kí tự đăng ký và Enqueue
Một khi bạn đã tìm thấy các plugin hoặc chủ đề được thêm JavaScript trong phần tiêu đề, bước tiếp theo là để tìm ra nơi mà các plugin có một cuộc gọi cho tập tin. Trong một trong các tệp PHP của chủ đề hoặc các plugin của bạn, bạn sẽ thấy một cuộc gọi đến đó .js tập tin.
Nếu plugin hoặc chủ đề đã sử dụng enqueuing để thêm tệp JavaScript, thì tất cả những gì bạn cần làm là thay đổi chức năng wp_register_script trong plugin hoặc chủ đề của bạn và thêm đúng với tham số $ in_footer. Như thế này:
wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), '', '1.0', true);
Cho phép giả sử rằng plugin hoặc chủ đề của bạn được thêm nguyên JavaScript trong tiêu đề hoặc giữa nội dung. Tìm mã JavaScript thô trong các tệp plugin hoặc theme, sao chép JavaScript và lưu nó vào .js tập tin. Sau đó sử dụng wp_register_script () như được hiển thị ở trên, để di chuyển JavaScript đến dưới cùng.
Ghi chú của người biên tập: Điều quan trọng là bạn phải hiểu rằng khi bạn thay đổi các tệp cốt lõi và cập nhật plugin, thay đổi của bạn sẽ không bị ghi đè. Cách tốt hơn để làm việc này là hủy đăng ký tập lệnh và đăng ký lại nó từ tệp functions.php của chủ đề. Xem hướng dẫn này.
Ngoài việc chuyển các tập lệnh sang chân trang, bạn cũng nên cân nhắc việc sử dụng plugin truyền thông xã hội nhanh hơn và hình ảnh tải lười biếng. Cùng với đó bạn cũng nên sử dụng W3 Total Cache và MaxCDN để cải thiện tốc độ trang web của bạn.
Chúng tôi hy vọng rằng bài viết này đã giúp bạn di chuyển các trang JavaScript sang phía dưới trong WordPress và cải thiện tốc độ trang của bạn. Đối với các câu hỏi và phản hồi xin vui lòng để lại một bình luận dưới đây.