Google PageSpeed y GTMetrix
Caricatura realizada por @oneeyedman
Con el código ENPRESADIGITALA
1 MES
GRATIS
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
Utilizar diseño web adaptable
Evitar tener diferentes versiones de la misma web
URL > URL + www > URL móvil
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.
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
RECOPILAR DATOS
Herramientas de análisis web
WP DOCTOR / WEBSITE GRADER / GTMETRIX/ DAREBOOST / QUICKPROOF
IDENTIFICAR Y CORREGIR
Problemas de rendimiento
Si utilizas framework o CMS conocido → Consultar documentación
SUPERVISAR
Si el rendimiento sigue estable
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
Especificar política de almacenamiento en caché para todos los recursos
Eliminar comentarios, espacios / Nombre de funciones más cortos / Usar variables
Sin modificar comportamiento (mostrar igual en navegadores
HTML: HTML Minifier
JavaScript: UglifyJS
Otras herramientas:
<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>
* Siempre nos indicará las optimizaciones realizadas en la página y cuáles podemos realizar para mejorarla
Consejos y Plugins
Forma manual
Where magic happens
* Dejar pasar 30 segundos si no se aplica el cambio
<FilesMatch "\.(css|js|ico|pdf|jpg|jpeg|png|gif|php|woff)$">
SetOutputFilter DEFLATE
</FilesMatch>
<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>
## 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) ##
Mediante Plugins
Accelerated Mobile Pages
Plugin AMP
¿En qué quedamos?