Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
minify html

Reduce el HTML de tu WordPress para bajar el peso de la página

La parte pública de una web o expresado de otro modo, lo que el navegador pinta, no es más que un documento HTML, donde encontraremos etiquetas de todo tipo: imgs, links, sections, articles, headers, footers, etc… A grosso modo algo tipo:

Este es el HTML (he reducido algunas cosas) que pinta el tema twentyseventeen de WordPress basándonos en la instalación inicial, sin plugins y únicamente con la página de ejemplo y la entrada Hola Mundo. Físicamente ocupa 12.124 bytes. Vamos a ver qué podemos hacer para reducir el tamaño del HTML que se genera en la parte pública de un WordPress.

 

Limpiar el HTML de la cabecera de WordPress

En la cabecera <head> se cargan una serie de etiquetas como wlwmanifest, generator, emojis (script y css), etc… que probablemente no utilices y no hacen más que ocupar espacio y generar más peticiones http innecesarias. Podemos añadir una función en nuestro functions.php para limpiar la cabecera:

Nuestra cabecera pasaría de tener todo este código HTML:

A reducirse a esto:

El peso total del HTML se reduciría hasta los 9.171 bytes.

 

Limpiar las clases que no utilizamos en body, articles y menús

Podemos observar en varias etiquetas que WordPress pinta una serie de clases con el fin de darnos la opción de personalizar un template concreto, o un post, o incluso los post pertenecientes a una categoría o etiqueta, etc… Ejemplo:

Etiqueta <body>:

Etiquetas de menú (<ul><li>):

Etiqueta <article>:

Si no vas a utilizar estas clases para maquetar o dar estilo a partes de tu web, mejor elimínalas. Ojo, quizá te interese mantener algunas, en los ejemplos de abajo crearemos unas listas blancas.

Para eliminar las clases de la etiqueta body haremos uso del filtro body_class. Este filtro pinta una serie de clases en función de la plantilla en la que estemos (por ejemplo: home, error404, category…):

Lo mismo para las clases añadidas a los articles, pero en esta ocasión utilizando el filtro post_class:

También para los menús, utilizando el filtro nav_menu_css_class:

No es mucho pero hemos pasado de 9.171 bytes a 8.868 bytes. Recuerdo que es una instalación inicial básica, la ganancia sería mayor en un entorno real con más posts, más elementos de menú, etc…

 

Eliminar el parámetro de versión de los query strings

WordPress suele añadir a la URL de los archivos CSS y JS un parámetro al final con el número de la versión, por ejemplo: ?ver=4.7.4. Para eliminarlo bastará con añadir esta función:

En este ejemplo aparece en 10 ocasiones, eliminándolo conseguimos reducir el HTML a 8.775 bytes. Además, algunos analizadores de rendimiento como Pingdom Tools ó GT Metrix te recomiendan eliminarlos porque con cada cambio de versión la caché quedaría “anulada”, y el cliente tendría que descargarse de nuevo el recurso que probablemente sea el mismo.

 

Minificar el HTML para terminar

La mayoría de plugins de caché ofrecen la posibilidad de minificar el HTML. Minificar el HTML significa eliminar todos los espacios, tabulaciones, saltos de línea, comentarios, etc… quedando todo el HTML en una única línea, quedándote algo tan feo como la imagen de portada de esta entrada.

En nuestro ejemplo bajamos el peso hasta los 7.758 bytes. Desde los 12.124 bytes iniciales, todas estas acciones han supuesto una mejora de 4.366 bytes. No es mucho, pero hay que tener en cuenta que este ejemplo es única y exclusivamente con los contenidos generados en una instalación limpia de WordPress.

En la vida real, con plugins instalados y bastante más contenido la mejora puede ser de varios KB. Sigue siendo poca, pero aún con este ejemplo siempre cargarán más rápido 7,7 KB que 12,1 KB, aunque apenas sean unas milésimas imperceptibles para el ojo humano.

Estas técnicas hay que enfocarlas en el sentido de que son un granito de arena más que nos va a ayudar a tener un mejor rendimiento. Si en lugar de un plugin de caché, quieres aventurarte a hacerlo a mano y tener el control de cómo minificar el HTML, te invito a visitar este post de Manuel Canga donde explica cómo hacerlo.

Una reflexión para terminar: En listados de posts donde podemos mostrar los últimos 10 posts, si cada post tiene una imagen, un título, un enlace, un botón, un extracto, etc…y reducimos el listado a los 8 últimos, el HTML pintado no sólo será menor, la query es más rápida y también hay menos peticiones http por ejemplo a las imágenes, además de evitar la carga de estas dos imágenes en sí.

Puede que también te interese

Cómo evitar la actualización de plugins concretos en WordPress
Cómo evitar la actualización de plugins concretos en WordPress
Si has hecho desarrollos a medida en WordPress seguramente te has encontrado en alguna ocasión con la siguiente situación: Te han pedido un desarrollo en…
Elimina el campo URL de los comentarios nativos de WordPress
Elimina el campo URL de los comentarios nativos de WordPress
Por defecto WordPress incluye un sistema de comentarios para permitir que los usuarios que visiten tu página puedan comentar y/o aportar sus ideas o pensamientos.…
Autocomplete Off en el formulario de login al backend de WordPress
Autocomplete Off en el formulario de login al backend de WordPress
En ésta entrada vamos a ver cómo agregar la funcionalidad autocomplete=”off” para los campos de usuario y clave en el formulario de login al backend…
Porqué y cómo cambiar el permalink de Autor en WordPress
Porqué y cómo cambiar el permalink de Autor en WordPress
WordPress posee una estructura de enlaces amigables optimizada para el SEO. De este modo nos permite tener enlaces del tipo www.misitio.com/quienes-somos/ en lugar de www.misitio.com/?id=7.…