WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
hosting-tot-nhat-danh-cho-wordpress

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

Trung Hiếu 33 Bình luận

Mục lục Hiện

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

loai-bo-emoji-giup-tang-toc-do-load-cho-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:

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

Theme Paradise đã được tích hợp sẵn tính năng này trong Appearance => Customize => Performance => Remove Emoji? nên các bạn chỉ cần truy cập và chuyển nó sang trạng thái Yes rồi lưu lại là được.

Để 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. :)

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Reader Interactions

Bình luận

    Để lại một bình luận

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

    • 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' );

      Bình luận

        • 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 :(

          Bình 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

          • Lỗi “Không thể truy cập trang web này” bạn Nguyễn Thái Hiển ơi @@

  4. site mình dùng yoast bị lỗi sitemap, lỗi gì đây nhở ? http://diendan360.net/sitemap_index.xml

    Bình luận

    • 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

      Bình luận

    • Ủ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á.

      Bình luận

  6. 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

    Bình luận

  7. 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ỉ?

    Bình luận

  9. Ủ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?

    Bình luận

    • 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ể

      Bình luận
1 2

Footer

Bài viết mới nhất

Bình luận mới nhất

Thống kê WP Căn bản

9 Chuyên mục - 999 Bài viết - 35.502 Bình luận