Tải không đồng bộ JavaScript trong WordPress mà không cần dùng plugin.
Nếu bạn đã từng kiểm tra thử tốc độ load website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js và .css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi. Và Google thì không thích điều đó.
Tham khảo thêm:
- Loại bỏ Query String trong WordPress không cần dùng plugin
- Minify HTML, JavaScript và CSS mà không cần plugin
Google cho rằng việc phần text hiển thị chậm sẽ ảnh hưởng đến trải nghiệm người dùng vì nội dung là thứ quan trọng nhất mà họ cần. Do đó, nếu website của bạn cũng đang gặp phải cảnh báo này, tốt nhất là nên tìm cách khắc phục nó. Và hướng giải quyết hiệu quả cho vấn đề này chính là kỹ thuật tải không đồng bộ hay còn gọi là Asynchronous (Async).
Tải không đồng bộ (Asynchronous) là gì?
Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.
Trong WordPress, các bạn có thể tải không đồng bộ JavaScript một cách đơn giản thông qua việc sử dụng plugin. Một số plugin hỗ trợ tải không đồng bộ JavaScript phổ biến mà các bạn có thể tham khảo bao gồm:
Nhiều plugin tạo cache như WP Rocket, W3 Total Cache, LiteSpeed Cache… cũng hỗ trợ sẵn tính năng này.
Tuy nhiên, nếu bạn không phải là tín đồ của plugin thì bài viết này là dành cho bạn. Ngay bây giờ, tôi sẽ hướng dẫn cho các bạn cách thiết lập tải không đồng bộ JavaScript mà không cần sử dụng plugin.
Tải không đồng bộ JavaScript mà không cần dùng plugin
Tất cả những gì mà các bạn cần làm là thêm đoạn code sau đây vào file functions.php của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nhằm tránh nó bị xóa mất khi cập nhật theme:
//* Asynchronous JS without plugin
function async_js($tag){
$scripts_to_async = array('script-1.js', 'script-2.js', 'script-3.js', 'script-4.js', 'script-5.js');
foreach($scripts_to_async as $async_script){
if(true == strpos($tag, $async_script ) )
return str_replace( ' src', ' async="async" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'async_js', 10 );Lưu ý:
- Thay
script-1.js,script-2.js… bằng tên các JavaScript tương ứng trên website của bạn. Nếu số lượng script ít hơn, các bạn có thể xóa bớt đi và ngược lại, hãy bổ sung thêm theo cấu trúc sẵn có. - Một số JavaScript sẽ gặp lỗi nếu bị tải không đồng bộ (nhất là
js/jquery/jquery.js). Do đó các bạn nên loại bỏ những script này ra khỏi danh sách.
Các lấy tên của script, các bạn có thể xem trong ví dụ minh họa bên dưới.
Sau khi hoàn tất, lưu lại và xóa cache (nếu có) rồi kiểm tra kết quả bằng Google PageSpeed Insights. Thật đơn giản phải không nào? Chúc các bạn thành công!
Bạn có đang áp dụng kỹ thuật Asynchronous trên website của mình? Bạn biết phương pháp khác đơn giản hơn để tải không đồng bộ JavaScript trong WordPress? Hãy chia sẻ nó với chúng tôi bằng các 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 theo dõi 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 nhé. Cảm ơn rất nhiều. :)
Giao diện mặc định của Mythemeshop có chức năng tạo Child theme. nhưng mà e cài plugin 1 click child theme để tạo child. có phải điều đó làm e có 2 tệp css của child không ạ. e view source lên xem cả 2 tệp nội dung đều như nhau. làm sao để xóa bớt 1 cái đi a :P
http://sv1.upsieutoc.com/2017/04/04/Untitledc9b7a.png
Nếu theme có sẵn tính năng tạo child theme thì sao không dùng luôn mà còn cần tới plugin làm gì? :P
chỉ lấy ở các cái JS mà nằm trong đường dẫn /plugins/xxx.js thôi hả a. cái PageSpeed Insights của google báo nhiều lắm nhiều cái không nằm trong plugins. đuôi có .js nhưng lại không biết lấy từ đoạn nào. ví dụ như: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.7.1 (làm cái thủ thuật mất ver= rồi sao view source lại ra thế này ><)
Mấy file JS không phải lưu trên host thì không async được đâu nhé. :P
e ko biết nên lấy tên JS từ đoạn nào ấy a ạ. vì demo của a là đều lấy sau /plugins/ . nhưng ví dụ của e thằng kk này: domain/wp-content/cache/busting/1/wp-content-plugins-kk-star-ratings-js.min-2.5.1.js thì e nên lấy từ wp-contnet-plugins…. hay lấy từ wp-content/cache/….
WP Rocket cũng có tính năng async/ defer JS mà. Sao không dùng luôn. Trời đất. :P
tại thấy comment bên trên a bảo nên dùng theo cách này vì wp rocket không có tác dụng trên giao diện mobile (hoặc responsive) :P
e làm rồi: http://sv1.upsieutoc.com/2017/03/24/Untitledbae97.png
mà sao vào google speed test đo lại vẫn lỗi js không đồng bộ như cũ nhỉ. e xóa cache rồi mà ta @@
Tắt tính năng tối ưu JS, CSS của WP Rocket đi chưa?
e sợ lỗi giao diện nên không bật mấy cái đấy a ạ :P
Không bật sao có dòng “wp-content/cache/busting/1/wp-content-plugins-kk-star-ratings-js.min-2.5.1.js” ta? :P
e ko bật thật mà a: http://sv1.upsieutoc.com/2017/03/24/122a02.png
nếu như có bài viết nào của a mà không cần bật của wp rocket mà vẫn ra cái js như kia ấy thì chắc là do nó đó. e hay làm theo mấy bài sửa file của a nhưng mà e chả nhớ đã làm những cái gì nữa :P còn nếu không phải tại sửa gì thì e cũng chả biết là tại sao luôn :P
Em hỉu xíu ạ. Giờ site em nó chỉ còn báo cái này http://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C400italic%2C500%2C500italic%2C700%2C900%7COpen+Sans%3A300italic%2C400%2C400italic%2C600%2C600italic%2C700&ver=4.7.3
Vậy thì tải không đồng bộ nó bằng file funtions thế nào anh nhỉ ?. Áp dụng mẹo trên được chứ ạ ?
Đây là Google Fonts, không phải script hay stylesheet nên không áp dụng được đâu. :P
làm xong lỗi cả website bày tùm bậy
Parse error: syntax error, unexpected T_DEC in /home/saotrucv/public_html/saotrucdilinh.com/wp-content/themes/theshopier-child/functions.php on line 34
Mình không có nói là thủ thuật có thể áp dụng với mọi website bạn nhé. Web bạn lỗi vì bạn chèn code sai cách hoặc xung đột với plugin, theme. Web bạn lỗi không có nghĩa là người khác cũng lỗi. Bạn không biết cách đọc error_log để xem lỗi là do nguyên nhân gì, lại quay ra trách người viết thủ thuật. Nói như bạn thì chẳng có ai dám chia sẻ thủ thuật để cho mọi người đọc đâu. :P
Nếu dùng wp rocket rồi thì có cần thiết phải làm không anh Hiếu??
Nên làm. Vì thằng WP Rocket không có tác dụng trên giao diện mobile (hoặc responsive). :P
Dùng wp rocket như Hiếu hướng dẫn thì hết bị báo js, thế còn tối ưu hóa css thì vào đâu Hiếu nhỉ?
Cái này mình đang nghiên cứu. :D
Loại được hết lỗi js rồi mà GG nó không cho lên điểm nào, chấm điểm đắt ghê :P
Không khắt khe thì đâu phải Google. :P
Nếu dùng W3 Total Cache thì setting chỗ nào vậy bạn?
Mình không nhớ rõ. Lâu rồi không dùng W3 Total Cache. :D
Mình cũng đã thử cái này một lần, nhưng kết quả không được tốt lắm, vẫn bị báo là Eliminate render-blocking JavaScript and CSS in above-the-fold content. Nhưng mức độ nghiêm trọng thì được giảm xuống.
Chắc do còn nhiều file CSS chưa xử lý được. :P Nhưng asynchronous CSS thì dễ gây lỗi giao diện lắm. :P
Có cách nào để chuyển thông tin trong File Word or Excel or Access (Gồm ảnh và định dạng table) Lên website Wp không Anh Hiếu.
Em đang chờ sự giúp đỡ từ Anh Hiếu. Em đang cần gấp !
Thanks Hiếu nhiều nhiều
WordPress không hỗ trợ việc này đâu bạn ạ. :) Vì hình ảnh cần phải được upload lên host thì mới hiển thị online được. Bản thì có thể copy nhưng nhiều khi định dạng không đúng lắm. :P
Nếu dùng wp rocket thì cài đặt chỗ nào bác nhỉ. E có cái slide nó cứ bị lúc load đc lúc không, không biết là do js hay do xung đột gì nữa, cứ load 1 cái đc thì 1 cái trắng tinh
Trong Advanced Settings => JS files with deferred loading đó bạn. :P
Mình thêm URL tải không đồng bộ vào chỗ đấy đúng không Hiếu.
VD: Mình muốn tải không đồng bộ trang chủ thì mình thêm trang Home vào, các trang khác tương tự… ?
Không phải thêm URL của trang vào mà thêm URL của javascript vào bạn ạ. Bạn check các kiểu trang khác nhau trên site của bạn và copy URL của javascript có trên các kiểu trang đó rồi paste vào. :P
Hiếu ơi cụ thể là lấy URL của Jvscpt thế nào nhỉ? Lấy tất cả rồi cho vào ô đó Save lại à?
Bạn view source hoặc test bằng các công cụ kiểm tra tốc độ là sẽ thấy nhé. :P