link - title html css

Imágenes tan lentas que no aparecen en la página cuando el documento termina de cargarse

Question

META : Todas las imágenes aparecen en la primera carga.

ACTUAL : si tiene suerte, aparecen dos o tres imágenes en la primera carga; Requiere referencia de página para ver todas las imágenes.

Este es mi primer sitio, escrito a mano. El cliente es un diseñador por lo que las imágenes de calidad son importantes. El rendimiento y la velocidad son importantes para mí, ya que esto está ahora en mi cartera y no puedo aceptar un sitio parcialmente funcional como mi trabajo.

Aquí hay una página de ejemplo:

http://elisamantovani.com/pages/book_design.html

Echa un vistazo a las otras páginas también. El mismo problema.

ACTUALIZACIÓN :

Muchos han sugerido reducir el tamaño del archivo de imagen. De todas formas, solo unas pocas imágenes eran grandes, pero ahora todas son buenas. Ninguna imagen supera los 200 kb, con la mayoría de las imágenes en <100 kb. El problema persiste.

Google está sugiriendo otras razones que impiden el procesamiento de páginas, como el bloqueo de JS / CSS. CSS debe bloquear el procesamiento hasta que se cargue, pero no debe tardar en cargarse. Me gustaría que jQuery pueda esperar hasta que el HTML / CSS se haya procesado.

Acabo de entrar en el control de caché. Se agregó a .htaccess para aumentar un poco el rendimiento, pero esto solo ayudaría después de la primera carga, pero la necesidad es para la primera carga.

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Answer 1

Ejecutar la url en google insights muestra que tiene que comprimir y optimizar sus imágenes en> = 60%

developers.google tiene una buena escritura en él, ¡lo que también puede ser útil para tus próximos proyectos!

¡Hay varias razones por las cuales tus imágenes podrían cargarse lentamente!

Algunas sugerencias:

1. Reducir y comprimir los activos SVG
2. Prefiere formatos vectoriales
3. Elija el mejor formato de imagen rasterizada
4. Eliminar metadatos de imagen innecesarios
5. cambie el tamaño de las imágenes en el servidor y asegúrese de que el tamaño de "visualización" sea lo más cercano posible al tamaño "natural" de la imagen
6. invierta en herramientas e infraestructura automatizadas que asegurarán que todos sus activos de imagen estén siempre optimizados.

Answer 2

El problema principal es el tamaño de las imágenes, debe cargar una imagen mucho más grande de lo que realmente necesita en el sitio web. La carga es mucho más lenta la primera vez porque la imagen no está en la memoria caché del navegador ...

Si miras la imagen, verás: Para esta página necesitas una imagen de 300x279 y estás cargando un gif de 1281x1192 píxeles. Y luego, si miras la hora, tu imagen se está cargando en ~ 6s. Aquí está el problema real. Así que cambia el tamaño de las imágenes y vuelve a intentarlo. Si desea borrar el caché del navegador, Ctrl+F5 .

Hay algunas herramientas web como http://quickthumbnail.com/ donde puedes recortar el tamaño de tu imagen, o puedes hacerlo usando un editor de imágenes como Photoshop, ...

Answer 3

Es mejor utilizar el códec webP de Google, que es un método de compresión con y sin pérdida que se puede utilizar en una gran variedad de imágenes fotográficas, translúcidas y gráficas que se encuentran en la web y ayudan a cargar las imágenes rápidamente.

Answer 4

Por la cantidad de imágenes, su sitio debería ser mucho más rápido. Le recomendaría que utilice las técnicas de Sprites, que consiste básicamente en reunir todas sus imágenes en una sola imagen. De esa manera el sitio carga solo una vez.

Hay generadores de sprites en línea que hacen que el proceso sea muy simple. Por ejemplo, uso este http://css.spritegen.com/ con resultados bastante buenos en un mejor rendimiento.

Answer 5

Puedo sugerir configurar el archivo .htaccess para el almacenamiento en caché. Puede aumentar la velocidad.

Usa algo como

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Answer 6

Si desea medir la velocidad de carga de sus scripts / imágenes, lo que puede hacer es simple.

Vaya al inspector web (o haga clic con el botón derecho en un elemento y presione "inspeccionar elemento") y luego haga clic en la pestaña llamada "línea de tiempo". Ahora recarga tu página. Le dará una medida de cuánto tardó todo en cargar.

En mi PC su sitio tomó 3.40s para cargar. No está mal. Pareces ser bueno para ir

En una nota al margen, si sus imágenes se están cargando lentamente, es probable que las imágenes no las secuencias de comandos. Asegúrate de regresar y recomprimirlos en Photoshop para que tengan la mayor calidad y el menor tamaño de archivo.

Aquí hay una captura de pantalla

Aquí está el SS de su tiempo de carga tomado hoy. Esto parece ser un problema de alojamiento.

Answer 7

Visité su sitio web y funcionó bien al principio. Pero cuando cambié a otra pestaña y regresé a su sitio web, quedó en blanco por unos segundos y la razón es su imagen de fondo Tomorrow_final.jpeg que es de

11mb
size of 8454x8568

tan enorme. Mientras que las 12 images restantes funcionan bien porque todas están en kbs . Así que reduzca el background image size con photoshop y guárdelo para la web and device y luego funcionará bien. Actualmente, incluso su página web se atasca mientras se desplaza demasiado rápido.