Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight)

Disfrutando del 100/100 de Google, instalé el plugin recaptcha, y se me calló la puntuación máxima.
¿Que es y como resolver el “Especificar caché de navegador en ficheros externos”?

Ojo con los plugins!
Cada vez que instalamos un plugin nos exponemos a cambios drásticos en cuanto a velocidad y estabilidad.
Podemos toparnos con llamadas a scripts o estilos mal optimizados o con errores, scripts externos problemáticos o que no existen, y etc…
Pero en este post me voy a centrar explicitamente al tema del caché del navegador hacia los ficheros externos.

Entender que significa “Especificar caché de navegador en ficheros externos”

Empecemos por entender que nos transmite google con el mensaje “Especificar caché de navegador en ficheros externos”.

La wikipedia nos invita a conocer de fondo que es la caché del navegador -> wiki

Como más o menos todos sabemos lo que hace la caché del navegador, entendamos que cachear un fichero externo o remoto sería hacer una copia local en nuestro ordenador, y leer siempre el fichero local almacenado.
Que es precisamente lo que nuestro navegador no hace, y este es el problema.

Un fichero externo, se escapa a nuestro control, y además de no poder asignar fechas (header-expire), tampoco podemos minificar su contenido.

Mientras no llegue el día en que nuestros navegadores haga tal cosa, tendremos que aguantarnos, o buscar una solución por nuestra cuenta. (Yo ya he encontrado mi solución)

En mi ejemplo real cuando yo instalo el plugin “recaptcha” en mi wordpress, este plugin incluye por sorpresa una llamada a un script externo. Y tumba mi 100/100 de PageSpeed que tanto me costó conseguir.
Y eso es de lo que se está quejando el Google PageSpeed Insights, porque no encuentra fecha de caducidad al fichero externo nuevo al que expongo mi wordpress ahora.

Esto ha sido así toda la vida y no tiene nada de malo. Pero el Google PageSpeed Insights incluye en su algoritmo esta consideración cara a penalizarnos.

Verificar los ficheros externos

Si vemos la notificación de PageSpeed Insights, allí mismo vemos el motivo de la penalización, y también vemos cual es el fichero que se está escapando a nuestro control.Especificar caché de navegador en ficheros externos

También podemos verlo desde el navegador con la herramienta para desarrolladores.
Que precisamente en este caso veo que, no se trata de un fichero, si no que en realidad se tratan de 2.
Para ver los ficheros externos desde la herramienta del navegador, lo vemos así:

  • Situando el cursor sobre el nombre del fichero, veremos la ruta completa.
  • El “Remote Address” nos dará una dirección Ip que no corresponde a nuestro hospedaje.

Ver ficheros externos desde la herramienta de desarrolladores de Google Chrome

¿Os habéis fijado que realmente hay 2 ficheros externos y el PageSpeed solo ve 1?

¿Cómo especificar la caché del navegador para mejorar el Google PageSpeed Insight?

Antes de solucionar el tema que estoy comentando, es realmente necesario tener activado propiamente dicho el control de caché del navegador en nuestro servidor.
Documentado aquí -> especificar el caché de navegador

¿Cómo especificar caché de navegador en ficheros externos, y mejorar el Google PageSpeed?

El truco es sencillo.

Básicamente nos hacemos con una copia de los mismos, y lo alojamos en la ruta más conveniente para nosotros en nuestro servidor.
Localizamos las llamadas de estos ficheros, y cambiamos la ruta y nombre.
Estás líneas pueden estar en plugins, o en el tema…

Cuando la web use estos contenidos en respectivos ficheros internos, el servidor podrá aplicarles esta regla.

Es así de sencillo.

¿Cómo solucionar la penalización de Google PageSpeed Insight en los ficheros externos desde nuestro WordPress?

En wordpress casi todo se arregla a golpe de plugins.

No se si habrá algún plugin específico para arreglar este tema.
Pero como yo me estoy haciendo mi propio plugin de WordPress para solucionar todos los problemas relacionados con el Google PageSpeed Insights, este ha sido otro paso más a resolver.

El plugin se llama FixRenderBlocking&Minify (Frbm para los amigos :-p)

A este procedimiento concreto, le llamo “Cazador de enlaces externos”.
Le añado estos 2 nuevos recursos que “ReCaptcha” a añadido a mi web.

frbm Cazar enlaces externos

Y el resultado es éste:
Especificar caché de navegador de ficheros externos con el plugin FRBM

Lo he medio conseguido (Verde es recurso cacheado, rojo recurso no cacheado)

Cuando un recurso externo contiene otros recursos externos

En el desarrollo de este fix, me doy cuenta de un 2º problema.
El fichero recaptcha__en.js no se cachea. ¿Porque?
Porque ese recurso está dentro del fichero api.js, y queda fuera del control del código del plugin.
Posiblemente sea también esta la razón por la que PageSpeed no detecta este fichero.

Parece ser que el propio fichero internalizado y cacheado, puede contener otros ficheros externos.
Y el caso de este plugin “ReCaptcha” ha sido el caso.

No hay nada mejor que tener problemas, para poder controlar el 100% del meollo y prevenir futuros contratiempos.

Así que… ¡¡¡dedos para que os quiero!!! A adaptar el código a las posibles circunstancias!!!

Añado, “Cazar también en los objetos cacheados”frbm Cachear recursos de recursos

Y vualá!!!
Los nombres que aparecen ahora son distintos, porque son los nuevos nombres que le confiere el plugin a los ficheros cacheados.
frbm Cazar enlaces externos

La ficha de los objetos cacheados:
frbm Ficheros externos cacheados

Deja un comentario

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