Des \u00e9tudes ont d\u00e9montr\u00e9 que les visiteurs d’un site web ont une capacit\u00e9 d’attention de plus en plus courte. 40 % de vos visiteurs auront d\u00e9j\u00e0 quitt\u00e9 votre site apr\u00e8s un temps de chargement de 3 secondes ou plus. Amazon a r\u00e9ussi \u00e0 augmenter son taux de conversion de 2 % en rendant son site web plus rapide d\u2019une seule seconde. Plus votre site web est rapide, mieux c\u2019est.<\/p>\n
En suivant ces conseils, vous pourrez, \u00e9tape par \u00e9tape, rendre votre site web plus rapide. Commen\u00e7ons par le commencement, c’est-\u00e0-dire par des conseils que vous pouvez appliquer en toutes circonstances. Tirez le meilleur parti de votre site web en suivant le plus grand nombre possible de ces conseils.<\/p>\n
Pourquoi encombrer votre site web de plugins inutiles ? Chaque plugin que vous installez sur votre site web ralentit l\u00e9g\u00e8rement son chargement.<\/p>\n
Que devez-vous faire :<\/strong> recherchez les plugins inutiles et supprimez-les. Il est important non seulement de les d\u00e9sactiver, mais aussi de les supprimer d\u00e9finitivement.<\/p>\n . La mise en cache vous permet de stocker les donn\u00e9es de votre site web \u00e0 un autre emplacement, ce qui vous garantit un acc\u00e8s plus rapide \u00e0 ces donn\u00e9es. Votre navigateur n’a alors qu’\u00e0 charger la copie stock\u00e9e dans le cache. Ce processus est tr\u00e8s rapide. Veillez toutefois \u00e0 ce que le code de votre site web soit correct et exempt d’erreurs, sinon la mise en cache ne vous sera pas d’une grande utilit\u00e9.<\/p>\n Que devez-vous faire :<\/strong> la mise en cache s’effectue en trois niveaux. Pour les deux premiers niveaux, vous pouvez utiliser W3 Total Cache, WP Rocket ou WP Super Cache.<\/p>\n WTTP\/2 acc\u00e9l\u00e9rera encore davantage le chargement de votre site web via une connexion s\u00e9curis\u00e9e. Pour b\u00e9n\u00e9ficier de cette nouvelle technologie, toutes vos pages doivent pouvoir \u00eatre charg\u00e9es via une connexion HTTPS s\u00e9curis\u00e9e.<\/p>\n Que devez-vous faire :<\/strong> votre h\u00e9bergeur doit proposer cette technologie. Chez certains h\u00e9bergeurs, comme Savvii, le protocole HTTP\/2 est d\u00e9j\u00e0 activ\u00e9 par d\u00e9faut. Demandez \u00e0 votre h\u00e9bergeur quelle version du protocole HTTP il propose.<\/p>\n L’objectif est de r\u00e9duire au maximum la taille de votre page. Une page web moyenne p\u00e8se 2,3 Mo. Cela repr\u00e9sente une quantit\u00e9 assez importante de donn\u00e9es que votre navigateur doit charger pour les utilisateurs qui visitent votre site web pour la premi\u00e8re fois.<\/p>\n Que devez-vous faire :<\/strong> les images occupent \u00e9norm\u00e9ment d’espace. Vous pouvez donc commencer par r\u00e9duire le nombre d’images sur votre site web et supprimer celles qui ne sont pas n\u00e9cessaires. De nos jours, la devise \u00ab moins il y en a, mieux c\u2019est \u00bb s\u2019applique parfaitement. La navigation n\u2019est pas indispensable pour votre site web. Supprimez tout ce qui n\u2019est pas indispensable.<\/p>\n Toutes les informations collect\u00e9es par vos cookies doivent \u00eatre transmises \u00e0 chaque requ\u00eate. Cela signifie que toutes ces informations doivent \u00eatre charg\u00e9es et lues par le navigateur.<\/p>\n Que devez-vous faire :<\/strong> veillez \u00e0 ce que la taille de votre cookie ne d\u00e9passe pas 4 kilo-octets. Cela vous laisse encore beaucoup d’espace. Utilisez le stockage local si vous souhaitez enregistrer des informations concernant un visiteur.<\/p>\n Comme tous les logiciels, WordPress fait l’objet de mises \u00e0 jour r\u00e9guli\u00e8res. Presque chaque mise \u00e0 jour apporte une l\u00e9g\u00e8re optimisation du code, ce qui permet \u00e0 votre site web de se charger plus rapidement. Outre le c\u0153ur de WordPress, vous devez \u00e9galement mettre \u00e0 jour r\u00e9guli\u00e8rement vos plugins.<\/p>\n Que devez-vous faire :<\/strong> mettez toujours \u00e0 jour votre infrastructure d\u00e8s que possible. Vous b\u00e9n\u00e9ficierez ainsi imm\u00e9diatement des derni\u00e8res versions de WordPress et des plugins.<\/p>\n . AMP permet d’acc\u00e9l\u00e9rer le chargement des pages sur mobile. C’est important, car le mobile prend de plus en plus d’importance. Google stocke toutes vos pages dans son cache. Votre navigateur n’a donc plus qu’\u00e0 charger la copie pr\u00e9sente dans le cache de Google.<\/p>\n Que devez-vous faire ?<\/strong> Il vous suffit d’installer le plugin AMP for WordPress. Une version AMP de votre site web sera alors cr\u00e9\u00e9e, et ce processus se d\u00e9roule automatiquement.<\/p>\n Le temps de chargement de votre site web d\u00e9pend \u00e9galement de l’h\u00e9bergement que vous avez choisi pour celui-ci. Si vous disposez d\u2019un petit site web, vous pouvez opter pour un h\u00e9bergement mutualis\u00e9. Si votre site web comporte beaucoup de codes complexes ou g\u00e9n\u00e8re un trafic tr\u00e8s important, il est pr\u00e9f\u00e9rable d\u2019utiliser un VPS. Ainsi, toutes les ressources de ce serveur sont exclusivement r\u00e9serv\u00e9es \u00e0 votre site web, ce qui lui permet d\u2019offrir de meilleures performances.<\/p>\n Que devez-vous faire : recherchez un bon h\u00e9bergeur. Assurez-vous que l’h\u00e9bergeur que vous choisissez propose une large gamme de formules d’h\u00e9bergement mutualis\u00e9 et de serveurs priv\u00e9s virtuels (VPS).<\/p>\n C’est une bonne chose que de nombreux lecteurs commentent vos articles. Cela signifie que votre contenu est performant et qu’il suscite l’int\u00e9r\u00eat. Il y a toutefois un inconv\u00e9nient \u00e0 avoir beaucoup de commentaires sur vos articles : vos pages doivent charger davantage de donn\u00e9es, ce qui signifie que le chargement de la page prendra plus de temps. Pour rem\u00e9dier \u00e0 cet inconv\u00e9nient, il suffit de r\u00e9partir vos commentaires sur plusieurs pages.<\/p>\n Que devez-vous faire : Acc\u00e9dez \u00e0 votre interface d’administration WordPress. Dans Param\u00e8tres -> Commentaires, cochez la case \u00ab R\u00e9partir les commentaires sur plusieurs pages \u00bb. S\u00e9lectionnez ensuite le nombre de commentaires que vous souhaitez afficher par page et le mode de tri souhait\u00e9.<\/p>\n Cette section contient des informations importantes destin\u00e9es \u00e0 votre navigateur. Ces informations doivent \u00eatre r\u00e9cup\u00e9r\u00e9es en premier lieu pour permettre le chargement de votre page.<\/p>\n Afin d’acc\u00e9l\u00e9rer le chargement de votre site web, toutes les ressources CSS doivent \u00eatre d\u00e9clar\u00e9es le plus t\u00f4t possible dans le document HTML. Le navigateur d\u00e9tecte alors les balises <> le plus rapidement possible et envoie imm\u00e9diatement la requ\u00eate CSS.<\/p>\n Que devez-vous faire :<\/strong> Il vous suffit de modifier l’ordre du code HTML. Placez toutes les informations CSS au d\u00e9but, puis ajoutez le reste du code juste apr\u00e8s.<\/p>\n . Tous les fichiers dot\u00e9s d’un en-t\u00eate de mise en cache indiquent ici pendant combien de temps le navigateur est autoris\u00e9 \u00e0 les conserver avant qu’ils ne doivent \u00eatre t\u00e9l\u00e9charg\u00e9s \u00e0 nouveau.<\/p>\n Que devez-vous faire : utilisez <\/strong>\u00ab Cache-Control: max-age=31536000 \u00bb dans la configuration de votre serveur web. Il est important de commencer par faire la distinction entre le contenu statique et le contenu dynamique. Il est pr\u00e9f\u00e9rable de ne pas mettre en cache le contenu dynamique, ou du moins de limiter sa dur\u00e9e de mise en cache.<\/p>\n Un site web comportant des redirections se chargera beaucoup plus lentement qu’un site qui n’en comporte pas. C’est particuli\u00e8rement vrai pour les sites mobiles.<\/p>\n Que devez-vous faire : essayez <\/strong>d’utiliser une redirection 301 ou 302 au niveau du serveur si vous ne pouvez vraiment pas \u00e9viter certaines redirections.<\/p>\n Si votre site web contient des liens qui ne fonctionnent plus, ce qui est d\u00e9tect\u00e9 \u00e0 l’aide d’un outil externe, cela nuit \u00e0 l’exp\u00e9rience utilisateur. Veillez donc \u00e0 supprimer tous vos liens rompus.<\/p>\n Que devez-vous faire :<\/strong> analysez votre site de temps en temps \u00e0 l’aide de l’un de ces outils :<\/p>\n . Veillez \u00e0 disposer de pages vers lesquelles les utilisateurs sont redirig\u00e9s en cas d’erreur : les pages d’erreur.<\/p>\n Que devez-vous faire ? Dans <\/strong>WordPress, le syst\u00e8me est configur\u00e9 de telle sorte que, par d\u00e9faut, votre visiteur est redirig\u00e9 vers une page 404 lorsqu’il tente d’acc\u00e9der \u00e0 une page introuvable. Vous pouvez personnaliser la mise en page ou le contenu de cette page.<\/p>\n \u00c9tant donn\u00e9 que de plus en plus de personnes utilisent des bloqueurs de publicit\u00e9s, il est important que votre site web puisse continuer \u00e0 fonctionner pour les utilisateurs qui en ont un. La navigation doit rester possible, tout le contenu doit rester visible\u2026 Votre site web peut devenir plus lent si certains contenus sont bloqu\u00e9s mais continuent d\u2019\u00eatre charg\u00e9s en raison d\u2019un script.<\/p>\n Que devez-vous faire :<\/strong> testez votre propre site web en installant un bloqueur de publicit\u00e9s. Vous pourrez ainsi v\u00e9rifier par vous-m\u00eame si tout fonctionne correctement.<\/p>\n : moins votre code HTML contient de caract\u00e8res superflus, plus il se chargera rapidement. \u00c9vitez donc les lignes vides, les espaces inutiles, etc.<\/p>\n Que devez-vous faire : vous <\/strong>pouvez utiliser des outils tels que Minifier ou WP Rocket.<\/p>\n . Les vid\u00e9os devenant de plus en plus populaires, les entreprises souhaitent en tirer parti en les publiant sur leur site web. Malheureusement, l’h\u00e9bergement de vid\u00e9os consomme beaucoup de bande passante et ralentit votre site web.<\/p>\n Que devez-vous faire ?<\/strong> Il est pr\u00e9f\u00e9rable d’utiliser les plateformes vid\u00e9o disponibles. Citons par exemple YouTube, Vimeo ou Dailymotion.<\/p>\n Une mise en page soign\u00e9e est essentielle. La mise en forme de votre site web est d\u00e9finie dans vos fichiers CSS. Les sites web comportant souvent de nombreux styles et \u00e9l\u00e9ments diff\u00e9rents et ne cessant de s’\u00e9toffer, la taille des fichiers CSS ne cesse \u00e9galement d’augmenter. Vous pouvez r\u00e9aliser des gains consid\u00e9rables en optimisant simplement vos fichiers CSS.<\/p>\n Tout comme pour le HTML, vous pouvez r\u00e9duire la taille de vos fichiers <\/p>\n . Votre site web se chargera plus rapidement si vous r\u00e9duisez la taille de vos fichiers et supprimez les informations superflues.<\/p>\n Que devez-vous faire :<\/strong> demandez-vous si tous les codes pr\u00e9sents dans votre CSS doivent \u00eatre envoy\u00e9s pour chaque page. Une grande partie du code est superflue ou obsol\u00e8te. Utilisez ensuite l’outil CSS Compressor. Celui-ci permet de supprimer les derniers morceaux de code superflus.<\/p>\n . Supprimez de votre fichier tout le code superflu qui n’est pas li\u00e9 \u00e0 une page. Vous ne conserverez ainsi que les \u00e9l\u00e9ments utiles qui s’appliquent \u00e0 votre page.<\/p>\n Que devez-vous faire :<\/strong> consultez le rapport Chrome Coverage pour conna\u00eetre le pourcentage de code inutilis\u00e9. Si une grande partie du code n’est pas utilis\u00e9e, vous pouvez recourir \u00e0 des outils JavaScript tels que PurifyCSS ou uncss. Ces outils vous permettent de supprimer facilement le code superflu.<\/p>\n . Sans mise en page, votre site web se chargera beaucoup plus rapidement. Malheureusement, cette m\u00e9thode n’est pas conviviale. En raison du CSS, les visiteurs doivent attendre que celui-ci soit charg\u00e9. Il n’est pas n\u00e9cessaire de charger l’int\u00e9gralit\u00e9 du CSS pour afficher des informations utiles \u00e0 l’\u00e9cran. Ainsi, les visiteurs de votre site web peuvent consulter plus rapidement les informations utiles.<\/p>\n Que devez-vous faire :<\/strong> le \u00ab Critical Path Rendering \u00bb permet de charger en premier lieu les informations que l’utilisateur voit imm\u00e9diatement et qui se trouvent donc en haut de la page. Utilisez le chargement diff\u00e9r\u00e9 (lazy loading) pour vos images. Veillez \u00e9galement \u00e0 ce que le CSS moins important pour un utilisateur donn\u00e9 soit charg\u00e9 ult\u00e9rieurement gr\u00e2ce au CSS non bloquant. Vous pouvez \u00e9galement utiliser la directive \u00ab preload \u00bb.<\/p>\n . Gr\u00e2ce \u00e0 \u00ab preload \u00bb, les navigateurs chargeront certains \u00e9l\u00e9ments \u00e0 l’avance. Les autres \u00e9l\u00e9ments du site web qui en ont besoin seront ensuite charg\u00e9s sans avoir \u00e0 attendre que ceux-ci soient disponibles.<\/p>\n Que devez-vous faire :<\/strong> utilisez <preload><\/em> dans le lien de r\u00e9f\u00e9rence de votre feuille de style. Ajoutez la fonction <onload><\/em> \u00e0 la feuille de style \u00e0 laquelle le pr\u00e9chargement est associ\u00e9, et le navigateur commencera \u00e0 la charger imm\u00e9diatement. sollicitent beaucoup de ressources du serveur. Ils ralentissent donc le temps de chargement. Il existe de nombreuses fa\u00e7ons intelligentes d’utiliser JavaScript.<\/p>\n Les scripts non essentiels doivent \u00eatre diff\u00e9r\u00e9s. Ainsi, le navigateur aura moins de travail \u00e0 effectuer pour afficher la page initiale.<\/p>\n Que devez-vous faire ?<\/strong> Cela varie d’un script \u00e0 l’autre :<\/strong> ce qui fonctionne et ce qui ne fonctionne pas. Voici quelques conseils :<\/p>\n Veillez \u00e0 ne faire s’ex\u00e9cuter que les scripts r\u00e9ellement n\u00e9cessaires au bon fonctionnement de votre site web. Gardez \u00e9galement \u00e0 l’esprit que tous les scripts ne doivent pas n\u00e9cessairement \u00eatre charg\u00e9s s\u00e9par\u00e9ment pour fonctionner. Moins il y a de scripts externes en cours d’ex\u00e9cution, plus votre site est rapide.<\/p>\n Que devez-vous faire :<\/strong> copiez plusieurs fichiers dans un seul fichier. V\u00e9rifiez la console des outils de d\u00e9veloppement de votre navigateur pour vous assurer que tout fonctionne correctement.<\/p>\n Ce que beaucoup de gens ont souvent tendance \u00e0 n\u00e9gliger, mais qui peut pourtant \u00eatre le facteur le plus d\u00e9terminant pour la vitesse de chargement : les images. Souvent, elles sont inutilement volumineuses, au format ou au type inadapt\u00e9, ou encore elles ne se chargent pas correctement.<\/p>\n Il existe de nombreux types de fichiers d’images. Pour chaque utilisation d’une image, vous devez savoir si c’est le bon. Voici quelques types de fichiers :<\/p>\n Que devez-vous faire : r\u00e9fl\u00e9chissez <\/strong>bien avant d’utiliser une image. D\u00e9terminez le niveau de transparence dont vous avez besoin, le type d’image, etc.<\/p>\n Lorsque vous souhaitez charger une image, le navigateur recherche l’emplacement de celle-ci et commence \u00e0 la charger. Plus il y a d’images, plus le navigateur a de contenu \u00e0 charger et plus le temps de chargement est long. M\u00eame s\u2019il s\u2019agit de 100 photos que l\u2019utilisateur ne verra m\u00eame pas, celles-ci doivent tout de m\u00eame \u00eatre charg\u00e9es au pr\u00e9alable. Gr\u00e2ce au \u00ab lazy loading \u00bb, une petite image temporaire est d\u2019abord charg\u00e9e. L\u2019image r\u00e9elle est stock\u00e9e dans le cache. Ce n\u2019est que lorsque l\u2019image d\u2019origine doit \u00eatre affich\u00e9e que le navigateur la r\u00e9cup\u00e8re dans le cache. Vous vous assurez ainsi que les images qui ne s\u2019affichent pas \u00e0 l\u2019\u00e9cran ne se chargent que lorsque votre visiteur fait d\u00e9filer la page jusqu\u2019\u00e0 celles-ci.<\/p>\n Que devez-vous faire : <\/strong><\/p>\n . Un r\u00e9seau <\/p>\n de contenu stocke vos images \u00e0 diff\u00e9rents endroits dans le monde. Cela permet aux utilisateurs du monde entier d’acc\u00e9der rapidement au contenu. Il est particuli\u00e8rement judicieux d’utiliser un CDN lorsque vous disposez d’images volumineuses, de vid\u00e9os ou que vous recevez un trafic important en provenance d’une r\u00e9gion sp\u00e9cifique du monde.<\/p>\n Que devez-vous faire : <\/strong><\/p>\n \u00c9vitez les copies inutiles de vos variables.<\/strong><\/p>\n Votre code sera plus lisible si vous utilisez des variables pr\u00e9d\u00e9finies avec des noms plus courts. Cependant, chaque variable ajout\u00e9e mobilise de la m\u00e9moire serveur qui ne peut alors pas \u00eatre utilis\u00e9e pour d’autres processus. Veillez \u00e9galement \u00e0 n’utiliser chaque variable qu’une seule fois.<\/p>\n N’utilisez pas de points dans une fonction \u00ab echo \u00bb<\/strong><\/p>\n Lorsque vous utilisez la fonction \u00ab echo \u00bb avec des \u00e9l\u00e9ments entre parenth\u00e8ses, PHP concat\u00e8ne les cha\u00eenes de caract\u00e8res avant de les afficher. Cela nuit aux performances. Utilisez des virgules \u00e0 la place des parenth\u00e8ses.<\/p>\n N’utilisez pas de doubles virgules dans les cha\u00eenes de caract\u00e8res longues ne contenant pas de variables<\/strong><\/p>\n Lorsque vous d\u00e9finissez des cha\u00eenes de caract\u00e8res entre guillemets doubles, PHP a besoin de davantage de puissance de calcul pour rechercher les variables \u00e9ventuelles contenues dans la cha\u00eene. La concat\u00e9nation de cha\u00eenes distinctes fonctionne \u00e9galement avec des guillemets simples. Les cha\u00eenes sont ainsi trait\u00e9es plus rapidement qu’avec des guillemets doubles.<\/p>\n Certaines bases de donn\u00e9es comptent des milliers de lignes et de colonnes. Il est donc logique qu\u2019une base de donn\u00e9es bien optimis\u00e9e renvoie des r\u00e9sultats plus rapidement, ce qui permet \u00e0 un site web d\u2019afficher plus vite les informations \u00e0 l\u2019\u00e9cran. Voici quelques conseils :<\/p>\n Nettoyez r\u00e9guli\u00e8rement votre base de donn\u00e9es<\/strong><\/p>\n Votre base de donn\u00e9es peut contenir beaucoup de donn\u00e9es regroup\u00e9es. C’est pourquoi il est important de nettoyer et de r\u00e9indexer r\u00e9guli\u00e8rement votre base de donn\u00e9es. Cela permet au serveur d’utiliser moins de puissance de calcul. Cette op\u00e9ration est facile \u00e0 r\u00e9aliser avec phpMyAdmin<\/em>. S\u00e9lectionnez toutes vos tables en cliquant sur \u00ab Check all \u00bb<\/em>, puis cochez \u00ab Optimize table <\/em>\u00bb <\/em>dans laliste \u00ab With Selected <\/em>\u00bb.<\/p>\n Fixez une limite au nombre de r\u00e9visions<\/strong><\/p>\n Chaque fois que vous modifiez l’un de vos articles, vous g\u00e9n\u00e9rez un surcro\u00eet de donn\u00e9es inutiles dans votre base de donn\u00e9es. Vous n’avez presque jamais besoin de plusieurs versions de vos articles. Pour limiter le nombre de versions, vous pouvez utiliser un plugin ou, mieux encore, modifier votre fichier wp-config.php. Ajoutez la ligne suivante pour limiter le nombre de r\u00e9visions \u00e0 trois au maximum.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Conseils pour acc\u00e9l\u00e9rer votre site WordPress Des \u00e9tudes ont d\u00e9montr\u00e9 que les visiteurs d’un site web ont une capacit\u00e9 d’attention de plus en plus courte. 40 % de vos visiteurs…<\/p>\n","protected":false},"author":1,"featured_media":20578,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-20575","post","type-post","status-publish","format-standard","has-post-thumbnail","category-sites-web"],"yoast_head":"\nUtilisez la mise en cache<\/h3>\n
Utilisez WTTP\/2<\/h3>\n
R\u00e9duisez la taille de votre page<\/h3>\n
Veillez \u00e0 ce que la taille de vos cookies soit la plus petite possible<\/h3>\n
Veillez \u00e0 maintenir votre logiciel \u00e0 jour<\/h3>\n
Utilisez Google Accelerated Mobile Pages (AMP)<\/h3>\n
Optez pour un h\u00e9bergement de qualit\u00e9<\/h3>\n
R\u00e9partissez les commentaires sur plusieurs pages<\/h3>\n
HTML\/CSS\/JavaScript<\/h2>\n
En-t\u00eate<\/h3>\n
Placez toutes les ressources CSS dans la balise <\/h3>\n
Configurez les en-t\u00eates de mise en cache dans<\/h3>\n
\u00c9vitez les redirections<\/h3>\n
HTML<\/h2>\n
V\u00e9rifiez vos liens<\/h3>\n
\n
Configurez des pages d’erreur sur<\/h3>\n
Testez votre site avec des bloqueurs de publicit\u00e9s<\/h3>\n
R\u00e9duisez au minimum le code HTML<\/h3>\n
N’h\u00e9bergez pas de vid\u00e9os sur votre propre site<\/h3>\n
CSS<\/h2>\n
Minimisation du CSS<\/h3>\n
CSS<\/h3>\n
Utilisez la technique du \u00ab tree-shaking \u00bb<\/h3>\n
Utilisez le \u00ab critical path rendering \u00bb<\/h3>\n
Utilisez la directive \u00ab preload \u00bb<\/h3>\n
\nLes scripts <\/p>\nJavaScript<\/h2>\n
JavaScript non bloquant<\/h3>\n
\n
R\u00e9duisez et regroupez les scripts externes<\/h3>\n
Images<\/h2>\n
Les types de fichiers adapt\u00e9s<\/h3>\n
\n
Chargement diff\u00e9r\u00e9<\/h3>\n
\n
Utilisez un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n
de diffusion<\/h3>\n
\n
Optimisation PHP et des bases de donn\u00e9es<\/h2>\n
PHP<\/h3>\n
Base de donn\u00e9es<\/h3>\n