Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
El tamaño importa
Alejandro Domínguez
www.ayudajoomla.com
¿Por qué es importante el
tiempo de carga del sitio web?
• Experiencia de usuario
• SEO
• Consumo de datos limitado de los...
Escenario de pruebas
YSlow
PageSpeed Insights
GTmetrix
Pingdom
Webpagetest
Herramientas
• Aplicardeformagenéricaalaplantillaeindividualmenteala...
Análisis con Pingdom tools 1/2
Análisis con Pingdom tools 2/2
Análisis con Webpagetest 1/2
¿Qué podemos mejorar?
Las características del servidor influyen
• Hosting compartido o VPS
• Memoria RAM
• CPU - Cuantos procesadores y cuantos ...
Caché de Joomla
• ¿Qué es la caché de Joomla?
• Tipos de caché
• Caché global y caché de módulos
• Caché de página (plugin...
Caché a nivel de global
• Configuración global >> Pestaña sistema >> Configuración de la caché
• Opciones
• Tipo
• Progres...
Caché a nivel de módulo
• Pestaña avanzada de cada módulo.
• Módulos del core lo traen de serie.
• Módulos de terceros pue...
Caché de página
• Extensiones >> Plugins y buscar el plugin System – Page caché
Caché del navegador
• Usando el archivo .htaccess podemos indicarle al navegador el tiempo de
vida de archivos CSS, JS, im...
Caché del navegador
Añadir estas líneas en el archivo .htaccess
<IfModule mod_expires.c>
FileETag MTime Size
ExpiresActive...
Compresión con GZip
• El sitio web se envía al navegador comprimido en gzip. El navegador se
encarga de extracción y visua...
Compresión con Deflate
• Es una alternativa a la compresión Gzip.
Añadir estas líneas al archivo .htaccess
<IfModule mod_d...
Efectos de la compresión y la caché
Reducir el tamaño de las imágenes
• Calidad: En archivos .jpg una calidad del 60% se puede visualizar
correctamente y ocup...
¿Qué opina Gtmetrix de nuestras imágenes?
Optimizar archivos CSS y JS
• Extensión: JCH Optimize
• Combinar archivos CSS y JS
• Combinar imágenes en un sprite
• Comp...
Después de usar JCH Optimize
Usar un CDN (Content Delivery Network)
• Conjunto de servidores utilizados para servir contenidos estáticos
(imágenes, css...
Optimizar módulos para dispostivos móviles
• Se suele utilizar CSS para esconder módulos en la vista de móvil, tablet o pc...
En resumen, ¿Qué puedo mejorar?
• Servidor del sitio web
• Reducir el tamaño del sitio web
• Reducir el número de solicitu...
alejandro@ayudajoomla.com
@ayudajoomla y @alejandro_df
¡Muchas gracias!
www.jugmalaga.com
¿Preguntas?
El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015
Próxima SlideShare
Cargando en…5
×

El tamaño importa - JoomlaDay Sevilla 2015

Presentación realizada en el JoomlaDay Sevilla 2015 sobre WPO en Joomla. Optimización del rendimiento del sitio web

  • Inicia sesión para ver los comentarios

El tamaño importa - JoomlaDay Sevilla 2015

  1. 1. El tamaño importa Alejandro Domínguez www.ayudajoomla.com
  2. 2. ¿Por qué es importante el tiempo de carga del sitio web? • Experiencia de usuario • SEO • Consumo de datos limitado de los móviles
  3. 3. Escenario de pruebas
  4. 4. YSlow PageSpeed Insights GTmetrix Pingdom Webpagetest Herramientas • Aplicardeformagenéricaalaplantillaeindividualmentealasseccionesmásimportantesdel sitioweb
  5. 5. Análisis con Pingdom tools 1/2
  6. 6. Análisis con Pingdom tools 2/2
  7. 7. Análisis con Webpagetest 1/2
  8. 8. ¿Qué podemos mejorar?
  9. 9. Las características del servidor influyen • Hosting compartido o VPS • Memoria RAM • CPU - Cuantos procesadores y cuantos cores por procesador • Tipo de disco duro - SSD o HDD • Consumo de recursos de los otros sitios web que están alojados en el mismo servidor
  10. 10. Caché de Joomla • ¿Qué es la caché de Joomla? • Tipos de caché • Caché global y caché de módulos • Caché de página (plugin) •Si un usuario está logueado, la caché no se activan para el •Extensiones de tercero: JotCache
  11. 11. Caché a nivel de global • Configuración global >> Pestaña sistema >> Configuración de la caché • Opciones • Tipo • Progresiva – Una caché para cada Usuario (+ espacio) • Conservacional – Una cache para todos los usuarios • Gestor de la caché: Archivo / Memcache (Depende del servidor) • Duración de la cache
  12. 12. Caché a nivel de módulo • Pestaña avanzada de cada módulo. • Módulos del core lo traen de serie. • Módulos de terceros puede que no tengan esta opción
  13. 13. Caché de página • Extensiones >> Plugins y buscar el plugin System – Page caché
  14. 14. Caché del navegador • Usando el archivo .htaccess podemos indicarle al navegador el tiempo de vida de archivos CSS, JS, imágenes, etc. • La primera vez que el usuario entra al sitio web descarga todos los archivos. Para las siguientes visitas no descarga esos archivos, sino que los coge de la caché de su navegador.
  15. 15. Caché del navegador Añadir estas líneas en el archivo .htaccess <IfModule mod_expires.c> FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" ExpiresByType application/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" </IfModule> • ETag: Informa al navegador que las imágenes que ha descargado no hace falta volverlas a descargar • Expires: Parecido a ETag pero especificando los tipos de archivos
  16. 16. Compresión con GZip • El sitio web se envía al navegador comprimido en gzip. El navegador se encarga de extracción y visualización • Muchos servidores soportan la compresión GZip. ¡Ojo! Si el servidor no la soporta puede dejar caído el sitio web. • Configuración global >> Pestaña servidor >> Configuración del servidor
  17. 17. Compresión con Deflate • Es una alternativa a la compresión Gzip. Añadir estas líneas al archivo .htaccess <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule> Importante Usar la compresión Gzip o la compresión Deflate, pero no ambas a la vez
  18. 18. Efectos de la compresión y la caché
  19. 19. Reducir el tamaño de las imágenes • Calidad: En archivos .jpg una calidad del 60% se puede visualizar correctamente y ocupa bastante menos • Si usas Photoshop  Guardar para web y dispostivos • Eliminar metadatos (Programa que lo generó, ubicación gps, información de la cámara de fotos, …) • Usar el tamaño adecuado • Sprites en las plantillas (Cuidado con el responsive) • Lazy loading • Herramientas online • Smush.it • TinyPNG • TinyJPG • Kraken.io • Compressor.io
  20. 20. ¿Qué opina Gtmetrix de nuestras imágenes?
  21. 21. Optimizar archivos CSS y JS • Extensión: JCH Optimize • Combinar archivos CSS y JS • Combinar imágenes en un sprite • Comprimir archivos en gzip • Excluir archivos que no combinan correctamente • Añadir defer a los archivos javascript • Optimizar imágenes
  22. 22. Después de usar JCH Optimize
  23. 23. Usar un CDN (Content Delivery Network) • Conjunto de servidores utilizados para servir contenidos estáticos (imágenes, css, js, documentos, videos, etc…) • Eliminación de cuellos de botella • Algunos CDNs: MaxCDN, Akamai, Amazon CloudFront, CloudFlare • Extensiones: CDN for Joomla (NoNumber) o JomCDN (CorePHP)
  24. 24. Optimizar módulos para dispostivos móviles • Se suele utilizar CSS para esconder módulos en la vista de móvil, tablet o pc  Carga contenido que no se está utilizando • La extension Advanced Module Manager permite excluir módulos en función del navegador
  25. 25. En resumen, ¿Qué puedo mejorar? • Servidor del sitio web • Reducir el tamaño del sitio web • Reducir el número de solicitudes HTTP • CDN • Caché de navegador • Compresión Gzip o Deflate • Imágenes • Librerías Javascript • Archivos CSS • Extensiones no usadas o poco usadas • Caché de Joomla Y añado… ojo con los retardos que generan los botones de Social Media ¿Realmente son necesarios en tu proyecto?
  26. 26. alejandro@ayudajoomla.com @ayudajoomla y @alejandro_df ¡Muchas gracias! www.jugmalaga.com ¿Preguntas?

×