Depuis la création d'Internet, la taille moyenne des fichiers ne cesse de croître. Ce qui a commencé par des kilo-octets a progressé en mégaoctets (oui, au pluriel), et nos fichiers ne font que croître.
Bien que ce phénomène ne soit pas déconcertant à première vue, son impact sur la performance et la maintenabilité est terrible. Ajoutez des appareils vieillissants, des restrictions de bande passante ou des vitesses lentes en général ... et nous avons un problème beaucoup plus important.
Heureusement, nous avons le contrôle non seulement sur la taille de nos fichiers, mais également sur la manière dont nos pages sont rendues dans le navigateur. Ce type de contrôle donne aux développeurs Web comme nous une chance d’aider à résoudre ce problème et d’optimiser notre code pour de meilleures performances.
Je comprends tout à fait un manque d'intérêt lorsque la plupart des connexions Internet aux États-Unis sont assez rapides ces jours-ci. Je veux dire, si tout va bien déjà, pourquoi s'embêter?
Les performances et l'optimisation ne se limitent pas à la rapidité avec laquelle nous pouvons télécharger du contenu. Il y a aussi pas mal d'avantages SEO et UX à prendre en prenant le temps de regarder notre code. Sans oublier que la réduction de la taille des fichiers en optimisant notre code pour de meilleures performances a l'avantage supplémentaire de réduire les coûts de bande passante en tant qu'hôtes et de réduire également l'utilisation de la bande passante (par exemple, les plafonds ISP / cellulaires).
Le code modulaire ajoute généralement des ballonnements sous la forme de plusieurs options. Ici, nous voulons penser de manière modulaire en combinant autant de parties communes de notre code que possible. Si nous pouvons combiner deux classes CSS en une et utiliser moins de code pour fournir le même résultat, nous devrions le faire.
La modularité n’est pas aussi importante quand il s’agit de HTML et CSS de base, mais lorsque vous entrez dans le monde plus complexe du JavaScript, le fait d’avoir trop de ballonnement peut vous nuire, en particulier sur le mobile.
Les demandes de dépendance sont de loin le facteur le plus important pour ralentir la vitesse de chargement des pages. Chaque requête supplémentaire ajoute une couche supplémentaire et une autre couche de complexité au processus d'analyse et de téléchargement. Il est souvent facile d'oublier que les images appelantes de votre feuille de style comptent également, alors assurez-vous de limiter celles-ci et d'utiliser des méthodes d'optimisation alternatives telles que les sprites ou SVG lorsque cela est possible.
Alors que nous sommes sur le sujet des dépendances externes, si votre site Web est suffisamment grand pour nécessiter quelques dizaines de demandes au minimum… Il est peut-être temps d'envisager d'utiliser un CDN. L'utilisation d'un CDN pour distribuer votre contenu ne réduira pas autant la taille des fichiers et / ou le temps de chargement que la suppression de requêtes HTTP supplémentaires, mais cela peut au moins supprimer toutes les connexions au serveur lentes.
Il devrait y avoir une différence très nette lorsque vous comparez vos bases de code de développement et de production. Prendre cette mesure seul peut parfois entraîner la plus forte diminution de la taille des fichiers à tous les niveaux.
Il est courant de voir les développeurs se référer à leur environnement de «production» ou de «développement», en particulier sur les projets à grande échelle. Mais cela est également utile pour les petites choses. La plus grande différence entre les deux environnements peut être vue avec la compression d'image et la minification / compression du code. En fin de compte, nous voulons que notre environnement de production soit aussi simple et rapide que possible, alors que notre environnement de développement devrait être le même, à l'exception de l'optimisation de la compression image / code.
L'utilisation des outils intégrés tels que la compression "Enregistrer pour le Web" de Photoshop peut constituer un bon point de départ pour les images. Il y a une pléthore de connaissances à être exploré ailleurs ainsi que des conversations sur les formats d'image, les algorithmes de compression, le contrôle de la qualité et les meilleures pratiques.
Pour le code, la meilleure utilisation de la compression dépend généralement de la langue avec laquelle vous travaillez. Il est également très discutable de savoir si la compression du code aide ou blesse les autres personnes qui tentent de comprendre votre code, mais c'est une conversation pour une autre fois. En ce qui concerne HTML et CSS, j'utilise des services comme Htmlcompressor de Google et le Compresseur YUI pour CSS.
Parfois, le code que nous écrivons est le lien le plus lent de la chaîne. Un code CSS inefficace ou un code JavaScript surchargé peut faire perdre plus de temps au chargement que vous ne le pensez. Ce Mozilla post explique en détail l’importance de l’écriture de sélecteurs CSS allégés et de l’explication de leur rendu par les navigateurs. En bref, écrire le chemin exact dans une chaîne de sélecteurs est beaucoup moins efficace que de simplement utiliser le plus petit sélecteur unique et identifiable. Ils dirigent tous deux le style vers le même élément, ce dernier fait simplement le travail beaucoup plus rapidement.
JavaScript peut être encore pire que les CSS mal écrits et, dans de nombreux cas, il est facilement ignoré. Combien de fois avez-vous copié et collé une bibliothèque JS externe dans votre projet sans vraiment chercher en profondeur la source elle-même? Typekit en est un excellent exemple, car lorsque ses serveurs se bloquent, il peut mettre une page Web en utilisant ses polices à genoux et provoquer 30 secondes supplémentaires, voire quelques minutes de temps de chargement supplémentaire.
Heureusement, de tels événements se produisent rarement, mais il est toujours recommandé d'appeler JavaScript si possible, comme c'est le cas avec Google Analytics. Cela permet au navigateur d'analyser les fichiers de tête (CSS, requêtes HTTP, etc.) et d'afficher le balisage avant que JavaScript ne commence à ralentir les choses.
Conformément à notre objectif d’écrire des sélecteurs CSS plus légers et de réduire au minimum les ballonnements, l’écriture d’un code HTML efficace devrait également être une priorité.
Les réinitialisations CSS ciblent souvent tous les éléments courants et imposent un "réinitialisation" des styles. Donc, même si vous ne ciblez pas ce div supplémentaire, cela ralentit probablement les choses en ayant au minimum besoin de réinitialiser son remplissage et sa marge. En règle générale, un div ou deux supplémentaire ne fera pas vraiment de mal. C'est seulement lorsque vous commencez à vous retrouver avec des dizaines d'entre eux que les choses deviennent folles. Avec l'introduction de plus d'éléments dans la spécification HTML5, nous avons également beaucoup plus de flexibilité dans ce domaine.
Google s'est donné comme priorité de mettre en place collectivement Internet. Afin d'occuper des positions de premier plan dans leurs résultats de recherche, les pages doivent désormais accorder une attention particulière à de nombreux attributs différents sur la manière dont ils sont rendus. Appeler trop de ressources externes, avoir des images d'une taille absurde ou même avoir un JavaScript mal écrit peut entraîner un classement dans un site.
Heureusement, tout cela est bien intentionné, car leurs exigences pour un bon classement de recherche reposent sur de bonnes pratiques de développement. Google propose également un guide très détaillé à optimiser différents aspects de votre site pour un meilleur référencement - ce qui arrive également à promouvoir des pratiques de développement fantastiques en même temps.
Lors de l'optimisation de notre code, nous devons non seulement réfléchir à la taille des fichiers, mais également à la manière dont il sera lu. soit par les navigateurs ou même d'autres humains. L'utilisation mobile doit également être prise en compte, de nombreux fournisseurs de services imposant des plafonds de données très contraignants ces jours-ci.
Ainsi, bien que cela prenne plus de temps pour effectuer toute cette optimisation, cela en vaut certainement la peine, car elle offre non seulement de meilleures performances dans le navigateur et sur le mobile, mais elle permet également de promouvoir de meilleures pratiques de développement et même de mieux classer votre contenu. sur les moteurs de recherche comme Google.
La prochaine fois que vous vous préparerez à lancer, jetez vos images dans un moteur de compression ... Vous pourriez être surpris du nombre de mégaoctets qu'il peut raser!
L'image sélectionnée, image de vitesse modulaire via Shutterstock.