[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.
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.
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).
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ẻ….).
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!
Báo lỗi bạn ởi
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 ?
Hj bạn cứ chuyển xuống sau đó xóa cache và kiểm tra nếu bị lỗi giao diện hãy chuyển về ban đầu nếu không hãy giữ nguyên như vậy. Những JS gạch chéo màu là những JS mặc định của WordPress bạn không thể di chuyển chúng! Thân chào 🙂
ôi, vậy không có cái nào không bị gạch chéo cả. vậy để im hả bạn ? hay gở bỏ plugin đi ?
Bạn có thể gỡ bỏ đi cũng được mình sẽ có một cập nhật mới trong bài viết này vào ngày hôm nay bằng cách sử dụng Plugin khác tối ưu hơn!
oh, tốt quá, cập nhật xong báo cho mình nhé, để mình tham khảm và tối ưu trang web, nó load chậm quá. Tiện đây bạn xem giúp mình trang web cảu mình bị lỗi gì mà load chậm quá. http://sanxuatphimtvcquangcao.com/
Bạn dùng Plugin có nhiều không? có dùng Plugin tạo Cache chưa?
Mình đã cập nhật mới bạn có thể theo dõi nhé 🙂
plugin dùng không nhiều, đã dùng cái Wp-supper Cahe
Vậy có thể nhà cung cấp dịch vụ không được cao 🙂
đâu có, họ bảo mình là lỗi do code web, bật F12
Dùng Plugin Scripts To Footer tốc độ load nhanh hơn đáng kể, nhưng nó phá vỡ mất cái hiệu ứng hiện bản đồ cảu google trong trang liên hệ của mình 🙁 , mình đã loại bỏ ở mục page nhưng vẫn vậy, có cách nào khác phục không bạn ?
Đọc hết bài viết đi bạn 🙂
vậy tích vào Keep jQuery in the Header thì coi như không sử dụng plugin rồi còn gì chứ nhỉ ?
Bạn yên tâm nó sẽ loại bỏ Plugin có Jquery! chứ không vô hiệu hóa hết bạn có thể tham khảo trong phần giới thiệu của Plugin 🙂
Mình có liên hệ với nhà cung cấp Hosting PAVietNam, họ bảo website mình lúc load nhanh, lúc load chậm là do “link từ bên ngoài”
Đây là phản hồi của họ:
“” Chúng tôi kiểm tra webiste Quý khách load rất nhiều link từ bên ngoài, thời gian truy cập lâu có thể do phản hồi chậm từ các link Quý khách query từ bên ngoài thưa Quý khách. Quý khách debug website kiểm tra lại xem sao. “”
Vấn đề này khắc phục thế nào bạn biết chỉ mình với
Chào bạn có thể giao diện của bạn đang sử dụng có vấn đề bạn có thể sử dụng công cụ https://developers.google.com/speed/pagespeed/insights/ để kiểm tra các vấn đề theo mình kiểm tra thời gian phản hồi của máy chủ khá chậm 🙂
kiểm tra nó bảo nào là Giảm bớt JavaScript, Giảm bớt CSS, Xóa JavaScript chặn hiển thị. mà mình mấy cái này thì chịu 😀
Bạn có thể tìm cách giảm các tài nguyên này trên Google và thực hiện bằng tay, mình cũng thực hiện như vậy 🙂
cũng đã thực hiện, nhưng khi thực hiện thì nó phá vỡ giao diện, màu sắc cũng bị phá vỡ, theme mình là theme trả phí không lẽ bị lỗi ?
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ạn dùng Plugin không phải trên hosting phải không mà chạy trực tiếp bằng Localhost phải không?
mình chạy trên host đấy ạ, mak hk pjk sao nó lại truy xuất trên đĩa C :/
mình còn gà mờ bạn giúp đỡ
Bạn dùng phiên bản WordPress bao nhiêu? Cho mình địa chỉ Web với 🙂
mình dùng phiên bản 4.5.2
web chưa có gì cả bạn ah, mình đang cài đặt thôi http://suachuaups.psc-ups.com/
đâu mất tiêu rồi
Hj chào bạn mình cứ tưởng là nó không tương thích với phiên bản tuy nhiên sau khi mình test thử thì vẫn thấy OK
Có là do cấu hình hosting của nhà cung cấp. Mình lên mạng tìm hiểu lỗi này là do bị giới hạn một số tính năng!
đâu rồi, giúp đi bạn ơi :))
Nó báo lỗi trong khu vực quản trị phải không bạn?
đúng rồi bạn
mình không ngĩ vậy, mình nghĩ là lỗi ở chỗ nó truy xuất ổ đĩa C ấy, trong khi ổ đĩa C chẳng liên quan ji cả
Hj bạn chạy trên hosting mà, dữ liệu nó sẽ được lưu trữ ở ổ đĩa của nhà cung cấp (nếu nhà cung cấp lưu trữ dữ liệu trên ổ đĩa C) thì bạn sẽ nhận được lỗi ở ổ đĩa thôi. Thế bạn có vào được khu vực quản trị không?
vô được bạn, làm sao gửi ảnh trên cmt này bạn 😀
Vậy bạn hãy vô hiệu hóa Plugin đó đi hãy sử dụng Plugin khác, bởi lẽ có rất nhiều Plugin hỗ trợ tốt vấn đề này điển hình như plugin này https://wordpress.org/plugins/use-google-libraries/ chỉ cần cài đặt và kích hoạt là xong bạn không cần phải cấu hình và nó được đánh giá rất cao và hiện tại mình cũng đang sử dụng!
Để gởi hình rất đơn giản chỉ cần bạn gõ cấu trúc như sau:
là xong 🙂
tks bạn, nhưng mình cài 1 số plug nó cũng bị lỗi tương tự
mình cài 1 số pluggin khác cũng bị lỗi
cấu trúc ko thấy được ji 😀
Vậy là bạn hãy thử hỏi nhà cung cấp Hosting xem sao chứ như tình trạng bạn nói mình dám khẳng định hosting của bạn đang bị giới hạn một số tính năng 🙂 – Mà bạn sử dụng nhà cung cấp nào?
mình cài pluggin wpseoninja cũng bị lỗi tương tự như này là sao bạn, bạn khác phục được không
Warning: Missing argument 2 for wpdb::prepare(), called in C:\Webspace\psc-ups.com\suachuaups.psc-ups.com\wp-content\plugins\wpseoninja\functions.widgets.php on line 247 and defined in C:\Webspace\psc-ups.com\suachuaups.psc-ups.com\wp-includes\wp-db.php on line 1246
mình dùng nhà cung cấp Mắt Bão
Để tăng tốc độ tải trang và cấu hình cho đơn giản bạn nên dùng plugin này https://wordpress.org/plugins/wp-fastest-cache/ để Seo hiệu quả dùng Plugin này https://wordpress.org/plugins/wordpress-seo/ tương thích phiên bản WordPress mới nhất. Được cộng đồng đánh giá rất cao? Nếu cài Plugin mà bị lỗi nữa lúc này bạn hãy liên hệ với nhà cung cấp hosting là được rồi đấy!
hj, tks bạn nhiều
giúp đỡ nhiệt tình qá
Có gì để lại lời nhắn cho mình nhé, giờ đi ăn cơm cái đã – Chúc bạn có một trang Web thật OK 🙂
web của mình nó cứ báo dấu X đỏ. không lưu setting đc. Bạn giúp mình với
Bạn chụp hình đưa lên mình xem thử 🙂
cái này là tăng tốc cho blog của mình hay tất cả trình duyệt à a
Tăng tốc cho mã nguồn wordpress của bạn í 🙂