Como eliminar código HTML innecesario en WordPress

Los que hemos observado el código fuente de cualquier página de nuestro blog en WordPress, nos daremos cuenta del exceso de código HTML de cualquiera de ellas.
Tomo de ejemplo este blog que usa la plantilla Twenty Seventeen, una de las oficiales, sin ningún plugin instalado.
En la medida que instale algunos de ellos, la cantidad de código y el tamaño de las páginas crecerán inevitablemente.
En este artículo comparto como he eliminado en este blog parte del código HTML obsoleto o sin usar, para lograr que las paginas sean más ligeras y el sitio más eficiente.

Código sin utilidad en las páginas de WordPress

Todo el exceso de código en WordPress tiene una razón.
Su causa es permitir incluir opciones y recursos adicionales y mantener la compatibilidad con navegadores, lectores y plugins antiguos.
No obstante en nuestro caso podemos gradualmente simplificar el HTML e ir eliminado lo que no sea necesario.
Antes de comenzar esta tarea, el promedio de tamaño de las páginas de este sitio era de más de 70 KB.
Después de realizar las acciones que comparto en el post, este tamaño se redujo hasta un promedio de 30 KB.

¿Cómo eliminar el código HTML innecesario?

Para realizar estas acciones necesitamos introducir las instrucciones que comparto en cada caso, en un plugin personal o en el archivo “functions.php”, situado en la carpeta Child del tema activo.
Si aún no la has credo lee en un artículo anterior como hacerlo.
El método es completamente reversible.
Si se desea restituir el código eliminado en otro momento, solo basta con retirar las instrucciones introducidas.

Eliminar código SVG innecesario de WordPress

En las versiones recientes de WordPress las plantillas oficiales incluyen en el pie de página gran cantidad de código SVG.
Permite activar iconos o imágenes en este formato para las redes sociales o para otros usos.
Los que no utilicen esta función pueden eliminar todo este código, que consume más del 30% del peso de la página, sin afectación alguna.
Para lograrlo introduce en uno de los archivos mencionados anteriormente, las siguientes instrucciones:

// Eliminar codigo SVG del HTML
function remove_parent_svg_icons()
    {
        remove_action('wp_footer', 'twentyseventeen_include_svg_icons', 9999);
    }
add_action('after_setup_theme', 'remove_parent_svg_icons');

Después de hacerlo comprueba mediante el navegador el código fuente y verifica la reducción en el tamaño de la página.

Eliminar código innecesario del encabezado (head)

Suprimir metaetiquetas innecesarias del área del encabezado o head, es una tarea que aporta muchas mejoras en el rendimiento.
Se pueden eliminar perfectamente las siguientes etiquetas, las que para muchos de nosotros son totalmente inútiles.
Lee detalladamente en cada caso su función antes de desactivarlas.

Eliminar etiquetas del feed RSS

Los que no les interese hacer mención al feed RSS del blog, pueden eliminar las etiquetas de enlaces en el head.
Esto no afecta en lo absoluto esta función.
Contienen información del feed para los navegadores que las muestran como Firefox en el cuadro “Herramientas -> Información de la página”.
Son como las siguientes:
<link rel="alternate" type="application/rss+xml" title="Notas para la web " href="https://norfipc.com/blog/feed/"/>
<link rel="alternate" type="application/rss+xml" title="Notas para la web" href="https://norfipc.com/blog/comments/feed/"/>

Para eliminarlas usa las siguientes instrucciones, de la misma forma anterior:

//Eliminar feed links head
remove_action( 'wp_head', 'feed_links', 2 );
remove_action('wp_head', 'feed_links_extra', 3 );

Si solo necesitas eliminar la referencia al feed de los comentarios, entonces usa la siguiente instrucción:

// Elimina la etiqueta del feed de los comentarios del HEAD
add_filter( 'feed_links_show_comments_feed', '__return_false' );

Eliminar enlaces RSD

Etiqueta requerida para publicar en WordPress usando herramientas de terceros, con clientes que usan XML-RPC.
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://norfipc.com/blog/xmlrpc.php?rsd"/>
Elimínala con las siguientes líneas:

//Eliminar etiqueta RSD head
remove_action ('wp_head', 'rsd_link');

Eliminar número de versión de WordPress

Etiqueta con ninguna utilidad que indica la versión exacta instalada de WordPress.
<meta name="generator" content="WordPress 4.9.8" /> Y <meta name="generator" content="WooCommerce x.x.x"/>
Para eliminarla:

// Eliminar etiqueta WP version Generator WP
remove_action('wp_head', 'wp_generator');

Eliminar etiqueta wlwmanifest

Etiqueta creada para Windows Live Writer, antiguo programa de publicación en Windows.
Si no lo usas es innecesaria.
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://norfipc.com/blog/wp-includes/wlwmanifest.xml"/>
Para eliminarla usa:

// Eliminar link wlwmanifest head
remove_action( 'wp_head', 'wlwmanifest_link');

Eliminar etiqueta shortlink

Etiqueta con el enlace a la dirección de la página, usando su número de identidad.
Es totalmente innecesaria.
<link rel='shortlink' href='https://norfipc.com/blog/?p=224'/>
Para eliminarla usa:

//Eliminar shortlink head
remove_action( 'wp_head', 'wp_shortlink_wp_head');

Eliminar enlaces previo y siguiente

Links prev y next que indican la publicación anterior y la siguiente.
Pueden ser de utilidad en algunos lectores.
<link rel='prev' title='Agregar el cuadro de búsqueda de Google en WordPress' href='https://norfipc.com/blog/agregar-cuadro-busqueda-google-wordpress/' />
<link rel='next' title='Seleccionar y compartir frases o texto en la computadora y el móvil' href='https://norfipc.com/blog/seleccionar-compartir-frases-texto-computadora-movil/' />
Para eliminarlos usa:

// Eliminar enlaces prev y next	head
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

 

Eliminar soporte de emoticonos y emoji

Para eliminar los scripts y estilos inyectados de forma obligatoria en nuestro tema, usa las siguientes instrucciones:

// Eliminar WP EMOJI head
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Eliminar links de dns-prefetch en el head

Algunas etiquetas innecesarias son agregadas en los temas de WordPress desde la versión 4.6, para facilitar y acelerar la conexión a servidores externos, desde donde se pueden descargar recursos externos.
Es la función llamada “Resource Hints”.
Algunas de ellas pueden ser las siguientes:
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
<link rel='dns-prefetch' href='//maps.google.com'>
<link rel='dns-prefetch' href='//s.w.org' />
Las dos primeras son de Fuentes de Google, la tercera de Google Maps y la cuarta está relacionado con los Emojis de WordPress.
Las usemos o no, todas las podemos eliminar, porque en conexiones HTPPS para que funcione “dns-prefetch”, es necesario agregar la siguiente metaetiqueta adicional:
<meta http-equiv="x-dns-prefetch-control" content="on">
Para eliminar solo la etiqueta etiqueta “dns-prefetch” de “s.w.org” usa:

//Eliminar solo etiqueta dns-prefetch s.w.org
add_filter( 'emoji_svg_url', '__return_false' );

Para eliminar todas las etiquetas de Resource Hints usa:

//Eliminar todas las etiquetas de Resource Hints
remove_action( 'wp_head', 'wp_resource_hints', 2 );

Funciones de otras etiquetas en el HEAD

Etiquetas de oEmbed (objetos embebidos)

Existen otras dos etiquetas en el área del encabezado del tipo “application/json+oembed” y “text/xml+oembed”.
Ambas son usadas para la funcionalidad “oEmbed”, que permite embeber o insertar contenido de nuestro blog en forma de marcos, en otros sitios de internet.
Se pueden desactivar, pero no vale la pena.
Lee más información detallada: Contenido embebido automático en WordPress

Etiqueta de WP REST API

La etiqueta con la propiedad rel=’https://api.w.org/’ situada en el encabezado, conduce a la página de WordPress REST API.
La REST API implementada desde la versión 4.4, es una funcionalidad de utilidad para desarrolladores.
Almacena en un archivo JSON información de nuestro blog para realizar llamadas a la API.
Se puede comprobar usando el enlace: “https://nombreblog.com/wp-json/”
Aunque no es de ningún interés para la gran mayoría de administradores, desde la versión 4,7 no se puede deshabilitar, solo es posible bloquear su acceso público.
Esto se puede realizar agregando a “functions.php” las siguientes instrucciones.

add_filter( 'rest_authentication_errors', function( $result ) {
    if ( ! empty( $result ) ) {
        return $result;
    }
    if ( ! is_user_logged_in() ) {
        return new WP_Error( 'rest_not_logged_in', 'Usted no esta autentificado en.', array( 'status' => 401 ) );
    }
    return $result;
});

Más información en WordPress.
El link en el head y los datos en los headers (encabezados HTML), se pueden eliminar fácilmente con las siguientes instrucciones.

// Eliminar REST API del head y headers
remove_action( 'xmlrpc_rsd_apis', 'rest_output_rsd' );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
remove_action( 'template_redirect', 'rest_output_link_header', 11 );

Otras opciones para reducir el tamaño de las páginas en WordPress

De forma adicional se puede eliminar muchos otros elementos, sin poner el peligro la estabilidad del blog.
Depende de la plantilla o tema instalado y de las funciones de las que se desee prescindir.
Cada cual debe analizar el código fuente que contiene sus páginas y editar manualmente las plantillas que usa WordPress para construirlas, como son los archivos “header.php”, “single.php”, “footer.php” y otros.
Una de las ventajas de usar este CMS es que podemos personalizar y optimizar completamente nuestro sitio gradualmente.

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales