Ce n'est un secret pour personne : les internautes d'aujourd'hui ont besoin de rapidité. Avec des connexions Internet et cellulaires de plus en plus rapides, les utilisateurs s'attendent à ce que les sites se chargent rapidement, et c'est le travail d'un développeur de faire ce qu'il peut pour servir ces pages rapidement. Alors, comment rendre votre site ultra rapide ? Voici ce que vous devriez faire spécifiquement lors de la construction avec WordPress.

Avant toute chose : testez la vitesse de votre site

Les performances peuvent être divisées en deux catégories principales : le front-end et le back-end. Je considère que le back-end est tout ce qui concerne le serveur et la façon dont les données sont remplies sur une page (votre code PHP dans votre thème est le "back-end"). Le front-end se compose de tous vos actifs (CSS, JavaScript, images, etc.) et du balisage. Tout ce qu'un navigateur Web lit et interprète est le "front-end". La raison pour laquelle je fais cette distinction en termes de performances est qu'il est bon de savoir ce que vous optimisez et, plus important encore, où vous devez le plus optimiser.

Pour tester la vitesse de votre site, je vous recommande d'utiliser une combinaison de WebPagetest et de Google PageSpeed ​​Insights. WebPagetest nous donne une bonne idée du temps réel (en secondes) qu'un site prend pour se charger, vous donnant de bonnes mesures pour savoir si c'est le back-end ou le front-end qui ralentit le chargement d'un site. PageSpeed ​​Insights est le meilleur moyen de voir comment votre site est rendu par le navigateur et ce que vous pouvez améliorer sur le front-end.

Gardez à l'esprit que cet article se concentre sur les sites WordPress totalement personnalisés. Si vous exécutez des tests de vitesse sur un site utilisant un thème volumineux et 19 plugins tiers (les plugins peuvent ralentir à la fois le front et le back-end), commencez par accéder à une ardoise vierge et activez lentement les plugins un par un pour trouver ceux qui ralentissent les choses.

Performances frontales

Comment améliorer l'accessibilité de votre thème WordPress dès maintenant

Il ne se passe pas un jour sans que je n'utilise le web, même quand je suis en vacances. Je vais prendre une supposition sauvage que vous pouvez comprendre. De plus en plus, Internet joue un ...

La règle d'or de la performance, selon le directeur de la performance de Fastly, Steve Souders, est que 80 à 90 % du temps de chargement total d'une page se compose du front-end (la règle des 80/20). Les 10 à 20 % du back-end sont d'une importance cruciale, mais même si vous utilisez l'argent le plus rapide que vous puissiez acheter, votre site ne sera toujours pas à la hauteur de son plein potentiel sans optimiser le front-end pour s'assurer que les utilisateurs le perçoivent ça charge vite. La perception est importante lorsqu'il s'agit d'optimisation frontale. Un utilisateur ne se souciera pas du temps, en termes de secondes, qu'un site prend pour se charger. Tout ce qui les intéresse vraiment, c'est la rapidité avec laquelle ils peuvent interagir avec et voir le contenu ou effectuer des actions sans délai. Cela ne veut pas dire que vous ne devriez pas vous inquiéter du temps de chargement réel (vous devriez), mais en suivant les techniques ci-dessous, vous pouvez vous assurer que votre site est dans un état utilisable aussi rapidement que possible, suivi rapidement d'un chargement complet de la page de tous les actifs.

CSS

La chose la plus importante à faire avec votre CSS avant qu'il ne soit livré au navigateur est simplement de le compresser et de supprimer les sélecteurs inutilisés. Obtenir un bon flux de travail de développement lors du développement de thèmes rend ce processus trivial, surtout si vous utilisez un pré-processeur comme Sass. J'utilise Grunt, qui est un exécuteur de tâches JavaScript qui exécute des commandes pour vous pendant le développement. Il existe un plugin pour Grunt appelé grunt-contrib-sass qui compile simplement tous vos fichiers Sass en un seul (si vous utilisez des partiels Sass, c'est-à-dire), le minimise et le compresse. Ajoutez le plugin grunt-contrib-watch en plus de cela et il exécutera la tâche Sass chaque fois que vous enregistrez un fichier. Facile! Ne perdez pas le sommeil si vous n'utilisez pas la méthodologie CSS la plus récente et la plus performante, mais essayez de suivre une sorte de norme lors de la création de CSS afin d'éviter les doublons et les tailles de fichiers énormes.

Une fois que votre feuille de style est prête à être utilisée, la manière la plus simple (et de loin la plus standard) de la charger est de simplement la référencer dans le <head> ;. De cette façon, le navigateur le charge et l'analyse avant que le reste du DOM ne soit chargé. Cependant, il existe une nouvelle technique où les styles « critiques » sont intégrés dans le <head> , puis la feuille de style complète est chargée de manière asynchrone à l'aide de JavaScript. Je n'utilise vraiment cette technique que lorsque j'essaie absolument de charger (ou de percevoir le chargement) d'un site en moins d'une seconde, mais c'est une bonne chose à regarder et à voir si cela peut s'intégrer à votre flux de travail. Le groupe Filament a un excellent article détaillé sur l'utilisation de cette technique.

Javascript

Comprendre comment WordPress utilise MySQL

D'une manière générale, WordPress peut être divisé en deux segments : la logique et les modèles qui génèrent l'apparence d'un site WordPress la base de données MySQL qui stocke tout le contenu et les pouvoirs que je...

La ou les règles d'or de l'optimisation de JavaScript sont simples : servez le moins de fichiers JavaScript possible, minimisez et concaténez. Les plugins WordPress tiers peuvent être préjudiciables en gonflant votre document avec des fichiers JavaScript bloquants non minifiés, il est donc important d'être attentif lors du choix des plugins. Idéalement, vous devez concaténer TOUS les fichiers JavaScript en un seul, puis le réduire au maximum. Lorsqu'il n'est pas possible de concaténer tous vos fichiers en un seul, il existe des attributs HTML appelés "async" et "defer" qui peuvent être utilisés pour charger des fichiers JavaScript de manière asynchrone ou une fois que le reste de la page est chargé.

L'endroit le plus courant de nos jours pour référencer JavaScript est au bas de votre document, juste avant la balise de fermeture. Cependant, il existe des techniques plus avancées pour charger JavaScript. Encore une fois, Filament Group a fait des tonnes de recherches à ce sujet et a plusieurs projets open source que vous pouvez utiliser si vous visez un temps de chargement de page ultra rapide (je ne suis en aucun cas affilié à Filament Group, soit dit en passant ; Je pense juste que leurs trucs sont géniaux). La meilleure approche semble être de charger dynamiquement les scripts en incorporant une petite fonction dans le <head> ; qui ajoute ensuite des balises de script sans bloquer le reste de la page. Pour plus d'informations, consultez le script loadJS.

Images

Les images sont souvent les fichiers les plus volumineux d'une page, responsables du plus grand retard dans le temps de chargement de la page. La bonne chose à propos des images est que, contrairement à CSS et JavaScript, la plupart des navigateurs les chargent de manière asynchrone. Cela aide au moins à la performance perçue d'une page, mais vous voulez toujours vous assurer que A) vous diffusez le moins d'images possible et B) ces images sont compressées autant que possible.

Les outils de compression sont nécessaires pour éliminer autant que possible l'excès sur les images. ImageOptim est une excellente application Mac qui le fait bien, avec OptiPNG et jpegtran pour une utilisation avec des coureurs de tâches comme Grunt.

Polices

Les polices Web sont très courantes de nos jours. J'utilise Google Web Fonts sur presque tous les projets, mais jusqu'à récemment, je n'avais pas réalisé le coup de performance que je prenais en les référençant simplement dans le <head> . L'impact sur les performances est faible, mais il s'agit d'un article sur la création de sites ultra rapides, donc tout compte ! Pour de meilleures performances avec les polices Web, je recommande d'utiliser Web Font Loader, co-développé par Google et Typekit. C'est un script open source qui gère à la fois le chargement de vos polices à partir de tiers comme Google Web Fonts et leur permet de se charger de manière asynchrone (vous en avez encore assez de ce mot ?).

Comme prévu, une certaine configuration est nécessaire pour intégrer Web Font Loader dans votre projet, alors consultez le projet sur GitHub pour plus de détails sur la façon de le configurer.