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

móviles

Escenario de pruebas

YSlow

PageSpeed Insights

GTmetrix

Pingdom

Webpagetest

Herramientas• Aplicar de forma genéricaa la plantillae individualmentea lassecciones más importantesdel

sitioweb

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

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

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

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

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

Caché del navegadorAñ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

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

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

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

¿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

• Comprimir archivos en gzip

• Excluir archivos que no combinan correctamente

• Añadir defer a los archivos javascript

• Optimizar imágenes

Después de usar JCH Optimize

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)

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

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?

alejandro@ayudajoomla.com

@ayudajoomla y @alejandro_df

¡Muchas gracias!

www.jugmalaga.com

¿Preguntas?