tempi di caricamento diverso: background e img

karedas

tempi di caricamento diverso: background e img

Salve non mi era mai successo magari qualcuno sa rispondermi.
Siccome Internet explorer causa un effetto spiacevole sulle immagini inserendo in alto a sinistra, quando il mouse ci passa sopra, un tooltip per salvare la medesima immagine, ho pensato a mettere determinate immagini come "background:url(....)";

Adesso però non riesco a capire come mai i tempi di caricamento cambiano notevolmente.

O meglio sapete spiegarmi perchè i background i browser li caricano dopo e precedentemente le img?

laburno

Ciao Karedas,
ne ho parlato giusto ieri qui:
http://www.giorgiotave.it/forum/css/49303-div-con-immagine.html#post331739

Mi sembra, non ne sono sicuro, che le immagini di sfondo vengono caricate dopo che è stata caricata anche la struttura. Con le immagini normali il caricamento avviene in contemporanea, quindi, teoricamente, il contenuto vero e proprio è fruibile prima. Però ripeto: non sono sicuro, mi devo informare.

Le <img> sono elementi html e vengono caricati insieme a tutta la pagina. Una volta che è stato caricato il tutto, viene caricato e applicato il CSS.
Proprio in questa fase, se le utilizzi, vengono caricate anche le immagini di sfondo (sono richiamate dal CSS).

Ma cambiano notevolmente quanto? La dimensione delle immagini è molto consistente?

karedas

No , l'immagine + grande arriva ad avere 20kb.
Ma il problema sta nel fatto che ancora il sito è "povero" di immagini e andando avanti non vorrei che divenisse troppo pesante.
Ad esempio le immagini di dimensioni 120x120px arrivano ad avere 4-5kb , l'header (che conterrà il fulcro del titolo) 24kb.
L'incriminante è che non sono affatto tante e nonostante questo la vedo grigia come situazione se devo continuare a inserirne.

laburno

Il tuo sito è online? Potremmo approfittarne per fare un po di luce sulla questione.

Hai provato a fare uno speed report?
http://www.websiteoptimization.com/services/analyze/index.html

Postaci i risultati se lo fai!

karedas

TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.
TOTAL_OBJECTS - Warning! The total number of objects on this page is 13 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
TOTAL_IMAGES - Caution. You have a moderate amount of images on this page (10 ). Consider using fewer images on the site or try reusing the same image in multiple pages to take advantage of caching.
TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.
TOTAL_SIZE - Caution. The total size of this page is 73038 bytes, which will load in over 8 seconds on a 56Kbps modem - or 17.16 seconds. Consider reducing total page size to less than 30K to achieve sub eight second response times on 56K connections. Be sure to provide feedback for pages over 30K by layering your design to display useful content within the first two seconds. Consider optimizing your site with Speed Up Your Site](http://www.websiteoptimization.com/speed/) or contacting us about our optimization services.
TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 1 . External scripts are less reliably cached than CSS files so consider combining scripts into one, or even embedding them into high-traffic pages.
HTML_SIZE - Congratulations, the total size of this HTML file is 10183 bytes, which less than 20K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your page to display content in well under 8 seconds, the average time users are willing to wait for a page to display without feedback.
IMAGES_SIZE - Warning! The total size of your images is 52073 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
SCRIPT_SIZE - Congratulations, the total size of all your external scripts is 1939 bytes, which is less than 4080 bytes. This will fit into three higher-speed TCP-IP packets.
CSS_SIZE - Warning! The total size of your external CSS is 8843 bytes, which is over 8K. Consider optimizing your CSS for size by eliminating whitespace, using shorthand notation, and combining multiple CSS files where appropriate.
MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.

laburno

Non c'è un riferimento anche alle CSS IMAGES?
Comunque hai 50k di Immagini nel body che non dipendo dal css.

Puoi postarci il link al report se vuoi

karedas

il sito è in costruzione semi totale. Questo perchè ho perso parecchio tempo per creare un pannello di controllo interno non di terze parti ma di mia fattura.
Mancano ancora link, immagini, funzionalità javascript (infatti il menù nn si apre come dovrebbe) e via dicendo poichè purtroppo ho altri lavori e non posso starci dietro.

Tralasciando che il mio datore vuole una grafica tutta sua e mi sta facendo impazzire (basti notare il logo in cima che l'ha voluto esattamente così , scarno , semplice...e orrendo =p )

cmq il sito è completamente accessibile e non presenta errori su quest'ultimo.

http:www.easysystem.it

laburno

CSS Images: 15435 kb | 3.88 s | 0.88 s
Total Images: 52073 kb | 12.38 s | 2.27 s

Il grosso del peso sono immagini <img>. Per quanto riguarda quelle CSS, dovresti provare ad ottimizzarle. Specialmente questa, in cui potresti togliere il testo e ri-aggiungerlo nell'html.

karedas

mhhh
Ma se tolgo il testo non mi cambia nemmeno di un micro-bit

laburno

@karedas said:

mhhh
Ma se tolgo il testo non mi cambia nemmeno di un micro-bit

Che programma usi? Molti hanno dentro dei mini applicativi per ottimizzare per il web.

karedas

Photoshop o Fireworks.
Ho trovato un applicativo online chiamato web-requalcosa, molto carino.

karedas

Però c'è da fare un discorso un pò + complesso.
Perchè l'immagine di sfondo del body è la prima ad essere caricata.
Sono gli sfondi interni ai div che carica per ultimo.
Non so se mettere le immagini al top come "img" o meno.

Quello che non capisco è come mai Internet explorer, invece, carichi molto + alla svelta di Firefox.
Oppure è solo una sensazione e IE carica tutta la pagina nel medesimo istante senza dare precedenze.

Ho visto che siti come "www.html.it" usano un preload delle immagini con javascript.
Sapete darmi un link su qualche tutorial o documentazione?

laburno

@karedas said:

Però c'è da fare un discorso un pò + complesso.
Perchè l'immagine di sfondo del body è la prima ad essere caricata.
Sono gli sfondi interni ai div che carica per ultimo.
Non so se mettere le immagini al top come "img" o meno.

Quello che non capisco è come mai Internet explorer, invece, carichi molto + alla svelta di Firefox.
Oppure è solo una sensazione e IE carica tutta la pagina nel medesimo istante senza dare precedenze.

Ho visto che siti come "www.html.it" usano un preload delle immagini con javascript.
Sapete darmi un link su qualche tutorial o documentazione?

La regola d'oro è che se l'immagine fa parte del contenuto va usato <img>, altrimenti se è parte della struttura vanno usati i CSS.

Spannometricamente non si può dire IE carica più veloce di Firefox o il contrario, devi fare dei test che siano documentabili perché il problema potrebbe essere anche circoscritto al tuo computer.

Per quanto riguarda i preload prova a chiedere in Scripting