Share
Dans le premier article de cette série, nous avons examiné certaines choses que nous pouvons faire pour maintenir notre installation WordPress en bonne santé. Mais ce n'est pas tout ce qu'on peut faire.
Dans cet article, nous allons expliquer ce qu’il faut faire avec vos ressources: feuilles de style, fichiers JavaScript, images, etc..
Moins est plus. C'est à peu près le message que j'essaie de mettre en avant avec toute cette série. À cette fin, j'ai parlé de l'utilisation du code HTML trop élaboré dans le, référencé quelques ressources qui vous aideront à commencer à écrire du code de thème propre et à trouver les bons plugins..
Il est maintenant temps de nous concentrer sur nos atouts: feuilles de style, scripts Java et images.
Nous sommes tous habitués à écrire du CSS, non? Même les débutants parmi nous ont touché une ligne de CSS ici ou là. Jamais utilisé un affichage: aucun quelque part? Voilà, vous avez appliqué une règle de style.
Dans sa forme la plus grossière, je suis sûr que nous les avons tous utilisés. Les personnes les plus expérimentées sauront que c'est une bonne idée de conserver vos styles à l'endroit où ils appartiennent: dans vos feuilles de style. Ceci est principalement une question de maintenabilité. Si vous avez des styles en ligne sur tous vos modèles, vous vous perdrez en essayant de trouver le bon endroit pour ajuster quelque chose, et lorsque vous ajustez cette chose, vous devez toujours trouver cinq autres endroits auxquels le même style en ligne est appliqué..
Le fait de placer les styles dans des fichiers de feuille de style présente un autre avantage: vous pouvez écrire moins pour faire la même chose, en utilisant des règles de style génériques au lieu de règles spécifiques, mais vous pouvez même aller plus loin et utiliser un pré-processeur..
Stylus, LESS et Sass sont tous des pré-processeurs CSS. Vous pouvez les utiliser pour écrire moins de code et obtenir un résultat final plus propre. Lisez cela comme: moins de travail, moins de code, plus facile à gérer!
Bien que Stylus soit une exception, LESS et Sass ont des plugins WordPress disponibles. Si vous pouvez éviter de les utiliser, faites-le. Il y a moyen de générer une feuille de style à partir d'un .Moins et .toupet fichier juste une fois, sans utiliser ces plugins.
Sans être trop spécifiques, ces pré-processeurs vous permettront d'écrire beaucoup moins de code pour aboutir au même résultat final. Dans de nombreux cas, ils combinent même les styles, ce qui rend vos feuilles de style plus propres et plus faciles à gérer. Un rapide tutoriel sur LESS et un sur Sass ont des tutoriels existants ici sur Tuts+.
Quant à savoir lequel est le meilleur, cela dépend beaucoup de vos préférences personnelles. Les trois transformateurs grandissent et trouvent leur chemin. Vous pouvez trouver ici une comparaison des trois processeurs disponibles qui expliquera plus en détail leurs forces..
JavaScript est devenu un élément accepté du développement Web. Il y a quelques années, nous avions toujours admis qu'il était normal que nos visiteurs désactivent JavaScript. Cependant, c'est maintenant l'exception et non la règle..
Personnellement, je préfère toujours créer mes sites sans ce site, puis ajouter les scripts en tant qu’amélioration. Cela a l'avantage de me permettre de garder les scripts au strict minimum, car le site fonctionne déjà immédiatement, sans lui..
La seule vraie option pour écrire moins de JavaScript est de faire exactement cela. Écrire moins; Cependant, un bon conseil est d'utiliser la bibliothèque jQuery fournie avec WordPress, car elle est spécialement conçue pour vous permettre d'écrire moins pour obtenir le même résultat tout en restant rapide et facile à utiliser..
Rappelez-vous le premier post de cette série? J'ai mentionné qu'au cours des trois dernières années, les sites Web avaient eu une augmentation absurde de 235%. Fou, n'est ce pas? Voici un autre fait: une grande partie de cette augmentation provient d’images. Je doute que quiconque s’en étonne car l’utilisation d’images de grande taille est devenue une tendance en matière de design, mais même dans ce cas, nous devrions nous efforcer de faire mieux..
Mais comment?
Assurez-vous que si vous utilisez WordPress pour définir les tailles d'image appropriées pour vos images. Cela ne sert à rien de charger une image 500x500 si vous utilisez uniquement une version 100x100 dans votre conception. L'option suivante consiste à utiliser un service tel que smush.it ou kraken.io. Les deux ont des plugins WordPress disponibles et font à peu près la même chose: ils extraient le contenu des images dont vous n'avez pas besoin ou pas, optimisez-le et renvoyez le plus petit fichier possible qu'ils peuvent créer à partir de votre image sans perte de qualité. Smush.it est un service gratuit, où Kraken propose une solution gratuite ainsi qu'une solution payante qui optimisera vos images à la volée..
À présent, vous pouvez voir que je suis tout pour moins. Moins de code, moins d'images, moins de tout. Fin de la route cependant: aussi rapides que mes systèmes minimalistes puissent être, je veux toujours ce kilomètre supplémentaire d’impressionnant. Je m'assurerai que mon code est aussi facile à gérer que possible, que mes feuilles de style soient aussi petites que possible et que mes scripts sont courts. Tout cela, cependant, est avant tout une préparation. Après tout, les résultats finaux seront encore minés. En utilisant le pré-processeur pour mes feuilles de style, je suis déjà en mesure de produire une édition réduite. Des solutions similaires sont disponibles pour les scripts.
Ici, il est important de vous assurer que vos scripts et vos feuilles de style sont générés à l'aide du wp_enqueue_script et wp_enqueue_style les fonctions. Ne vous contentez pas de les jeter dans le tête de votre modèle, mais utilisez function.php pour les mettre en file d'attente et laisser le wp_head fonction faire la sortie réelle.
Pourquoi est-ce important? Parce que si vous mettez correctement en file d'attente vos scripts et vos feuilles de style, les différents plugins de mise en cache et de minification disponibles peuvent les combiner correctement en une seule feuille de style et script..
Caching? Oui, la mise en cache. En plus de la fusion des feuilles de style et des scripts, ces plugins fournissent un système pour mettre en cache la sortie de la base de données ou même la page entière qui en résulte. Les deux vont considérablement réduire la quantité de temps qu'un site devra charger. Adam Burucs a écrit un article comparant les deux plus gros plugins de mise en cache, c’est un bon point de départ pour commencer si vous recherchez des informations sur les deux..
Les ressources externes sont un élément intéressant de tout cela. D'une part, l'utilisation d'un fournisseur externe déchargera le trafic de votre propre serveur. Généralement, cela sera plus rapide en raison des limitations du navigateur sur le nombre de demandes pouvant être envoyées à un serveur. Mais il y a un inconvénient. Vous ne pouvez pas contrôler ce qui vient de votre hôte externe et vous devez être sûr que les données resteront les mêmes et que l'hôte reste disponible. Dans certains cas, il peut être préférable de conserver vos ressources sur votre propre site..
Pour résumer: restez svelte, assurez-vous que vos feuilles de style et vos scripts sont aussi petits que vous pouvez les obtenir, puis réduisez-les encore davantage. Téléchargez des images à la taille dont vous avez besoin et passez-les dans un optimiseur tel que smush.it ou kraken.io. Utilisez un plug-in de mise en cache en tant que point final de votre sortie après avoir minimisé tous les éléments avant d'introduire une mise en cache..
Il reste un dernier volet de cette série dans lequel nous allons couvrir d'autres références sur les sujets que nous avons abordés et, espérons, fournir quelques informations utiles supplémentaires..
Accentsconagua