Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Buenas prácticas para la optimización de sitios web

69 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Buenas prácticas para la optimización de sitios web

  1. 1. Buenas prácticas para la optimización de sitios web Luis Miguel Martín @lmmartin
  2. 2. Buenas prácticas para la optimización de sitios web Luis Miguel Martín @lmmartin
  3. 3. “Estamos de vuelta…”
  4. 4. ¿Quién soy?
  5. 5. ¿De qué vamos a hablar?
  6. 6. Optimizar un sitio web
  7. 7. Aumentar la velocidad de carga
  8. 8. Para ello realizaremos ajustes…
  9. 9. … y llevaremos a cabo una serie de
 buenas prácticas
  10. 10. ¿Por qué? ¿Con qué propósito?
  11. 11. Acelerar la respuesta de la web al usuario
  12. 12. Descargar de procesos al servidor
  13. 13. Consumir menos transferencia
  14. 14. EN DEFINITIVA…
  15. 15. Satisfacción
 del cliente
  16. 16. Vender más
  17. 17. Diferenciarnos de la competencia
  18. 18. Ahorro en nuestro hosting
  19. 19. ¿DE VERDAD ES IMPORTANTE EL RENDIMIENTO?
  20. 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. 21. Entonces, empecemos…
  22. 22. Dos objetivos a conseguir:
  23. 23. 1. Número de archivos pequeño
  24. 24. 2. Tiempos de carga reducidos
  25. 25. ¿Cómo reducimos el número de archivos?
  26. 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. 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. 28. Reducir el número de archivos • Emplear Sprites CSS para combinar imágenes
  29. 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. 30. ¿Cómo minimizamos los tiempos de carga?
  31. 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. 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. 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. 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. 35. Casos prácticos
  36. 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. 37. Caso práctico 1 Tienda online Woocommerce
  38. 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. 39. Caso práctico 1 Tienda online Woocommerce
  40. 40. Caso práctico 1 Tienda online Woocommerce
  41. 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. 42. Consejos
  43. 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. 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. 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. 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. 47. Recursos
  48. 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. 49. Gracias!

×