Entender la minimización HTML y usarla bajo WordPress

Publicado en Optimización web / WPO hace 10 meses. Leído 1104 veces.

imagen destacada

Seguro que ya sabes, que los navegadores, cuando escribimos una dirección web en ellos, solicitan de manera transparente el código de esa página web al servidor dónde está alojada. Una vez que llega la solicitud al servidor, un software( por ejemplo, WordPress ) genera el HTML, que es devuelto al navegador. El HTML es el código que contiene la estructura y los datos de la web, a veces también los estilos y su comportamiento.

El HTML, excepto raras ocasiones( por ejemplo, por el uso de programas cachés ), no sale de la nada, sino que se va fabricando poco a poco. Mientras se fabrica este código, puede darse uno de estos dos casos:

  • Vaciado de HTML: El código se va mandando al navegador a trozos durante su proceso de fabricación. Esto es muy bueno porque permite que el navegador vaya "entendiendo" la página para una vez que tenga todas las piezas montarla enseguida. Esta forma de trabajar es la que usa Google y recomienda. Sin embargo, tiene algunos peros:

  • Si cuando ya has mandado HTML, tú código intenta mandar una cookie. no podrá. Es el típico error que nos ha pasado a todos que se nos avisa de que la cookie no se ha podido enviar porque ya se ha mandado código HTML anteriormente y la más de las veces es porque se nos ha colado un espacio en blanco en algún lado. Por lo mismo, tampoco podrías hacer una redirección HTTP.

    • Si intentas hacer un tratamiento con todo el HTML completo, como puede ser cachearlo o minimizarlo, no podrás porque la zona de memoria dónde se guardaba se fue vaciando y ya no tienes el código HTML al completo.
    • Si durante el proceso de creación HTML se decide cambiar el HTML mandado( por ejemplo, porque se produjo un error y necesitas otra apariencia ), no podrás porque ya lo está procesando el navegador.
  • Suspendido de HTML: El código HTML no se mandará al navegador hasta que esté totalmente formado. Por lo tanto, si alguna parte se demora( por ejemplo, porque se ha de realizar una búsqueda compleja contra la base de datos ), toda la carga de la web se demorará. Sin embargo, al esperar hasta el último momento para mandarlo también podremos realizar un tratamiento al HTML resultante. En este post usaremos esta modadlidad para minimizar el HTML, que conllevará que pese menos y, por tanto, consuma menos tarifa de datos del usuario, menos ancho de banda del servidor y, a veces, incluso sea más rápida la carga de la web que usando el módo vaciado.

Ahora pondré el código del plugin WPO de minimización, en el que me apoyaré para hacer la explicación. Aunque no tengas conocimiento de PHP no te asuste, debería de ser fácil de seguir con la explicación. Puedes copiarlo y pegarlo en un archivo llamado "minimiza_html.php"( o descargarlo ) y colocarlo en la carpeta plugins, dentro de la carpeta wp-content de tu alojamiento con WordPress.

Desde la línea 4 a la 8 se definen unos apodos para facilitar la comprensión de todo el restante código. ( no hace falta entenderlos ).

Desde la línea 10 a la 18 están los códigos que proporciona información a WordPress sobre el plugin. ( no hace falta entenderlos ).

En la línea 21, avisamos a WordPress de que queremos hacer una operación para cuando los plugins y el tema esten cargados. Esa operación, línea 24, es la de mandarle que empiece a guardar todo el HTML nuevo que se vaya creando y, cuándo se termine de generarse del todo, que haga la operación de minimizar.

En la operación de minimizar( desde línea 27 a 34 ), lo que hacemos es buscar( los saltos de líneas, comentarios que hayan escrito los desarrolladores y más de dos espacios en blanco ) y reemplazar(por un único espacio en blanco) en todo el HTML generado por WordPress.

Con eso ya hemos conseguidos minimizar toda nuestra página. Bastaría con ir a la portada de nuestra web y en las opciones del navegador seleccionar 'ver código fuente'. Si el plugin ha hecho bien su trabajo todo el HTML estará en una misma línea.

Plugins más avanzados añaden más criterios de filtrado que los tres que yo he añadido. Sin embargo, por cada nueva opción de filtrado, más tiempo dura este y, por tanto, más lenta es la carga de la web. Por lo que hay que buscar un equilibrio prudente, por ejemplo, el propuesto en este plugin.

Espero que te haya gustado, si tienes alguna duda déjala en los comentarios. Si te ha gustado, comparte en las redes sociales para que otros también se beneficien de este plugin.


También te puede interesar leer: Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS

2 comentarios

Da un error en la linea 29 en $a_quitar = [ SALTOS_DE_LINEAS, COMENTARIOS_DE_DESARROLLADORES, MAS_DE_DOS_ESPACIOS_EN_BLANCO ];

no reconoce los DEFINE declarados en las primeras lineas. Voy a echar un vistazo mas profundo al codigo. Veas a ver tu como autor si te das cuenta donde esta el error. El primer vistazo que le he echado parece estar bien todo, pero ya sabes en esta profesión y en PHP en concreto un ; puede romper un script entero. Gracias por el aporte

Hola, Paul, Me parece muy raro que te de problemas porque lo tengo en una web funcionando. ¿ Podrías copiar y pegar el mensaje de error ?.

Gracias Un saludo

Deja un comentario

Puedes usar Markdown para formatear tu comentario.

Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.