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. :)
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
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. :)
ok bác, đã hủy một cái
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é !
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
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
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?
Chèn bằng cái gì cũng nên tắt đi để tránh xung đột. :P
Đã rõ :D À bao h đến lúc gia hạn wp rocket nhớ thông báo nhé :P
Ok. Cũng sắp rồi. Vì 31/3 hết hạn mà. :D
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ó.
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
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.
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
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 ?
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.
cái này đã tích hợp sẵn trong paradise chưa bác?
Update lên 4.2.6 mới nhất là có bác nhé. :P
Code này dùng cho theme Sahifa được không Hiếu ?
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
Mình làm thử thì bị lỗi trắng trang, phải vào host xoá đi :(
Error_log báo lỗi gì bác? :P
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
Cái này là lỗi syntax. :D Có vẻ bác chèn không đúng cách rồi. :P
Đã làm lại, hết lỗi rồi :p
Biết ngay mà. Hehe. :P
Tuyệt vời cảm ơn bác :D
Vừa chèn xong, không biết có nhanh tí nào không nữa :))
Thanks chú!
Coi chừng lỗi giao diện nhé. Hehe. :P
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…
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
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…
Mình chèn xong test thử trên gtmetrix thì điểm nó tụt xuống vài điểm @@
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
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!
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.
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ử. :)
Dùng Cloudflare, bật chế độ nén CSS, hoặc CSS inline luôn cho tăng tốc :D
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
Đã update lên version mới nhất, nghĩa là đã có phần này rồi đúng k Hiếu?
Đúng rồi bạn. :)
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
Không đổi được bạn nhé. Nhiều comments quá rồi, đổi không xuể. :P
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
Chắc anh Luân cài plugin Find and Replace trong database. :P
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
Thử vừa move to footer vừa async xem có lỗi không? Mình nghĩ là vẫn ok. :P
Đầ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.
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
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…
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ỉ?
Cụ thể thì nó báo lỗi gì bạn? Có error_log không?
mình thấy trang này shoop.vn có mấy giao diện khá đẹp tải về miển phí đấy