Optimización

Introducción

Para optimizar cualquier aplicación, lo primero que debemos hacer es pensar muy bien nuestra arquitectura y diseñar todos los componentes como “plugins”, al igual que un ordenador o un coche, de forma que pueda testearlo todo y saber como se está comportando mi sistema, ejecutando alguna herramienta externa para chequear los componentes,  verificarlos y medirlos fácilmente.

En definititiva, nuestro objetivo es saber el estado de salud de nuestras aplicaciones en producción, es como, si vamos al médico y lo primero que nos toman es la temperatura y la tensión. Si pasamos de 37grados o tensión alta automáticamente se disparan las alarmas médicas y nos empiezan a mirar con más detalle para detectar cual es el origen del problema y buscar el mejor tratamiento para solucionarlo.

Que podemos utilizar

  • Auditorias de aplicación
  • Contadores de Rendimientos
  • Depuradores en producción
  • Trazas de seguimiento y Logs (nivel y politicas de traza)
  • Trazas Visor de Eventos (nivel y politicas de traza)
  • Profilers de memoria y rendimiento
  • Dashboard y Reportings DataBases (sqlserver,oracle,…)

APM Tools: NewRelic, AppInsights, Glimpse

Que debemos tener en cuenta

  • páginas web: imagenes, js, css, bundle, etc
  • navegador cliente: cache, expires, etag, etc.
  • server web: modulos, handlers, websockets, pools, framewoks
  • server web: recomendable 1 estático  + 1 dinámico
  • base datos: análisis, rendimiento, index, selects mas costosas.
  • HA proxy-cache: varnish, front-end NLB
  • HA memcache, redis, rabbit-mq
  • medir: users, peticiones, conexiones, threads
  • tools: page speed, yahoo yslow, etc
  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network (CDN)
  3. Add Expires or Cache-Control Header
  4. Gzip Components
  5. Put Stylesheets at Top
  6. Put Scripts at Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable
  15. Flush Buffer Early
  16. Use GET for Ajax Requests
  17. Postload Components
  18. Preload Components
  19. Reduce the Number of DOM Elements
  20. Split Components Across Domains
  21. Minimize Number of iframes
  22. Avoid 404s
  23. Reduce Cookie Size
  24. Use Cookie-Free Domains for Components
  25. Minimize DOM Access
  26. Develop Smart Event Handlers
  27. Choose Over @import
  28. Avoid Filters
  29. Optimize Images
  30. Optimize CSS Sprites
  31. Do Not Scale Images in HTML
  32. Make favicon.ico Small and Cacheable
  33. Keep Components Under 25 KB
  34. Pack Components Into a Multipart Document
  35. Avoid Empty Image src

Por donde empezar una optimización Web

Lo que yo recomiendo es crear una cuenta GTmetrix, es gratis y empezar a trabajar con esta herramienta para optimizar nuestras web: https://gtmetrix.com

features-home-screenshot

Simplemente, poner la URL de vuestro sitio web y pulsar botón, para una primera valoración del estado de nuestra aplicación web,  ya nos sirve y seguro que detectará unos cuantos problemas que vereis en el informe y que podeis imprimir en pdf. También podeis lanzarla sobre la web de google por ejemplo para hacer una comparativa.

Importante: Si no estais registrados (gratis) las peticiones se lanzan desde “Canada” y la performance os puede confundir, con la cuenta registrada podemos configurar la herramienta para hacer las peticiones desde Europa, actualmente dispone de la opción London (UK), para ello, hay que configurar la herramienta y si queremos unos test más exactos, tambien podemos configurar la velocidad de la conexión y otros factores.

A partir de aqui, analizar los resultados de PageSpeed, YSlow, Waterfall y empezar a corregir los problemas detectados poco a poco y volviendo a lanzar la herramienta para ver los tiempos de mejora obtenidos.

Continuará…