– 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”
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• 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.
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.
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
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 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
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• 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/
Top Related