5 Causas comunes de rendimiento lento en su sitio web

Una de las ventajas de trabajar en la industria de rendimiento del sitio web es el tesoro de datos interesantes, simplemente sentarse allí en el dominio público y verificarlos. En este post nos gustaría destacar el punto 5 en el cual es la causa más común que descubrimos en los sitios lentos.

1. Imágenes sin optimizar

[info]Lugares afectados: 90%[/info]

Las Imágenes optimizadas fueron el claro ganador de un sitio lento, lo que afecta el 90% de cada 1000 sitios verificados con Alexa. En este contexto, nos referimos a las imágenes no optimizadas como cualquier imagen que se puede reducir de tamaño sin impacto visual al usuario, también conocida como la optimización «sin pérdida». Las imágenes que están optimizadas utilizando métodos sin pérdidas son visualmente idénticas a sus imágenes originales, simplemente despojadas de metadatos extraños que ayuda a describir la imagen (útil para el diseñador, no es necesario para el usuario final).

Unas buenas prácticas a tener en cuenta:

Los archivos de imagen PNG suelen ser innecesariamente grandes. Esto es debido a los datos adicionales dentro del archivo PNG como comentarios o entradas de paleta no utilizados, así como el uso de un compresor de DEFLATE ineficiente. Las Imágenes PNG se pueden optimizar con el uso de herramientas libres como pngcrush, que reducen el tamaño del archivo sin cambiar o reduciendo la calidad de imagen.
Los Archivos de imagen JPEG también pueden ser innecesariamente grandes por razones similares a las imagenes PNG. Mediante el uso de herramientas libres como jpegtran puede convertir los archivos JPEG en archivos JPEG progresivamente, con el fin de reducir el tamaño del archivo sin perder calidad.
Los archivos PNG son los más utilizados para iconos y logotipos, mientras que JPEG es preferible utilizado para las fotos. Como las imágenes PNG soportan la transparencia, mientras que JPEG no, el formato PNG es comúnmente usado en exceso para las imágenes que necestan algun efecto. Mediante la utilización de JPEG en cambio, a menudo se puede lograr un ahorro de tamaño de archivo de más del 80%. Si es posible, al tener en cuenta el diseño de su reelaboración para evitar el uso de la transparencia.
Para las imágenes GIF, tambien existe una herramienta de optimización de imágenes GIF.

2. Contenido sin compresión HTTP

[info]Lugares afectados: 72%[/info]

Habilitar la compresión HTTP en el servidor web puede reducir drásticamente el tamaño de la página descargada, mejorando significativamente el tiempo de carga. Este es un cambio de alto impacto, pero no siempre es tan fácil como puede parecer.

Para Apache 2.0 y superior, cargue el módulo mod_deflate para habilitar la compresión. Para IIS, echa un vistazo a esta página para obtener más información.

3. CSS Imágenes – Sprites

[info]Lugares afectados: 69%[/info]

Los navegadores crean una solicitud HTTP individual con cada imagen de fondo especificado en las hojas de estilo CSS. No es raro que más de la mitad del total de las peticiones HTTP de una única página web que se utilizará para la carga de imágenes de fondo de CSS. Mediante la combinación de imágenes relacionadas en un pequeño número de CSS sprites, puede reducir significativamente el número de peticiones HTTP realizadas durante la carga de la página. Más información sobre Sprites CSS se puede encontrar aquí.

4. Imágenes sin informacion en caché

[info]Lugares afectados: 65%[/info]

Almacenamiento en caché de HTTP permite que el navegador guarde una copia de una imagen para un período de tiempo, evitando que el navegador carga la misma imagen en la página despues de una carga posterior y por lo tanto aumentar drásticamente el rendimiento. Para almacenar en caché las imágenes, actualice la configuración de su servidor web, para proporcionar una cabecera que Expira a sus respuestas de imágenes desde el servidor. Para las imágenes que no cambian con frecuencia, deberá especificar un «futuro lejano», por lo general una fecha de 6 meses a un año a partir de la fecha actual.

5. Sharding dominio no se han aplicado

[info]Lugares afectados: 64%[/info]

La mayoría de los navegadores soportan normalmente 2-4 descargas simultáneas de recursos estáticos para cada nombre de host. Por lo tanto, si su página está cargando muchos recursos estáticos del mismo nombre de host, el navegador entrara en un embotellamiento de una manera escalonada al descargar todo el contenido. Al dividir los recursos, estos se distribuyen en 2 dominios diferentes, lo que se puede doblar de forma efectiva en el rendimiento del navegador cuando descarga de los enlaces necesarios.