Tắt Javascript Emoji Wordpress

Emojis được tích hợp vào WordPress từ phiên bản 4.2. WordPress khi tải trang sẽ kèm theo JS wp-emoji-release.min.js để hỗ trợ việc hiển thị các emoji. Việc này sẽ tăng thêm 1 HTTP request khi tải trang, về tổng thể gây ảnh hưởng đến tốc độ trang web.

Tắt Emoji WordPress — Hướng dẫn tắt Emoji WordPress để cải thiện hiệu suất trang web

Ngày nay, hầu hết các trình duyệt đều đã hỗ trợ hiển thị hầu hết Emoji, vậy nên việc tải kèm wp-emoji-release.min.js là dư thừa. Các trang WordPress chuyên nghiệp đều không còn sử dụng tệp Javascript này nữa, bài này Vietrick sẽ hướng dẫn tắt Emojis WordPress để cải thiện hiệu suất trang web.

Emoji là gì?

Emoji là các ký tự dạng hình ảnh, biểu tượng, con vật, đồ vật,… mô tả cảm xúc xuất hiện trong các tin nhắn hay trang web. Từ emoji có nguồn gốc từ Nhật bản, ban đầu có nghĩa là chữ tượng hình và thường được sử dụng trong các tin nhắn văn bản và sau này là mạng xã hội.

Ví dụ về emoji: 😎🎈🍕💖

Về mặt kỹ thuật, emoji được định nghĩa là 1 ký tự văn bản. Mỗi Emoji sẽ được lưu trữ với 1 mã Unicode khác nhau. Các thiết bị và trình duyệt đọc mã này, sau đó chuyển đổi thành hình ảnh tương ứng.

Các phần mềm khác nhau sẽ hiển thị đồ họa cho các Emoji khác nhau, vậy nên Emoji trên Android sẽ hiển thị khác Emoji trên iOS.

Bạn có thể tìm hiểu thêm về Emoji tại đây.

WordPress Emoji

Từ phiên bản 4.2, WordPress tải kèm wp-emoji-release.min.js — Từ phiên bản 4.2, WordPress tải kèm **wp-emoji-release.min.js**

Như đã đề cập ở trên, từ phiên bản 4.2 trở đi, WordPress có bổ sung thêm Javascript wp-includes/js/wp-emoji-release.min.js.

Một số đoạn mã sau cũng được thêm vào thẻ <head>.

	<script>
	window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72×72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/test.vietrick.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.1"}};
	/! This file is auto-generated /
	!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([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]);case"emoji":return!s([129777,127995,8205,129778,127999],[129777,127995,8203,129778,127999])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything\|\|(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source\|\|{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);
	</script>
	<style>
	img.wp-smiley,
	img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 0.07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
	}
	</style>

view raw wordpress-emojis-header.html hosted with ❤ by GitHub

Với việc chèn thêm đoạn Javascript này sẽ giúp WordPress đọc và hiển thị các emoji trên các thiết bị chưa hỗ trợ đầy đủ cho Emoji. Tuy nhiên, với các trình duyệt hiện đại ngày nay thì điều này là không cần thiết nữa.

Tắt Emoji WordPress

Hiện nay, hầu hết các thiết bị và trình duyệt đều đã hỗ trợ đầy đủ các Emoji phổ biến. Việc tải kèm JS để hỗ trợ hiển thị Emoji là dư thừa và nên được loại bỏ.

Có 2 cách để loại bỏ JS scripts Emoji wp-emoji-release.min.js ra khỏi trang WordPress. Bạn có thể thực hiện bằng cách sử dụng plugin hoặc thêm code:

Tắt Emoji WordPress bằng plugin

Một trong những cách đơn giản nhất để tắt Emoji của WordPress là sử dụng plugin Disable Emojis. Đây là một plugin miễn phí được phát triển bởi Ryan Hellyer.

Plugin này rất gọn nhẹ, chỉ có 9KB về mặt dụng lượng với hơn 70K lượt cài đặt. Plugin này đơn giản xóa bỏ Javascript emoji của WordPress. Các emoji mà bạn đang sử dụng vẫn hoạt động bình thường và được hỗ trợ mặc định bởi trình duyệt.

Ngoài ra, nếu các bạn sử dụng một số plugin tối như trang web như WP-Rocket thì tính năng này mặc định đã được kích hoạt.

Nếu các bạn sử dụng plugin LiteSpeed Cache thì có thể tìm thấy tùy chọn tắt emoji tại menu: Tối ưu trang > thẻ HTML Settings.

Tắt WP emojis trong plugin LightSpeed Cache — Tắt WordPress Emoji trong plugin **LightSpeed Cache**

Tắt Emoji WordPress bằng code

Nếu các bạn không thích sử dụng plugin thì có thể tắt Emoji WordPress bằng một vài dòng code đơn giản.

Lưu ý: Trước khi tiến hành chỉnh sửa, hãy sao lưu template mà bạn đang sử dụng.

Xem top 6 Plugin Backup WordPress tốt nhất.

Các bạn mở tệp functions.php trong theme đang dùng, sau đó chèn đoạn mã sau vào dưới cùng.

-/**
- @ Vietrick: Tắt Emoji 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' );
-/**
- * Tắt Emoji trong editor tinymce
- *
- */
-function disable_emojis_tinymce( $plugins ) {
- if ( is_array( $plugins ) ) {
- return array_diff( $plugins, array( 'wpemoji' ) );
- } else {
- return array();
- }
-}
-/**
- * Xóa CDN emoji
- */
-function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
- if ( 'dns-prefetch' == $relation_type ) {
- /** This filter is documented in wp-includes/formatting.php */
- $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;
-}

view raw remove-wordpress-emoji.php hosted with ❤ by GitHub

Quay lại kiểm tra các HTTP request, lúc này wp-emoji-release.min.js đã không còn được tải kèm trong trang.

Đọc thêm: Xóa Gutenberg CSS khỏi WordPress
Cách tạo mục lục WordPress không dùng plugin

Kết luận

Việc tắt Emoji trên WordPress là điều nên làm khi tính năng này đã trở nên lỗi thời. Các trình duyệt hiện đại ngày nay càng được tích hợp nhiều tính năng, người dùng càng được hưởng lợi. Emoji ngày nay đã trở nên quá phổ biến trên hầu hết các nền tảng mạng xã hội và trang web. Hy vọng trong tương lai tới, WordPress sẽ chấm dứt hỗ trợ Emoji bằng Javascript.

Tắt Javascript Emoji WordPress