• WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và Domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Tối ưu WordPress
    • Cài theme Paradise
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

  • Bắt đầu
  • Thủ thuật WordPress
  • WordPress plugins
  • WordPress themes
  • Hosting và Domain
  • Thông báo
Trang chủ » WordPress » Thủ thuật WordPress » Chuyển tất cả JavaScript xuống footer trong WordPress

Chuyển tất cả JavaScript xuống footer trong WordPress

27/02/2017 27/02/2017 Trung Hiếu 56 Bình luận

Mục lục

  • Làm thế nào để chuyển tất cả JavaScript xuống footer?
    • Sử dụng code snippets
    • Sử dụng plugin

Chuyển tất cả JavaScript xuống footer trong WordPress.

Nếu bạn chưa biết thì trong phiên bản 4.2.6 của theme Paradise được phát hành ngày 24/02/2017 vừa rồi, chúng tôi đã loại bỏ code async (tải không đồng bộ) JavaScript (JS) và thay vào đó là code chuyển toàn bộ JavaScript xuống footer. Sở dĩ chúng tôi làm như vậy là vì việc async JS có thể gây ra lỗi tải thiếu JS trong một số trường hợp, làm cho tính năng cũng nhưng giao diện của blog/ website hiển thị không đầy đủ, đặc biệt là khi sử dụng plugin tạo cache.

Tham khảo thêm:

  • Tải có điều kiện các file JS và CSS của plugin WooCommerce
  • Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin
  • Ngăn JS và CSS tải trên những trang nhất định của WordPress

Khác với kỹ thuật tải không đồng bộ (file JS có thể nằm ở header nhưng bị trì hoãn tải, buộc phải chờ tất cả các thành phần khác tải xong thì mới được tải, dẫn đến dễ bị lỗi trên các trình duyệt không hỗ trợ tốt async), chuyển JS xuống footer sẽ giúp blog/ website của bạn hoạt động ổn định hơn, trong khi vẫn đảm bảo được quy tắc tải JS sau cùng.

Làm thế nào để chuyển tất cả JavaScript xuống footer?

Có 2 cách khác nhau để làm việc này: 1 là chèn code snippets trực tiếp vào file functions.php của theme/ child theme bạn đang sử dụng, 2 là sử dụng plugin.

Sử dụng code snippets

Chèn đoạn code sau đây vào cuối file functions.php của theme/ child theme mà bạn đang sử dụng.

Lưu lại, view source blog/ website và xem kết quả.

Sử dụng plugin

Đối với các bạn “đam mê” plugin, các bạn có thể sử dụng plugin Scripts To Footer để làm việc này. Chỉ với vài thiết lập đơn giản là các bạn đã có thể làm chủ được plugin nên tôi sẽ không giới thiệu cụ thể ở đây. Cuối cùng, chúc các bạn thành công!

Bạn đã từng chuyển JavaScript xuống footer trong WordPress? Bạn biết giải pháp khác đơn giản và hiệu quả hơn? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

dich-vu-cai-dat-website-wordpress-mien-phi

Tác giả: Trung Hiếu

"Cảm thấy blog quá nhỏ? Nếu bạn chỉ có một độc giả và blog của bạn làm thay đổi cuộc sống của họ thì nó là đủ lớn".

Previous Post: « Sửa lỗi Cannot modify header information trong WordPress
Next Post: Hướng dẫn vô hiệu hóa Embed Script trong WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. mr N đã bình luận:

    27/02/2017 lúc 09:50

    em một lúc nhân được hai cái thông báo bài viết mới, em nghĩ bác nên xóa đi một cái

    Trả lời
    • Trung Hiếu đã bình luận:

      27/02/2017 lúc 09:52

      1 cái của FeedBurner và 1 cái của Jetpack hả bạn? Cái này bạn chủ động hủy bên FeedBurner giúp mình nhé. Vì nhiều người dùng vẫn đang theo dõi qua FeedBurner, mà Jetpack thì không cho import email từ FeedBurner qua nên mình buộc phải duy trì song song cả 2 cái. :)

      Trả lời
      • mr N đã bình luận:

        27/02/2017 lúc 09:55

        ok bác, đã hủy một cái

        Trả lời
  2. Tịnh Nguyễn Blog đã bình luận:

    27/02/2017 lúc 12:46

    Tớ đính trính tí là tớ xài plugin không phải vì tớ “đam mê” nhé là do không biết code mới phải cắn răn xài thôi. Ơ ơ mà bạn nào cài plugin ” Scripts To Footer” tốc độ thực khi tải trang sẽ tăng lên khoảng 1,069 lần nhé !

    Trả lời
    • NgocBlue đã bình luận:

      27/02/2017 lúc 22:17

      Rất đồng cảm với bạn :)). Mình cũng xài plugin, công nhận quá nhanh so với tưởng tượng. Cảm ơn Hiếu :D

      Trả lời
      • Trung Hiếu đã bình luận:

        28/02/2017 lúc 07:47

        Xài chung cái này với các plugin tạo cache có hỗ trợ tính năng tối ưu CSS, JS thì cần lưu ý chút nhé bợn Ngọc. Tốt nhất nên bỏ tính năng tối ưu JS của WP Rocket đi. :P

        Trả lời
        • NgocBlue đã bình luận:

          28/02/2017 lúc 10:08

          Tks Hiếu nhé, mình vừa tắt, mà có tắt luôn css không nhỉ :D
          À nếu mà chèn code thì có cần tắt không?

          Trả lời
          • Trung Hiếu đã bình luận:

            28/02/2017 lúc 10:09

            Chèn bằng cái gì cũng nên tắt đi để tránh xung đột. :P

          • NgocBlue đã bình luận:

            28/02/2017 lúc 10:17

            Đã rõ :D À bao h đến lúc gia hạn wp rocket nhớ thông báo nhé :P

          • Trung Hiếu đã bình luận:

            28/02/2017 lúc 10:18

            Ok. Cũng sắp rồi. Vì 31/3 hết hạn mà. :D

    • Tịnh Nguyễn Blog đã bình luận:

      01/03/2017 lúc 09:53

      Ngọc Blue: Con gái mà làm được là quá ngon rồi đó chị.
      Trung Hiếu: WP Rocket nó thần thánh đến mức đó sao ta, thấy đi đâu cũng nghe bà con nói về nó.

      Trả lời
      • Trung Hiếu đã bình luận:

        01/03/2017 lúc 09:55

        Haha. WP Căn bản là một trong những người đầu tiên có công “truyền bá” và “đầu độc” WP Roket tới cộng đồng WordPress Việt Nam mà bác. :P

        Trả lời
        • Tịnh Nguyễn Blog đã bình luận:

          01/03/2017 lúc 10:05

          Hóa ra cội nguồn của “tội ác” là đây, công nhận tầm ảnh hưởng của WP Căn Bản hiện nay không nhỏ.

          Không liên quan: Đã cập nhật bộ đếm comment rồi thì phải, dạo trước comment trên điện thoại chuyển qua máy tính (hoặc ngược lại) là nó không đếm.

          Trả lời
          • Trung Hiếu đã bình luận:

            01/03/2017 lúc 10:16

            Hiện có hơn 3k1 site đang dùng chung license WP Rocket của bên em. :P Em mới đổi thuật toán của bộ đếm rồi, không dùng dữ liệu của Akismet nữa mà query trực tiếp vào database nên đếm chính xác hơn. :P

          • Tịnh Nguyễn Blog đã bình luận:

            01/03/2017 lúc 10:23

            Hơn 3000 người dùng ? Khủng vậy, đây cũng là lượng thành viên VIP của WP Căn Bản luôn sao ?

          • Trung Hiếu đã bình luận:

            01/03/2017 lúc 10:25

            Không bác. Thành viên VIP chỉ có hơn trăm người thôi. Cái này là khách hàng mua lẻ plugin WP Rocket nữa. Với lại một người có thể cài cho nhiều site mà. Có người còn bán lại cho người khác nữa. :)

          • Tịnh Nguyễn Blog đã bình luận:

            02/03/2017 lúc 14:05

            Ò ò, ngon ngon cái này có tài khoản Unlimited làm ăn được nè ! Haha, nói chớ phải có khách hàng tiềm năng mới mua với lại thêm phần hỗ trợ nữa.

            Kinh kinh, nghi cái Genesis Framework thịnh hành chắc cũng từ kênh này truyền bá luôn quá ! :p

          • Trung Hiếu đã bình luận:

            02/03/2017 lúc 14:08

            Bác vào Google và search với từ khóa “thủ thuật Genesis” xem trang nào đứng top 1 thì trang đó có công truyền bá và phát triển cộng đồng Genesis tại Việt Nam. :3

          • Tịnh Nguyễn Blog đã bình luận:

            02/03/2017 lúc 14:31

            Vâng, đây chính là cội nguồn của “tội ác”. Haha …..

            Thật sự theme của Genesis mình rất thích. Mức độ hoàn thiện cao, nhẹ, responsive gần như hoàn hảo.

            À mà thôi, quay về với Themzee yêu quý của mình đây.

  3. Bizzaviet đã bình luận:

    27/02/2017 lúc 14:11

    cái này đã tích hợp sẵn trong paradise chưa bác?

    Trả lời
    • Trung Hiếu đã bình luận:

      27/02/2017 lúc 14:12

      Update lên 4.2.6 mới nhất là có bác nhé. :P

      Trả lời
  4. Kiên Nguyễn đã bình luận:

    27/02/2017 lúc 14:38

    Code này dùng cho theme Sahifa được không Hiếu ?

    Trả lời
    • Trung Hiếu đã bình luận:

      27/02/2017 lúc 14:40

      Mình nghĩ là được. Bạn cứ mạnh dạn thử đi, lỗi thì xóa đi là xong ấy mà. :D

      Trả lời
  5. Kien đã bình luận:

    27/02/2017 lúc 14:52

    Mình làm thử thì bị lỗi trắng trang, phải vào host xoá đi :(

    Trả lời
    • Trung Hiếu đã bình luận:

      27/02/2017 lúc 15:22

      Error_log báo lỗi gì bác? :P

      Trả lời
      • Kien đã bình luận:

        27/02/2017 lúc 15:26

        Nó báo như này:
        [27-Feb-2017 07:49:33 UTC] PHP Parse error: syntax error, unexpected end of file in /home/tuvannha/public_html/…./functions.php on line 246

        Trả lời
        • Trung Hiếu đã bình luận:

          27/02/2017 lúc 15:31

          Cái này là lỗi syntax. :D Có vẻ bác chèn không đúng cách rồi. :P

          Trả lời
          • Kien đã bình luận:

            27/02/2017 lúc 17:15

            Đã làm lại, hết lỗi rồi :p

          • Trung Hiếu đã bình luận:

            27/02/2017 lúc 19:09

            Biết ngay mà. Hehe. :P

  6. Hữu Thuần đã bình luận:

    27/02/2017 lúc 19:27

    Tuyệt vời cảm ơn bác :D

    Trả lời
  7. Sơn Standa đã bình luận:

    03/03/2017 lúc 11:43

    Vừa chèn xong, không biết có nhanh tí nào không nữa :))
    Thanks chú!

    Trả lời
    • Trung Hiếu đã bình luận:

      03/03/2017 lúc 12:11

      Coi chừng lỗi giao diện nhé. Hehe. :P

      Trả lời
      • Sơn Standa đã bình luận:

        03/03/2017 lúc 15:04

        TS, bị lỗi tí thật chú ạ. Cái Testimonials đang chuyển tử Slider giờ nó show mịa hết lên. Hic…

        Trả lời
        • Trung Hiếu đã bình luận:

          03/03/2017 lúc 15:28

          Kể cả code snippets hay plugin thì không phải web nào nó cũng tương thích đâu. :P Luôn có ngoại lệ mà. :D

          Trả lời
          • Sơn Standa đã bình luận:

            03/03/2017 lúc 15:31

            Không biết có nhanh hơn tí nào không nữa :)) Thôi tạm để như thế này xem sao…

  8. Vy Spirit đã bình luận:

    03/03/2017 lúc 12:21

    Mình chèn xong test thử trên gtmetrix thì điểm nó tụt xuống vài điểm @@

    Trả lời
    • Trung Hiếu đã bình luận:

      03/03/2017 lúc 12:23

      Nhiều lúc điểm test và trải nghiệm thực tế hoàn toàn khác nhau. Ví dụ mình có thể làm cho wpcanban.com max điểm cả GTMetrix, Pingdom và Google PageSpeed Insights một cách dễ dàng. Nhưng trải nghiệm load thực tế lại không nhanh bằng hiện tại. Vậy nên không phải lúc nào cũng chăm chăm vào các công cụ đánh giá tốc độ đâu bạn nhé. :P

      Trả lời
      • Vy Spirit đã bình luận:

        03/03/2017 lúc 12:29

        Mình cũng biết điều đó và nhiều lúc còn khuyên ngta như bạn vậy :D nhưng chs cứ bị ám ảnh @@ để chèn vô lại xem sao. Cảm ơn bạn!

        Trả lời
  9. Hùng kqxs đã bình luận:

    06/03/2017 lúc 15:43

    Không biết cách này có áp dụng được cho web bán hàng không vì web mình rất nhiều JS. Mình đang dùng theme porto – cài đủ theme mẹ và theme con và đang active theme con.
    Vì dữ liệu khá ổn định nên rất sợ cài bị lỗi, anh em nào chung cảnh ngộ xác nhận giúp với ạ. :D
    M cám ơn.

    Trả lời
    • Trung Hiếu đã bình luận:

      06/03/2017 lúc 15:49

      Cứ mạnh dạn thử đi bạn. Nếu bị lỗi thì chỉ cần gỡ code ra là hết mà, nó có ghi gì vào database đâu mà lo. :D Cẩn thận hơn thì có thể backup trước khi thử. :)

      Trả lời
  10. Bao Nam đã bình luận:

    06/03/2017 lúc 23:11

    Dùng Cloudflare, bật chế độ nén CSS, hoặc CSS inline luôn cho tăng tốc :D

    Trả lời
    • Trung Hiếu đã bình luận:

      07/03/2017 lúc 08:44

      Dùng CloudFlare miễn phí hay bị lỗi lắm. Trừ khi host đặt ở quá xa Việt Nam hoặc đang bị DDoS, còn lại không nên dùng. :P

      Trả lời
  11. Văn Luận đã bình luận:

    07/03/2017 lúc 21:49

    Đã update lên version mới nhất, nghĩa là đã có phần này rồi đúng k Hiếu?

    Trả lời
    • Trung Hiếu đã bình luận:

      07/03/2017 lúc 22:23

      Đúng rồi bạn. :)

      Trả lời
  12. Vy Spirit đã bình luận:

    24/03/2017 lúc 20:13

    Mình đã thêm lại code và function.php nhưng ko biết là do mình dùng tính năng nén mà khi view-source vẫn thấy js đã nén ở trên :D
    Nhân tiện nhờ Hiếu đổi giúp mình tên từ “Vy Spirit” sang “Vỹ Spirit” được không nhỉ :D

    Trả lời
    • Trung Hiếu đã bình luận:

      24/03/2017 lúc 21:33

      Không đổi được bạn nhé. Nhiều comments quá rồi, đổi không xuể. :P

      Trả lời
      • Vy Spirit đã bình luận:

        24/03/2017 lúc 21:41

        Mình tưởng đổi 1 lượt được chứ :D do lúc chiều mình cũng nhờ đổi bên canh me rất nhanh. Chắc Hiếu dùng cmt mặc định nên phải đổi từng cái nhỉ :D

        Trả lời
        • Trung Hiếu đã bình luận:

          25/03/2017 lúc 07:53

          Chắc anh Luân cài plugin Find and Replace trong database. :P

          Trả lời
  13. Soju đã bình luận:

    03/04/2017 lúc 00:23

    nghĩa là e phải tắt async rồi mới chèn cái này a nhỉ :P
    http://sv1.upsieutoc.com/2017/04/03/1.png

    Trả lời
    • Trung Hiếu đã bình luận:

      03/04/2017 lúc 07:56

      Thử vừa move to footer vừa async xem có lỗi không? Mình nghĩ là vẫn ok. :P

      Trả lời
  14. Lê Thanh Nhã đã bình luận:

    27/09/2017 lúc 08:52

    Đầu tiên, Nhã cảm ơn wpcanban.com đã giúp rất nhiều thông tin trong thời gian Nhã tập tành làm wordpress. Nhã muốn hỏi 2 câu
    1. Cách chèn cách phần nén js & css cộng với remove querry string vào function.php của anh rất ok, Nhã thực hành & kiểm tra trên google insight + pingtools + gmetrix đều tốt, nhưng hình như o thay đổi đối với gia diện cho mobile. Giúp Nhã khắc phục nhe.
    2. Cách chèn cách phần nén js & css cộng với remove querry string vào function.php của anh, sau khi kiểm tra lại dashboard & giao diện web thì nó hiện 2 dòng code đó trên đầu trang. Nhã o giải quyết được ? Nhã vẫn để nguyên tình trạng trên, mong anh vào thanhnha.org coi thử
    Mong anh tư vấn.

    Trả lời
  15. hongvi đã bình luận:

    08/11/2017 lúc 11:32

    Trang của bạn có 6 tài nguyên CSS chặn.
    có nên chuyển luôn cả css xuống footer ko bạn

    Trả lời
    • Trung Hiếu đã bình luận:

      08/11/2017 lúc 14:17

      Bạn chuyển CSS xuống footer thì cũng không giải quyết được vấn đề này đâu. Phải áp dụng kỹ thuật async mới được. Một trong các plugin hỗ trợ vấn đề này là LiteSpeed Cache, WP Rocket, Autoptimize…

      Trả lời
  16. Nam đã bình luận:

    26/12/2017 lúc 20:34

    Mình thêm code ở trên bị lỗi. Copy y hết luôn. Không biết code này có dùng được cho mọi theme không nhỉ?

    Trả lời
    • Trung Hiếu đã bình luận:

      28/12/2017 lúc 09:12

      Cụ thể thì nó báo lỗi gì bạn? Có error_log không?

      Trả lời
  17. trần hưng đã bình luận:

    16/03/2018 lúc 22:55

    mình thấy trang này shoop.vn có mấy giao diện khá đẹp tải về miển phí đấy

    Trả lời

Primary Sidebar

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Lỗi gia hạn tự động Let’s Encrypt và cách khắc phục 19/02/2019
  • Thay thế hình ảnh trong WordPress giữ nguyên tên 16/01/2019
  • Cài đặt lại toàn bộ plugin trên website WordPress 02/01/2019
  • Hướng dẫn nâng cấp PHP 7.3 cho website WordPress 27/12/2018
  • Gỡ bỏ Gutenberg stylesheet khỏi website WordPress 24/12/2018
  • Điểm Google PageSpeed Insights liệu có còn đáng tin? 20/12/2018

Hỗ trợ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • tuyenlab trong Tạo sticky post cho category trong WordPress
  • Trung Hiếu trong Tạo sticky post cho category trong WordPress
  • tuyenlab trong Tạo sticky post cho category trong WordPress
  • Khang trong Chuyển từ HTTP sang HTTPS không bị mất thứ hạng tìm kiếm

Bình luận nhiều nhất (tháng)

  1. Chiến (3)
  2. nghiep (3)
  3. Ngô Văn Cương (3)
  4. Nguyen Huy (3)
  5. tuyenab (3)
  6. Đoàn Thái Hưng (2)

Liên kết và Đối tác

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung
  • Canh Me

Thống kê WP Căn bản

10 Chuyên mục - 913 Bài viết - 31882 Bình luận

Bản quyền © 2014 - 2019 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting · Bảo vệ bởi CloudFlare Pro