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.

Martesclass GTmetrix

En otra de nuestras jornadas de formación interna hemos dado un repaso rápido a GTmetrix, herramienta que usamos habitualmente para monitorizar el rendimiento y velocidad de carga de sitios web.

Para saber más sobre GTmetrix, visita nuestro blog: http://aukera.es/blog/martes-class-gtmetrix/

  • Be the first to comment

  • Be the first to like this

Martesclass GTmetrix

  1. 1. Martes Class: GTmetrix
  2. 2. Qué es y para qué sirve • Herramienta para medir rendimiento de sitio web • Creada por GT.net para sus clientes de hosting • Mide velocidad de carga, puntuaciones PageSpeed (Google) / Yslow (Yahoo) • Informes completos, recomendaciones • Monitorización, historial, alertas… • API • Versión gratuita y PRO (planes a medida) Martes Class: GTMetrix
  3. 3. URL y opciones Martes Class: GTMetrix
  4. 4. Opciones básicas • URL • Localización • Navegador (Firefox/Chrome, escritorio/móvil) Otras • Limitar velocidad conexión • Adblock, HTTP auth, cookies, filtrar URLs… Martes Class: GTMetrix
  5. 5. Recomendaciones • Decidir URLs a medir (home, páginas clave…) • ¿De dónde vienen los usuarios? Región cercana vs múltiples • CONSISTENCIA. Mantener mismas opciones Martes Class: GTMetrix
  6. 6. Informe Martes Class: GTMetrix
  7. 7. Datos informe • Puntuación Pagespeed + Yslow (A-F, %) • Tiempo de carga • Peso y n.º peticiones Martes Class: GTMetrix
  8. 8. Datos informe • Informe PageSpeed + recomendaciones • Informe Yslow + recomendaciones • Cascada • Video (PRO) • Historial Martes Class: GTMetrix
  9. 9. Pestaña informe cascada (Waterfall) Martes Class: GTMetrix • Carga detallada elementos (imágenes, css..) • Detectar errores y cuellos de botella
  10. 10. Pestaña Historial Martes Class: GTMetrix • Guarda cada test, manual o automatizado (monitorización) • Historial tiempo/peso/puntuaciones • Evolución en el tiempo • Añadir Notas
  11. 11. Monitorización • Botón tras generar informe • Seleccionar frecuencia • Límites según plan. Cuenta gratuita = Max 3 Martes Class: GTMetrix
  12. 12. Otras opciones • Comparar Comparar informe con otro: • URL • Región • Alertas Notificaciones por email según condiciones Martes Class: GTMetrix
  13. 13. Recomendaciones principales (coste vs impacto) Martes Class: GTMetrix
  14. 14. Recomendaciones PageSpeed: Leverage browser caching • Configurar servidor web para que el navegador cachee recursos • Cabeceras .htaccess (o plugins, funcionalidad CMS…) Martes Class: GTMetrix ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule>
  15. 15. Recomendaciones PageSpeed: Enable gzip compression • Activar compresión gzip en servidor web (.htaccess) Martes Class: GTMetrix # BEGIN GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> # END GZIP
  16. 16. Recomendaciones PageSpeed: Optimización imágenes • Smushing (comprimir sin pérdida) • Evitar escalado (servir al tamaño adecuado) • Especificar dimensiones (width, height, CSS) • Combinar iconos (sprites CSS) Martes Class: GTMetrix
  17. 17. Recomendaciones PageSpeed: Optimización Javascript • Preferir scripts asíncronos (async, defer) • Posición <script> (asíncronos pronto, resto al final) • Minificar y cachear Martes Class: GTMetrix
  18. 18. Recomendaciones PageSpeed: Optimización CSS • CSS externo al principio de <head> • CSS inline al final de <head> • Evitar @import • Combinar • Minificar y cachear Martes Class: GTMetrix
  19. 19. Recomendaciones PageSpeed: Otras • Evitar redirecciones y errores (404…) • Cargar recursos (JS, fonts...) externamente • CDN para recursos estáticos Martes Class: GTMetrix

×