Отключение Emoji в WordPress.

В WordPress есть поддержка смайликов Emoji реализованная на уровне ядра и использующая библиотеку Twemoji от Twitter. Все это добро подключается прямо в шапку сайта js-скриптом, в задачу которого входит проверка вашего браузера на предмет поддержки Emoji и если таковой обнаружено не будет, то смайлики будут подгружены с сайта https://wordpress.org/.

Мало того, что шапка WordPress и так трещит по швам, от обилия стилей плагинов, шрифтов и прочих радостей жизни, так тут еще и это… Я специально сделал переносы текста, чтобы дать визуальное представление об объеме кода.

<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\
/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\
/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":
"https:\/\/techlist.top\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8"}};
!function(a,b,c){function d(a){var c,d,e,f,g,h=b.createElement("canvas"),
i=h.getContext&&h.getContext("2d"),j=String.fromCharCode;if(!i||!i.fillText)
return!1;switch(i.textBaseline="top",i.font="600 32px Arial",a)
{case"flag":return i.fillText(j(55356,56806,55356,56826),0,0),!(h.toDataURL()
.length<3e3)&&(i.clearRect(0,0,h.width,h.height),i.fillText
(j(55356,57331,65039,8205,55356,57096),0,0),c=h.toDataURL(),i.clearRect
(0,0,h.width,h.height),i.fillText(j(55356,57331,55356,57096),0,0),d=h.toDataURL()
,c!==d);case"diversity":return i.fillText(j(55356,57221),0,0),e=i.getImageData
(16,16,1,1).data,f=e[0]+","+e[1]+","+e[2]+","+e[3],i.fillText
(j(55356,57221,55356,57343),0,0),e=i.getImageData(16,16,1,1).data,g=e[0]+","+e
[1]+","+e[2]+","+e[3],f!==g;case"simple":return i.fillText(j(55357,56835),0,0)
,0!==i.getImageData(16,16,1,1).data[0];case"unicode8":return i.fillText
(j(55356,57135),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode9"
:return i.fillText(j(55358,56631),0,0),0!==i.getImageData(16,16,1,1).data[0]}
return!1}function e(a){var c=b.createElement("script");c.src=a,c.type=
"text/javascript",b.getElementsByTagName("head")[0].appendChild(c)
}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity","unicode9"),
c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)
c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports
[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=
c.supports.everythingExceptFlag&&c.supports[i[h]]);
c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!
c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},
c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?
(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1))
:(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function()
{"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e
(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}
(window,document,window._wpemojiSettings);
</script>
<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>

Все это тормозит загрузку страниц сайта, пусть незначительно, но тормозит. Мало того, еще и не предусматривает отключения за ненадобностью. Ну не все используют Emoji на своих сайтах, я вот не использую, но пользоваться  загружать вынужден, потому как мне их навязали.

Естественно что у некоторых пользователей WordPress появляется потребность в отключении Emoji. Поскольку просто так отключить не получается, то в природе существует два способа это сделать.

Первый, это отключение Emoji с помощью плагина Disable Emojis, ничего сложного, скачайте плагин, установите и включите.

Второй способ подразумевает правку файла functions.php вашей текущей темы оформления. Пользователю предлагается добавить следующий код в файл.

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

Код делает ровно то же, что и плагин. Как по мне, так данный код является частично выдранным из плагина, в нем отсутствует вот эта часть кода, отключающая подгрузку смайликов с CDN.

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.2.1/svg/' );

		$urls = array_diff( $urls, array( $emoji_svg_url ) );
	}

	return $urls;
}

Так что если собрать все в одном файле, то получим содержание плагина, разве что без комментариев разработчика.

На самом деле данный способ не очень хорош в использовании. Знающие люди рекомендуют не загромождать functions.php лишним кодом, да и после смены темы, файл придется править заново. Так что лучше просто поставить плагин.

Чтобы не быть голословным насчет влияния Emoji на скорость загрузки страниц сайта, я провел небольшой эксперимент. Первым делом я установил плагин (бесплатный). Потом измерил скорость загрузки страниц с Emoji и без, то есть с включенным и выключенным плагином.

Замерял скорость не один раз, а несколько, результат всегда был разный. Но с выключенными Emoji всегда было быстрее. Так что пусть разница и незначительная, но она есть.

Со включенными Emoji главная страница грузится за 678 ms и имеет оценку (Perfomance grade) равную 84, при загрузке страницы происходит 41 запрос.

С выключенными Emoji главная страница сайта грузится за 642 ms и имеет оценку (Perfomance grade) равную 85, при загрузке страницы происходит 40 запросов.

Это тот самый отсутствующий запрос - файл wp-emoji-release.min.js?ver=4.8, скрипт постоянно подгружающийся при запросе страниц сайта и весящий 5.1 kB.

Разница конечно смехотворная, но она есть всегда и говорит о том, что влияние Emoji на скорость загрузки страниц есть.

Можете попробовать сами, только выбирайте ближайший к вам сервер, там их всего четыре. Два в США, один в Австралии и один в Европе. Если ваш хостинг в Европе, то и выбирайте Европу, нет смысла тестировать сайт скажем из США. Например при выборе США время загрузки возрастает до 3 - 3.5 s, а про Австралию вообще молчу - 5.77 s.

Ответить:

Please enter your comment!
Please enter your name here