Buenas prácticas para laoptimización de sitios

webLuis Miguel Martín

@lmmartin

Buenas prácticas para laoptimización de sitios

webLuis Miguel Martín

@lmmartin

“Estamos de vuelta…”

¿Quién soy?

¿De qué vamos a hablar?

Optimizar un sitio web

Aumentar la velocidad de carga

Para ello realizaremos ajustes…

… y llevaremos a cabo una serie debuenas prácticas

¿Por qué? ¿Con qué propósito?

Acelerar la respuesta de la web al usuario

Descargar de procesos al servidor

Consumir menos transferencia

EN DEFINITIVA…

Satisfaccióndel cliente

Vender más

Diferenciarnos de la competencia

Ahorro en nuestro hosting

¿DE VERDAD ES IMPORTANTE EL RENDIMIENTO?

– FUENTE: Strangeloop

“El 57% de los visitantes abandona una web si tarda más de 3 segundos en cargar”

“De ellos, el 80% no volverá”

“Al menos la mitad contarán a amigos y familiares sobre su mala experincia”

“Amazon aumenta un 1% su beneficio cada 100ms de mejora”

Entonces, empecemos…

Dos objetivos a conseguir:

1. Número de archivos pequeño

2. Tiempos de carga reducidos

¿Cómo reducimos el número de archivos?

Reducir el número de archivos• Combinar archivos JavaScript y CSS

• Sacar partido a las media-queries frente importar multiples CSS (@import) o emplear varios archivos (print.css)

• Emplear Sprites CSS para combinar imágenes

• Sacar partido a la caché del navegador

• Distribuir archivos estáticos y librerías desde CDNs

Reducir el número de archivos• Combinar archivos JS y CSS

Idealmente un archivo por tipo, máximo dos

• Sacar partido a las media-queries frente importar multiples CSS (@import) o emplear varios archivos (print.css)

Más rápido que @import y reducimos el número de archivos

Reducir el número de archivos• Emplear Sprites CSS para combinar imágenes

Reducir el número de archivos• Sacar partido a la caché del navegador

De esta manera, los archivos ya descargados no se vuelven a descargar. Es necesario establecer las cabeceras indicando el tiempo de expiración.

• Distribuir archivos estáticos y librerías desde CDNs

Imágenes de galerías, JS, archivos pesados, etc. Así podemos realizar más descargas simultáneas, mayor disponibilidad y rendimiento en archivos multimedia.

¿Cómo minimizamos los tiempos de carga?

Minimizar tiempos de carga• Optimizar imágenes (tamaño correcto, formato

adecuado, evitar escalado HTML,…)

• Minimizar y comprimir archivos JS, CSS,…

• Simplificar, reducir y optimizar el código

• Emplear HTML + CSS en lugar de imágenes

• Compresión GZIP en el servidor

• Caché en el servidor

Minimizar tiempos de carga• Optimizar imágenes (tamaño correcto, formato

adecuado, evitar escalado HTML,…)

Ajustar las imágenes al tamaño en el que se van a mostrar, no emplear el escalado HTML.

• GIF/PNG 8 - Iconos, botones y imágenes sencillas y/o con texto

• PNG 24 - Transparencias complejas • JPG - Fotografías (optimizar la compresión y

siempre progresivos)

Minimizar tiempos de carga• Minimizar y comprimir archivos JS, CSS,…

Eliminar espacios, comentarios, etc. Reducción del 20-30% de media.

• Simplificar, reducir y optimizar el código

Realizar código sencillo y válido según estándares.

• Emplear HTML + CSS en lugar de imágenes (interfaz)

Botones, degradados, fondos,… Se renderiza más rápido, es mejor para el SEO y es más fácil de modificar.

Minimizar tiempos de carga

• Compresión GZIP en el servidor

Lo permiten la mayoría de los navegadores actuales. Exige algo de configuración en el servidor (sencilla). Reduce el tamaño de las peticiones al servidor.

• Caché en el servidor

Disminuye la carga del procesador. Ideal para contenido dinámico.

Casos prácticos

Caso práctico 1 Tienda online Woocommerce

SITUACIÓN INICIAL

• Hosting compartido

• 20 GB/mes transferencia

• 275 peticiones

• ¡¡¡12.9 MB página de inicio!!!

• Carga en 17.22 segundos

Caso práctico 1 Tienda online Woocommerce

Caso práctico 1 Tienda online Woocommerce

SITUACIÓN FINAL

• Hosting dedicado (virtual)

• Transferencia ilimitada

• 163 peticiones

• 5.5 MB página de inicio

• Carga en 2,69 segundos

Caso práctico 1 Tienda online Woocommerce

Caso práctico 1 Tienda online Woocommerce

Caso práctico 2 Tienda online Magento

• Se habilitó la compresión GZIP • JS y CSS minimizados y comprimidos en un archivo,

respectivamente • Archivo PHP de configuración se cambió por CSS

Consejos

Sobre el hosting

• Tendrás aquello por lo que has pagado (verdad verdadera)

• Huye los hosting compartidos (lo barato sale caro)

• Pregunta por los datos de rendimiento del hosting y prueba antes de pagar (hay empresas que te permiten probar 30 días)

JS y CSS

• Combina, minimiza y comprime todo lo que puedas estos archivos

• Incluye el CSS arriba (<head></head>) y el JS abajo (justo antes del </body>)

• No utilices filtros ni expresiones CSS

Imágenes

• Siempre el tamaño exacto con el que se mostrará en pantalla (ojo al responsive)

• El formato adecuado siempre es la mejor opción

• No utilices archivos animados (GIF/PNG)

• JPG progresivos siempre

Otros

• Vigila los links rotos y las páginas 404

• Evita las redirecciones. Utiliza los 301, 302,…

• No uses <img src=“”>

• TESTEA, TESTEA, TESTEA, TESTEA,…

Recursos

Recursos• Yahoo Performance

https://developer.yahoo.com/performance/

• Google PageSpeed https://developers.google.com/speed/pagespeed/ https://developers.google.com/speed/

• Extensión YSLOWhttp://yslow.org/

• Pingdon Toolshttp://tools.pingdom.com/

Gracias!