WordPress – Minificar recursos HTML, CSS y JS en 1 minuto


plugin wordpress minificar html css y js

Como ya bien sabréis el tamaño de los archivos así como la cantidad afecta directamente a la velocidad de carga de nuestro sitio. Son muchas las acciones que podemos tomar para reducir ese impacto, pero sin duda una de las mejores es minificar recursos como el HTML, CSS y JavaScript.

En WordPress existe una buena variedad de plugins gratuitos que nos pueden ayudar, pero personalmente voy a utilizar Autoptimize porque en mi opinión es el mejor.

¡Advertencia! Recordad crear un backup para arreglar posibles problemas. Es muy común que plugins de este tipo corrompan el código destrozando el sitio web.

Indice de contenidos


Instalación y configuración previa

El plugin Autoptimize se puede descargar desde el panel de control de WordPress o directamente  desde su página web. La instalación también se realiza como la de cualquier otro plugin.

Una vez instalado sólo resta ir a Ajustes y entrar a su sección para comenzar a configurar el plugin. Lo primero será activar las opciones avanzadas haciendo click sobre el botón “Show advanced settings”.


minificar plugin wordpress

HTML

La configuración para el HTML es muy sencilla, simplemente hay que marcar la opción “Optimize HTML Code?” para que optimice el código HTML.

Si queréis que se mantengan los comentarios que tienen el código HTML podéis marcar la segunda opción, pero yo personalmente no le veo mucha utilidad.

minificar html css js wordpress

JavaScript

De nuevo llegamos a un apartado muy simple donde por lo general sólo hay que marcar la opción “Optimize JavaScript Code?” para que minifique los JS.

También se puede marcar la opción “Force JavaScript in <head>?” para que se incluya los JS en la cabecera y se solucionen algunos problemas, pero suele provocar render-blocking. Mi recomendación es no marcarlo y si la página web presenta problemas probar a marcarlo.


Con respecto a “Also aggregate inline JS?” más de lo mismo, es una posible solución a problemas a cambio de utilizar JS inline.

minificar javascript js wordpress

CSS

Una vez más marcamos la primera opción, “Optimize CSS Code?”, para minificar el CSS. A su vez recomiendo marcar también la segunda opción “Generate data: URIs for images?” para “combinar” los backgrounds que pueda tener la web.

Si queréis eliminar las Google Fonts porque dan problemas lo tenéis tan fácil como marcar la segunda opción. No son un problema grande, pero tienen que descargarse cada vez que carga la web y eso afecta a la velocidad.

Todas las opciones de inline CSS pueden ser utilizadas para solucionar problemas de render-blocking, pero hacerlo afecta al rendimiento así como puede causar problemas relacionados con bloqueo de objetos.

autoptimize minify html css js

CDN

Simple y llanamente añadid la URL base de vuestro CDN. Si usais Cloudflare, como yo, no es necesario que hagáis aquí nada ya que no es un CDN.



¿Qué te ha parecido el contenido?

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas
Ha habido 4 votos con una media de 5,00 sobre 5
Cargando…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.