Cómo configurar W3 Total Cache para optimizar tu blog
Con W3 Total Cache la velocidad de respuesta de tu blog mejorará considerablemente, esto lo he descubierto después que Google penalizó uno de mis blogs, descendiendo el tráfico al 30%, por lo que he estado más atento de todo lo que me dice Google Webmastertools.
W3 Total Cache es uno de muchos plugins para wordpress que mejoran la velocidad de respuesta, pero he de decir que se puede personalizar tanto que considero que no tiene competencia. En el caso particular de éste blog, lo evalué antes de implementar éste plugin, con una extensión de Google llamada Page Speed que funciona con Firebug en Firefox y obtuvo 70/100 pts. Después de implementarlo y mejorar pequeños detalles, llegó a una puntuación de 92/100.
Me encontré varias guías por la red y el resultado de mi configuración es la siguiente:
0. Prerequisitos
Eliminar cualquier plugin de Cache que hallan instalado previamente. Explora tus carpetas en el sevidor y asegurate que tu wp-config.php no contenga la linea
define(‘WP_CACHE’, true);
Dirígete a la carpeta /wp-content/ y elimina todos los archivos que encuentres acerca de cache como por ejemplo
advanced-cache.php, wp-cache-config.php, etc.
1. Instalación
- Ingresa a la administración de wordpress en la sección Plugins.
- Escoge la opción Add New y busca W3 Total Cache.
- Instala el plugin y activalo.
2. Configuración
En la configuración de W3 Total Cache ingresa a General Settings. Ahí activaremos 4 opciones que son: Page Cache, Minify, Content Delivery Network y Browser Cache.
A continuación ingresaremos a la página de configuración de cada una de las anteriores opciones y las explicaré a detalle.
2.1 Page Cache
Entramos a la página de configuración de Page Cache desde el menú de W3 Total Cache, a las siguientes secciones y verificamos estos valores:
General
- Enable (checked) – Don’t cache pages for logged in users
- Enable (checked) – Cache home page
- Enable (checked) – Cache feeds
- Disable (unchecked) – Cache URIs with query string variables
- Disable (unchecked) – Cache 404 (not found) pages
Cache Preload
- Enable (checked) – Automatically prime the page cache
- Update internal – 907
- Pages per interval: 7 (increase/decrease as needed)
- Sitemap URL: Your blogs sitemap.xml URL, e.g. http://example.com/sitemap.xml
Con esto terminamos con la configuración de Page Cache.
2.2 Minify
Esta configuración es muy interesante, ya que lograrás integrar en un solo archivo todos tus css, en otro todos tus js y optimizar tu html, para que reduzca considerablemente el tiempo de entrega de recursos al usuario.
Verifica y atiende a las especificaciones de las siguiente secciones:
Cascading Style Sheets
- Enable: Enable (checked)
- Disable: Combine only (unchecked)
- Enable: Comment Removal (checked)
- Enable: Line break removal (checked)
Escoge el tema que estes utilizando en la subsección CSS file management.
En otra ventana carga tu blog y visualiza el código fuente. En él busca todos los archivos .css y agrega cada uno en la subsección CSS file management. Si alguno tiene algún tipo de versionamiento (ej style.css?ver=1.2.3) borralo, es decir borra todo lo que venga después del .css
Graba, dale Deploy y Borra el Cache y revisa su funcionamiento, si algún estilo se pierde quita el css que crees que está dando el problema y vuelve a probar todo el sitio. No avances a la siguiente opción hasta que encuentres los resultados que necesites.
Javascript
Elige los siguientes parámetros:
- Enabled: Enable (checked)
- Disabled: Combine only after <head>
- Disabled: Combine only after <body>
- Disabled: Combine only before </body>
- Enabled: Comment removal
- Enabled: Line break removal
Escoge el tema de tu blog y al igual que con los CSS busca todos los js alojados en tu dominio y agrégalos uno a uno en la sección JS file management, especificando en la zona que se encuentra que es indicada en el combo box. Recuerda eliminar cualquier tipo de versionamiento.
Graba, dale Deploy y Borra el cache y prueba todo el sitio en busca de errores de JavaScript, elimina cualquier js de la lista en caso que te de error y no avances hasta que estes conforme.
Advanced
Asegurate que tenga los siguientes valores
- Update external files every: 216000 seconds
- Garbage collection interval: 216000 seconds
General
- Enable: Rewrite URL structure (checked)
- Enable: Automatically upload mofified files (checked)
- Minify error notification: Enable this to get error notification if something goes wrong.
HTML
- Enable: Enable (checked)
- Disable: Don’t minify feed (checked)
- Enable: Inline CSS minification (checked)
- Enable: Inline JS minification (checked)
- Enable: Line break removal (checked)
Graba y terminamos con la configuración de Page Cache.
2.3 Browser Cache
Nos dirigimos a la página de configuración de Browser Cache y nos aseguramos que tengan los siguientes valores.
General
- Enable (checked): Set expires header
- Enable (checked): Set cache control header
- Disable (unchecked): Set entity tag (eTag)
- Enable (checked): Set W3 Total Cache header
- Enable (checked): Enable HTTP (gzip) compression
- Disable (unchecked): Do not process 404 errors
Las secciones Cascading Style Sheets & JavaScript, HTML y Media & Other Files no sufrirán cambio alguno.
Grabamos y terminamos la configuración de Browser Cache.
2.4 Content Delivery Network (CDN)
Esta parte es muy importante ya que tendremos que hacer modificaciones en nuestro hosting para que funcione correctamente. En dado caso no tienes acceso puedes saltarte esta configuración pero valdría la pena que hicieras el esfuerzo, ya que el navegador carga más rápido si nuestro elementos estáticos no provienen del mismo dominio, por lo que crearemos un subdominio para esto.
Configuración en tu hosting
Subdominio
Entra en la administración de tu hosting y crea un subdominio subdominio.tudominio.com que apunte a una carpeta específica de tu sitio, donde se almacenarán todos los archivos estáticos de tu blog, por ejemplo si tu dominio fuera blog.com te recomiendo que tu subdominio sea static.blog.com.
Usuario FTP
Necesitarás crear un nuevo usuario FTP, creale un password y asegurate que apunta a la misma carpeta que el subdominio anterior y anota todos los valores necesarios para configurar un cliente FTP
Luego que ya tienes este cambio y el subdominio ya se propagó, dirigete a la administración de tu wordpress y accede a la sección de configuración CDN y verifica los siguientes valors:
General
Selecciona todas las casillas
Configuration
- Selecciona Use passive FTP mode (si y solo si pasa la prueba que te indico abajo, si no la pasa, deselecciona esta opción para no causar serios problemas en el funcionamiento de tu blog).
Ingresa los valores de tu servidor para configurar tu cliente FTP. Un ejemplo podría ser el siguiente:
- FTP Hostname: ftp.tudominio.com
- FTP Username: tuusuario@servidorftp.com
- FTP Password: *****
- FTP Path: . (el punto indica que suba los archivos en la raiz del directorio que especificaste cuando creaste el usuario FTP)
- SSL Support : Auto
- Replace site’s hostname with: subdomino.dominio.com (el subdomino que creaste como static.blog.com por ejemplo)
Prueba tus servicio y si te indica Test Passed, graba y terminaste con esta sección, si tiene algún problema, revisa tus valores.
Regresa a la sección General y dale clic a todos lo botones de Upload files, para que mueva todos los archivos necesarios al CDN y con esto terminaríamos las configuraciones de esta sección.
Por último tienes que dirigirte a General Settings de W3 Total Cache y desactiva el Preview Mode para activar completamente el plugin, además es bueno que borres el cache, para que el sistema empiece desde cero.
Esta es la configuración que me ha funcionado y ha mejorado considerablemente el rendimiento de éste blog. En caso de cualquier duda, escríbela en los comentarios.
Excelente tutoria !!
Gracias por tomarte el tiempo de prepararlo y compartirlo ;)
gracias por el tutorial
no me funciona la parte del minify. Buscandoen el codigo fuente, me aparece un nuevo js y css supuestamente es el resumen, me indica error 500.
intente agregar la url de mi pagina y la url de la cdn y no funciona, que podra ser?
Ese problema me da al actualizar el plugin, de momento desactive minify porque me quedaba sin estilos, si encuentro el error lo posteareé, pero espero que se arregle con la próxima actualización.
desactiva esto: Rewrite URL structure
If disabled, CSS and JS embeddings will use GET variables instead of “fancy” links. y te funcionará como antes
Hola.
MARAVILLOSO EL TUTORIAL. Muchísimas gracias.
Solamente un par de cositas:
No funciona lo de los .css, aunque según dices en tu comentario no soy el único, pero lo peor es que no funciona lo del CDN. He seguido todos tus pasos, pero el “Test FTP server” me dice: “Error: Incorrect login or password (ftp_login() [function.ftp-login]: Login incorrect.). Lo de “[function.ftp-login]” me aparece remarcado como link y al pulsarlo intenta buscar el fichero en mi servidor (via navegador) y me dice que no se encuentra la página (normal).
¿No tendré que hacer, tal vez, un .php que se llame “function.ftp-login” o “ftp-login”.
Gracias.
P.D. Además todo funciona genial, pero en cuanto configuro esa parte se me va la página al garete…a la mierda vamos…
Una preguntita más, que me olvidaba:
Donde pone “FTP Path:” simplemente se pone el punto, no?, nada más
Gracias de nuevo
Hola otra vez.
He visto en el transfer queue, que tal vez haya que ponerlo en el .htacces…
Hola Carlos
Perdona, pero ya te dejo en paz jeje.
Ya he descubierto que fallaba, no se si será por la versión, yo estoy utilizando actualmente la 0.9.2.3 y todo lo tienes bien, lo único que falla es que el usuario es sin el: “@servidorftp.com”.
Lo único que sigue sin funcionar es lo de los .css.
MUCHÍSIMAS GRACIAS, HA MEJORADO LA VELOCIDAD UNA BARBARIDAD
Desactiva Rewrite URL structure en Minify y limpia el cache y listo. En cada actualización juega activando o desactivando ésta opción ya que me ha variado en varias versiones.
saludos hice todos los pasos, y tengo un problema con el CDN, al probar el test FTP server, me sale el siguiente error
Error: Unable to resolve hostname: static.fullmuzic.com.
Revisa muy cuidadosamente tus datos ftp, a mi me salió ese error, pero corregí mis datos. Nos cuentas si te sigue molestando
Artículo muy completo y muy interesante. Muchas gracias.
Hola
Muchas gracias por el articulo, muy interesante. He seguido todos los pasos y todo muy bien, excepto que no puedo desahabilitar el preview mode.
Preview settings could not be deployed. Please run chmod 777 /furanet/sites/canariasanuncia.com/web/htdocs/wp-content to make the configuration file write-able, then try again.
No puedo cambiar los permisos al fichero, es muy raro…
Ademas tengo tambien este error:
It appears Page Cache URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.
Alguien sabe como puedo solucionarlo,
Mil gracias,
Pues yo tengo que decir que lo he instalado con éxito en una de mis webs. Ni un sólo error de momento.
Eso si, he usado la versión 9.1.3 porque la última me dió varios problemas al igual que muchos otros webmasters. Con lo cual se me ocurrió volver a probar suerte con esa versión anterior.
Rectifico: he tenido que desactivar esta opción en el Minify:
Rewrite URL structure
Sino no me cargaba los estilos css.
Ese problema me ha dado y solo juego activándolo y desactivándolo, porque cambia mucho entre versiones
Cuanto es lo recomendado para el browser cache, por defecto viene con 31536000 segundos qu es demasiado supongo ya que si hago algun cambio en la css de mi plantilla el que borre cache no ve el cambio, por otro lado es bueno tener esta opcion activada para evitar el consumo del servidor.
Depende mucho de cada sitio, de cada cuanto se realizan ese tipo de cambios. Lo ideal es tener siempre en mente que hay que limpiar el caché, para que se vean reflejado los cambios.
Para ser mas especíifico he cambiado el style.css de mi wp y no quisiera dejar un mensaje todo el tiempo que limpien la cache de su navegador (porque todos no lo harán), quisiera que la browser cache automáticamente impida al navegador cachear al menos por 1 semana para que todos mis visitantes tengan el nuevo estilo sin hacer nada como sucede en otras webs.
Hola Carlos, en el tema del CDN lo he echo todo correcto, crear el subdominio y un usuario ftp apuntado a ese dominio, pero cuando hago la prueba para ver si esta correcto me dice que en el FTP Path que el direcctorio no existe, he echo varias modificaciones pero sigue diciendo lo mismo,alguna sugerencia? que debemos poner ahi exactamente?gracias
Muchas gracias por el tutorial. Lo realice en un 50% por miedo a los errores que les dio a otros users.
Pero se agradece. Salu2