Optimización web:

Google PageSpeed y GTMetrix

Imanol Terán

Caricatura realizada por @oneeyedman

itermar.io

  • Cursos de diseño web, WordPress, HTML, CSS, productividad, emprendimiento...
  • Descargas de themes, plugins, guías...
  • Todo por 10 €/mes

Con el código ENPRESADIGITALA

1 MES

GRATIS

Optimización Web

  • Introducción
  • Google PageSpeed
  • GTMetrix
  • Errores más comunes
    • Compresión | Caché |Minificar código | Tamaño de las imágenes |  Tiempo de respuesta del servidor
  • Optimizar WordPress
  • Caso práctico

Introducción

  • Hoy en día, muy importante OPTIMIZAR
  • Google nos premia y nos posiciona mejor
  • La UX es mejor
    • Velocidad de carga de la web es FUNDAMENTAL
    • Adaptación del layout a diferentes resoluciones de pantalla
    • Cuidado con tamaño de los archivos a cargar

Aspectos a tener en cuenta

  • Web Responsive

  • Web o Blog: Cargar en menos de 2s

  • Tienda online: Cargar en menos de 4s

  • Es más importante la velocidad de la web que las puntuaciones

    • ​Nueva herramienta de PageSpeed

HERRAMIENTAS

Errores más comunes

Evitar redirecciones

Salta cuando detecta que entre la URL introducida y la página de destino hay más de una redirección

Soluciones

  • Utilizar diseño web adaptable

  • Evitar tener diferentes versiones de la misma web

  • URL > URL + www > URL móvil

Habilitar Compresión

Salta cuando detecta que se han publicado recursos comprimibles sin compresión gzip

Soluciones

  • Habilitar compresión gzip en servidor

  • Puede que tengamos servidor configurado para entregar con compresión gzip pero me indique que muchos de mis recursos necesitan compresión.

    • Hay proxies que deshabilitan compresión cuando se descargan archivos en equipos cliente

    • Tu lo estás haciendo bien pero Insights se basa en datos obtenidos en las cabeceras devueltas al cliente.

Reducir tiempo de espera del servidor

Salta cuando detecta que el tiempo de respuesta del servidor es superior a 200ms

Mejorar tiempo de espera del servidor

  • Es el tiempo en cargar HTML para mostrar la página, restando latencia entre red de Google y el servidor

  • Puede haber diferencias → no destacables → Si fuese muy marcado → Problema de servidor

  • Reducir tiempo de espera del servidor → Inferior a 200ms

    • Lógica de la app lenta / Consultas lentas BBDD / Enrutamiento lento / Bibliotecas / Escasez de recursos o memoria

Soluciones

Soluciones

  • IDENTIFICAR Y CORREGIR

    • Problemas de rendimiento

    • Si utilizas framework o CMS conocido → Consultar documentación

Soluciones

  • SUPERVISAR

    • Si el rendimiento sigue estable

Mejorar caché del navegador

Salta cuando se detecta que en la respuesta del servidor del cliente no se incluyen encabezados de caché explícitos

Optimizar caché

  • Proceso de obtención de recursos en la red → lento y costoso

    • Puede bloquear renderizado de la web

  • En las respuestas de los servidores debe especificarse una política de almacenamiento de recursos en caché

    • Cliente determina si puede utilizar recursos de peticiones anteriores

Optimizar caché

Minificar recursos

Salta cuando se detecta que alguno de tus recursos podrían reducir su tamaño mediante minificación.

Minificar recursos

  • Consiste en reducir lo máximo posible los ficheros (HTML, CSS, JavaScript), eliminando elementos sobrantes o redundantes
    • Eliminar comentarios, espacios / Nombre de funciones más cortos / Usar variables

    • Sin modificar comportamiento (mostrar igual en navegadores

Minificar recursos

Optimizar entrega del CSS

Salta cuando detecta que se incluyen hojas de estilo externas que bloquean el renderizado, lo que aumenta el tiempo que tarda la página en renderizarse por primera vez

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
 .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Tamaño de las imágenes

Salta cuando detecta que las imágenes de la página pueden optimizarse para reducir su tamaño sin pérdida de calidad

Optimizar imágenes

Reducir tamaño contenido superior

Salta cuando detecta que puede producirse un flujo adicional de datos en la red para mostrar el contenido de la mitad superior de una página.

Priorizar contenido visible

  • Para que las páginas carguen más rápido, limita el tamaño de los datos que se necesita para mostrar el contenido de la mitad superior de la página.
    • HTML
    • Imágenes
    • CSS
    • JavaScript

Priorizar contenido visible

  • Formas de hacerlo
    • Estructura el código HTML para cargar primero el contenido más importante en la parte superior de la página.
    • Reduce la cantidad de datos utilizados por los recursos.

Priorizar contenido visible

  • Estructurar código HTML
    • Si HTML carga widgets antes que contenido principal, cambia la prioridad para que el contenido principal se cargue primero.
    • Si utiliza un diseño de dos columnas con una barra lateral de navegación y un artículo, pero el código HTML carga la barra lateral antes que el artículo, cargar el artículo primero.

Priorizar contenido visible

  • Reducir cantidad de datos utilizados
    • Minificar los recursos
    • Usar CSS en vez de imágenes siempre que sea posible.
    • Habilitar la compresión

Quitar JavaScript que bloquea renderizado

Salta cuando detecta que en tu HTML se hace referencia a un archivo JavaScript externo que bloquea el renderizado del contenido de la mitad superior de tu página.

Quitar JS que bloquea renderizado

  • Browser antes de renderizar página, tiene que analizar las etiquetas HTML para generar árbol DOM
  • Siempre que el analizador se encuentra con una secuencia de comandos, para y la ejecuta antes de seguir con el análisis
  • Si detecta una secuencia de comandos externa, espera a que se descargue el recurso correspondiente
  • Esto genera ciclos de ida y vuelta de red y retrasar el primer renderizado de la página en cuestión.

Quitar JS que bloquea renderizado

  • Formas de solucionarlo:
    • Utilizar JavaScript insertado (intentar que sea el mínimo posible)
    • Procesar JS de forma asíncrona
      • Atributo HTML async
    • Retrasar la carga de JavaScript

Medir Velocidad

Medir velocidad

  • Desde hace poco tenemos una nueva versión de Google PageSpeed
  • Nos permite conocer la velocidad que experimenta el usuario en una web en "el mundo real"
  • Obtenemos datos más cercanos a la realidad, que los que nos indica el bot de Google
  • La herramienta muestra la rapidez con la que se cargan tus páginas en función de los datos reales del usuario
  • Al realizar esta medición, obtendremos 3 posibles valores
    • Rápido
    • Lento
    • Medio
  • Estadísticas de página indican si la página puede ser más rápidas si modificas su apariencia y funcionalidad

Medir velocidad

  • Se obtiene a partir de datos del informe Experiencia de Usuario de Chrome (CrUX)
  • Obtenemos datos de dos métricas:
    • ​FCP (First Contentful Paint)
      • ​Momento en que los usuarios obtienen respuestas visuales de las páginas
    • DCL (DOMContentLoaded)
      • ​Mide el momento en que se cargan y analizan los documentos HTML

Medir velocidad

  • Se compara la mediana de estas dos métricas con todas las páginas del informe CrUX
  • En base a esta métrica, se asigna la velocidad

Medir velocidad

  • Rápida
    • ​La mediana de la métrica se encuentra en el tercio más rápido de todas las cargas de páginas.
  • Lenta
    •  La mediana de la métrica se encuentra en el tercio más lento de todas las cargas de páginas.
  • Normal
    • ​La mediana de la métrica se encuentra en el tercio intermedio de todas las cargas de páginas.

Medir velocidad

  • Puede que para una URL concreta, PSI no nos de datos acerca de su velocidad:
    • En PSI se usan datos del informe Experiencia de Usuario de Chrome, que proporciona datos de velocidad de URL populares que los rastreadores web de Google conocen

* Siempre nos indicará las optimizaciones realizadas en la página y cuáles podemos realizar para mejorarla

Medir velocidad

Medir velocidad

OPTIMIZAR WORDPRESS

Consejos y Plugins

OPTIMIZAR WORDPRESS

Forma manual

.htaccess

Where magic happens

* Dejar pasar 30 segundos si no se aplica el cambio

Habilitar compresión

<FilesMatch "\.(css|js|ico|pdf|jpg|jpeg|png|gif|php|woff)$">
SetOutputFilter DEFLATE
</FilesMatch>

Caché

<FilesMatch "\.(css|js|ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

Caché

## BEGIN Enable GZIP Compression ##
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
SetOutputFilter DEFLATE
</IfModule>
## END Enable GZIP Compression ##


## BEGIN Vary: Accept-Encoding Header ##
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
## END Vary: Accept-Encoding Header ##


## BEGIN Expires Caching (Leverage Browser Caching) ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 2 week"
ExpiresByType image/jpeg "access 2 week"
ExpiresByType image/gif "access 2 week"
ExpiresByType image/png "access 2 week"
ExpiresByType text/css "access 2 week"
ExpiresByType application/pdf "access 2 week"
ExpiresByType text/x-javascript "access 2 week"
ExpiresByType application/x-shockwave-flash "access 2 week"
ExpiresByType image/x-icon "access 2 week"
ExpiresDefault "access 2 week"
</IfModule>
## END Expires Caching (Leverage Browser Caching) ##

Problemas

  • Aunque apliquemos estas recomendaciones, hay determinados casos que nos siguen dando problemas: RECURSOS EXTERNOS
  • Google Fonts, Google Analytics...etc
  • Utilizados en muchas páginas web, pero hospedados en servidores externos
  • ga.js de Google Analytics es el rey

Solución Analytics

  • Desactivar plugin Analytics
  • Activar Plugin "Host Analytics.js locally"
  • Guarda el ga.js en nuestro propio servidor, de esta forma podemos cachear, optimizar...etc
  • En otros casos, solución alternativa o valorar prescindir de él
    • Ejemplo de Google fonts, descargar y servir directamente desde nuestro servidor

Minimizar JS y CSS

Optimizar imágenes

Reducir tiempo espera del servidor

  • Lo ideal sería pagar por un servicio de hosting mejor o más completo
  • Si no es posible o no depende de nosotros esa decisión, podemos hacer algo más para mejorar
  • Cambiar versión de PHP en los ajustes de nuestro hosting
  • PHP 7 mejoró mucho la velocidad con respecto a 5.x

JS y CSS que bloquean visualización

  • En este caso tenemos código JS y código CSS que cargan antes que el contenido de la página
  • Por esto, hasta que no se han cargado, el usuario no ve la página
  • Solucionamos mostrando 1º el contenido, para que usuario visualice algo durante la carga

OPTIMIZAR WORDPRESS

Mediante Plugins

Minimizar JS y CSS

Optimizar Imágenes

JS y CSS que bloquean visualización

Otros plugins

Bonus Track

Páginas AMP

Accelerated Mobile Pages

Páginas AMP

  • No sustituyen a las páginas responsive, las complementan
  • Quitan casi todos los elementos y Scripts de la web
  • Google destaca 4 puntos clave al utilizar AMP:
    • Rápido (🚀)
    • Bonito (🤷🏼‍♂️)
    • Seguro (Https)
    • Cooperativo (Open Source)

Páginas AMP

  • El plugin inserta código en la página
  • Hay que visitar el enlace + /amp
  • Cuidado al utilizarlo, no siempre será conveniente 
  • Se "carga" parte del contenido
  • Acelera la página, para que en móvil solo se muestre lo imprescindible y sea lo más óptimo posible
  • Aplica a los artículos 
  • Utilizarlo sí o sí si tenemos un blog

Páginas AMP

Qué NO hacer

Not TO DO

  • Themes y plugins que utilicemos tienen mucha incidencia en el rendimiento de la web
  • Themes populares como DIVI
  • Plugins como Jetpack (tiene un montón de módulos)

Caso Práctico

Conclusiones

¿En qué quedamos?

  • No obsesionarse con conseguir un 100/100
  • Buscar equilibrio entre puntuación y rendimiento 
  • No comprometer funcionalidades de la web por mejorar puntuación
  • Hay reglas que son <casi> imposibles de hacer desaparecer

Conclusiones

  • Utilizar sentido común:
    • Sensación percibida al cargar la página
    • Tener en cuenta diferentes escenarios:
      • Desktop, móvil...etc
    • Adaptar web a distintos dispositivos

Conclusiones

  • Utilizar SSL
  • Optimizar imágenes
  • Si utilizamos WordPress:
    • Themes bien optimizados (Genesis)
    • Cuidado con los plugins
  • Almacenar en caché
  • Minificar recursos

Conclusiones

Muchas gracias