Este documento ofrece consejos para optimizar el rendimiento de sitios web. Recomienda reducir el número de archivos combinando archivos JavaScript y CSS, usando sprites de imagen, y alojando archivos estáticos en CDNs. También sugiere minimizar tiempos de carga optimizando imágenes, comprimiendo archivos, simplificando código, y habilitando compresión GZIP. Incluye dos casos prácticos de tiendas en línea que mejoraron el rendimiento aplicando estas técnicas.
20. – FUENTE: Strangeloop
“El 57% de los visitantes abandona una web si
tarda más de 3 segundos en cargar”
“De ellos, el 80% no volverá”
“Al menos la mitad contarán a amigos y
familiares sobre su mala experincia”
“Amazon aumenta un 1% su beneficio cada
100ms de mejora”
26. Reducir el número de archivos
• Combinar archivos JavaScript y CSS
• Sacar partido a las media-queries frente importar
multiples CSS (@import) o emplear varios archivos
(print.css)
• Emplear Sprites CSS para combinar imágenes
• Sacar partido a la caché del navegador
• Distribuir archivos estáticos y librerías desde CDNs
27. Reducir el número de archivos
• Combinar archivos JS y CSS
Idealmente un archivo por tipo, máximo dos
• Sacar partido a las media-queries frente importar
multiples CSS (@import) o emplear varios archivos
(print.css)
Más rápido que @import y reducimos el número de
archivos
28. Reducir el número de archivos
• Emplear Sprites CSS para combinar imágenes
29. Reducir el número de archivos
• Sacar partido a la caché del navegador
De esta manera, los archivos ya descargados no se
vuelven a descargar. Es necesario establecer las
cabeceras indicando el tiempo de expiración.
• Distribuir archivos estáticos y librerías desde CDNs
Imágenes de galerías, JS, archivos pesados, etc. Así
podemos realizar más descargas simultáneas, mayor
disponibilidad y rendimiento en archivos multimedia.
31. Minimizar tiempos de carga
• Optimizar imágenes (tamaño correcto, formato
adecuado, evitar escalado HTML,…)
• Minimizar y comprimir archivos JS, CSS,…
• Simplificar, reducir y optimizar el código
• Emplear HTML + CSS en lugar de imágenes
• Compresión GZIP en el servidor
• Caché en el servidor
32. Minimizar tiempos de carga
• Optimizar imágenes (tamaño correcto, formato
adecuado, evitar escalado HTML,…)
Ajustar las imágenes al tamaño en el que se van a
mostrar, no emplear el escalado HTML.
• GIF/PNG 8 - Iconos, botones y imágenes
sencillas y/o con texto
• PNG 24 - Transparencias complejas
• JPG - Fotografías (optimizar la compresión y
siempre progresivos)
33. Minimizar tiempos de carga
• Minimizar y comprimir archivos JS, CSS,…
Eliminar espacios, comentarios, etc. Reducción del 20-30%
de media.
• Simplificar, reducir y optimizar el código
Realizar código sencillo y válido según estándares.
• Emplear HTML + CSS en lugar de imágenes (interfaz)
Botones, degradados, fondos,… Se renderiza más rápido,
es mejor para el SEO y es más fácil de modificar.
34. Minimizar tiempos de carga
• Compresión GZIP en el servidor
Lo permiten la mayoría de los navegadores actuales.
Exige algo de configuración en el servidor (sencilla).
Reduce el tamaño de las peticiones al servidor.
• Caché en el servidor
Disminuye la carga del procesador.
Ideal para contenido dinámico.
41. Caso práctico 2
Tienda online Magento
• Se habilitó la compresión GZIP
• JS y CSS minimizados y comprimidos en un archivo,
respectivamente
• Archivo PHP de configuración se cambió por CSS
43. Sobre el hosting
• Tendrás aquello por lo que has pagado (verdad
verdadera)
• Huye los hosting compartidos (lo barato sale caro)
• Pregunta por los datos de rendimiento del hosting
y prueba antes de pagar (hay empresas que te
permiten probar 30 días)
44. JS y CSS
• Combina, minimiza y comprime todo lo que
puedas estos archivos
• Incluye el CSS arriba (<head></head>) y el JS
abajo (justo antes del </body>)
• No utilices filtros ni expresiones CSS
45. Imágenes
• Siempre el tamaño exacto con el que se mostrará
en pantalla (ojo al responsive)
• El formato adecuado siempre es la mejor opción
• No utilices archivos animados (GIF/PNG)
• JPG progresivos siempre
46. Otros
• Vigila los links rotos y las páginas 404
• Evita las redirecciones. Utiliza los 301, 302,…
• No uses <img src=“”>
• TESTEA, TESTEA, TESTEA, TESTEA,…