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

[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. Phiếu:

Cảm ơn bạn đã đánh giá ...

Hãy theo dõi chúng tôi trên xã hội!

Chúng tôi rất tiếc vì bài đăng này không hữu ích cho bạn!

Hãy để chúng tôi cải thiện bài đăng này!

Hãy cho chúng tôi biết làm thế nào chúng tôi có thể cải thiện bài đăng này?

Chia sẻ: - Theo dõi Máy tính & Wordpress trên: Theo dõi Máy tính & Wordpress trên Google News

55 thoughts on “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 ?

    1. 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 🙂

      1. ô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 ?

        1. 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!

      2. 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 ?

    2. 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

        1. 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 😀

        1. 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 ?

  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

      1. 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 đỡ

        1. 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!

      2. 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ả

        1. 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?

        2. 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?

        3. 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

        4. Để 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!

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Scroll to Top