Solucionar problemas con la optimización de ficheros

Entonces, has activado una o más opciones para minificar o combinar los ficheros, suprimir los query strings, o evitar los CSS/JS que bloquean la visualización, y ahora tu sitio está roto? ¿Ves elementos de la pagina que no están donde deberían? ¿Enalces o módulos que no funcionan?

Aquí te presentamos una lista de pasos a seguir para solucionar el problema:

1. ¡Desactiva todas las opciones!

Seriamente, hazlo. Desmarca todas las opciones para minificar o combinar los ficheros, suprimir los query strings, cargar archivos de manera asíncrona, y guarda las modificaciones. Tus páginas seguirán cargando (casi) a la misma velocidad que antes y tu sitio web volverá a ser tan bello como era antes.

¡Atención! Si el problema NO ha desaparecido después esta acción, significa que está causado por algo distinto, la optimización de ficheros no es responsable y no hace falta que sigas con este tutorial.

2. Primera ayuda

¡Asegúrate de haber desactivado antes que todo la opción “Suprimir query strings”!

La opción para suprimir los query strings altera los URIs, pero en este momento necesitas los URIs originales para entender cuál es la causa del problema. Asegúrate por lo tanto de desactivar esta opción antes de continuar.

¿Cuál opción está causando el problema, exactamente?

Vuelve a activar las opciones una después de la otra y verifica tu sitio web después de cada fase. Una vez que el problema reaparezca, sabrás cuál opción lo ha causado. Ahora puedes mantener esa opción desactivada o seguir leyendo.

¿En este momento, tu sitio web muestra una página de “coming soon” a los visitantes?

En caso afirmativo, la optimización de ficheros no puede funcionar. Tendrás que configurar las opciones para la optimización de ficheros solo cuando tu sitio será accesible a todos, también a los usuarios no conectados a una cuenta WordPress.

¿La minificación está funcionando?

En este artículo estamos asumiendo que el proceso técnico de optimización de ficheros (ej. la generación de los archivos minificados) funcione normalmente. Si esto no está pasando, por ejemplo no ves ningún archivo minificado en tu servidor, lee este documento:
Las páginas no se copian en la caché / La Minificación JS y CSS no funciona

¡Aprende las bases para interpretar correctamente “PageSpeed”!
Antes de que continúes, te recomendamos encarecidamente de aprender a interpretar las “notas de rendimiento” producidas por Google PageSpeed Insights, GT Metrix y otras herramientas. Lee estos 2 artículos antes de seguir con este tutorial:
Google Page Speed Grade does not improve
How to correctly measure your website’s page load time

Saltar este paso puede resultar en un gasto de tiempo, energía y hasta dinero.

3. Solucionar el problema

Hasta ahora, has completado los siguientes pasos:

  • Has excluido otras posibles causas para tu problema.
  • Sabes exactamente cuáles opciones están creando el problema.
  • Has decidido solucionar el problema en vez de dejar desactivadas las opciones responsables.

¡Seguimos entonces!

Estamos asumiendo que tiene una idea por lo menos básica sobre estos conceptos:

  • qué es la “minificación”;
  • qué es la “concatenación”;
  • qué es un “documento HTML” y cómo leerlo (por lo menos en general);
  • qué es el “URI de un fichero” y cómo encontrarlo en el navegador;
  • qué son las “herramientas para el desarrollo” (o “dev tools”) en Chrome o Firefox browser, y cómo abrirlos.

¿Deberías estar haciendo esto? Si uno o más de los términos indicados arriba son completamente desconocidos para ti, probablemente no eres la persona que debería preocuparse de solucionar el problema, a menos que no tengas las voluntad de aprender algunos de los aspectos más técnicos del funcionamiento de un sitio web.
Ninguno de los puntos cubiertos en este artículo son obligatorios para obtener un sitio web más rápido. Sin embargo, si eliges seguir adelante con la lectura, asegúrate de tener el conocimiento técnico necesario.

Minificar HTML

  • Puede reducir el tamaño de la pagina.
  • Elimina todas (o casi) las interrupciones de línea y todos los espacios no necesarios en el documento HTML.
  • ⚠️ En algunos casos, puede también ocasionar la eliminación de los comentarios CDATA
  • En caso de que notes cualquier problema con Google Analytics o cualquier otro script que use comentarios CDATA en el código fuente, intenta desactivar la minificación HTML para solucionar el problema.

Minificar CSS/JS

  • Puede reducir el tamaño de la pagina.
  • Elimina todas (o casi) las interrupciones de línea y todos los espacios no necesarios en los archivos CSS o JavaScript.
  • No se conocen otros problemas de carácter general.
  • Puedes excluir unos URIs específicos del proceso de minificación/combinación copiando y pegando los URI en los campos de exclusión de los reglajes WP Rocket.
  • Si necesitas excluir unos ficheros, asegúrate de excluir los URIs originales, no los generados por WP Rocket! El URI del fichero que ingresarás en el campo de exclusión no tiene que contener “/cache/min” o “/cache/busting”.

Combinar CSS/JS

  • Puede reducir el número de peticiones HTTP.
  • Combina todos los archivos CSS y JavaScript en el menor número de archivos posible.
  • ⚠️ Puede causar problemas cuando los temas/plugins no han definido las dependencias correctas para los ficheros en cola o las hojas de estilo.
  • ⚠️ Aún con más probabilidad, puede causar problemas si usas la sub-opción “Combinar todos los archivos en el menor número de archivos posible”.
  • Puedes excluir unos URIs específicos del proceso de minificación/combinación copiando y pegando los URI en los campos de exclusión de los reglajes WP Rocket.
  • Si necesitas excluir unos ficheros, asegúrate de excluir los URIs originales, no los generados por WP Rocket! El URI del fichero que ingresarás en el campo de exclusión no tiene que contener “/cache/min” o “/cache/busting”.
  • Sigue este tutorial para encontrar los URIs que necesitas excluir:
    Cómo identificar los archivos JS a excluir de la minificación

¡Atención! Es posible que tu sitio web esté cargando recursos de servicios externos. Esos recursos no se pueden combinar pero podrían ser movidos encima del documento HTML. Para prevenir cualquier problema debidos a los JavaScript externos, te aconsejamos excluirlos del proceso como indicado aquí:
Excluir de la minificación un archivo JS externo

Suprimir query strings

  • Puede mejorar las notas de rendimiento (aunque sea solo aparencia).
  • Suprime de los URIs el parámetro de la query WordPress “?ver”, y lo codifica dentro del nombre del fichero, almacenando el nuevo archivo en una carpeta dedicada del directorio de la caché (“/cache/busting”)
  • Puedes excluir URIs específicos de este proceso usando este pequeño plugin:
    Excluir archivos de la opción Recursos Estáticos

CSS/JS que bloquean la visualización

  • Puede mejorar las notas de rendimiento y el tiempo de carga.
  • Reduce el número de las peticiones HTTP iniciales.
  • ⚠️ Puede causar varios problemas si no se usa correctamente. Asegúrate de leer este artículo al respecto:
    JavaScript y CSS que bloquean la visualización - PageSpeed
  • Requiere un conocimiento avanzado de desarrollo web. Los recursos que bloquean la visualización pueden variar en cada pagina de tu sitio web. Entonces hacer funcionar esta función puede ser una tarea bastante complicada y el resultado no siempre es un tiempo de carga más rápido. Evitar de usar esta opción puede ser la elección más acertada a menos que no te ocupes profesionalmente de desarrollo web y sepas ya cómo manejar los recursos que bloquean la visualización.