1. El tamaño importa
Alejandro Domínguez
www.ayudajoomla.com

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. Escenario de pruebas

4. YSlow
PageSpeed Insights
GTmetrix
Pingdom
Webpagetest
Herramientas
• Aplicardeformagenéricaalaplantillaeindividualmentealasseccionesmásimportantesdel
sitioweb

5. Análisis con Pingdom tools 1/2

6. Análisis con Pingdom tools 2/2

7. Análisis con Webpagetest 1/2

8. ¿Qué podemos mejorar?

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. 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. 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

13. 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

15. Caché de página
• Extensiones >> Plugins y buscar el plugin System – Page caché

16. 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.

17. 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

18. 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

19. 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

20. Efectos de la compresión y la caché

21. 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

22. ¿Qué opina Gtmetrix de nuestras imágenes?

23. 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

24. Después de usar JCH Optimize

25. 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)

27. 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

28. 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?

29. alejandro@ayudajoomla.com
@ayudajoomla y @alejandro_df
¡Muchas gracias!
www.jugmalaga.com
¿Preguntas?