Cómo especificar la caché de navegador en WordPress (o en cualquier CMS) sin usar ningún plugin
Déjame adivinar: estás aquí porque la herramienta Pagespeed Insights de Google te recomienda publicar recursos estáticos con una política de caché eficaz para que tu sitio web cargue más rápido.
En este post, te explicaré cómo hacerlo de la manera más sencilla, sin necesidad de instalar ningún plugin de cacheado.
¿Qué es la caché y qué tipos de caché hay?
El cacheado es un método por el que un ordenador o servidor web guarda contenidos en una especie de memoria temporal, de forma que puede acceder a esos contenidos más rápido que al resto de información que tiene en su interior.
En el ámbito web, el cacheado se usa para reducir el número de peticiones que se hacen a los servidores o el tiempo de respuesta para cada petición, aligerando el tráfico entre servidor y usuarios, y permitiendo que en la práctica los usuarios naveguen más rápido.
Tipos de caché
Según donde se produzca el cacheado, tenemos dos tipos de caché:
- la caché de servidor, que tiene lugar en el servidor donde está alojada la web, o en un proxy server
- la caché de navegador, que se lleva a cabo en el navegador de cada usuario.
Para complicar un poco más las cosas, según el tipo de contenido que estemos cacheando, la caché puede ser estática (para contenidos estáticos, como imágenes o archivos CSS y javascript) o dinámica (para páginas creadas por un CMS como WordPress o Prestashop).
Pero por ahora vamos a centrarnos en cómo aprovechar el almacenamiento en caché de navegador para contenidos estáticos, que es lo que Pagespeed Insights te está recomendado activar en tu sitio.
¿Qué es la caché de navegador y para qué sirve?
La caché de navegador se encarga de guardar en el navegador de cada uno de tus usuarios partes del contenido de tu web que no es probable que cambien en el futuro inmediato, como por ejemplo tu logo, las imágenes de tus posts o los archivos CSS que dictan el estilo de tus páginas.
De esta manera, el navegador sólo tendrá que cargar esos elementos la primera vez que visita una página del sitio. Al abrir más páginas, o si vuelve a visitar el mismo sitio unos días después, el navegador de ese usuario ya no necesitará cargar de nuevo el logo o las imágenes ya visitadas.
El tiempo por el cual se van a guardar estos contenidos en el navegador de tus usuarios se puede especificar a tu gusto. Por ejemplo, es habitual cachear las imágenes durante 30 días, aunque tú puedes preferir otra duración por la razón que sea.
Activar la caché de navegador supone una gran ventaja (casi una necesidad) para cualquier sitio con un mínimo de tráfico. Por tanto, Google no te está recomendando que lo hagas por mero capricho.
Si tu sitio no tiene activo este tipo de caché, estás obligando a tus usuarios a cargar desde sus navegadores todos los recursos de tu web, cada vez que cargan una página, aunque ya la hayan visitado antes.
¿Debo usar un plugin para activar la caché de navegador?
Si, como el 60% de los webmasters del mundo, usas WordPress, una de las soluciones habituales suele ser instalar un plugin para que se encargue del cacheado.
Aunque habitual, esta solución no es del todo efectiva, por las siguientes razones:
- Estás instalando un plugin pesado para llevar a cabo una acción que se puede hacer perfectamente sin instalar plugins. Los plugins siempre requieren mantenimiento (hay que actualizarlos cada cierto tiempo, igual que debes actualizar tu versión de WordPress) y además, paradójicamente, pueden ralentizar tu web al estar mal configurados, o al consumir demasiados recursos dentro de tu servidor (un clásico de estos plugins).
- La mayoría de los plugins de cacheado, especialmente los gratuitos, son complejos de configurar, con lo que, si no sabes lo que estás haciendo, necesitas empollarte un montón de documentación y aun y así es posible que hagas algo mal, con lo que no habrás arreglado del todo el problema que tenías, y te habrás creado otro.
¿Cuál es la alternativa más sencilla a instalar un plugin? Hacerlo directamente, a través del archivo htaccess de tu servidor.
Especificar caché de navegador a través de htaccess
Por lo normal, la gran mayoría de sitios que funcionan con WordPress están alojados en un servidor Apache. El archivo htaccess está presente en todos los servidores Apache y sirve para configurar el uso del servidor.
Con este archivo puedes darle a tu servidor instrucciones, como por ejemplo hacer una redirección, o definir una caché de navegador.
Esto es bastante sencillo y antes de darte las líneas de código exactas que necesitas para crearlas, vamos a ver qué necesitas para definir una caché de navegador en el htaccess.
Por cierto, esto no sirve únicamente para WordPress, sino para cualquier otra web alojada en un servidor Apache, sea cual sea su CMS. Por tanto, también en un Prestashop, o si has hecho a mano tu web en php, puedes especificar la caché de navegador por este método.
Añadiendo instrucciones a tu htaccess
Importantísimo: antes de hacer ningún cambio en tu archivo htaccess, haz una copia de seguridad y guárdala en tu ordenador. Así, si te confundes en algo, aunque sea una coma, y algo empieza a funcionar mal en tu web, sólo debes restaurar la copia de seguridad y todo volverá a funcionar como antes.
Primero, necesitas definir qué tipos de contenido vas a cachear. Digamos que quieres cachear las imágenes en el navegador de tus usuarios. Entonces, incluirías en tu instrucción todas las extensiones de archivo que se pueden usar para cargar imágenes en una web: jpg, png, gif, ico, etc.
Lo normal es incluir en el cacheado de navegador todos los recursos estáticos: imágenes, archivos CSS y Javascript, PDFs, archivos de audio…
Luego, necesitas definir cuánto va a durar el cacheado en el navegador de tus usuarios. A esto se le llama cache-control y se define en segundos. Imagina que quieres cachear las imágenes durante un mes. Entonces, definirías un cache-control de 2592000 segundos.
Esto no es todo. Ya que estamos tocando el htaccess, vamos a aprovechar para arreglar dos cuestiones comunes: vamos a desactivar el uso de Etag, que es una tecnología algo obsoleta que hace que el cacheado de navegador funcione en algunos casos más lento de lo que debería.
Y por último, vamos a aprovechar para incluir la compresión GZIP, que es otra cosa que nos va a exigir Pagespeed Insights, y que se puede hacer perfectamente a través de htacess y sin necesidad de instalar otro plugin. Si al analizar la herramienta con Pagespeed Insights, te aparece el mensaje “Habilitar compresión”, incluye también en tu htaccess el bloque de código que he puesto bajo el encabezado #Compresión GZIP.
Ahora que ya sabes qué debes incluir y por qué, vamos a ver el código. Recuerda, debes copiarlo y pegarlo en tu archivo htaccess, que se encuentra en el directorio raíz de tu alojamiento. Más abajo te explico cómo crear o modificar este archivo.
Una vez más, no modifiques nada en tu htaccess sin haber hecho antes copia de seguridad.
El código que yo uso y te recomiendo es este (copia TODO el código que está dentro de la ventanita):
Header unset ETag
Header set Connection keep-alive
FileETag None
############## CACHING-GZIP ############
ExpiresActive On
ExpiresDefault A2592000
<filesmatch "\.(txt|xml|js)$"="">
ExpiresDefault A2592000
<filesmatch "\.(css)$"="">
ExpiresDefault A2592000
<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"="">
ExpiresDefault A2592000
<filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
ExpiresDefault A2592000
<filesmatch "\.(txt|xml|js)$"="">
Header set Cache-Control "max-age=2592000"
<filesmatch "\.(css)$"="">
Header set Cache-Control "max-age=2592000"
<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"="">
Header set Cache-Control "max-age=2592000"
<filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
Header set Cache-Control "max-age=2592000"
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
AddEncoding gzip svgz
Y ya está. Ahora, cuando vuelvas a pasar tu web por Pagespeed Insights, verás que el mensaje “Aprovechar almacenamiento en caché del navegador” ha desaparecido (y el de “Activar compresión”, si es que también te salía).
Aclaración importante: es imposible especificar la caché de navegador para recursos externos a tu web, como por ejemplo Google Analytics, Adsense o un script de Twitter.
Si tienes el código de Analytics en tu web, te seguirá apareciendo este mensaje, pero lo puedes ignorar con toda tranquilidad, porque no se va a ir nunca. Google pone el caché-control que le da la gana para su script, y tú no puedes cambiarlo. Toda una paradoja que Google recomiende por medio de Pagespeed un tiempo mínimo de duración de la caché que ellos mismos no cumplen con Analytics, pero son Google y pueden hacer lo que quieran.
Nosotros, con especificar la caché de navegador para nuestros recursos estáticos, ya hemos cumplido.
Cómo modificar el archivo htaccess
Tienes 3 formas de hacerlo, a través de FTP, a través del cPanel de tu hosting o, si tienes WordPress y el plugin Yoast para SEO, puedes hacerlo directamente desde allí.
Vamos a ver rápidamente los 3 métodos:
A través de FTP
- Conéctate vía FTP a tu sitio tal y como haces habitualmente
- Ubícate en el directorio raíz donde esté instalado tu WordPress o sitio web
- Localiza el archivo htaccess – si no lo ves, deberás marcar en tu cliente FTP la opción “Mostrar archivos ocultos”
- Descarga el archivo htaccess en tu ordenador, haz un backup, modifica añadiendo las líneas de código que te he dado y vuelve a subirlo a la misma ubicación, sobreescribiendo el anterior
- Ya está, pasa tu web por Pagespeed Insights y verás que ahora todos tus recursos estáticos internos cumplen con la regla de especificar caché de navegador
A través de cPanel
- Inicia sesión en cPanel
- En la sección Archivos, haz clic en el ícono del Administrador de archivos.
- Marca la casilla para raíz de documento y selecciona el nombre de dominio al que deseas acceder desde el menú desplegable.
- Asegúrate de que Mostrar los archivos ocultos» esté marcado.
- Haga clic en Ir. El Administrador de archivos se abrirá en una nueva pestaña o ventana.
- Localiza el archivo .htaccess
- Descarga el archivo htaccess en tu ordenador, haz un backup, modifica añadiendo las líneas de código que te he dado y vuelve a subirlo a la misma ubicación, sobreescribiendo el anterior
Mediante plugin Yoast (sólo WordPress)
- Desde tu dashboard o panel de control, ve al menú principal izquierdo y haz clic en ‘SEO’.
- Te saldrán una serie de opciones adicionales. Si no ves la opción de «Herramientas» en tu menú «SEO», primero habilita la configuración avanzada.
- Haz clic en ‘Herramientas’.
- Haz clic en ‘Editor de archivos’.
(Este menú no aparecerá si tu instalación de WordPress ha desactivado la edición de archivos. Habilita la edición de archivos, o tendrás que hacerlo por FTP o cPanel.
- Añade mis líneas de código al archivo .htaccess.
- Guarda tus cambios.
Especificar la caché de navegador en WordPress por medio de un plugin
Si todo esto de andar tocando el archivo htaccess no te convence (o no te vale, porque no tienes acceso FTP o al cPanel de tu hosting) puedes optar por la solución de instalar un plugin, que para mí es menos ventajosa, pero hace exactamente lo mismo.
De hecho, si una vez activado tu plugin de cacheado le echas un vistazo a tu archivo htaccess, verás que lo que ha hecho el plugin ha sido escribir en el archivo más o menos el mismo código.
Puede variar el orden, la duración del caché-control para cada grupo de archivos y llevará otros comentarios, pero el código es esencialmente el mismo. ¿Ves por qué digo que para eso no hace falta un plugin?
El valor añadido de los plugins está en que ofrecen más cosas, principalmente el minificado de CSS y Javascript, que no se puede hacer a través de htaccess. Pero muchas de estas otras opciones que te ofrecen son complejas de configurar y su funcionamiento óptimo dependerá mucho del servidor en el que esté alojado tu sitio.
Como decía al principio del post, la mayoría son ventajas que no vas a poder usar, o peor, que te pueden montar algún lío en tu sitio, como no tengas cuidado.
Esto es especialmente cierto del W3 Total Cacher, plugin pesado y difícil de configurar donde los haya, y también, aunque algo menos, de la otra opción más popular dentro del repositorio de plugins gratuitos de WordPress, WP Super Cache.
Si estás empeñado en instalar un plugin y quieres que te aporte algo extra, yo optaría por un plugin de pago: WP-Rocket, que además de ser más flexible y fácil de configurar tiene la gran ventaja de que te ayudará a recortar el tiempo de respuesta de tu servidor (otra bestia negra de Pagespeed Insights), tal y como conté en detalle en mi último post.
Para mí la elección de plugin está clara, pero si no quieres gastar los 30 euros al año que vale WP-Rocket o te lo quieres pensar mejor, puedes echarle un vistazo a esta mega-comparativa de todos los plugins de caché para WordPress, en el que el ganador final es, sorpresa sorpresa… WP-Rocket. ;-)
Conclusión
Yo, siempre que puedo, me ahorro un plugin. El archivo htaccess de tu servidor está para usarlo, y no tienes por qué tener miedo de modificarlo y añadir funciones directamente al archivo mediante líneas de código. Al fin y al cabo, es lo que hacen los plugins.
Pero antes de instalar un plugin o no tienes que sopesar si de verdad te ahorrará tiempo o no. Si lo que más te interesa es ahorrar tiempo y no quieres meterte en cosas complicadas como andar tocando el htaccess, o la configuración avanzada de un plugin de cacheado, opta por WP-Rocket y problema arreglado.
¡Grande, Juan!
Para los sitios grandes en cuanto a diseño yo tiraría de WP rocket. Es muy fácil de configurar y te solventa aspectos como la reducción de código sobrante que desde el .htaccess no se puede configurar.
Para los menos complicados, tu código es la mejor solución de largo. Fíjate que tengo un cliente al que en breve le voy a tener que aplicar esto porque usa un CMS propio del año matarile. Ya te diré a ver qué tal va.
¡Gracias por compartir!
Un abrazo.
Gracias por comentar, Joan. Opino como tú, si el sitio es grande y además hay que mejorar otros temas de WPO, a por el WP-Rocket de cabeza. Si no, para una solución rápida y sencilla, mi código al htaccess y listo. Ya me contarás qué tal con ese cliente. Un abrazo.
Hola Juan gracias por tu tutorial. Comentarte, he añadido el código tal cual lo tienes escrito y da error en mi wordpress. He tenido que volver a la versión anterior del htaccess. Estoy modificando el htaccess desde el plugin yoast
Hola Carlos, gracias por comentar y por animarte a probarlo. Los errores en htaccess casi siempre se deben a un espacio que se ha colado en algún lugar, que puede incluso haber sido al pegar yo el código en el post. Voy a volver a probarlo, tanto modificando htaccess directamente como a través de Yoast y te digo si encuentro dónde está el error. Gracias y saludos!
Hola Carlos, creo que ya sé lo que ocurría. Tal y como estaba insertando el código, WordPress añadía algún carácter extraño que al parecer no molestaba cuando se pegaba directamente en el htaccess, pero sí cuando se hacía por Yoast.
He cambiado la forma de insertar el código en el post, de modo que ahora WordPress ya no puede añadir ningún carácter. Pruébalo por favor de nuevo y dime si ahora ya te funciona. Saludos!
Muy de acuerdo contigo Juan en hacer todo lo que se pueda manual, yo tengo habilitada la compresión gzip y la expiración del tiempo de caché pero en este caso ya probé con código de especificar la caché y me generaba error de servidor. La caché es muy tonta y puede ser que influya el plugin de caché que uso, aun así chapeau por el post porque es de esos que buscas cuando quieres ganar unos segundos y mejorar la puntuación de pagespeed, asunto que en mi caso a veces es obsesivo y no me conformo. Saludos fenómeno
Gracias, José. Sí, creo que si quieres especificarla vía htaccess mejor que no tengas ningún plugin de cacheado activo, aunque también es verdad que pudo ser otra cosa, como por ejemplo un problema de sintaxis. Basta con que se te escape o añada una letra sin querer, un espacio de más en el sitio equivocado, y te puede dar error. En cualquier caso, además de hacer backup siempre como recomiendo en el post, es buean idea si se puede hacerlo primero en un sitio de pruebas, y luego, cuando estás seguro de que todo funciona bien, pasarlo a tu sitio en producción. ¡Saludos y gracias por comentar!
Articulazo, yo tengo problema con la compresión gzip, lo hago desde htaccess como indicas, tengo los alojamientos en un mismo servidor de todas mis webs, y pasa algo curioso que no logro solucionar.
Para unas webs funciona y para otras no, el mismo código, el mismo htaccess y si me apoyas más aún, dos webs con WordPress, mismo tema y mismos plugins, una comprime y la otra no. Alguna sugerencia?
Hola, David, gracias por comentar. Sobre tu pregunta, se me ocurre por ejemplo lo siguiente: ¿en las webs que no te está funcionando el GZIP, está el htaccess en el folder correcto? Es decir, ¿en el directorio raíz de la instalación de WordPress? Podría ser eso, y si no, aunque dices que es el mismo código, podría ser que en uno de ellos simplemente te falte un acracter, o se te haya colado un espacio, algo así.
Saludos.
gracias amigo, me sirvio de 28/100 , pase a 32/100 , en una web que estoy optimizando.
Excelente solución Juan, a veces vamos a lo cómodo en nuestros WordPress y los sobrecargamos con plugins que nos ahorran sólo 5 minutos.
Hola Juan, usé el código que recomendaste y ahora me devuelve este mensaje: Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at webmaster@wabisabidora.com to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.
Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.
¿Cómo lo soluciono?
Hola Paula, tendrás que solucionarlo por FTP.
Si hiciste un backup de tu archivo htaccess, tal y como recomiendo en el post, sólo debes acceder vía FTP a la raíz de tu instalación de WordPress y sobreescribir el archivo htaccess con tu versión de backup. Si no tienes backup, descarga tu htaccess actual y edítalo, con el Bloc de notas o con cualquier editor de texto, y elimina las líneas de mi código, desde
# Disable ETags
hasta
AddEncoding gzip svgz
Luego, guarda el archivo y súbelo a tu WP por FTP, sobreescribiendo el archivo anterior. Así tu WP se recuperará del error y ya no mostrará ese código 500.
Sobre la causa, casi con toda seguridad es porque al copiar y pegar el texto se te ha añadido un espacio u otro carácter que no debe estar allí.
Si te queda alguna duda o algo no funciona, dímelo. Saludos.
A mí me ha sucedido lo mismo… Y no funciona la recuperaicón del archivo… Veremos a ver…
Sustituyo el archivo por el original por ftp y no funciona…
500 Internal Server Error
The request was not completed. The server met an unexpected condition.
/ (port 80)
¿Que puedo hacer?
Hola Conchi, si sustituyes el archivo con mi código por el archivo original y lo haces todo correctamente, tu sitio debería estar exactamente como estaba antes, por lo que debería funcionar bien. Pienso que si no te funciona es que algo más has cambiado, aunque sea sin darte cuenta, o quizá no estás subiendo el archivo original. Para estar seguros, repasa el htaccess que hay ahora mismo en tu directorio raíz y mira a ver si todavía incluye alguna parte de mi código. Si es así, elimínalo y mira a ver si ahora ya te funciona. Si no, podemos solucionarlo subiendo un archivo htaccess en blanco, o incluso eliminándolo completamente del servidor, ya que no es necesario para que funcione el sitio. Eso sí, perderás cualquier otro código que tuvieras antes en el htaccess. Pero como asumo que, si tenía antes lago en el htaccess, estaba escrito automáticamente por un plugin (por ejemplo Yoast, ese mismo plugins o plugins se encargarán de volver a crearte el htaccess e incluir el código que tuvieras antes.
Saludos y espero que ahora sí se solucione.
Juan
Grande!
Hola Juan lo acabo de realizar y he vuelto a analizar la pagina con PageSpeed Insights y me sigue diciendo especificar cache del navegador, hay que esperar un tiempo antes de analizarlo. Gracias.
Antonino.
Hola Antonino, fíjate si las urls que aparecen listadas bajo la regla no aprobada son internas (de tu dominio) o externas (de otros dominios, como por ejemplo google-analytics o Twitter). Si son de este último tipo no debes preocuparte, ya que son scripts que se cargan externamente y por tanto tú no puedes cachearlos. Si ya no te queda ninguna url interno sin cachear, ya has hecho todo lo que podías para optimizar ese apartado, ignora el mensaje de Pagespeed Insights y ya está. Saludos.
Hola, mi blog esta alojado en un servidor «litespeed» y no en un «apache», ¿esto afectará al poner el código o funcionara como si fuese un «apache»?
Gracias.
Por cierto algo le ocurren a los comentarios de tu web que salen muy alargados.
Hola José, no he tenido ninguna experiencia con servidores Litespeed, pero buscando en Google veo que sí es posible trabajar con archivo htaccess. Eso sí, por lo que he leído el uso de htaccess viene por defecto sólo en las versiones Entreprise, mientras que en Open Litespeed debes instalarlo tú. Puedes verlo aquí: https://stackoverflow.com/questions/19313736/htaccess-doesnt-work-in-litespeed
Gracias por avisarme de lo de los comentarios, es un error de mi CSS y sucede cuando se anidan varias respuestas. Lo he arreglado para esta página, librándome de la barra lateral. Cuando tenga tiempo bucearé más a fondo en mi CSS para dejarlo correctamente. ;)
gr0so man!!.. metiste todo el codigo en una pagina y de una.. te recontra felicito, no habia encontrado en ningún otro lado la info de una.. muchas gracias!
Me encanta cuando profesionales en el tema dan respuestas a un problema con un lenguaje sencillo y directo!. Muy bien hecho !
Es la primera vez que comento por aquí pero con este post te has ganado un lector más ?
Estaba teniendo problema con la cache (he probado con w3 y super cache), los he borrado, he utilizado tu código y en gtmetrix he pasado de PageSpeed: 88, YSlow: 79 ==> Pagespeed: 92, YSlow: 86, con solo hacer ctrl+c y ctrl+v !! gracias!!
Hola Juan. Muchísimas gracias por tu post, esta explicado para torpes como yo. No he tenido ningún problema, he añadido el código por Yoast SEO y funciona. Pero tengo un par de dudas; Mi puntuación en PageSpeed Insights solo ha subido dos puntos en movil y ninguno en ordenador, Es normal? Ahora estoy en 84, en ambos.
También tengo una duda respecto a la forma en la que funciona el test, puesto que siempre no me da la misma puntuación en movil, fluctúa de 71 a 81 u 84. ¿Sabes a que se puede deber?
Muchas gracias de nuevo.
Hola Jairo, gracias por comentar y me alegro de que te haya sido útil el post. Lo de la puntuación que comentas sí puede estar dentro de lo normal. Yo opino que no hay que obsesionarse con la puntuación concreta que da Pagespeed Insights, más bien con superar las reglas que marcan, especialmente las que suponen una carga más lenta para los usuarios. Activar el cacheado es bueno para tus usuarios, ya que reduce mucho el número de requests que deben hacer sus navegadores para cargar tus páginas, y por tanto es secundario si Pagespeed te sube tres puntos o ninguno.
Sobre qué criterios usan para dar sus puntuaciones, pues como todo con Google son criterios que no conocemos, y que para colmo varían según el momento. Es perfectamente posible que a una página hace meses le dieran 60 y hoy, sin cambiar nada, le asignen un 40. Sí sé que actualmente le dan mucha importancia, especialmente para móviles, al peso de las imágenes y a tener en tu web imágenes que se pueden comprimir más.
Pero repito que si ya cumples la mayoría de las reglas y has obtenido puntuaciones de 84, creo que tu tiempo de carga y experiencia de usuario están bastante optimizadas y no debes obsesionarte mucho. Un aspecto que recomiendo optimizar siempre es el tiempo de respuesta del servidor; si no lo has visto te recomiendo este post: https://useo.es/reducir-el-tiempo-de-respuesta-del-servidor/
Hola Juan.
Al realizar lo que indicas, me sale lo siguiente:
Tu página tiene 1 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página.
No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización, o bien inserta porciones críticas de dichos recursos directamente en el HTML.
Optimizar la entrega de CSS de estas URL:
use.fontawesome.com/releases/v5.0.6/css/all.css (quito el https, para no se spam)
Me puedes ayudar? Gracias
Hola Miguel, el mensaje que te sale ahora no tiene nada que ver con especificar la caché. Es simplemente una hoja de estilo CSS que se está cargando en el head de tu página, lo que hace que hasta no se cargue completamente no se carguen el resto de elementos, retrasando por tanto la carga de la página. Si es un WordPress, que imagino que sí, es que le theme te usas te está cargando la hoja de estilo de Font Awesome (una biblioteca de iconos) en el head. Si no usas para nada estos iconos, yo localizaría la línea concreta que la carga (busca con la misma url que me has pegado arriba) y la borraría. Si sí estás usando los iconos Font Awesome, localizaría esa línea y la pasaría al footer. Lo único malo que va a ocurrir es que cuando cargue tu página durante unas décimas de segundo en vez de los iconos vas a ver unas letras, y luego ya se cambiarán a los iconos. Si haces esto, haz backup antes de todos los archivos que modifiques, y además hazlo en un child theme, no sobre el theme original.
Si no te quieres meter con código, también puedes instalar WP Rocket. Es muy fácil de configurar y casi seguro que en un par de clics va a quedar solucionado ese problema. Pero es de pago, eso sí. Saludos y suerte.
Buenas Juan, he probado a hacer lo que comentas de manera manual y sustituir el .htaccess original por el código que facilitas.
Todo parece correcto hasta que visitas cualquiera de las páginas secundarias de la web. Es decir, solo carga el inicio, si vas a cualquier otra sección mediante el menu (contacto, instalaciones etc), me dice que no encuentra la página. (404 page not found)
No sé si he debo hacer algo más.
Por otra parte, el código que tu propones se debe añadir al que ya tengo, a continuación o sustituir al que ya tenía?
De momento he vuelto a cargar el htaccess original pero me gustaría saber que ha pasado y por qué se comporta así.
Muchas gracias por tu atención y cuando te vaya bien y dispongas de tiempo me respondes.
Hola Ramón, ¿puede ser que tengas algún plugin activo que haga funciones de caché? Si es así, lo suyo sería primero desactivar ese plugin, y luego añadir mi código al htaccess. El código debe añadirse a cualquier otra cosa que tengas ya en el htaccess, por ejemplo mod rewrite para redirecciones. Pero recuerda, si tienes plugins que estén escribiendo instrucciones que afecten al cacheo en el htaccess debes quitarlos antes de probar esto. Espero haberte ayudado. Saludos y gracias por comentar.
Muchas gracias Juan, me ha servido. No se si había algun conflicto con el plugin yoast o que había añadido el código a través del plugin ( y además mal, porque había borrado el contenido anterior referente a la carga de worpress).
El caso es que he añadido el código al que ya había y lo he subido por ftp. También he desactivado el plugin yoast.
Ahora me falta comprobar que plugin de seo va mejor con mi web. A probar.
Muchas gracias por todo
Tanto Yoast como All-in-one, de los que yo he probado, van bien con cualquier WordPress. De lo que se trata es de que puedas cambiar Titles, meta description y aparte las metas index/noindex/nofollow a tu gusto y enviar un sitemap también a tu gusto y de manera fácil. Ambos hacen esto.
No entiendo el conflicto que te generaba Yoast con mi código de htaccess. Yo lo tengo puesto en varios blogs y todos con el Yoast al mismo tiempo y no da problemas. Haz alguna prueba más a ver si consigues tener las dos cosas al tiempo, y si no prueba con otro plugin SEO en lugar de Yoast. Gracias por comentar y saludos, Ramón.
Hola: Copié y pegué tu código (antes y después de la última línea de mi .htacces que es # END WordPress) y, nada, je!
Me siguen dando los mismos errores (de especificar caducidad y de falta de compresión) que tenía.
Copié y pegué mi archivo en un word cuyo enlace te adjunto a continuación;
https://drive.google.com/file/d/1wQl61ZyzxwvRGGs1s7cWEqz50q01bu8k/view?usp=sharing
Te podrías fijar donde y como tendría que pegar tu código?
Muchas gracias.
Saludos!
Hola Francisco, creo que el código estará bien copiado, porque si no estuviera tu WordPress daría un error 500. Si siguen apareciendo esos mensajes, es casi seguro para fuentes externas, tipo Google Analytics, Tag Manager, Twitter, etc. Fíjate si alguno de los archivos que aparecen en el aviso tienen tu dominio. Si son sólo de dominios externos, como digo en el post estás bien, no hay nada que puedas hacer para alargar esa caché, porque sólo los propietarios de esos archivos (Google, Twitter etc) pueden hacerlo. En otras palabras, si son sólo archivos externos los que hacen saltar el aviso de acché, puedes ignorarlo tranquilamente. Saludos.
Hola Juan:
No hay caso amigo. Probé cargar tu código a través de Yoast (porque yo de .htacces, no entiendo nada:) y, nada.
No varian los resultados en nada.
Y, lo que es peor, cuando desactivo el W3TC (mi plugin de cache), no solo no funciona (ni la comprensión GZIP ni lo de el almacenamiento en caché) sino que, los resultados «caen» porque, efectivamente, al no tener activado W3TC (con sus respectivas minimizaciones y demás), PageSpedd me tira abajo el resultado.
Asi que, no sé. Si tienes alguna otra solución, encantando.
Sino, igual gracias.
Saludos!
Hola Francisco, le eché un vistazo al código que me pasabas en el Word y el posible error que veo ahí es que sigue estando activo el código de W3TC, ya que hay una línea que dice # BEGIN W3 TC Browser Cache
Para funcionar el código que yo te paso debería estar previamente desactivado el W3TC o cualquier otro plugin de cacheado, ya que si no, un código y otro van a chocar entre sí. Yo te recomiendo desactivar y borrar primero el W3TC y luego añadir mi código tal y como lo tienes en el post. No te preocupes, que si no te funciona, siempre puedes volver a activar W3TC (si quieres, guarda la configuración específica que tengas antes de eliminarlo). Y si después de probar como yo te digo, añadiendo mi código, ves que la puntuación que te da Pagespeed es claramente peor que la que tenías con el W3TC, pues si quieres vuelve a W3TC y esa misma configuración. Pero yo pienso que va a ser más o menos la misma, y ahorrándote el W3TC, que es un plugin muy pesado. Espero que tengas suerte. ;)
Excelente articulo!
Tengo una pequeña duda las 3 primeras filas después de ##CACHING## en tu código permitirán cachear a 30 días el html y el php? ya que al no especificar ningún tipo entiendo que cachea todo por defecto 30 días. De cachear el html y el css cada vez que hiciera una modificación en mi web la gente que se hubiera metido antes no vería los cambios hasta pasados 30 días desde la primera vez que se metieron. Y sobre todo para las tiendas online, utilizando woocommerce produciría errores de stock cuando la gente comprara si alguien compra a la vez no? porque el stock no se actualizaría en el frontend pero si en la base de datos y llevaría muchos problemas. Quizás estoy equivocado.
Muchas gracias por el articulo
############## CACHING ############
ExpiresActive On
ExpiresDefault A2592000
ExpiresDefault A2592000
Hola, Mariano, muchas gracias por tu comentario. Pues sí, tienes razón, y la verdad es que debería haber especificado que mi código es más adecuado para webs cuyo contenido cambia poco, categoría en la que entran la mayoría de los blogs. Pero si tienes por ejemplo una revista online en la que publicas varios artículos al día y editas mucho los artículos anteriores, o como bien dices tiendas online en el que rote mucho el inventario o cambien mucho los precios, las necesidades de cacheado ya no son tan sencillas. Habría que dejar ciertas páginas o tipos de página sin cachear, no cachear las páginas para usuarios logueados, etc. En estos casos, salvo que no te importe mucho toquetear líneas de código en el htaccess, yo creo que ya compensa más tener un plugin para el cacheado. WP Rocket, que es el que más recomiendo, tiene todas estas opciones. Saludos!
Gracias por la rápida respuesta :)
Para el tema de tiendas donde el stock cambia constantemente valdría con cachear todo salvo el html y el php, no?. De esta manera, las imágenes, el css no tendrían que descargarse todo el rato y se optimizaría mucho el tiempo de carga, sin fastidiar el el stock .
Únicamente habría que eliminar de su código la linea que menciono abajo
ExpiresActive On
ExpiresDefault A2592000 —–esta linea
Y funcionaría siempre correctamente aunque no cachearemos los ficheros php y html
Si me equivoco estiraría agradecido que me lo dijiste ya que el tema del stock es muy complejo al usar la cache.
Enhorabuena otra vez ;)
############## CACHING ############
ExpiresDefault A2592000
ExpiresDefault A2592000
ExpiresDefault A2592000
ExpiresDefault A2592000
¡Excelente! Solo me dio un problema al copiar del contenido de tu .htaccess. Los links de mi web no quedaron funcionando. Lo solucioné al actualizar los ajustes de los enlaces permanentes desde la administración de WordPress. Se han cargado los links en el nuevo .htaccess y todo funcionando sin problema. Con tu método he alcanzado los 90/100 en insights tanto en móviles como en desktop.
¡Supremamente agradecido!
Hay un mundo mas alla de PHP.
Yo trabajo con Microsoft para crear mis sitios.
Como se hace esto en windows?
Pues yo al revés, Mauricio, no he trabajado nunca con servidores Windows y por tanto no te puedo ayudar, lo siento. Saludos.
hola esta muy bien pero madamas tiene un problema que hasta que no borras el historial del navegador no te deja entrar en la zona administrador.
Gracias, David. Que yo recuerde no me ha pasado eso con los sitios en los que he añadido este código, pero es bueno que lo hayas comentado, por si a alguien más le ocurre. Saludos!
Hola Juan
Realice este proceso con mi pagina pero me dañó el pagespeed en movil, no se que pasaría
http://www.steel.net.co, de pronto si puedes dar una recomendación
Sin embargo me parecen muy buenos tus consejos, los he seguido y me han servido
Gracias
Hola Juan, excelente posteo y esta explicado a la perfección, pero tengo una duda. Si lo hago por Yoast, en que lineas pego ese código de archivo .htaccess ¿Al final del todo? Antes de «END wordpress»? Espero que se entienda. Muchas gracias!!!
Gracias, Kevin. Se puede poner antes o después del bloque que va entre # BEGIN WordPress y # END WordPress, no debería importar que lo añadas antes o después. Yo suelo añadirlo antes. De todas formas, como siempre digo, haz un backup antes del htaccess y así, si algo saliese mal, siempre puedes volver a añadir el htaccess antiguo vía FTP. Saludos!
Hola Juan:
Use el metodo que use, al guardar el .htaccess pierdo acceso al backend y al frontend con un error 500.
Hola Rogelio, creo que lo que puede estar pasando es que se te duele algún carácter extraño, aunque sea simplemente un espacio. Repasarlo por si fuera esto, y también verifica que no tengas algún plugin previamente instalado para gestionar la caché, ya que de ser así escribiría su propio código en el htaccess, y entre ambos fragmentos de código lo más probable es que se de un conflicto. Espero que esto te ayude.
El codigo que indicas, enque parte del ./htaccess lo puedo pegar?
Asi iría bien?
https://drive.google.com/open?id=11qHC2fMfbj5wZwWfFjp-Du6cfOYgoP53
Sí, Roger, ahí puedes ponerlo. Pero en el código que copiaste se había colado algún carácter extraño. Ya lo he actualizado con el código correcto, sustitúyelo con el código que hay ahora en el post. Y como siempre, haz un backup de tu htaccess antes de efectuar ningún cambio. Así, si hay algún problema o de nuevo se colan caracteres extraños, siempre puedes volver a la anterior versión.
ME sale error 500 en mi web y en el panel de administración desde que copie tu codigo en yoas, he intentado arreglarlo por todas las soluciones que dan y no consigo arreglralo
Hola María, o mi código se estaba mostrando mal por error como ha sucedido antes en alguna ocasión, o si no quizá al copiar y pegar el código en Yoast se te ha metido algún carácter extraño. En cualquier caso, como solución te propongo lo siguiente: puedes borrar o desinstalar temporalmente Yoast por medio de FTP (basta con que muevas su carpeta a otra ubicación que no sea la carpeta /plugins) y también necesitarás restaurar el archivo htaccess, ya sea borrándolo del todo, o borrando la parte que corresponde a mí código, o instalando en su lugar un htaccess vacío de forma temporal. Si no sabes cómo hacerlo y necesitas ayuda, te recomiendo que directamente se lo pidas al soporte de tu hostings, diles que tú WP está dando error 500 y que sucedió al pegar un codigo en el htaccess mediante el plugin Yoast. Espero que puedas solucionarlo!
Hola Juan!
A mi también me da problema al insertarlo. Tengo configurado el .htaccess para wordpress multisite, al pegarlo debajo del código existente, me da error 500. SI lo pego encima tal y como ha mencionado arriba roger, también. He borrado los espacios, he pegado al margen izquierdo todas las líneas de código pero nada.
Un saludo.
Hola, Alex, siento que te dé problemas. La mayoría de problemas que les ha dado a otros usuarios, suele ser por el tema de que se cuele algún espacio al copiar o pegar. En tu caso, al ser un multisite, pienso que el problema puede venir de que tengas de antes otros fragmentos de código en el htaccess que creen alguna incompatibilidad con el mío. La verdad es que nunca lo he probado con multisite y no sé qué código añade un multisite al htaccess; no sería raro que mi código directamente no pueda funcionar con multisite. Suerte y saludos.
Muchas gracias Juan por la rápida respuesta. Al final utilicé el plugin WP-Optimize para especificar la caché, fue mucho más fácil en un multisite. Ahora al abrir el robot.txt aparece todo el código, y aunque no lo he comprobado, es muy parecido al del artículo.
Un saludo.