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.
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”.
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.
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.
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.
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.
Cargando…