no-emojis - Carlos González Gurrea

Velocidad de carga vs Emojis

Corría el año 2015 cuando WordPress decidió aportar su granito de arena con los Emojis, a día de hoy todo el mundo sabe lo que son pero en aquella época parecía que quedaba bien a todo el mundo, la versión 4.2 de WordPress traía los Emojis instalados por defecto. J = 🙂

Con la lucha de la velocidad de carga de mi página y de la página de clientes, decidí investigar y empecé a navegar por internet en busca de respuestas, mi página con la versión anterior de WordPress llegaba a tardar casi u segundo menos de carga. Este tiempo, aunque parezca un solo segundo es bastante tiempo a la hora de cargar cada una de mis páginas.

Yo no soy partidario de los Emojis, puede que para alguna conversación privada de Telegram, Whatsapp, pero en las páginas de clientes, Web corporativas, Landing page o blogs personales, no lo veo necesario. Además si me incrementa el tiempo de carga en 1 segundo hace que todavía me haga más partidario de eliminarlo.

El código que se genera en nuestro HTML, si mirais vuestra página será similar a este

	<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:\/\/www.carlosgonzalezgurrea.es\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.5"}};
			!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>
		<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>

Visto lo visto, para desactivarlo solo tenemos que añadir una función en tu tema que evite la carga de los Emojis, y se así evitaremos cargar código innecesario para nuestro blog o web en la que trabajamos.

Para ello abrir vuestro archivo functions.php y añadir estas líneas

/**
 * 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_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();
	}
}

Con esto hemos conseguido hacer desaparecer los Emojis y con ello hemos restado tiempo de carga de nuestra web.

Además de hacerlo de forma manual, tenéis varias opciones para no tocar vosotros ningún archivo. Os dejo 2 plugins que os harán la misma función que os he comentado anteriormente.

Cualquiera de los dos, os hará el mismo servicio.

Un saludo a todos.

Velocidad de carga vs Emojis Modificado: mayo 18th, 2018 por Carlos González Gurrea
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando...

Centro de preferencias de privacidad

    Almacenamiento y acceso a información

    El almacenamiento de información o el acceso a información ya almacenada en tu dispositivo como identificadores de publicidad, identificadores de dispositivo, cookies y tecnologías similares.

    google.com

    Personalización

    La recopilación y procesado de información sobre tu uso de este servicio para posteriormente personalizar la publicidad y/o el contenido para ti en otros contextos, como otras webs o apps, con el tiempo. Habitualmente el contenido de la web o la app se usa para hacer deducciones sobre lo que te interesa, lo que define la selección futura de publicidad y/o contenido.

    google.com

    Selección de anuncios, entrega, informes

    La recopilación de información y la combinación con información anteriormente recopilada para seleccionar y presentarte publicidad y para medir la entrega y efectividad de esa publicidad. Esto incluye usar información recopilada anteriormente sobre tus intereses para seleccionar anuncios, procesar datos sobre qué anuncios se mostraron, con qué frecuencia se mostraron, cuando y dónde se mostraron y si llevaste a cabo alguna acción relacionada con el anuncio, como por ejemplo hacer clic en un anuncio o hacer una compra. Esto no incluye la personalización, que es la recopilación y procesado de información sobre el uso que haces de este servicio para posteriormente personalizar publicidad y/o otros contenidos para ti en otros contextos, como webs o apps, con el tiempo.

    google.com

    Selecciones de contenido, entrega, informes

    La recopilación de información y combinación con información previamente recopilada para seleccionar y presentarte contenido y para medir la entrega y efectividad de ese contenido. Esto incluye el uso de información recopilada anteriormente sobre tus intereses para seleccionar contenido, procesar datos sobre qué contenido se mostró, con qué frecuencia o durante cuánto tiempo se mostró, dónde y cuándo se mostró y si llevaste a cabo alguna acción relacionada con el contenido, como por ejemplo hacer clic en contenido. Esto no incluye la personalización, que es la recopilación y procesado de información sobre el uso que haces de este servicio para posteriormente personalizar contenido y/o publicidad para ti en otros contextos, como webs o apps, con el tiempo.

    google.com