Serie de buenas prácticas, consejos y casos prácticos para optimizar sitios web.

1. Buenas prácticas para la
optimización de sitios
web
Luis Miguel Martín
@lmmartin

2. Buenas prácticas para la
optimización de sitios
web
Luis Miguel Martín
@lmmartin

3. “Estamos de vuelta…”

4. ¿Quién soy?

5. ¿De qué vamos a hablar?

6. Optimizar un sitio web

7. Aumentar la velocidad
de carga

8. Para ello realizaremos
ajustes…

9. … y llevaremos a
cabo una serie de
buenas prácticas

10. ¿Por qué?
¿Con qué propósito?

11. Acelerar la respuesta
de la web al usuario

12. Descargar de
procesos al servidor

13. Consumir menos
transferencia

14. EN DEFINITIVA…

15. Satisfacción
del cliente

16. Vender más

17. Diferenciarnos
de la competencia

18. Ahorro en nuestro
hosting

19. ¿DE VERDAD ES
IMPORTANTE EL
RENDIMIENTO?

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”

21. Entonces,
empecemos…

22. Dos objetivos a
conseguir:

23. 1. Número de archivos
pequeño

24. 2. Tiempos de carga
reducidos

25. ¿Cómo reducimos el
número de archivos?

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.

30. ¿Cómo minimizamos
los tiempos de carga?

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.

35. Casos prácticos

36. Caso práctico 1
Tienda online Woocommerce
SITUACIÓN INICIAL
• Hosting compartido
• 20 GB/mes transferencia
• 275 peticiones
• ¡¡¡12.9 MB página de inicio!!!
• Carga en 17.22 segundos

37. Caso práctico 1
Tienda online Woocommerce

38. Caso práctico 1
Tienda online Woocommerce
SITUACIÓN FINAL
• Hosting dedicado (virtual)
• Transferencia ilimitada
• 163 peticiones
• 5.5 MB página de inicio
• Carga en 2,69 segundos

39. Caso práctico 1
Tienda online Woocommerce

40. Caso práctico 1
Tienda online Woocommerce

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

42. Consejos

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,…

47. Recursos

48. Recursos
• Yahoo Performance
https://developer.yahoo.com/performance/
• Google PageSpeed
https://developers.google.com/speed/pagespeed/
https://developers.google.com/speed/
• Extensión YSLOW
http://yslow.org/
• Pingdon Tools
http://tools.pingdom.com/

49. Gracias!