Création de Sprites CSS

[Portos6300]

Bonjour,

 

Je possède une boutique en ligne propulsée sous Prestashop 1.4.7 avec le thème Prestashop 1.5.

 

Dans le but d'optimiser au maximum la vitesse de chargement de la boutique, je souhaite créer des sprites.

 

Il me faudrait votre avis, car j'hésite à en créer trois différents :

 

1er – 31 éléments

• arrow_right_1.png
  
• arrow_right_2.png
  
• bg_bt_newsletter_ok.png
  
• bg_bt.gif
  
• bg_li_idTabs.png
  
• bg_reduction.png
  
• bg_search_input.png
  
• bg_search_submit.png
  
• bloc_contact_a_bg.png (module blockcontact)
  
• block_contact_pict_tel.png (module blockcontact)
  
• block_contact_bg.jpg (module blockcontact)
  
• cart.gif
  
• fb-icon.png - (module fbpromote)
  
• login.gif
  
• logo.jpeg
  
• logout.png
  
• newsletter.png
  
• open-close.png
  
• pict_add_cart.png
  
• pict_cart_block_h4.png
  
• picto_fb.png
  
• sort_asc_white.png
  
• sort_desc_white.png
  
• sprite_pict_social_block.png (module blocksocial)
  
• zoom.png
  
• thumbs_left.gif
  
• thumbs_right.gif
  
• info.png
  
• print.gif
  
• send_friend.gif
  
• delete.gif
  

 

2ème – 13 éléments

• bg_address_title.png
  
• bg_bt_2.gif
  
• bg_discount_name.png
  
• bg_table_th.png
  
• quantity_down_off.gif
  
• quantity_down.gif
  
• quantity_up.gif
  
• step_current_span.gif
  
• step_current.gif
  
• step_done.gif
  
• step_end_current.gif
  
• step_end.gif
  
• step_standard.gif
  

 

3ème – 14 éléments

• addrbook.gif
  
• arrow_rotate_anticlockwise.png
  
• download_product.gif
  
• home.gif
  
• my-account.gif
  
• no.gif
  
• order.gif
  
• pdf.gif
  
• return.gif
  
• slip.gif
  
• update.gif
  
• userinfo.gif
  
• voucher.gif
  
• yes.gif
  

 

Qu'est-ce que vous en pensez ? Est-ce une bonne idée, puisque chaque sprite n'est pas demandé au même moment ou il n'est pas nécessaires d'avoir trois sprites ? Un seul suffit...

Est-ce que vous me recommandez une autre alternative ?

[manouille]

Bonjour, commence deja par voir quelles sont les images que google page speed conseil de "spriter" sur ton site.

 

Apres il va te falloir recoder tous les appels de ces images.. ce qui peut etre très long.

 

Tout cela pour gagner 20ms de chargement... à toi de voir.

 

Sachant qu'un sprite c'est plus simple a faire si les images ont la meme largeur. Donc éventuellement les regrouper selon ce critère.

[Portos6300]

Merci Manouille.

 

Pour google page speed c'est déjà fait. Les images que google me conseil sont inclus dans la liste.

 

Je ne sais pas exactement combien de temps je vais gagner au final...Mais le principal but de cette intervention est non seulement de gagner un peu en vitesse de chargement, mais surtout pour alléger ma boutique en ligne.

 

Car ma page d'accueil fait 80Ko.