Loại bỏ Emoji để tăng tốc độ load cho blog/ website WordPress.
Nếu bạn chưa biết thì Emoji chính là mã nguồn mở giúp hiển thị các icon cảm xúc trên internet nói chung và WordPress nói riêng. Emoji hỗ trợ hầu hết các nền tảng phổ biến, từ Windows, Android, Mac OS, iOS đến Linux… Đó là lý do tại sao nó xuất hiện ở khắp mọi nơi, từ tin nhắn trên điện thoại đến các dịch vụ chat, mạng xã hội, blog, website. Trên WordPress, Emoji chính thức có mặt kể từ phiên bản 4.2 và được duy trì cho đến bây giờ.
Tham khảo thêm:
- Làm sạch header của WordPress giúp website load nhanh hơn
- Hướng dẫn vô hiệu hóa Embed Script trong WordPress
Tại sao Emoji ảnh hưởng đến tốc độ load web?
Emoji giúp các bài viết, bình luận trở nên sinh động hơn, thể hiện được cảm xúc của người viết. Tuy nhiên, không phải trang web nào cũng cần dùng tới Emoji, đặc biệt là các website thương mại điện tử, web doanh nghiệp… Thêm vào đó, những icon này được load trực tiếp từ server của WordPress.org, chúng có kích thước thực khá lớn (chứ không phải nhỏ như bạn thấy hiển thị trên web), không được nén để tối ưu dung lượng nên làm tốc độ load web chậm đi kha khá. Dưới đây là đoạn code JS và CSS mà Emoji chèn vào mã nguồn HTML của WordPress:
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/wpcanban.bid\/wp-includes\/js\/wp-emoji-release.min.js"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script></p>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<p>Trong trường hợp bạn cảm thấy Emoji không thực sự cần thiết, tốt nhất là nên vô hiệu hóa nó đi để tiết kiệm một phần dung lượng HTML (page-size), giảm số lượng truy vấn HTTP, giúp blog/ website load nhanh hơn.
Loại bỏ Emoji giúp WordPress load nhanh hơn
Để loại bỏ hoàn toàn Emoji ra khỏi WordPress, các bạn chỉ cần chèn code sau đây vào file functions.php của theme hoặc child theme đang dùng:
//* Remove Emoji from WordPress
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
if ( 'dns-prefetch' == $relation_type ) {
$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
$urls = array_diff( $urls, array( $emoji_svg_url ) );
}
return $urls;
}Hoặc cài đặt và kích hoạt plugin Disable Emojis. Ngoài ra, các plugin tạo cache như WP Rocket và LiteSpeed Cache cũng đều được tích hợp sẵn tính năng này. Thật đơn giản và nhanh chóng phải không nào? Chúc các bạn thành công!
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. :)
Hình như mặc định của mình k có
chèn vô vẫn hiện emoji mới đau a ạ :(
Code mình đang dùng CHUẨN NHẤT, nhiều hơn wpcanban
function disable_emojis() {remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
Mấy dấu ‘ cậu thay bằng dấu ‘ trên bàn phím nha, bình luận trên đây nó bị lỗi :(
không biết là web mình bị cái bệnh gì. sài cái code của bạn rồi vẫn còn emoji luôn :(
Xem code này, còn nữa thì chịu :(
/*** Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
Đăng code thì đăng lên GitHub rồi paste link vào đây nha. Đừng paste trực tiếp như vậy, nó sẽ hiển thị không đầy đủ đâu. :P
Link code: https://pastebin.com/C4LqT00c
Lỗi “Không thể truy cập trang web này” bạn Nguyễn Thái Hiển ơi @@
Vậy thì chịu. Tôi dùng cho 5 theme, cả 5 cùng thành công mà :(
Anh Hiếu cho em hỏi thêm: Làm sao anh đưa code vào post mà nó lại hiện khung code của Github vậy ạ??
Bật module Shortcode Embeds của Jetpack lên. Paste code vào GistHub rồi lấy link chèn vào bài viết là nó sẽ hiện. :P
Em cảm ơn anh.
site mình dùng yoast bị lỗi sitemap, lỗi gì đây nhở ? http://diendan360.net/sitemap_index.xml
Vấn đề này nhiều khả năng là do plugin WP Super Cache. Nhưng bạn yên tâm, bots tìm kiếm vẫn có thể dọc dữ liệu bình thường, chỉ là nó bị lỗi giao diện thôi, hoàn toàn không ảnh hưởng gì. :P
hình như cái này nó làm lỗi Breadcrumb trên google, trên giao diện mobile có mà trên pc không có. :(
Mình nghĩ breadcrumbs thì không phải. Vì trước đây mình cũng từng xài WP Super Cache rồi. Bạn thử deactive xem sao. :P
Sitemap bị lỗi đúng là do wp super cache thật,
Tại sao admin lại xoá bình luận của tôi.. sợ hả..
Ủa. Mình xoá bình luận của bạn hồi nào nhỉ? Mà mình cũng chẳng biết là sợ cái gì ở bạn nữa? Mình chỉ xoá những bình luận vi phạm quy định của blog như sử dụng tên và email không tồn tại… thôi. Nếu trong số bình luận đó có của bạn thì vui lòng tuân thủ quy định bình luận để không bị xoá.
Nếu vậy các site wordpress nếu muốn tăng tốc thì nên dùng plugin này hả bạn, mình cũng mới cài nhưng thấy chỉ nhanh hơn dc xíu. :D
Mình có cài thêm cái plugin emoji, không dùng cái mặc định của wp thì chèn code này vào nó có disable luôn cái emoji của plugin ko Hiếu nhỉ?
Chắc là không. :)
Chèn vô phát Internal Error luôn anh ơi :|
Bạn chèn vào cuối file hay chèn ở đâu? Trong thư mục gốc có error_log gì không? :P
Ủa vậy bình thường mình không thêm Emoji vào bài viết thì nó có load không? Vì mình nghĩ mình không dùng thì nó không load thì đâu cần phải disable phải không Hiếu?
Load theo mặc định bạn nhé. Không chèn Emoji vào thì vẫn load bình thường, kể cả ở trang chủ và các trang archives. :P
Phát này về phải thử ms được. Thank b Hiếu nhé.
icon tuy nhỏ, 1 cái chẳng chiếm bao nhiêu tuy nhiên nó có rất nhiều. Nếu làm như chủ pic thực sự sẽ cải thiện đáng kể