Buenas prácticas para la optimización de sitios web
-
Upload
luis-miguel-martin -
Category
Internet
-
view
62 -
download
1
Transcript of Buenas prácticas para la optimización de sitios web
![Page 1: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/1.jpg)
Buenas prácticas para laoptimización de sitios
webLuis Miguel Martín
@lmmartin
![Page 2: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/2.jpg)
Buenas prácticas para laoptimización de sitios
webLuis Miguel Martín
@lmmartin
![Page 3: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/3.jpg)
“Estamos de vuelta…”
![Page 4: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/4.jpg)
¿Quién soy?
![Page 5: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/5.jpg)
¿De qué vamos a hablar?
![Page 6: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/6.jpg)
Optimizar un sitio web
![Page 7: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/7.jpg)
Aumentar la velocidad de carga
![Page 8: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/8.jpg)
Para ello realizaremos ajustes…
![Page 9: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/9.jpg)
… y llevaremos a cabo una serie debuenas prácticas
![Page 10: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/10.jpg)
¿Por qué? ¿Con qué propósito?
![Page 11: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/11.jpg)
Acelerar la respuesta de la web al usuario
![Page 12: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/12.jpg)
Descargar de procesos al servidor
![Page 13: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/13.jpg)
Consumir menos transferencia
![Page 14: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/14.jpg)
EN DEFINITIVA…
![Page 15: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/15.jpg)
Satisfaccióndel cliente
![Page 16: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/16.jpg)
Vender más
![Page 17: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/17.jpg)
Diferenciarnos de la competencia
![Page 18: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/18.jpg)
Ahorro en nuestro hosting
![Page 19: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/19.jpg)
¿DE VERDAD ES IMPORTANTE EL RENDIMIENTO?
![Page 20: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/20.jpg)
– 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”
![Page 21: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/21.jpg)
Entonces, empecemos…
![Page 22: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/22.jpg)
Dos objetivos a conseguir:
![Page 23: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/23.jpg)
1. Número de archivos pequeño
![Page 24: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/24.jpg)
2. Tiempos de carga reducidos
![Page 25: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/25.jpg)
¿Cómo reducimos el número de archivos?
![Page 26: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/26.jpg)
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
![Page 27: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/27.jpg)
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
![Page 28: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/28.jpg)
Reducir el número de archivos• Emplear Sprites CSS para combinar imágenes
![Page 29: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/29.jpg)
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.
![Page 30: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/30.jpg)
¿Cómo minimizamos los tiempos de carga?
![Page 31: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/31.jpg)
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
![Page 32: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/32.jpg)
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)
![Page 33: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/33.jpg)
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.
![Page 34: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/34.jpg)
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.
![Page 35: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/35.jpg)
Casos prácticos
![Page 36: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/36.jpg)
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
![Page 37: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/37.jpg)
Caso práctico 1 Tienda online Woocommerce
![Page 38: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/38.jpg)
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
![Page 39: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/39.jpg)
Caso práctico 1 Tienda online Woocommerce
![Page 40: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/40.jpg)
Caso práctico 1 Tienda online Woocommerce
![Page 41: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/41.jpg)
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
![Page 42: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/42.jpg)
Consejos
![Page 43: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/43.jpg)
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)
![Page 44: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/44.jpg)
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
![Page 45: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/45.jpg)
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
![Page 46: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/46.jpg)
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,…
![Page 47: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/47.jpg)
Recursos
![Page 48: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/48.jpg)
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/
![Page 49: Buenas prácticas para la optimización de sitios web](https://reader031.fdocuments.es/reader031/viewer/2022021921/58e789631a28abe7528b63ed/html5/thumbnails/49.jpg)
Gracias!