Accélérer votre site avec des sprites CSS

web spritemaster

J'écris un peu sur la vitesse des pages sur ce site et c'est une partie importante de l'analyse et des améliorations que nous apportons aux sites de nos clients. En plus de passer à des serveurs puissants et d'utiliser des outils tels que Réseaux de diffusion de contenu, il existe un certain nombre d'autres techniques de programmation que le développeur Web moyen peut utiliser.

La norme de la feuille de style en cascade originale a maintenant plus de 15 ans. CSS a été une évolution importante dans le développement Web car il a séparé le contenu de la conception. Regardez ce blog et tout autre et la majorité de la différence de style se trouve simplement dans la feuille de style ci-jointe. Les feuilles de style sont également importantes car elles sont stockées localement dans un cache de votre navigateur. Par conséquent, à mesure que les gens continuent de visiter votre site, ils ne téléchargent pas de feuille de style à chaque fois… juste le contenu de la page.

Un élément de CSS souvent sous-utilisé est Sprites CSS. Lorsqu'un utilisateur visite votre site Web, vous ne réalisez peut-être pas qu'il ne fait pas simplement une seule demande pour la page. Ils faire plusieurs demandes… Une demande pour la page, pour toutes les feuilles de style, pour tous les fichiers JavaScript attachés, puis chaque image. Si vous avez un thème qui a une série d'images pour les bordures, les barres de navigation, les arrière-plans, les boutons, etc., le navigateur doit demander chacune d'entre elles, une à la fois, à votre serveur Web. Multipliez cela par des milliers de visiteurs et cela peut être des dizaines de milliers de requêtes adressées à votre serveur!

Ceci, à son tour, ralentit votre site. UNE un site lent peut avoir un impact considérable sur l'engagement et les conversions que votre public fait. Une stratégie utilisée par les grands développeurs Web consiste à mettre toutes les images dans un seul fichier… appelé lutin. Plutôt que de faire une demande pour chacune de vos images de fichier, il ne faut plus qu'une seule demande pour l'image de sprite unique!

Vous pouvez lire sur comment les sprites CSS fonctionnent chez CSS-Tricks or Sprite CSS de Smashing Magazine Publier. Mon objectif n'est pas de vous montrer comment les utiliser, mais simplement de vous conseiller pour vous assurer que votre équipe de développement les intègre dans le site. L'exemple fourni par CSS Tricks montre 10 images qui correspondent à 10 requêtes et ajoutent jusqu'à 20.5 Ko. Lorsqu'il est rassemblé en un seul sprite, c'est 1 requête de 13 Ko! La demande aller-retour et les temps de réponse pour 9 images ont maintenant disparu et la quantité de données est réduite de plus de 30%. Multipliez cela par le nombre de visiteurs sur votre site et vous allez vraiment raser certaines ressources!

navigation globaleau jugement, Apple la barre de navigation est un excellent exemple. Chaque bouton a quelques états… que vous soyez sur la page, en dehors de la page ou en passant la souris sur le bouton. CSS définit les coordonnées du bouton et présente la région de l'état correct au navigateur des utilisateurs. Tous ces états sont regroupés dans un seul graphique - mais affichés région par région comme spécifié dans la feuille de style.

Si vos développeurs aiment les outils, il y en a une tonne qui peut les aider, y compris le Cadre CSS Compass, DemandeRéduire pour ASP.NET, CSS-Spriter pour Ruby, Script CSSSprite pour Photoshop, SpritePad, SpriteDroite, SpriteVache, ZéroSprites, Générateur de sprites CSS de Project Fondue, Web maître des sprites, et le SpriteMe Marque-page.

Capture d'écran de Web maître des sprites:
web spritemaster

Martech Zone n'utilise pas d'images d'arrière-plan tout au long de son thème, nous n'avons donc pas à déployer cette technique pour le moment.

2 Commentaires

  1. 1

    Attendez… toute la collection n'est-elle pas une «image» (ou un «plan»), et chaque sous-image (ou sous-groupe d'images dans le cas d'images animées ou changeantes interactivement) un «sprite»?

    Peut-être que des choses ont été renommées depuis la dernière fois que j'ai géré ce genre de choses, mais je pourrais jurer que le Sprite était l'élément qui a fini par être affiché, pas la table Big Data dont il a été tiré.

    («Sprite table»… c'était pas ça?)

    • 2

      Nous parlons peut-être de deux choses différentes, Mark. Avec CSS, vous pouvez essentiellement spécifier la «partie» d'un fichier image à afficher en utilisant les coordonnées. Cela vous permet de mettre toutes vos images dans un seul `` sprite '', puis de pointer simplement la zone que vous souhaitez afficher avec le CSS.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..