Un mélange de facteurs, y compris la conception, le développement, l'architecture du réseau et la vitesse de connexion de l'utilisateur final, détermine la rapidité ou la lenteur du chargement d'un site Web. Beaucoup d'entre eux, en particulier le dernier, seront hors de votre contrôle.
Nous avons remarqué que la taille du fichier de la page d'accueil dépassait 1.7 Mo lorsque nous avons revisité le site Web, créé plus tôt cette année. Pour une page Web, c'est une taille de fichier absurdement grande (mais malheureusement fréquente). Nous avons rencontré des défis similaires avec d'énormes bannières de pages graphiques, une autre initiative récente de l'enseignement supérieur. Ceci est atrocement difficile pour les personnes utilisant une connexion lente ou un réseau cellulaire pour visiter le site. Tout le travail de création d'un site réactif et fluide qui a fière allure sur les petits appareils est inutile si l'utilisateur abandonne la page avant la fin du chargement.
Les petites images facilitent la navigation sur le site Web pour l'utilisateur ayant une mauvaise vitesse Internet
Bien qu'il ne s'agisse pas d'un problème qui vous affecte directement, vous ou moi, lorsque nous sommes assis à nos bureaux pour planifier, créer ou administrer des sites Web, nous devons garder à l'esprit que le contexte dans lequel nous utilisons les sites ne correspond pas toujours au contexte dans lequel les les gens qui les utilisent le font. De nombreuses personnes dans les villes et dans le monde n'ont pas accès à Internet à la maison et doivent compter sur de mauvaises connexions mobiles pour se connecter. Sans aucun doute, nombre de vos mobinautes utilisent l'internet haut débit ; Qu'en est-il de ceux qui essaient de charger votre site via un Wi-Fi public de mauvaise qualité, comme les cafés, les bibliothèques et les aéroports ?
La compression d'image n'est pas seulement un facteur à prendre en compte lors de l'examen des performances de la page ; beaucoup d'autres choses peuvent être faites pour accélérer les temps de chargement.
La compression d'image peut améliorer les temps de chargement d'un site Web
La page Web était en grande partie composée d'un fichier PNG transparent chargé de manière aléatoire - un, en particulier, pesant 1.6 Mo. Il existe des programmes gratuits de compression d'images sur le Web qui peuvent réduire considérablement la taille des fichiers image. Avec la différence minimale perceptible de qualité d'image, cette image de 1.6 Mo pourrait être réduite à 230K. Le temps de chargement a été réduit d'environ 85 % grâce à cela.
Compresser les images avant de les télécharger sur le système de gestion de contenu que vous utilisez dans le cadre de votre cycle de migration/entrée de contenu. Malheureusement, la plupart des CMS, y compris les CMS d'entreprise, n'ont pas de compression d'image. Photoshop n'a pas réussi à atteindre le même niveau de compression que les meilleurs programmes de compression malgré ses paramètres de compression Enregistrer pour le Web.
C'est merveilleux si vos pages font environ 200 ou 300K. Si vous pouvez conserver des pages graphiquement intensives sous 600K, c'est ce que vous devriez viser. Il n'y a pas de nombre magique, alors essayez de garder la taille de la page aussi petite que possible. Si vos photos ont déjà été compressées, vous chargez peut-être trop de fichiers image. La définition de budgets de performance pour les pages est une excellente approche pour mettre cette notion en pratique. Vous pouvez spécifier un objectif cible pour le poids de la page et le limiter en définissant un budget.
-
Utiliser des sprites CSS
L'approche des sprites CSS fusionne plusieurs images en une seule image pour améliorer la vitesse de la page et enregistrer les requêtes HTTP. C'est idéal pour les icônes, logos et autres éléments visuels sur votre page plusieurs fois. Voir "Comment les sprites CSS améliorent la vitesse et la durabilité pour plus de détails sur cette méthode".
-
Choisissez le bon type de fichier
Lorsque vous produisez une image et que vous l'enregistrez, elle subit une compression, ce qui réduit la taille du fichier. Différents types de fichiers exigent différentes manières lorsqu'il s'agit de réduire la taille du fichier. Choisir le bon format de fichier pour une image donnée se traduira généralement par une taille de fichier moindre.
• Pour les images et les illustrations avec beaucoup d'ombres, utilisez des JPEG ; utilisez GIF ou SVG pour les dessins au trait, les graphiques et le texte. Gardez à l'esprit que les araignées de site et les équipements d'assistance, tels que les lecteurs d'écran pour les personnes handicapées, ne pourront pas voir le type intégré dans une image. Utilisez le type de cette manière uniquement à des fins ornementales.
• Un PNG est souvent le meilleur type de fichier pour les images qui nécessitent une transparence partielle tout en préservant une partie de la clarté d'un JPG, tel qu'un logo d'entreprise.
-
Dans Photoshop, testez la qualité d'image.
Nous avons choisi un type de fichier JPEG pour une photo de motards sur Climate Ride dans l'exemple ci-dessous. Vous pouvez modifier la qualité JPEG après avoir sélectionné un type de fichier pour une image. Vous recherchez la taille de fichier la plus courte dans le format de fichier correct qui a l'air bien.
Vous pouvez utiliser un autre type de variation avec la résolution et rendre votre image attrayante.
