Cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer

Hữu Thuần

[Thủ thuật WordPress] Hướng dẫn cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer – Tăng tốc độ trang web là một trong những vấn đề được rất nhiều người quản trị Web quan tâm bởi lẽ tốc độ tải trang của trang Web rất quan trọng nó quyết định người dùng có truy cập trang Web của bạn hay không, hãy so sánh một trang Web có tốc độ tải trang Web lên đến 10 giây và một trang Web có tốc độ tải trang mất khoảng 2 giây với cùng nội dung thì chắc chắn rằng một điều trang Web 10 giây kia sẽ bị đóng ngay tức khắc. Vì thế việc tối ưu tốc độ tải trang Web là điều rất cần thiết.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách làm nổi bật các bình luận trong WordPress bằng code giúp bạn dễ dàng chỉnh sửa các giao diện bình luận nhằm phân biệt giữa người dùng và tác giải trực quan hơn tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer.

Tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer

Để tăng tốc trang Web ngoài yếu tố hosting, Server, đường truyền có cấu hình cao thì việc tối ưu trang Web để giúp tải nhanh trang Web là điều rất cần thiết nếu bạn sử dụng WordPress có rất nhiều Plugin giúp bạn tối ưu vấn đề này một trong những Plugin mình đang sử dụng để tạo Cache đó là Plugin WP Fastest Cache dễ dàng cấu hình và sử dụng. Ngoài ra bạn có thể sử dụng một số thủ thuật nhằm đẩy nhanh tốc độ tải trang như chuyển Javascript xuống Footer.

Phương pháp 1: Sử dụng Plugin CDN jsDelivr

jsDelivr là một dịch vụ CDN công cộng miễn phí với các thư viện javascript và jQuery, bao gồm tất cả các tập tin mà các bạn cần để làm việc (css / png). Ngoài ra nó còn tích hợp các tập tin javascript sử dụng cho các plugin WordPress phổ biến, như WP SlimStat. Với plugin này, bạn có thể tự động tích hợp CDN siêu nhanh vào trang web của bạn mà không có những rắc rối của việc chỉnh sửa mã của bạn và nó sẽ tự động tìm kiếm các URL chính xác.

Lợi ích mà Plugin mang lại

Tăng tốc độ trang web của bạn.

Giảm bớt lưu lượng băng thông.

Giảm tải máy chủ.

Các tính năng chính của Plugin

Di chuyển các tập tin được lựa chọn tới chân trang.

Áp dụng Async / Trì hoãn để tải javascripts.

Tương thích với W3 Total Cache và WP Super Cache.

Tự động đồng bộ hóa với dữ liệu của nhà cung cấp.

Cho phép bạn chọn các tập tin bạn muốn tải từ CDN.

Hỗ trợ giao thức HTTPS.

Sử dụng Google CDN để tải jQuery để tận dụng lợi thế của bộ nhớ cache của trình duyệt.

Cài đặt và cấu hình Plugin

Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin CDN jsDelivr và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản). Sau khi cài đặt bạn kích hoạt Plugin, khi kích hoạt plugin xong bạn sẽ thấy xuất hiện thêm một Menu trong Menu “Cài đặt” với tên là “JsDelivr CDN”. Hãy kích vô Menu này để tiến hành cài đặt và sử dụng Plugin. Đầu tiên bạn cần nhấn “update CDN data” để Plugin quét các dữ liệu cần để sử dụng trong website của bạn.

Tăng tốc độ trang web của bạn bằng Plugin CDN jsDelivr

Sau khi quét CDN xong bạn tiếp tục nhấn “Scan website” sau đó bạn sẽ thấy một danh sách các JS hiện ra và bạn chỉ cần chọn những file JS cần sau đó di chuyển chúng xuống chân trang.

tang-toc-website-3.jpg

Sau khi thực hiện các cài đặt bạn nhớ lưu lại nhé và bây giờ tốc độ website của bạn đã được cải thiện đáng kể rồi đấy.

Lưu ý: Plugin đã không được cập nhật phát triển cách đây hơn 3 năm rồi, có thể sẽ không còn tương thích với phiên bản WordPress hiện tại nếu bạn cảm thấy không an toàn có thể sử dụng phương pháp số 2.

Phương pháp 2: Sử dụng Plugin Scripts To Footer

Một Plugin nhỏ gọn giúp bạn di chuyển các kịch bản đến chân trang để giúp tăng tốc tải trang và cải thiện trải nghiệm người dùng. Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin Scripts To Footer và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản).

tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer
Tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer

Sau khi cài đặt và kích hoạt xong bạn sẽ thấy xuất hiện một Menu có tên “Scripts to Footer” trong Menu Cài đặt > Kích chọn Menu “Scripts to Footer” để cấu hình!

Cấu hình Plugin

Về cơ bản bạn không cần phải cấu hình gì cả vì khi kích hoạt Plugin sẽ tự động chuyển các “JavaScripts” xuống chân trang rồi ở đây bạn chỉ có cấu hình loại bỏ chuyển “JavaScripts” xuống chân trang.

Nếu sau khi kích hoạt Plugin bạn thấy một số thành phần bị lỗi ở vị nào thì bạn có thể loại bỏ bằng cách vào trong phần cấu hình Plugin trong mục “Exclude Options” hãy tích vào các thuộc tính cần loại bỏ bao gồm (trang, bài viết, chuyên mục, thẻ….).

chuyen-javascript-xuong-chan-trang-1 1

Tuy nhiên bạn thể khắc phục bằng cách tích chọn vào thuộc tính “Keep jQuery in the Header”. Ngoài ra bạn có thể tham khảo một số cách loại trừ “JavaScripts” trong phần hướng dẫn của Plugin. Quá đơn giản để bạn có thể tăng tốc trang Web phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Đánh giá và chia sẻ để nâng cao chất lượng bài viết?

Tỉ lệ 5 / 5. Phiếu: 1

Chia sẻ:

BÀI VIẾT LIÊN QUAN

BÀI VIẾT NÊN XEM

Xem thêm

55 bình luận về “Cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer”

  1. Làm sao biết được file JS nào là cần để di chuyển xuống chân trang, cơ mà mình làm sao mà có dấu gạch chéo màu đỏ, không như của bạn là nó dấu tích màu canh vậy ?

    Bình luận
  2. khi cài vô wp của mình báo lỗi
    Warning: is_readable() [function.is-readable]: open_basedir restriction in effect. File(C:\Webspace\psc-ups.com\suachuaups.psc-ups.com/wp-content/plugins/C:\Webspace\psc-ups.com\suachuaups.psc-ups.com/wp-content/plugins/jsdelivr-wordpress-cdn-plugin/languages/jsdelivr-en_US.mo) is not within the allowed path(s): (C:/Webspace/psc-ups.com\;C:\Windows\Temp\) in C:\Webspace\psc-ups.com\suachuaups.psc-ups.com\wp-includes\l10n.php on line 556
    như thế này là sao vậy bạn, giúp với

    Bình luận

Viết một bình luận