Optimización web:
Google PageSpeed y GTMetrix
Imanol Terán
- Diseñador y desarrollador frontend
- Fundador widdiapps.com
- Academia de cursos itermar.io
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
-
RECOPILAR DATOS
- Medir rendimiento
-
Herramientas de análisis web
-
WP DOCTOR / WEBSITE GRADER / GTMETRIX/ DAREBOOST / QUICKPROOF
-
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é
-
Especificar política de almacenamiento en caché para todos los recursos
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
-
- Herramientas disponibles:
-
HTML: HTML Minifier
-
JavaScript: UglifyJS
-
Otras herramientas:
-
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
- Speed Insights nos dice exactamente qué imágenes nos están dando problemas
- Utilizar algún software que nos permita reducir peso de las imágenes sin pérdida de calidad
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
-
FCP (First Contentful Paint)
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
- Si aún así queremos tener más datos acerca de la velocidad, podemos utilizar otras herramientas:
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
- Speed Insights nos dice exactamente qué imágenes nos están dando problemas
- Utilizar algún software que nos permita reducir peso de las imágenes sin pérdida de calidad
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
Plugin 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
Taller Optimización Web
By Imanol Terán Maruri
Taller Optimización Web
Google PageSpeed y GTMetrix
- 1,631