Optimiser vitesse téléchargement: sprite CSS

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par medium69, 19 Avril 2010.

  1. medium69
    medium69 WRInaute passionné
    Inscrit:
    7 Mai 2005
    Messages:
    1 940
    J'aime reçus:
    3
    En ce moment, on parle beaucoup de la vitesse de chargement des pages avec Google.

    J'avais deux feuilles CSS, je n'en ai plus qu'une désormais...
    J'ai aussi réduit la taille de mon fichiers JS.

    C'est alors que j'ai voulu me mettre aux sprites CSS pour l'affichage de mes icônes. ça m'a pris une bonne journée pour organiser tout cela, mais au final, je suis bien content. J'ai gagné entre 10 et 20 requêtes et quelques Kio, voire plus suivant les pages.

    Cela dit, c'est très long à mettre en place suivant le format de votre site.
    Je vous donne ici, quelques liens qui m'ont servi dans ma besogne :

    :arrow: http://fr.spritegen.website-performance.org/section/what-are-css-sprites
    :arrow: http://fr.spritegen.website-performance.org/
    :arrow: http://top-news.fr/demos/sprite/sprite.html

    J'avais une autre page, mais je ne la retrouve plus.
     
    #1 medium69, 19 Avril 2010
  2. Aaarrrgggh
    Aaarrrgggh WRInaute occasionnel
    Inscrit:
    16 Mars 2009
    Messages:
    298
    J'aime reçus:
    0
    Re: Les sprites CSS...

    Il y a des générateurs de sprites aussi qui peuvent faire gagner du temps, pour éviter de devoir calculer soi-même les coordonnées de placement des images de fonds.
     
    #2 Aaarrrgggh, 19 Avril 2010
  3. medium69
    medium69 WRInaute passionné
    Inscrit:
    7 Mai 2005
    Messages:
    1 940
    J'aime reçus:
    3
    Re: Les sprites CSS...

    c'est ce que fait le deuxième lien que j'ai indiqué.

    Il te fabrique ton sprite, et te donne le code CSS avec les coordonnées.
     
    #3 medium69, 19 Avril 2010
  4. bee_human
    bee_human WRInaute passionné
    Inscrit:
    16 Juin 2005
    Messages:
    1 697
    J'aime reçus:
    0
    Re: Les sprites CSS...

    C'est ce que je regardais également hier. Il faudrait changer le titre du fil par un truc du genre "Optimiser vitesse téléchargement: sprite CSS"

    Sinon, personne va venir le voir ton sujet. 8)
     
    #4 bee_human, 19 Avril 2010
  5. medium69
    medium69 WRInaute passionné
    Inscrit:
    7 Mai 2005
    Messages:
    1 940
    J'aime reçus:
    3
    Idée validée ;)
     
    #5 medium69, 19 Avril 2010
  6. bee_human
    bee_human WRInaute passionné
    Inscrit:
    16 Juin 2005
    Messages:
    1 697
    J'aime reçus:
    0
    Bon, et bien ça n'attire pas les foules non plus. Pourtant le concept a l'air intéressant. J'étais tombé sur cet article:
    http://www.armelpingault.com/2009/10/15/sprites-css/ dans lequel j'ai découvert que google faisait usage des sprites.
     
    #6 bee_human, 19 Avril 2010
  7. 5_legs
    5_legs WRInaute passionné
    Inscrit:
    30 Avril 2006
    Messages:
    1 521
    J'aime reçus:
    0
    Très intéressant.

    Merci à vous deux pour les liens.
    En revanche je m'interroge sur le réel gain, certes en terme de requêtes cela semble être vérifié mais à moins d'avoir beaucoup d'images et beaucoup de visites ?
     
    #7 5_legs, 19 Avril 2010
  8. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 858
    J'aime reçus:
    5
    Un peu ch* à mettre en place quand on est pas ultra-rigoureux, mais c'est une optimisation très sympa.
     
    #8 HawkEye, 19 Avril 2010
  9. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    #9 bproductiv, 20 Avril 2010
  10. medium69
    medium69 WRInaute passionné
    Inscrit:
    7 Mai 2005
    Messages:
    1 940
    J'aime reçus:
    3
    N'étant pas un ami de Shakespeare, pourrais-tu en détailler un peu le contenu ?
     
    #10 medium69, 20 Avril 2010
  11. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    En gros, ca prend du temps à mettre en place et surtout beaucoup de temps lorsqu'il y a de la maintenance pour un gain pas vraiment effectif surtout depuis que les nouveaux browsers peuvent avoir jusqu'à 6 connexions simultanées au serveur.
    Il faut l'utiliser à bon escient, l'article parle aussi du cache.
     
    #11 bproductiv, 20 Avril 2010
  12. medium69
    medium69 WRInaute passionné
    Inscrit:
    7 Mai 2005
    Messages:
    1 940
    J'aime reçus:
    3
    Pour la mise en place, dans mon cas, ça m'a pris plus de 10 heures de travail, mais pour la maintenance, c'est plus que rapide.

    Si je dois rajouter une icône, je n'ai qu'à changer mes CSS pour les coordonnées nouvelles.
     
    #12 medium69, 20 Avril 2010
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - Optimiser vitesse téléchargement Forum Date
Optimiser la vitesse d'une galerie GIF sur Wordpress Administration d'un site Web 21 Août 2018
optimiser la vitesse de mobile Débuter en référencement 16 Juin 2016
GZIP Optimiser la vitesse d'un site? Développement d'un site Web ou d'une appli mobile 9 Avril 2010
OPTIMISER LES BALISES HTML D’UN SITE WEB  Développement d'un site Web ou d'une appli mobile 28 Juillet 2021
Optimiser un article qui rank sans le pénaliser Rédaction web et référencement 9 Juin 2021
Optimiser les vidéos pour la recherche YouTube YouTube, Google Images et Google Maps 27 Avril 2021
optimiser un nouveau site avec un NDD déjà existant ant Débuter en référencement 10 Mars 2021
Comment optimiser la profondeur des liens dans un blog ? Netlinking, backlinks, liens et redirections 10 Décembre 2020
Réduire et optimiser un code js Développement d'un site Web ou d'une appli mobile 16 Mars 2020
Comment optimiser un fichier PDF pour le SEO ? Référencement Google 29 Janvier 2020
Chargement des pages, ton site tu optimiseras Référencement Google 27 Décembre 2019
Comment optimiser le référencement des fiches produits saisonniers e-commerce 6 Août 2019
Référencement local : optimiser pour les villes voisines Débuter en référencement 15 Mai 2019
Astuce Header dédié homepage pour optimiser le référencement Référencement Google 15 Mars 2019
Comment Optimiser Un Mot-Clé En Plusieurs Mots ? Débuter en référencement 3 Mars 2018
Que faire de plus pour optimiser le référencement de mon site ? Crawl et indexation Google, sitemaps 2 Mai 2017
Optimiser un site e-commerce e-commerce 20 Février 2017
Reduire et optimiser une requete sql Développement d'un site Web ou d'une appli mobile 8 Décembre 2016
Que signifie "optimiser une page pour un mot clef" ? Débuter en référencement 26 Novembre 2016
Optimiser le référencement de mon site Problèmes de référencement spécifiques à vos sites 28 Septembre 2016