Loại bỏ Emoji để tăng tốc độ load cho website WordPress

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' );</p>
<p>function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}</p>
<p>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. :)