WP Căn bản

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

wordpress-theme-tot-nhat

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

56 Bình luận

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:

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. :)

Reader Interactions

Bình luận

    Trả lời

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

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

    • 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

    • 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

      • 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

        • 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

          • 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

          • 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. :)

          • Ò ò, 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

          • 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

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

    • 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

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

    • 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

    • 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

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

  14. Đầ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. 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

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

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

Footer

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

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

  1. Nam (5)
  2. Hoa Thien (4)
  3. Ngô Văn Cương (4)
  4. W88 (4)
  5. Anh (3)
  6. Đức (3)

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

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