Blog de guebs

Desarrollo web

Configura correctamente la opción Minify del plugin W3TC de WordPress

Aitor Ortuondo — 17 de marzo, 2014 @ 08:2819 comentarios

4 Flares 4 Flares ×

Hace unos meses publicamos una guía sobre como extraer el máximo rendimiento del plugin W3 Total Cache para WordPres, a pesar de que esa guía es bastante completa realmente solo explicamos como configurar las opciones más sencillas.

El plugin W3 Total Cache tienen opciones como el Minify, que son mucho más potentes de lo que podrían parecer y que apenas mencioné el en artículo original. Por tanto, he pensado que sería conveniente escribir esta nueva guía para ayudaros a optimizar el rendimiento de vuestro WordPress un poco más si cabe.

¿Que hace realmente la opción Minify?

La opción Minify de W3 Total Cache tiene 2 funciones principales: reducir el tamaño o peso de la página web y disminuir el número de archivos CSS y Javascript que se incluyen en la misma.

Activar y configurar la primera funcionalidad es bastante fácil, aunque también puede generar errores que hay que controlar. Por otro lado, la activación de la segunda opción no es fácil, ya que está algo oculto en las opciones de plugin y además puede ser problemático.

La estrategia de plugin para reducir el tamaño de la página web consiste en eliminar los espacios en blanco, saltos de linea y comentarios existentes en el código HTML de la página, así como en los archivos CSS y JavaScript. Puede no parecer algo relevante, pero en cuanto a optimización de rendimiento, cualquier mejora ayuda.

En cuanto a disminuir el número de archivos CSS y Javascript, lo que hace es unificar archivos. Es decir, une todos los archivos CSS incrustado en la página en un único archivo y hace lo mismo con los scripts Javascript.

¿Por qué ayuda unificar archivos?

Normalmente, una página web está compuesta por la propia página y otros muchos archivos que se incrustan en la misma: imágenes, archivos de estilo CSS y scripts de Javascript. Cuando accedes con tu navegador web a una web, primero te descargas el HTML de la propia página, tu navegador lo analiza y seguidamente empieza a descargar todos esos elementos incrustados en la misma.

Tu navegador hace una petición HTTP de tipo GET por cada uno de esos elementos incrustados y, generalmente, no te muestra absolutamente nada hasta que termina de descargar todos los archivos CSS y Javascript.

Como normal general, cuantas más peticiones haga tu navegador para poder visualizar una página, más tardará en mostrarte la página. Por tanto, una forma fácil de mejorar el rendimiento consiste en disminuir el número de peticiones que se hacen para descargar esos elementos incrustados.

La opción Minify del plugin te ayuda a disminuir el número de peticiones de archivos CSS y javascript, ya que ofrece la funcionalidad de unificar todos los archivos CSS en un único archivo, y lo mismo con los archivos Javascript.

Como configurar correctamente el Minify

1 – Activa el Minify en modo Manual

Ve a la página general settings y activa la funcionalidad del Minify, marcando las opciones tal y como se ve en la imagen:

wordpress-minify-1

2 – Activar el minify en HTML y XML

Ve a la página Minify del plugin y configura la sección HTML & XML tal y como se ve en la imagen:

wordpress-minify-2

Con esto lo que estas haciendo es eliminar todos los espacios en blanco, saltos de linea y comentarios innecesarios del código HTML de la página, así como del CSS incrustado de forma inline. En la siguiente imagen puedes ver el efecto que tiene sobre el código real de una página:

El antes y el después de activar el minify de HTML y XML

El antes y el después de activar el minify de HTML y XML

3 – Iniciar el asistente de ayuda para la unificación de archivos

Ahora toca lo más complicado, reducir al máximo el número de archivos CSS y Javascript, para ello tenemos que unificar todos los archivos que podamos. Es complicado porque hay que acertar con el orden correcto en el que los archivos CSS y Javascript actuales se introducen dentro del archivo unificado.

En el caso de CSS no es demasiado difícil, pero con Javascript la cosa se complica. Debes saber que hay diferentes combinaciones de orden correctas, pero que tienes que dar con alguna de ellas, ya que de lo contrario tu web no se mostrará correctamente o tendrá errores en Javascript.

Para empezar debes hacer click en el botón help ubicado en la parte superior de la página Minify del plugin, la que ves en la siguiente imagen:

W3TC unificar archivos CSS y Javascript

Al hacer click en dicho botón se te abrirá una ventanita donde encontrarás 2 listados de archivos. Por una parte, los archivos Javascript que se usan en la web y por otra los archivos CSS:

W3TC unificar archivos CSS y Javascript 2

Empecemos por configurar correctamente los archivos JavaScript. En el listado hay 3 columnas relevantes: Add, File URI y Template, podemos ignorar el resto. En cuanto al orden de los archivos, por el momento, no lo modifiques. Lo que tienes que hacer click en el checkbox de la columna Add para todos los archivos que en la columna Template tengan All templates seleccionado. Una vez hecho eso, con el resto de archivos debes mirar si son o no duplicados, si no lo son haces click en su checkbox correspondiente y le configuras All templates en la columna Template.

En la siguiente imagen puedes ver como en nuestro caso no hemos seleccionado algunos archivos porque eran duplicados:

W3TC unificar archivos CSS y Javascript 3

Una vez terminada la tarea con los archivos JavaScript debemos repetir el mismo proceso con los archivos CSS, es básicamente lo mismo, por tanto, no hay necesidad de dar más explicaciones.

Cuando hayamos terminado con los archivos CSS hacemos click en el botón Apply & close y la ventanita se cerrará. Ahora nos encontraremos en la página Minify del plugin, donde los apartados CSS y JS aparecerán los archivos que hemos seleccionado en el asistente. Para guardar la selección tenemos que hacer click en el botón Save all settings de la página.

4 – Verificar que la web se vea bien y no haya errores Javascript

Ahora que ya hemos configurado el Minify debemos comprobar que todo funcione correctamente en la web. Tenemos que comprobar 2 cosas: que el diseño de la web no se haya roto y que no haya errores Javascript.

Accede a la página publica de tu WordPress y abre la consola JavaScript, para ver si hay errores: Si estas usando Chrome abre el menu Ver, selecciona Opciones para desarrolladores y dale a Consola JavaScript. Si estas usando Firefox abre el menu Herramienta, selecciona Desarrollador web y pincha sobre Consola del navegador.

Una vez tienes la consola abierta, recarga alguna página de tu web y mira si salen errores en la consola. Si estas usando Chrome y si hubiera errores verías algo así:

WordPress errores Javascript

Si resulta que ves errores tendrás que volver a abrir el asistente de ayuda del Minify y cambiar el orden de los archivos Javascript.

4 Flares Twitter 0 Facebook 0 Google+ 0 Buffer 4 LinkedIn 0 Email -- 4 Flares ×

Etiquetas:

Sobre el autor de este artículo

Aitor Ortuondo es fundador de guebs, donde se dedica a hacer un poco de todo: atender a los clientes, desarrollar nuevas funcionalidades, escribir en este blog, supervisar la infraestructura técnica, comprar el cafe, ...

De vez en cuando publica algo en Twitter y .

Comentarios de los usuarios

  1. […] Reducir la cantidad de peticiones HTTP es una de las formas más simples para mejorar el rendimiento de tu web si usas WordPress, por lo que te interesa leerte esta entrada: Configura correctamente la opción Minify del plugin W3TC de WordPress – Blog deGuebs […]

  2. […] Actualización: Hemos publicado una nueva guía que explica como configurar el Minify, funcionalidad que apenas tratamos en está guía: Configura correctamente la opción Minify del plugin W3TC de WordPress […]

  3. Oscar dice:

    Hola Aitor,

    La verdad que eres un crack. Ahora mismo en mi web Page Speed me indica que debo:
    “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”. No sé si haciendo esto del Minify manual puedo evitarlo. Y en caso de que lo haga como indicas en este post, entiendo que deshabilitando el Minify si no se viese bien, volvería al estado inicial.

    Muchas gracias.
    Saludos.

  4. Hola Oscar

    Lo que te está sugiriendo hacer el Page Speed es algo complicado de llevar a cabo en una web cuyo código desconoces, ya que el hacerlo puede suponer “romper” algo.

    El Minify te permite hacerlo, ya que te permite decirle donde quieres que inserte el código Javascript. Lo que te sufiere PageSpeed se consigue seleccionando “Embed before ” en la columna “Embed Location”.

    Trás hacerlo navega por tu web en busca de errores. Si todo esta bien, perfecto. Si hay algún error, dejalo como estaba….

  5. Rafa dice:

    Hola Aitor, mira he seguido los pasos que indicas arriba, pero muchos iconos se me van despues de entrar en el help y hacer lo que decias, el javascript no me da ningun error, cuando vuelvo a darle a help y cambio algo, al darle a save all setings me dice que se han encontrado filas duplicadas, como podria arreglarlo? hay alguna forma de volver a dejarlo como estaba? Gracias de antemano 🙂

  6. Hola Rafa

    Creo que si vas a “General Settings” de plugin, desactivas el Minify y lo vuelves a activar en modo “Auto”, te dejará todo como lo tenías.

    La configuración óptima del Minify es en gran parte un prueba y error.

  7. mundocaco dice:

    Hay cosas que no sabía, muchas gracias por publicar lo que has aprendido 😉

  8. Beneet dice:

    Muy interesante tu artículo, a mi personalmente me gusta utilizar la extensión de PageSpeed para el Navegador Chrome. La verdad es que es muy fácil de utilizar y ofrece soluciones a la mayoría de problema que detecta en el sitio web.

  9. Gonza dice:

    Estupendo artículo, a ver si podéis actulizarlo con las últimas novedades:

    http://picnpost.marketing

  10. Johnnie dice:

    Hola, inicialmente quisiera darte las gracias, en el post pasado puse en práctica varios pasos que me sirvieron demasaido.

    En este caso me quedó claro casi todo el proceso, a ecepción de la última parte de donde dices:

    “Si resulta que ves errores tendrás que volver a abrir el asistente de ayuda del Minify y cambiar el orden de los archivos Javascript.”

    A qué te refieres con esto, en el asistente me tocaría mover y mover los aechivos hasta que por cuestiones de suerte logre dar con la combinación correcta?

    Te lo pregunto porque de ser así me sale casi imposible, son en total 19 .js y 14 .css. El número de combinaciones que podrían tener es demasiado alto.

    ¡Quedo atento!

  11. Jose dice:

    Hola Aitor Ortuondo, me ayudo bastante tu post la verdad que todo esto ignoraba y me hubiera costado bastante averiguarlo por mi cuenta pero Tengo la misma duda que Johnnie, de ser posible alguna recomendacion para tener en cuenta me ayudaria mucho.

  12. david dice:

    Gran tutorial, exactamente es lo que estaba usando y no sabía por donde empezar. AHora mismo tengo instalado el w3supercache e iba a instalar otro plugin para que hiciera el minify, pero viendo tu solución, mejor instalar el w3totalcache y ahorrarme un plugin. Gracias!
    Saludos

  13. Raul dice:

    Hola,

    Gran post. Podrias responder a la pregunta de Johnmie? A mi me.pasa algo.parecido, el minify rompe mi pagina si se carga con Explorer, pero va bien en Chrome. Desafortunadamente mucha gente usa Explorer asi q no puedo ignorarlo. Se supone q tengo q ir cambiando el orden de los js hasta dar con ello por casualidad? Hay algun truco para esto?

    Gracias

  14. luciano dice:

    Hola te paso a comentar mi situacion y agradezco este post EL MEJOR QUE VI POR LEJOS.

    Tengo configurado en W3 TOTAL CACHE MINIFY en automatico, y en FTP recibo en la carpeta CACHE/MINIFY muchos archivos CSS se ve que W3 TOTAL los manda para ahi, inlcluso archvios de 1 o 2 mb vi ahi.

    Al dar EMPTY CACHE en el plugin de W3 se borrra todo, hay alguna forma de que esto no pase osea que lo que descargue W3 a la carpetas CACHE/MINIFY se borre solo cada tanto tiempo ? un abrazo

  15. Pero qué buen artículo, hice todo paso a paso y mi sitio http://chavimendez.com se rompió jajajaj, ahora lo que haré como bien dices es probar a detalles cada una de las configuraciones para ver cuál es la que le sirve a mi sitio. Gracias y saludos! 🙂

  16. Hola, yo tengo un problema que no termino de solucionar, resulta que el plugin me bloquea el mapa que tiene que verse en la página de contacto y no se donde puedo controlar eso pues después de muchas pruebas no consigo que se vea.
    Muchas gracias y un saludo

  17. Hola Jose Antonio

    Te recomendaría usar el plugin Wp Fastest Cache en lugar del W3TC.

    El Fastest Cache es mucho más fácil de configurar y el resultado suele ser incluso mejor.

    Un saludo

  18. Chema dice:

    Lo primero, un super articulo… Muchas gracias mi web a mejorado muchisimo!!!

    Pero tengo un problema, en versión móvil me sale lo siguiente:

    Optimizar la entrega de CSS de estas URL:
    https://midominio.com/wp-content/cache/minify/7c85b.css

    Esto me está penalizando bastante, alguna idea?

    Gracias de antemano.

  19. Marina dice:

    Hola! Estoy teniendo el mismo problema wp-content/cache/minify/6×817.js

    Busque información pero no encuentro nada.

    Alguien tiene alguna idea??

Deja un comentario

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

Categorías

Etiquetas

.EUS concurso correo cpd Dominios guebs hosting logo marte mi@guebs mysql Nuevos gTLD passenger PHP rails Revendedor ruby Ruby on Rails Servidor Cloud Servidor Cloud Premium sh1 sh2 SH3 sh4 sh5 sh6 sh7 sh9 spam WordPress

Histórico

Sindicar

Puedes sindicar el contenido de este blog en tu lector de noticias usando alguna de las siguientes formas:

Ya es hora de disfrutar de un hosting de calidad

contrata ahora
España México Colombia Peru Ecuador Chile Europa Reino Unido Euskera
© Ekostat Informatica, S.L. - Aviso Legal
css.php
4 Flares Twitter 0 Facebook 0 Google+ 0 Buffer 4 LinkedIn 0 Email -- 4 Flares ×