> Inspiration > Empreinte numérique > Site Web >
Limiter au maximum le poids des pages Web
> PrésentationLimiter au maximum le poids des pages Web
Thèmes :
Empreinte numériqueSite WebÉco-conceptionInformatique
Thèmes :
Empreinte numérique
Site Web
Éco-conception
Informatique
Les pages Web sont téléchargées des milliers de fois et chaque octet à son impact carbone.
Les librairies JS, CSS... sont extra-ordinairement pratiques mais désastreuses pour l'environnement et le temps de chargement des pages.
Ainsi, télécharger l'ensemble de la librairie pour n'en utiliser que quelques lignes est un non sens pour l'expérience utilisateur et notre planète...
Rien que pour la home page d'ActinLink, nous sommes ainsi passé de plus de 1,43Mo à un peu moins de 0,7 Mo.
Soit plus de 700Ko de gagné... à chaque affichage de la home page. En juste quelques minutes et un résultat parfaitement identique!
L'outil magique : une extension Chrome https://github.com/painty/CSS-Used-ChromeExt
Vous trouverez le détail de la mise en oeuvre en cliquant sur plus.
Les librairies JS, CSS... sont extra-ordinairement pratiques mais désastreuses pour l'environnement et le temps de chargement des pages.
Ainsi, télécharger l'ensemble de la librairie pour n'en utiliser que quelques lignes est un non sens pour l'expérience utilisateur et notre planète...
Rien que pour la home page d'ActinLink, nous sommes ainsi passé de plus de 1,43Mo à un peu moins de 0,7 Mo.
Soit plus de 700Ko de gagné... à chaque affichage de la home page. En juste quelques minutes et un résultat parfaitement identique!
L'outil magique : une extension Chrome https://github.com/painty/CSS-Used-ChromeExt
Vous trouverez le détail de la mise en oeuvre en cliquant sur plus.
Mise en oeuvre
Contexte/Résumé
Les pages Web sont téléchargées des milliers de fois et chaque octet à son impact carbone.Les librairies JS, CSS... sont extra-ordinairement pratiques mais désastreuses pour l'environnement et le temps de chargement des pages.
Ainsi, télécharger l'ensemble de la librairie pour n'en utiliser que quelques lignes est un non sens pour l'expérience utilisateur et l'écologie.
Pour la home page d'ActinLink, nous sommes ainsi passé de plus de 1,43Mo à un peu moins de 0,7 Mo.
Soit plus de 700Ko de gagné par affichage de la home page pour un résultat identique!
L'outil magique : une extension Chrome https://github.com/painty/CSS-Used-ChromeExt
Voici le détail de la mise en œuvre
Détails
1
Installation :
Installer Chrome, puis l'extension https://github.com/painty/CSS-Used-ChromeExt
Installer Chrome, puis l'extension https://github.com/painty/CSS-Used-ChromeExt
2
Calcul des CSS utilisés :
Aller sur la page à alléger
Ouvrir : Plus d'outils > Outils de développement
Onglets : Elements puis Ă droite CSS used
Aller sur la page à alléger
Ouvrir : Plus d'outils > Outils de développement
Onglets : Elements puis Ă droite CSS used
3
Récupération des CSS :
Bien prendre la racine de la page en cliquant sur dans la fenĂŞtre de gauche
Cliquer sur "Copy"
Bien prendre la racine de la page en cliquant sur dans la fenĂŞtre de gauche
Cliquer sur "Copy"
4
Mise en oeuvre :
4-1
Créez un nouveau fichier (par exemple css-low-page1.css) et collez y le contenu récupéré
4-2
Dans la page HTML, vous pouvez retirer tous les includes CSS pour n'inclure plus que css-low-page1.css
5
Validation :
Il ne vous reste plus qu'a recharger la page et admirer le résultat avec par exemple des outils comme : https://www.website-footprint.com/
Il ne vous reste plus qu'a recharger la page et admirer le résultat avec par exemple des outils comme : https://www.website-footprint.com/
Soutenir cette idée
Soutenez cette idée et faites monter son score dans la boîte à idées de la communauté
Soutenir
1
Ne plus suivre
Être informé des modifications, nouvelles dates, informations...
Participer
A propos
21 personnes
5 personnes
0 messages
0 évènements
0 participations
4 membres ont voté
3/5 en avis général
4/5 impact écologique
3/5 budget mise en oeuvre
2.5/5 retours financiers
Proposé par
Traduction
FR : 100%