¡Que lo disfrutes!
¡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.
AVISO: Mientras buscas los plugins o recursos que se detallan en este artículo, te aparecerán otros plugins para instalar que pueden tener muy buena pinta y prometerte el cielo en unos pocos clicks. Muchos de ellos son muy buenos y otros no tanto, pero déjame decirte, que ya que estás leyendo esto, entiendo que te interesa la optimización de la velocidad de carga de una web o Web Performance Optimization (WPO) ¿cierto?
Pues bien, el principal enemigo de la WPO es precisamente esto, los temas / plugins Multi Feature / Multi Purpose / Todo en 1 … (¿Se entiende no?..)
Mi consejo es que por supuesto, pruebes todos los plugins y temas que quieras, pero en la medida de lo posible, intentes siempre elegir los que sean lo más específicos posible (sobre todo en lo referente a los plugins).
Es mucho mejor tener 4 plugins pequeños y que hacen 4 funcionalidades concretas que 2 plugins famosos que cargan tu web con 50 funcionalidades de las que al final sólo terminas usando 5.
Una vez dicho esto, si conoces o encuentras alternativas mejores a los plugins comentados en este artículo, por favor ¡compártelos en los comentarios!
Contenidos del Post [Ocultar]
- ¿Qué es Google PageSpeed Insights?
- Cómo usar Google Page Speed Insights y puntuación inicial
- 1. Optimizar Imágenes
- 2. Cómo eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
- Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página con un plugin de WordPress
- Descarga y activa el plugin Async JS and CSS
- Resultados de Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página
- Cómo conseguir un 100/100 en Google Page Speed Insights usando Google Fonts
- 3. Minificar Javascript para conseguir un 100/100 en Google PageSpeed
- 4. Habilitar compresión GZIP
- 5. Especificar caché de navegador (Leverage Browser Caching)
- Especificar caché de navegador para servidores Apache
- Especificar caché de navegador para servidores Nginx
- Especificar caché de navegador con avatares de Gravatar.com
- Especificar caché de navegador si usas Google Analytics
- Otros servicios que no especifican la caché del navegador para Google Pagespeed Insights
- 6. Reducir el tiempo de respuesta del servidor en Google Page Speed Insights
- 100/100 en Google Page Speed Insights ¡Conseguido!
¿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):
- Optimizar Imágenes
- Habilitar Compresión
- Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
- Reducir el tiempo de respuesta del servidor
- Minificar CSS
- Minificar JavaScript
- 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:
- 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.
- Al mejorar tu posicionamiento web, aumentarán tus visitantes y al aumentar tus visitantes, aumentarán tus ingresos.
- 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:
- 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.
- 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.
- 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).
- 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:
- Entra en tu panel de administración de WordPress y dirígete a la pestaña “Plugins”.
- En la parte superior, pulsa el botón “Añadir nuevo”
- Utiliza el buscador de la parte superior derecha para buscar “Async JS and CSS”
- 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”.
- 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:
- 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).
- 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:
- Detecta qué archivos necesitan ser comprimidos según Google Page Speed
- Encuentra esos archivos en tu servidor mediante un programa FTP, ábrelos y copia el contenido.
- 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.
¿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.
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
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";}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.
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).
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).
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.
