Trim the Bloat Lean It Out

Dans les deux précédents articles de cette série, nous avons expliqué comment nous sommes passés de sites Web minuscules aux énormes applications et sites que nous avons aujourd'hui. Nous avons discuté de certains des choix que nous pouvons faire en ce qui concerne notre site Web WordPress, ce qu’il faut surveiller et la raison pour laquelle chaque chose est importante.. 

Dans cet article, je vais donner quelques exemples concrets de ce dont je parle. Ce ne sera pas un guide direct qui conviendra parfaitement à chaque cas d'utilisation, mais l'intention est de fournir quelques exemples afin de vous aider à démarrer avec le nettoyage et la suppression des éléments superflus de votre blog que vous n'aimez pas. avoir besoin.

S'appuyant sur les fichiers modèles

Ci-dessous, j'ai pris un morceau de HTML d'un projet récent. Le site d'origine contenait beaucoup d'éléments dont il n'avait pas vraiment besoin. Au fil du temps, la société avait accumulé des plugins et des ajouts à leur thème et connaissait maintenant des temps de chargement absurdement lents.. 

Dans ce cas, la solution la plus simple serait de placer une couche de mise en cache devant celle-ci et de le faire. Mais cela ne résout pas vraiment le problème. L’une des choses que j’ai finalement faite est de supprimer environ 50% du code HTML du thème, de le réécrire au besoin et d’ajuster le code CSS en conséquence pour conserver le même design..

Voici une partie du code HTML qui figurait dans le thème initial. J'ai un peu corrigé le formatage.

Le titre de l'article va ici

  • Nom de catégorie
Posté sur 28 février 2014 - 14h40 par Bob The Admin
Commentaire
Poster l'image du titre ici

poster du contenu ici

Ce n'est pas le pire HTML que j'ai jamais vu, et absolument aucune des parties qui ont vraiment rendu le site beaucoup plus lent, mais c'est parfait pour ce que j'essaie de montrer ici: il y a beaucoup de nettoyage à faire. Il y a une quantité excessive d'emballages et de nettoyage div éléments. 

Après un nettoyage, je me suis retrouvé avec:

Le titre de l'article va ici

  • Nom de catégorie
Posté sur 28 février 2014 - 14h40 par Bob The Admin
Commentaire
Poster l'image du titre ici

poster du contenu ici

Ce morceau de code a la plupart de ses wrappers dépouillé. Si vous n'en avez pas besoin, ne les ajoutez pas. Une utilisation appropriée de CSS vous évitera d’utiliser la plupart, sinon la totalité des wrappers du code original.. 

Cet exemple peut sembler insignifiant et, à lui seul, il l'est. Mais faites-le partout pour chaque modèle de votre thème et vous obtiendrez un résultat nettement plus petit.. 

Lors du rendu de votre site, les navigateurs seront plus satisfaits, les visiteurs mobiles partout apprécieront l'ouverture plus rapide de votre site sur leur téléphone, car moins de données signifie des temps de chargement plus courts, et vous serez plus heureux lorsque vous aurez besoin d'ajuster quelque chose dans le code.

Il y a beaucoup plus à discuter ici, mais cette série n'est pas conçue comme le guide définitif pour écrire du HTML propre. Son objectif est plutôt de vous informer des améliorations potentielles que vous pouvez appliquer à votre site.. 

Rachel McCollin a écrit un guide très élaboré et complet sur la création d’un thème pour WordPress. Sa série détaille en détail comment construire un thème et ses exemples sont totalement exempts de toute obstruction, je peux recommander à quiconque est à la recherche de conseils sur la façon de trier leur code HTML pour jeter un coup d'œil à sa série..

Couper nos plugins

Maintenant que nous avons examiné les thèmes, parlons des plugins.

Beaucoup des mêmes règles s'appliquent ici. Plus le plugin est nettoyé, plus il sera facile de l’ajuster lorsque vous en aurez besoin. Rappelez-vous que vous perdrez la compatibilité si vous ajustez directement un plugin, il est donc généralement préférable d’essayer d’éviter cela..

Les plugins sont de toutes tailles. C'est-à-dire que certains font ce dont ils ont besoin et rien de plus, d'autres font ce qu'ils doivent faire ainsi que beaucoup d'autres choses. Les fonctionnalités ne sont pas rares et vous voulez vraiment garder un œil sur vous lorsque vous sélectionnez les plugins que vous souhaitez utiliser. Dans certains cas (mais pas tous), plus vous aurez de plugins, plus les choses seront lentes.. 

Bien sûr, cela dépend en grande partie de la qualité du code du plugin. C’est pourquoi il est important de vous assurer de faire preuve de la diligence requise lors de l’examen des plugins que vous êtes sur le point d’installer.. 

Individuellement, chaque plugin peut sembler ne pas faire grand chose, mais s'il est assemblé avec un grand nombre de plugins mal codés, vous verrez une baisse significative des performances..

Lorsque j'écrivais cet article pour la première fois, j'allais aborder un grand nombre de points à surveiller lors de la sélection de vos plugins; Cependant, Barış Ünver a écrit un excellent guide sur ce qu'il faut rechercher lors du choix d'un plugin et je n'ai pas besoin de répéter ses mots ici. 

Lisez plutôt son guide si vous recherchez des conseils sur le plug-in à utiliser..

Et après?

Tout d’abord, résumons: plus vous écrivez votre code, qu’il s’agisse de HTML, PHP, JavaScript, C, et plus il est facile à entretenir et à ajuster ultérieurement. Cet article a tenté de vous donner quelques conseils sur le nettoyage de vos modèles et fait référence à d’excellentes ressources pour démarrer avec cela et trouver des plugins..

Certains d’entre vous auront remarqué que j’ai omis de parler de tout ce qui touche au CSS, à JavaScript, à la réduction d’éléments et à d’autres formes d’optimisation. C'est parce que le prochain post sera à peu près exactement cela.

En attendant, laissez-moi savoir dans les commentaires ce que vous pensez après avoir lu!