Cómo conseguir un 100/100 en Google PageSpeed Insights con (casi) cualquier theme de WordPress

¡Hola a tod@s!

Mi nombre es Danyel Perales y soy diseñador web freelance. En este tutorial paso a paso, os voy a enseñar cómo conseguir un resultado de 100/100 en Google Page Speed Insights poniendo como ejemplo práctico la página home de mi web y portfolio de diseño web y gráfico.

Cosas a tener en cuenta antes de empezar:

• No es bueno obsesionarse con conseguir un resultado de 100/100 en Page Speed. Es una métrica más dentro de muchas que debes tener en cuenta en tu web o blog y no siempre será posible conseguirla si usas determinados servicios (hotjar, pixel de Facebook, …)
• Un buen resultado en Google Page Speed no está reñido con un buen diseño web.
• No todas las empresas de hosting permiten implementar todas las mejoras necesarias para conseguir un 100/100 en Google PageSpeed Insights. Si es tu caso, contacta con el servicio técnico para que implementen esas mejoras por ti. Ante una negativa, mi recomendación es cambiar de compañía. Aquí tienes la comparativa entre los dos hosting que recomiendo.
• Los valores de Google Page Speed Insights son orientativos . Lo importante es la velocidad real de carga de tu web. Recuerda que cada segundo cuenta.

¿Qué es Google PageSpeed Insights?

PageSpeed Insights es una herramienta de Google que mide la velocidad de carga de tu página web.

Aquí vas a aprender cómo funciona y cómo conseguir los mejores resultados para que tu web cargue rápidamente, mejore la experiencia de usuario y subas posiciones en los buscadores.

Debes tener en cuenta que es importante no obsesionarse con conseguir una puntuación perfecta, ya que en muchos casos, es imposible según el tipo de web o tema de WordPress que estemos utilizando conseguir un 100/100 en PageSpeed ya que esto afectaría al aspecto o funcionalidad de la página y por tanto empeoraría la experiencia de usuario que es lo último que queremos. Aquí tienes un artículo para elegir un tema de WordPress perfecto según tu web.

Una vez dicho esto, lo ideal es intentar conseguir un valor por encima de 85 en ambos, pero sobre todo debemos priorizar la velocidad y conseguir la máxima puntuación posible para la carga en móviles, ya que estos suelen acceder a internet con conexiones más limitadas por norma general que los ordenadores.

Antes de seguir, ten en cuenta que como la propia herramienta de Google Page Speed Insights indica en su pie de página, los resultados que genera, son almacenados en la cache durante 30 segundos, por lo que debemos esperar este tiempo tras cada cambio para ver las mejoras correctamente.

Cómo usar Google Page Speed Insights y puntuación inicial

Lo primero que tenemos que hacer es abrir la herramienta de Google PageSpeed Insights.

Introducir la URL de la página web que queremos analizar en el campo de texto y analizará las áreas ya optimizadas de nuestra web y en las que tenemos que mejorar para que vaya lo más rápido posible.

Nada más introducir la URL y analizarla, la herramienta se divide en 2 pestañas, una para analizar la velocidad de carga en móvil y otra para el ordenador.

El color de las puntuaciones va cambiando en función de lo bien que esté optimizada nuestra web.

En el caso de mi portfolio web, los resultados más bajos que he conseguido obtener sin ponerme a llorar han sido estos:

Y las recomendaciones que Google Page Speed Insights nos sugiere que corrijamos son (todas las posibles :D):

1. Optimizar Imágenes
2. Habilitar Compresión
3. Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
4. Reducir el tiempo de respuesta del servidor
5. Minificar CSS
6. Minificar JavaScript
7. Especificar caché de navegador

No te asustes si tu web obtiene una puntuación inicial más baja.

Esto es muy probable, sobre todo porque tendrás una mayor cantidad de archivos CSS y JS, imágenes sin comprimir etc.

En este tutorial vamos a conseguir corregir paso a paso todos los aspectos negativos sin importar el punto de partida.

¡Vamos a ello!

1. Optimizar Imágenes

Vamos a empezar este tutorial para conseguir la mejor puntuación en Google Page Speed Insights por la optimización de imágenes, ya que es el apartado que más penaliza la carga de cualquier página web.

Optimizar las imágenes de tu web tiene múltiples beneficios pero te dejo estos 3 que estoy seguro que te convencerán para dar el paso:

1. Tu web será más rápida, por lo que aumentará la experiencia de usuario, las páginas vistas y el tiempo de permanencia de tus visitantes y por lo tanto el posicionamiento de tu web en Google.
2. Al mejorar tu posicionamiento web, aumentarán tus visitantes y al aumentar tus visitantes, aumentarán tus ingresos.
3. Al ocupar menos espacio en tu servidor, tardarás más en tener que pasar a un plan superior (y más caro) en tu empresa de hosting por lo que ahorrarás dinero.

Se podría decir entonces que optimizar tus imágenes es una de las mejores correcciones que puedes hacer no sólo por tu página web o blog, si no también por tu bolsillo.

¿Ya te ha picado la curiosidad?, ¿quieres saber cómo optimizar tus imágenes? Sigue leyendo:

Cómo optimizar las imágenes de mi web

Como te comentaba antes, este paso es bastante importante, por lo que yo me lo tomo bastante en serio y evito el uso de plugins o atajos en este sentido, ahorrando además recursos en el servidor de mi web.

Mi recomendación para tener bien optimizadas las imágenes de tu web son las siguientes:

1. Crea tus imágenes con el tamaño exacto en el que se vayan a mostrar en tu web utilizando alguna herramienta de edición de imágenes.
2. Además de esto, si trabajas en WordPress, ten bien especificados los tamaños en los que se muestran tus imágenes en tu panel de administración (Ajustes > Medios). Evita cargar imágenes de mayor tamaño de lo que se muestra en la web.
3. Utiliza servicios de compresión en línea como TinyPNG o programas de software de compresión de imágenes como ImageOptim (a mí me gusta combinar los 2).
4. Si prefieres la vía rápida, tienes varios plugins gratuitos (con opción a Premium) para tu WordPress como por ejemplo: WP Smush, EWWW Image Optimizer o Imagify

Como ves hay bastantes servicios a tu disposición para comprimir y optimizar imágenes. Lo único que debes tener en cuenta es que la compresión de las imágenes no suponga una pérdida de calidad en las mismas.

Por supuesto, en Bloggeris ya tienes un artículo mucho más a fondo sobre optimizar imágenes para WordPress.

IMPORTANTE: El filtro de Google Page Speed Insights para la compresión de imágenes es bastante estricto.

Por suerte, si no consigues eliminar por completo el aviso de “Optimizar Imágenes”, es el propio Google quien te ayudará a solucionarlo de una forma algo lenta, pero efectiva.

Abajo del todo de su herramienta para analizar la velocidad de nuestra web, encontraremos una opción que dice “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”.

De esta manera, descargaremos nuestras imágenes descomprimidas como a Google le gustan y ya “sólo” tendremos que subirlas a nuestra carpeta uploads (tuweb.com/wp-content/uploads) de nuestro servidor mediante algún programa FTP gratuito como Filezilla sustituyendo eso sí a las actuales con el mismo nombre, para que funcionen bien la ruta de llamada a esas imágenes.

Tras realizar estos ajustes, vuelvo a pasar mi web por la herramienta de Google Page Speed Inisghts y nos devuelve los siguientes valores:

Además, si revisamos las optimizaciones posibles a realizar, veremos que optimizar imágenes ya no es una de ellas y ahora se encuentra en el apartado Optimizaciones encontradas.

¡Next!

2. Cómo eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Este problema suele aparecer al escanear el 99% de las páginas web por lo que no te asustes si tras revisar tu web Google Page Speed Inisights te dice que hay recursos JavaScript o CSS que bloquean la visualización del contenido de la mitad superior de la página.

IMPORTANTE: Este apartado puede causar problemas de funcionamiento en tu web por lo que es importante que realizas las pruebas en un horario con pocas visitas o en un servidor de pruebas antes de lanzarlo.

Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página con un plugin de WordPress

Para realizar este ajuste, tenemos a nuestra disposición el plugin Async JS and CSS.

Su función simplemente es aprovechar la carga asíncrona de los scripts y del css para que todo el contenido cargue antes.

Como podréis ver al acceder a la página del plugin, su código no se ha actualizado en los últimos años, pero os aseguro que sigue funcionando perfectamente hasta la fecha y sus más de 10.000 instalaciones activas lo avalan.

Descarga y activa el plugin Async JS and CSS

Este plugin para eliminar el Javascript y CSS de la mitad superior de la página es bastante sencillo de usar (pero no por eso menos efectivo), así que veremos su funcionamiento rápidamente:

1. Entra en tu panel de administración de WordPress y dirígete a la pestaña “Plugins”.
2. En la parte superior, pulsa el botón “Añadir nuevo”
3. Utiliza el buscador de la parte superior derecha para buscar “Async JS and CSS”
4. Una vez hagas la búsqueda por el nombre del plugin, baja un poco en el listado de resultados para encontrar el plugin. Asegúrate que escoges el correcto, por si te sirve, el autor es “elCHAVALdelaWEB”.
5. Instala y activa el plugin

Como habrás podido observar al buscar, hay bastantes plugins que ofrecen este tipo de funcionalidades, a mi personalmente, el que más me funciona es este, ya que cumple con su misión sin sobre cargar de código innecesario la web de forma simple y efectiva.

Si conoces otro plugin para eliminar el CSS y Javascript de la parte superior de tu página web o te animas a probar otro diferente, pásate por la zona de comentarios y cuéntanos tu experiencia.

Cómo usar el plugin Async JS and CSS

Una vez activado, podrás encontrar el plugin en el desplegable de la pestaña “Ajustes” dentro de tu panel de administración de WordPress.

Como verás, hay varias opciones que puedes configurar. Mi recomendación es que lo dejes tal cual viene configurado por defecto (salvo que sepas lo que estás haciendo), así que pulsamos “Guardar cambios”.

Como bonus, este plugin también minifica tus archivos CSS por lo que es un fantástico 2×1.

Es muy importante que lo siguiente que hagas a continuación es revisar a fondo que tu web sigue viéndose y funcionando perfectamente tras activar este plugin, ya que según el tema o plugins que uses, alguna funcionalidad puede dejar de funcionar.

Si todo funciona bien, fantástico, si no es así, no te preocupes, una de las cosas que más me gustan de este plugin es el apartado “Excepciones”, en el que puedes añadir algún archivo concreto que te de problemas para evitar que aplique cambios y seguir optimizando el resto de archivos para mejorar la velocidad en lo posible.

Ahora sí, vamos a Google Page Speed para ver los avances y…

Resultados de Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página

¡BOOM! Notable alto como recompensa a nuestro trabajo y encima para subirnos aún más la moral ¡el apartado en PC ya está en verde!

Pues yo aún tengo problemas para conseguir Eliminar el Javascript y CSS que bloquean la visualización de mi página

Espera… ¿Qué? Qué no has conseguido estos resultados y aún te sale el error..

¡No te preocupes que aún no hemos dicho la última palabra!

La parte negativa es que cada web es un mundo, y sería imposible listar aquí la solución a todos los conflictos que pueden surgir.

La parte positiva, es que en mi experiencia el principal problema con el que se encuentra cualquier webmaster o blogger una vez llegados a este punto es que Google no carga de forma eficiente las fuentes o tipografías de … ¡¡el propio Google!!

¿La solución? Sigue leyendo.

Cómo conseguir un 100/100 en Google Page Speed Insights usando Google Fonts

Como siempre, dos opciones, una fácil y rápida y otra óptima un poco más elaborada:

1. Plugin de WordPress: Utiliza el plugin Google Webfont Optimizer. Instala, activa y a funcionar, no hay que configurar nada. (De nuevo vuelve a ser un plugin sin mantenimiento desde hace tiempo, pero esto es debido a que su misión es tan específica, que no lo requiere).
2. Mediante código: Copia en tu navegador la URL que genera la aplicación de Google Fonts, pasa el css que verás por un compresor de css online y pégalo tal cual en tu archivo «header.php» entre etiquetas <style></style>.

¿Listo? Sigue con el siguiente apartado para alcanzar la gloria del 100/100 ¡ya hemos conseguido lo más difícil! .

¿Aún tienes algún problema?

Deja un comentario con el error que te aparece en Google Page Speed Insights y trataré de ayudarte.

3. Minificar Javascript para conseguir un 100/100 en Google PageSpeed

En este caso a falta de una te traigo 3 posibles soluciones:

La mejor opción para minificar el Javascript

La mejor solución de nuevo nos la da el propio Google ofreciéndonos la posibilidad de descargar los archivos ya minificados en la opción de descargar los archivos optimizados en la parte inferior de la página.

Una vez descargados, sube esos archivos a la ruta correcta mediante un programa FTP.

Minifica tu código Javascript manualmente

La siguiente opción para evitar sobre cargar la web con más plugins, es que manualmente pases tus archivos Javascript por una herramienta de compresión online como jscompress.com.

Los pasos son los siguientes:

1. Detecta qué archivos necesitan ser comprimidos según Google Page Speed
2. Encuentra esos archivos en tu servidor mediante un programa FTP, ábrelos y copia el contenido.
3. Pasa ese contenido por el compresor online y vuélvelo a pegar de nuevo en el archivo original uno a uno y con cuidado de no mezclarlos.

Plugin gratuito de WordPress para minificar Javascript

¿El código no es lo tuyo? No te preocupes, como siempre, puedes usar un plugin gratuito como Autoptimize para minificar tus archivos JS y HTML.

Su uso es muy sencillo, simplemente actívalo y marca en ajustes el contenido que quieras minificar.

Recuerda que ya minificamos previamente los archivos CSS con el plugin Async JS and CSS por lo que no debes activar esa opción para evitar conflictos.

¿Ya estás por aquí? Genial; como premio, este rápido paso nos deja con una fantástica puntuación a las puertas del sobresaliente.

¿Te vienes a por la matrícula?

4. Habilitar compresión GZIP

Esta parte es una mejora bastante rápida y sencilla de realizar, y además, nos hará ganar varios puntos en el test de Google Page Speed Insights por lo que vamos a por ello.

La función de la compresión gzip o deflate es como su nombre indica comprimir los archivos para reducir su tamaño antes de que sean descargados por el visitante, de forma que al tener un peso de archivo menor, tarde menos y por lo tanto nuestra página web cargue más rápido.

Código para implementar la compresión GZIP en htaccess

Como siempre, te recomiendo que en la medida de lo posible, realices estas mejoras implementando el código que te adjunto a continuación, de esta manera no dependerás de plugins de terceros que tendrás que mantener actualizados etc.

Para añadir este código a tu web y aprovecharte de las ventajas de la compresión gzip, debes acceder mediante FTP de nuevo, y en este caso buscar en la raíz de tu dominio un archivo llamado “.htaccess”.

Normalmente lo encontrarás en la carpeta “public_html” de tu servidor.

Una vez abierto, pega el siguiente código en el archivo htaccess, dale a guardar y listo.

<IfModule mod_deflate.c>
 <IfModule mod_headers.c>
 Header append Vary User-Agent env=!dont-vary
 </IfModule>
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/x-component
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/x-js
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/richtext
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xsd
 AddOutputFilterByType DEFLATE text/xsl
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE image/bmp
 AddOutputFilterByType DEFLATE application/java
 AddOutputFilterByType DEFLATE application/msword
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-msdownload
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE application/json
 AddOutputFilterByType DEFLATE application/vnd.ms-access
 AddOutputFilterByType DEFLATE application/vnd.ms-project
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/vnd.ms-opentype
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.database
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.chart
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.graphics
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.presentation
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.spreadsheet
 AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.text
 AddOutputFilterByType DEFLATE audio/ogg
 AddOutputFilterByType DEFLATE application/pdf
 AddOutputFilterByType DEFLATE application/vnd.ms-powerpoint
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
 AddOutputFilterByType DEFLATE image/tiff
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/vnd.ms-opentype
 AddOutputFilterByType DEFLATE audio/wav
 AddOutputFilterByType DEFLATE application/vnd.ms-write
 AddOutputFilterByType DEFLATE application/font-woff
 AddOutputFilterByType DEFLATE application/font-woff2
 AddOutputFilterByType DEFLATE application/vnd.ms-excel
 <IfModule mod_mime.c>
 # DEFLATE by extension
 AddOutputFilter DEFLATE js css htm html xml
 </IfModule>
</IfModule>

Acabas de añadir compresión gzip o deflate en tu sitio web. ¡Enhorabuena!

Si tras implementar el siguiente código correctamente, no ves que desaparezca el aviso de falta de compresión, deberás contactar con tu proveedor de hosting para que realicen este cambio por ti, ya que en algunas empresas (te miro a ti 1&1 y compañía), no se permite a los usuarios hacer este tipo de ajustes.

Plugin WordPress para habilitar la compresión GZIP

Como no podía ser de otra forma, te dejo un par de alternativas en forma de plugins de WordPress por si prefieres no tocar el código de tu web.

Para realizar esta tarea tenemos el archi-conocido W3 Total Cache (W3TC) o WP Super Cache tal y como se recomienda en este artículo con los mejores plugins gratis para WordPress.

Ambos son 2 plugins muy conocidos y con gran cantidad de tutoriales que puedes buscar en google o youtube para su correcta configuración por lo que, si te parece, no nos entretenemos con eso aquí para no alargar el post en exceso.

5. Especificar caché de navegador (Leverage Browser Caching)

¿Aún no sabes lo que es la cache?

Simplificando, la caché de un navegador (Chrome, Firefox, Internet Explorer, Ópera …) es una función que almacena partes de una web que visitas, para que cuando vuelves a visitar esa misma web, no tengas que volver a cargar la web al completo.

Por lo tanto, tener la caché del navegador bien configurada en tu página web, hará que esta cargue más rápido, que consigamos una mejor puntuación en Google Page Speed Insights y en definitiva mejores tu SEO y posiblemente tus ingresos.

Al igual que los anteriores este paso es muy sencillo y rápido de implementar.

Especificar caché de navegador para servidores Apache

Si usas WordPress, tienes la opción de instalar algún plugin para solucionar esta advertencia. El más famoso es W3 Total Cache, mencionado antes, aunque te recomiendo que realices tú mismo los ajustes mediante código si sabes cómo hacerlo.

Sólo tienes que acceder a tu servidor mediante FTP y abre de nuevo el archivo llamado .htaccess que encontrarás posiblemente en la raíz de web (normalmente public_html, o la carpeta que contenga tu proyecto dentro de tu hosting).

Una vez abierto, copia y pega este código al final del todo, que es el que añadiría el plugin W3TC si te decides por usar esta via (nota: algún código lo verás cortado debido a su anchura, no obstante copia y pega TODO):

# BEGIN W3TC Browser Cache
<IfModule mod_mime.c>
 AddType text/css .css
 AddType text/x-component .htc
 AddType application/x-javascript .js
 AddType application/javascript .js2
 AddType text/javascript .js3
 AddType text/x-js .js4
 AddType text/html .html .htm
 AddType text/richtext .rtf .rtx
 AddType image/svg+xml .svg .svgz
 AddType text/plain .txt
 AddType text/xsd .xsd
 AddType text/xsl .xsl
 AddType text/xml .xml
 AddType video/asf .asf .asx .wax .wmv .wmx
 AddType video/avi .avi
 AddType image/bmp .bmp
 AddType application/java .class
 AddType video/divx .divx
 AddType application/msword .doc .docx
 AddType application/vnd.ms-fontobject .eot
 AddType application/x-msdownload .exe
 AddType image/gif .gif
 AddType application/x-gzip .gz .gzip
 AddType image/x-icon .ico
 AddType image/jpeg .jpg .jpeg .jpe
 AddType application/json .json
 AddType application/vnd.ms-access .mdb
 AddType audio/midi .mid .midi
 AddType video/quicktime .mov .qt
 AddType audio/mpeg .mp3 .m4a
 AddType video/mp4 .mp4 .m4v
 AddType video/mpeg .mpeg .mpg .mpe
 AddType application/vnd.ms-project .mpp
 AddType application/x-font-otf .otf
 AddType application/vnd.ms-opentype ._otf
 AddType application/vnd.oasis.opendocument.database .odb
 AddType application/vnd.oasis.opendocument.chart .odc
 AddType application/vnd.oasis.opendocument.formula .odf
 AddType application/vnd.oasis.opendocument.graphics .odg
 AddType application/vnd.oasis.opendocument.presentation .odp
 AddType application/vnd.oasis.opendocument.spreadsheet .ods
 AddType application/vnd.oasis.opendocument.text .odt
 AddType audio/ogg .ogg
 AddType application/pdf .pdf
 AddType image/png .png
 AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
 AddType audio/x-realaudio .ra .ram
 AddType application/x-shockwave-flash .swf
 AddType application/x-tar .tar
 AddType image/tiff .tif .tiff
 AddType application/x-font-ttf .ttf .ttc
 AddType application/vnd.ms-opentype ._ttf
 AddType audio/wav .wav
 AddType audio/wma .wma
 AddType application/vnd.ms-write .wri
 AddType application/font-woff .woff
 AddType application/font-woff2 .woff2
 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
 AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css A31536000
 ExpiresByType text/x-component A31536000
 ExpiresByType application/x-javascript A31536000
 ExpiresByType application/javascript A31536000
 ExpiresByType text/javascript A31536000
 ExpiresByType text/x-js A31536000
 ExpiresByType text/html A3600
 ExpiresByType text/richtext A3600
 ExpiresByType image/svg+xml A3600
 ExpiresByType text/plain A3600
 ExpiresByType text/xsd A3600
 ExpiresByType text/xsl A3600
 ExpiresByType text/xml A3600
 ExpiresByType video/asf A31536000
 ExpiresByType video/avi A31536000
 ExpiresByType image/bmp A31536000
 ExpiresByType application/java A31536000
 ExpiresByType video/divx A31536000
 ExpiresByType application/msword A31536000
 ExpiresByType application/vnd.ms-fontobject A31536000
 ExpiresByType application/x-msdownload A31536000
 ExpiresByType image/gif A31536000
 ExpiresByType application/x-gzip A31536000
 ExpiresByType image/x-icon A31536000
 ExpiresByType image/jpeg A31536000
 ExpiresByType application/json A31536000
 ExpiresByType application/vnd.ms-access A31536000
 ExpiresByType audio/midi A31536000
 ExpiresByType video/quicktime A31536000
 ExpiresByType audio/mpeg A31536000
 ExpiresByType video/mp4 A31536000
 ExpiresByType video/mpeg A31536000
 ExpiresByType application/vnd.ms-project A31536000
 ExpiresByType application/x-font-otf A31536000
 ExpiresByType application/vnd.ms-opentype A31536000
 ExpiresByType application/vnd.oasis.opendocument.database A31536000
 ExpiresByType application/vnd.oasis.opendocument.chart A31536000
 ExpiresByType application/vnd.oasis.opendocument.formula A31536000
 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
 ExpiresByType application/vnd.oasis.opendocument.text A31536000
 ExpiresByType audio/ogg A31536000
 ExpiresByType application/pdf A31536000
 ExpiresByType image/png A31536000
 ExpiresByType application/vnd.ms-powerpoint A31536000
 ExpiresByType audio/x-realaudio A31536000
 ExpiresByType image/svg+xml A31536000
 ExpiresByType application/x-shockwave-flash A31536000
 ExpiresByType application/x-tar A31536000
 ExpiresByType image/tiff A31536000
 ExpiresByType application/x-font-ttf A31536000
 ExpiresByType application/vnd.ms-opentype A31536000
 ExpiresByType audio/wav A31536000
 ExpiresByType audio/wma A31536000
 ExpiresByType application/vnd.ms-write A31536000
 ExpiresByType application/font-woff A31536000
 ExpiresByType application/font-woff2 A31536000
 ExpiresByType application/vnd.ms-excel A31536000
 ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
 <IfModule mod_headers.c>
 Header append Vary User-Agent env=!dont-vary
 </IfModule>
 AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
 <IfModule mod_mime.c>
 # DEFLATE by extension
 AddOutputFilter DEFLATE js css htm html xml
 </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 </IfModule>
</FilesMatch>
<FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$">
 <IfModule mod_headers.c>
 Header unset Last-Modified
 </IfModule>
</FilesMatch>
# END W3TC Browser Cache

Especificar caché de navegador para servidores Nginx

En caso de que estés usando un servidor Nginx, el ejemplo de código para controlar el caché de navegador según Google Page Speed Insights es:

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Especificar caché de navegador con avatares de Gravatar.com

Una de las incidencias más comunes que no se solucionaría con los códigos que tienes arriba, sería si estás usando los avatares para los comentario de tu blog generados por Gravatar.

Para solucionarlo, tienes a tu disposición el plugin FV Gravatar Caché. Instala, activa y listo.

Especificar caché de navegador si usas Google Analytics

Si has llegado hasta aquí y aún no ha desaparecido el aviso de especificar caché del navegador, no desesperes. Lo más probable es que si abres la pestaña de esta advertencia encuentres que hay un archivo que está dando problemas.

Algo tal que así:

«https://www.google-analytics.com/analytics.js (2 horas)»

En efecto, el código de Google Analytics que tienes implementado en tu web para controlar todo lo que ocurre en ella impide eliminar esta alerta de Google Page Speed Insights.

¿Irónico verdad?

El motivo es que como ves en la herramienta, la duración de este archivo en cache, es de tan sólo 2 horas y no es suficiente para la herramienta de Page Speed para aceptarlo como aprobado.

La mala noticia es que Google ya ha dicho que no tiene intención de modificarlo, así que nos toca buscar alternativas.

La buena noticia es que existen varias alternativas para solventarlo y conseguir nuestro 100/100 en Google Page Speed Insights:

Descargar Google Analytics localmente

Esta práctica no está aprobada por Google.

Bastaría con crear un archivo en tu web con el código que genera el facilitado por Google (https://www.google-analytics.com/analytics.js), por desgracia, esto es una práctica que no está recomendada por Google ya que suelen hacer cambios cada cierto tiempo y sería muy fácil que te quedases obsoleto rápidamente.

Usar una versión Lite de Google Analytics

Tu segunda opción, es usar una versión reducida y cacheable de Google Analytics llamada GA Lite y creada por Jesse Luoto.

Este código Javascript usa la API soportada por Google y mediante un script, se va actualizando si hubiese cambios.

La instalación de GA Lite es similar a la habitual. Tan sólo hay que pegar el código que encontrarás en su página de github al final de la etiqueta <body> de tu HTML o en el archivo footer.php de tu WordPress.

Por supuesto, también puedes hacer una llamada a este archivo a través del CDN que tengas configurado (aquí tienes un tutorial de la CDN Cloudflare).

Plugin WordPress para especificar la caché del navegador para Google Analytics

Por último, la opción más rápida y cómoda seguramente sea instalar el magnífico plugin Complete Analytics Optimization Suite (CAOS) creado por Daan van den Bergh.

Este plugin se encarga de resolver el conflicto entre Google Analytics y Google Page Speed Insights permitiéndote alojar localmente el código de google Analytics y a la vez lo mantiene actualizado mediante la función nativa de WordPress wp_cron().

Además, ofrece algunas funcionalidades extra como decidir si quieres cargar tu código en el header o footer de tu web (te recomiendo esto último).

Otros servicios que no especifican la caché del navegador para Google Pagespeed Insights

Como te comentaba al principio del artículo, hay ciertos aspectos que no podemos corregir y por eso mismo no es bueno obsesionarse con conseguir un 100 en Google Page Speed insights si no en que la velocidad de carga real de la web sea rápida.

Algunos de estos archivos de los que no se puede eliminar la advertencia de la caché del navegador o Leverage Browser Caching son:

• El pixel de Facebook
• Hotjar
• Twitter widgets oficiales
• CrazyEgg

6. Reducir el tiempo de respuesta del servidor en Google Page Speed Insights

Respuesta corta: Plugin Cache Enabler

Respuesta larga:

Este error aparece normalmente en hosting compartidos (sobre todo en los planes inferiores), donde la capacidad del servidor es limitada.

Tu servidor no carga todo lo rápido que le gusta a Google y esto te penaliza en tu camino hacia el 100 en Google Page Speed.

Por desgracia no podemos hacer que tu servidor vaya más rápido, pero sí podemos ponerle las cosas fáciles para que tenga menos trabajo y por lo tanto un mejor rendimiento.

Como te comentaba antes, yo utilizo el plugin de WordPress Cache Enabler (de la gente de KeyCDN) en las webs que tengo en servidores de este tipo.

Es un plugin de cache muy ligero que minifica y comprime tu web para servirla más rápidamente de forma que Google no detecte que tu servidor no tiene la velocidad deseada.

Descarga, activa y listo.

100/100 en Google Page Speed Insights ¡Conseguido!

Para terminar, pasamos por última vez nuestra web por el analizador de Google Page Speed Insights y …

¡Puntuación de 100 conseguida!

Enhorabuena a todos los que halláis llegado hasta aquí.

A los que estéis usando algún servicio que no os permita alcanzar el 100, ¡tranquilos!.

Como comentábamos al principio, el resultado de Page Speed Insights de Google es sólo una guía genérica de cosas a optimizar, lo realmente es importante es la velocidad de carga de tu web en tiempo, no en puntos de ninguna herramienta.

Si te ha gustado el tema de la optimización de la velocidad de carga o web performnace optimization, déjame recordarte, que esto que hemos visto es una forma básica de mejorar la puntuación en Google Page Speed Insights, y que hay todo un mundo de optimizaciones esperándote ahí fuera para todos aquellos que se tomen sus proyectos online en serio.

Otras acciones más avanzadas que se pueden llevar a cabo y me gusta implementar en las páginas web que desarrollo para mis clientes son:

• Mejorar la velocidad real de la página web (en segundos) consiguiendo altísimas puntuaciones en Pingdom, GTMetrix, TestMySite with Google etc..
• Cargar las imágenes con lazyload (sobre todo en imágenes pesadas o usadas como fondo)
• Implementar srcset para servir las imágenes más apropiadas para cada dispositivo
• Usar la función wp_is_mobile nativa de WordPress para crear condicionales y sólo cargar lo realmente importante en dispositivos móviles
• Implementar AMP en tu sitio web
• Realizar las mejoras vistas y adicionales mediante código, evitando así sobrecargar la web con plugins innecesarios que requieren mantenimiento, actualizaciones etc..
• Evitar la carga innecesaria de archivos (woocommerce, contactform7 e infinidad de plugins o temas cargan archivos que tu web no necesita, evítalo) Incluso el propio CMS WordPress en sí mismo carga muchísimos archivos que no necesitas y que ralentizan tu web.
• Implementa las funciones habituales mediante código en lugar de plugins (formularios de contacto, botones compartir redes sociales etc), tu web lo agradecerá.
• Hay otras muchas mejoras en función de cada proyecto, recursos y necesidades.

Por último, si te interesa mejorar la velocidad de tu web desde cualquier nivel, pero no tienes el tiempo o los conocimientos necesarios y prefieres dejarlo en manos de un profesional del diseño y desarrollo web se encargue de optimizar el diseño, la velocidad o la estructura de tu web te sugiero que solicites un presupuesto para tu web sin compromiso.

Dicho esto, me despido agradeciendo a David la oportunidad de escribir en su magnífico blog, agradeciéndote a ti tu visita y rogándote que dejes un comentario con tu puntuación final, con las dudas que puedas tener o con tu opinión sobre Google Pagespeed Insights, así como compartirlo en las redes sociales para poder llegar a más gente.

¡Nos leemos en los comentarios!

Un saludo, Danyel Perales.

Acerca de Danyel Perales

Diseñador web y desarrollador WordPress de profesión actualmente aprendiendo SEO por vocación para dar más visibilidad a mis proyectos y los de mis clientes.

Redes sociales: Twitter | Google +