Vous pourriez \u00eatre tent\u00e9 par un h\u00e9bergeur au prix abordable, voire pas ch\u00e8re du tout, mais attention. Ces \u00e9conomies risquent de se faire au d\u00e9triment de la qualit\u00e9 du service propos\u00e9.<\/p>\n
Certains h\u00e9bergent de nombreux sites sur un m\u00eame serveur, ce dernier n\u2019\u00e9tant pas optimis\u00e9 pour :<\/p>\n
- \n
- Recevoir le trafic \u00e9manant de dizaines voire de centaines de sites en m\u00eame temps<\/li>\n
- Stocker les fichiers de taille importante d\u2019autant de sites<\/li>\n<\/ul>\n
Lors du choix de votre h\u00e9bergeur, faites attention au serveur propos\u00e9 :<\/p>\n
- \n
- Un serveur mutualis\u00e9<\/strong> sera partag\u00e9 avec d\u2019autres sites, le v\u00f4tre devra donc \u00eatre de petite taille et ne pas accueillir trop de trafic<\/li>\n
- Un serveur d\u00e9di\u00e9<\/strong> ne contiendra que votre site et c\u2019est la solution id\u00e9ale si vous pensez recevoir un fort trafic et\/ou si vous avez de nombreux fichiers \u00e0 mettre en ligne<\/li>\n<\/ul>\n
![\"Choisir](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/03\/serveur-web.jpg\")
<\/p>\nEnfin, v\u00e9rifiez la puissance du serveur, le stockage et la bande passante associ\u00e9e.<\/p>\n
2. \u00c9viter d\u2019accumuler des plugins et widgets<\/h3>\n
Lors de la conception d\u2019un site web on est souvent tent\u00e9 d\u2019ajouter de nombreuses fonctionnalit\u00e9s sous forme de plugins et widgets. C\u2019est d\u2019autant plus facile avec un CMS tel que WordPress.<\/p>\n
Si ces petites options suppl\u00e9mentaires semblent faciliter la navigation de l\u2019internaute et am\u00e9liorer son exp\u00e9rience au sein du site, il n\u2019en est rien pour la vitesse de chargement.<\/p>\n
Au contraire, chaque widget, m\u00eame le plus simple soit il, r\u00e9duit la performance de votre site<\/a>. Limitez donc le nombre de plugins install\u00e9s.<\/p>\n
Si les formulaires et le code analytique semblent occuper peu de place, ce n\u2019est pas vraiment le cas dans le back-end. M\u00eame si peu de lignes de code apparaissent, vos formulaires et votre code analytique doivent partager l\u2019espace avec les plugins.<\/p>\n
Tout regroup\u00e9, vous comprenez que l\u2019espace se r\u00e9duit \u00e0 vu d\u2019oeil et que le chargement de votre site en moins de 2 secondes sera difficile.<\/p>\n
3. Minimiser les requ\u00eates HTTP<\/h3>\n
Le temps de chargement d\u2019une page web d\u00e9pend des images, fichiers et scripts \u00e0 charger et \u00e0 afficher. Or, une requ\u00eate HTTP est effectu\u00e9e pour chacun de ces \u00e9l\u00e9ments.<\/p>\n
Avant de r\u00e9duire le nombre de requ\u00eates, vous devez savoir combien votre page en demande. Vous pouvez trouver le r\u00e9ponse directement dans Google.<\/p>\n
Faites un clique-droit sur la page, cliquez sur \u00ab\u00a0Inspecter\u00a0\u00bb puis rendez-vous dans l\u2019onglet \u00ab\u00a0Network\u00a0\u00bb :<\/p>\n
![\"Minimiser](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/03\/requete-http.jpg\")
<\/p>\n- \n
- La colonne \u00ab\u00a0Name\u00a0\u00bb vous montre tous les fichiers de la page web<\/li>\n
- La colonne \u00ab\u00a0Size\u00a0\u00bb indique la taille de chaque fichier<\/li>\n
- La colonne \u00ab\u00a0Time\u00a0\u00bb pr\u00e9cise le temps qu\u2019il a fallu pour charger le fichier<\/li>\n<\/ul>\n
Dans le coin inf\u00e9rieur gauche vous voyez le nombre total de requ\u00eates qui ont \u00e9t\u00e9 faites.<\/p>\n
Pour r\u00e9duire ce nombre, demandez-vous si chaque fichier charg\u00e9 est n\u00e9cessaire. Si ce n\u2019est pas le cas, vous pouvez le supprimer de votre page.<\/p>\n
4. R\u00e9duire le code CSS pour am\u00e9liorer le chargement<\/h3>\n
Une ligne de code prend de la place et augmente le poids de vos fichiers ainsi que le temps de chargement de votre site. Tout ce que vous \u00e9crivez doit \u00eatre utile et efficace.<\/p>\n
Dans un premier temps, r\u00e9duisez l\u2019utilisation des s\u00e9lecteurs, supprimez les espaces, supprimez le CSS inutile et retirez les commentaires inutiles. De la m\u00eame fa\u00e7on, allez \u00e0 l\u2019essentiel dans votre code avec des formulations courtes.<\/p>\n
![\"Code](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/03\/code-css.jpg\")
<\/p>\nPour vos couleurs, utilisez le code hexad\u00e9cimal au lieu d\u2019\u00e9crire la valeur RGB.<\/p>\n
5. Combiner et minimiser la taille des fichiers<\/h3>\n
Toujours dans le but de r\u00e9duire les requ\u00eates HTTP, vous pouvez travailler sur le poids de vos fichiers. Commencez par le HTML, CSS et JavaScript.<\/p>\n
Vous pouvez minimiser leur code afin de retirer le formatage, les indentations et les espaces inutiles. Des outils sp\u00e9cifiques existent tel que Minify<\/a>.<\/p>\n
Aussi, si vous avez plusieurs fichiers CSS ou JavaScript essayez de les combiner en un seul et m\u00eame fichier. Votre page aura moins de composants \u00e0 charger et donc moins de requ\u00eates \u00e0 effectuer.<\/p>\n
6. D\u00e9f\u00e9rer le chargement du fichier JavaScript<\/h3>\n
D\u00e9f\u00e9rer un fichier signifie le faire charger apr\u00e8s que les autres \u00e9l\u00e9ments de la page web aient \u00e9t\u00e9 affich\u00e9s.<\/p>\n
Un fichier JavaScript \u00e9tant parfois lourd, ce peut \u00eatre une bonne id\u00e9e de proc\u00e9der ainsi. De cette fa\u00e7on, le temps de chargement de votre page n\u2019est pas ralenti : votre contenu principal s\u2019affiche dans un d\u00e9lai extr\u00eamement court.<\/p>\n
Attention : La mise en place d\u2019une telle pratique varie d\u2019un site \u00e0 un autre. Le processus n\u2019est pas le m\u00eame entre un site WordPress et un site HTML.<\/p><\/blockquote>\n
Pour cette raison, il est conseill\u00e9 de faire appel \u00e0 un expert<\/a> dans le domaine.<\/p>\n
7. Autoriser la mise en cache pour plus de vitesse<\/h3>\n
Lorsque vous visitez un site internet, les \u00e9l\u00e9ments de la page consult\u00e9e sont stock\u00e9s dans un cache de votre disque dur ou sur une m\u00e9moire temporaire.<\/p>\n
Cela signifie que la prochaine fois que vous visiterez ce m\u00eame site, votre navigateur chargera la page sans effectuer de requ\u00eates HTTP. Les principaux composants sont d\u00e9j\u00e0 stock\u00e9s de votre c\u00f4t\u00e9.<\/p>\n
La plupart des visiteurs de votre site arrivent avec une m\u00e9moire cache vide. Il est donc essentiel que vous activiez la mise en cache pour r\u00e9duire consid\u00e9rablement le temps de chargement de votre site lors d\u2019une prochaine visite.<\/p>\n
Sur WordPress vous pouvez utiliser le plugin W3 Total Cache<\/a>. Vous pouvez \u00e9galement passer par votre fichier .htaccess en ajoutant les lignes de code suivantes :<\/p>\n
<IfModule mod_expires.c>
\nExpiresActive on
\nExpiresDefault \"access plus 1 week\"
\nExpiresByType image\/x-icon \"access plus 1 year\"
\nExpiresByType image\/gif \"access plus 1 month\"
\nExpiresByType image\/png \"access plus 1 month\"
\nExpiresByType image\/jpg \"access plus 1 month\"
\nExpiresByType image\/jpeg \"access plus 1 month\"
\nExpiresByType video\/mp4 \"access plus 1 month\"
\nExpiresByType text\/x-component \"access plus 1 month\"
\nExpiresByType font\/truetype \"access plus 1 month\"
\nExpiresByType font\/opentype \"access plus 1 month\"
\nExpiresByType application\/x-font-woff \"access plus 1 month\"
\nExpiresByType application\/vnd.ms-fontobject \"access plus 1 month\"
\nExpiresByType text\/css \"access plus 1 year\"
\nExpiresByType application\/javascript \"access plus 1 year\"
\nExpiresByType text\/javascript \"access plus 1 year\"
\nExpiresByType text\/js \"access plus 1 year\"
\nExpiresByType application\/x-javascript \"access plus 1 year\"
\n<\/IfModule><\/code><\/p>\nSi vous rencontrez des probl\u00e8mes pour configurer votre mise en cache n\u2019h\u00e9sitez pas \u00e0 d\u00e9poser un projet sur Codeur.com<\/a>.<\/strong><\/p>\n
8. Utiliser un CDN pour am\u00e9liorer les performances<\/h3>\n
Lorsque votre site est h\u00e9berg\u00e9 sur un seul serveur, chaque utilisateur qui visite votre site envoie des requ\u00eates \u00e0 ce m\u00eame serveur. Ainsi, en cas de fort trafic le temps n\u00e9cessaire au traitement de chaque requ\u00eate augmente, faisant ralentir le temps de chargement de votre site pour tous les utilisateurs.<\/p>\n
De plus, si votre serveur est en France mais qu\u2019un utilisateur est en Australie, votre site sera plus lent pour ce dernier. Les informations n\u00e9cessaires \u00e0 l\u2019affichage de la page sont plus loin et demandent plus de temps pour \u00eatre charg\u00e9es.<\/p>\n
Pour palier \u00e0 tous ces probl\u00e8mes, il convient d\u2019utiliser un CDN – Content Delivery Network.<\/p>\n
Gr\u00e2ce au CDN, vous mettez en cache votre site sur un r\u00e9seau mondial de serveurs. De cette fa\u00e7on, lorsqu\u2019un utilisateur visite votre site les requ\u00eates sont envoy\u00e9es au serveur le plus proche de sa localisation.<\/p>\n
![\"Utilisation](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/03\/utilisation-cdn.jpg\")
Source : Digital Connect Mag<\/a><\/figcaption><\/figure>\n Le contenu envoy\u00e9 est exactement le m\u00eame mais il est charg\u00e9 beaucoup plus rapidement.<\/p>\n
9. Utiliser des plateformes de stockage externes<\/h3>\n
En plus d\u2019h\u00e9berger les fichiers de votre site sur un CDN, vous pouvez les placer sur des h\u00e9bergeurs externes, surtout s\u2019il s\u2019agit de vid\u00e9os ou de fichiers lourds.<\/p>\n
Prenons un exemple : vous avez r\u00e9alis\u00e9 un tutoriel vid\u00e9o et vous souhaitez l\u2019int\u00e9grer \u00e0 votre site. Ce fichier est lourd car votre vid\u00e9o dure plusieurs minutes.<\/p>\n
Au lieu de le charger directement sur votre site via un client FTP<\/a> ou l\u2019\u00e9diteur de WordPress, il est pr\u00e9f\u00e9rable de l\u2019h\u00e9berger sur YouTube ou Vimeo.<\/p>\n
Vous pourrez ensuite int\u00e9grer votre vid\u00e9o \u00e0 votre contenu en utilisant le code <iframe>.<\/p>\n
![\"Code](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/03\/code-integration-video.png\")
<\/p>\n10. Optimiser les images pour qu’elles chargent plus vite<\/h3>\n
Cette astuce est bien connue et tr\u00e8s efficace. Comme vous le savez, plus le poids de votre image est importante, plus le poids de votre page web augmente et plus elle sera longue \u00e0 charger.<\/p>\n
Voici ce que vous devez faire :<\/p>\n
- \n
- Choisissez le format ad\u00e9quat<\/strong> : vous devez utiliser le format PNG si votre image contient un logo, des ic\u00f4nes, du texte ou des illustrations. Dans les autres cas, optez pour le JPG. Quoiqu\u2019il en soit, n\u2019utilisez jamais les formats Tiffs et BMPs.<\/li>\n
- Redimensionnez vos images<\/strong> : vos images seront plus esth\u00e9tiques si leur dimension est adapt\u00e9e au contenu de votre page. Sur le blog de Codeur par exemple, les images n\u2019exc\u00e8dent pas les 800 px de large.<\/li>\n
- Compressez vos images<\/strong> : ne compressez pas au-del\u00e0 de 60-70% vos images en JPG au risque de perdre en qualit\u00e9.<\/li>\n<\/ul>\n
Pour compresser des images \u00e0 destination d\u2019un \u00e9cran retina, augmentez la taille de votre image de 150 \u00e0 200% puis compressez-l\u00e0 \u00e0 30-40%.<\/p>\n
Pourquoi am\u00e9liorer le temps de chargement de votre site\u00a0?<\/h2>\n
Le temps de chargement page web<\/strong> est essentiel \u00e0 la r\u00e9ussite d\u2019un site professionnel\u00a0! Tout comme le contenu, il ne doit pas \u00eatre n\u00e9glig\u00e9, car m\u00eame si vous disposez des meilleures informations ou services en ligne, vous n\u2019aurez pas de visiteurs avec un site lent. En effet, les internautes n\u2019ont pas la patience d\u2019attendre l\u2019ouverture d\u2019une telle page, et ils choisiront d\u2019aussi t\u00f4t de faire d\u2019autres recherches.<\/p>\n
Il faut donc leur donner un rapide acc\u00e8s si vous ne voulez pas les faire fuir. Il faut voir que la plupart des internautes utilisent une connexion de r\u00e9seau mobile qui est assez instable, et vous pouvez d\u00e9j\u00e0 \u00eatre s\u00fbr que ces derniers ne s\u2019attarderont pas \u00e0 attendre le chargement. L\u2019optimisation du temps de chargement<\/strong> aura donc un impact majeur \u00e0 votre site avec le nombre de visiteurs, de pages vues, etc., mais elle sera \u00e9galement avantageuse sur le r\u00e9f\u00e9rencement naturel.<\/p>\n
Quel est le lien entre le temps de chargement du site et le r\u00e9f\u00e9rencement sur Google ?<\/h2>\n
Il est important de savoir que Google utilise des robots informatiques afin de r\u00e9f\u00e9rencer les pages de chaque site web\u00a0! Plus la page chargera vite, plus les robots pourront y acc\u00e9der rapidement. De cette mani\u00e8re, le site rapide \u00e9vincera les sites lents, car il sera r\u00e9pertori\u00e9 beaucoup plus vite par les robots. Il sera donc plus performant et s\u2019affichera facilement dans les moteurs de recherche si le r\u00e9f\u00e9rencement a \u00e9t\u00e9 efficace.<\/p>\n
Il faut aussi pr\u00e9ciser que plus une page est consult\u00e9e, plus son classement remontera dans les r\u00e9sultats de recherche. Vous devez cependant savoir que 40 % des internautes n\u2019attendront pas l\u2019ouverture d\u2019une page de plus de 3 secondes et ils se tourneront vers d\u2019autres sites comme susvis\u00e9, et avec une seconde de plus, le taux de conversion sera encore r\u00e9duit \u00e0 7 %. Si vous n\u2019avez pas de visiteurs, cela signifiera donc que votre classement reculera en bas des \u00e9chelles, et c\u2019est encore l\u2019un des avantages \u00e0 opter pour un site rapide d\u2019ouverture.<\/p>\n
D\u2019un point de vue marketing, les pertes engendr\u00e9es par la lenteur de votre site pourront \u00eatre lourdes, alors qu\u2019un site rapide vous permettra d\u2019augmenter le nombre de trafic et ces quelques pourcentages \u00e0 r\u00e9cup\u00e9rer auront un excellent impact sur le chiffre d\u2019affaires.<\/p>\n
Avant d’appliquer les astuces que nous allons vous partager ci-dessous cependant, il faut que vous soyez en mesure de connaitre pr\u00e9cis\u00e9ment la situation actuelle de la vitesse de chargement de votre site\u00a0! Vous pouvez vous fier \u00e0 votre analyse en entrant sur ce dernier, et en vous mettant \u00e0 la place de l\u2019internaute visiteur. Si vous estimez la n\u00e9cessit\u00e9 d\u2019une am\u00e9lioration, c\u2019est qu\u2019il faudra le faire.<\/p>\n
3 outils pour tester la vitesse de chargement de votre site<\/h2>\n
N\u00e9anmoins, il existe d\u2019autres moyens pour faire cette analyse. Il s\u2019agit des outils de diagnostic qui vous partageront des recommandations sur les \u00e9l\u00e9ments du site \u00e0 am\u00e9liorer.<\/p>\n
Vous pouvez choisir WordPress pour analyser la qualit\u00e9 SEO et l\u2019outil vous conseillera sur les \u00e9ventuelles lacunes du texte (sur le nombre de mots-cl\u00e9s, les r\u00e9p\u00e9titions, etc. ). Ses syst\u00e8mes correctifs permettent \u00e0 la fois de gagner en temps de chargement et en performance du site, et vous pourrez apporter votre propre personnalisation.<\/p>\n
Vous pouvez \u00e9galement utiliser SEMrush si vous voulez v\u00e9rifier le nombre de trafic sur votre site, avant de vous lancer dans les corrections. L\u2019outil fera l\u2019analyse par rapport \u00e0 la quantit\u00e9 de backlinks ou \u00e0 travers la provenance des IPs consultantes.<\/p>\n
Google PageSpeed Insights<\/h3>\n
C\u2019est un outil d\u00e9velopp\u00e9 par Google, qui consiste \u00e0 analyser les performances du site en g\u00e9n\u00e9rale\u00a0! Il s\u2019agira notamment du taux de chargement, du taux de conversion ainsi que du taux de rebond. Le diagnostic de l\u2019outil est d\u00e9taill\u00e9 et vous obtiendrez donc des r\u00e9sultats pr\u00e9cis sur les lacunes \u00e0 corriger. Mais ce n\u2019est pas tout\u00a0! L\u2019outil vous aidera \u00e9galement via les conseils sur chaque point \u00e0 am\u00e9liorer afin d\u2019atteindre le meilleur r\u00e9sultat par rapport \u00e0 la performance du site.<\/p>\n
Web.dev<\/h3>\n
Web.dev est \u00e9galement un outil de Google qui a pour objectif d\u2019aider les d\u00e9veloppeurs. Il permet donc de faire une synth\u00e8se compl\u00e8te sur les crit\u00e8res de performance essentiels au bon fonctionnement de votre site. Il s\u2019agit notamment de la qualit\u00e9 SEO, de la vitesse de chargement, de l\u2019accessibilit\u00e9 au site, de l\u2019exp\u00e9rience utilisateur, etc.<\/p>\n
Octopulse<\/h3>\n
Octopulse est un outil performant qui permet de booster votre r\u00e9f\u00e9rencement au maximum. A commencer par l\u2019audit SEO jusqu\u2019\u00e0 l\u2019analyse concurrentielle, l\u2019outil se chargera de v\u00e9rifier le poids de vos pages, la lexicalit\u00e9, le placement, etc. L\u2019outil vous guidera par la suite sur les d\u00e9marches \u00e0 suivre, pour augmenter le nombre de trafic visitant votre site et il vous donnera tous les conseils d\u2019optimisation pour le positionnement.<\/p>\n
\u00c0 lire aussi<\/strong> : Core Web Vitals : les nouveaux indicateurs UX de votre site analys\u00e9s par Google<\/a><\/p><\/blockquote>\n
Notre astuce pour am\u00e9liorer le temps de chargement de votre site<\/h2>\n
- Redimensionnez vos images<\/strong> : vos images seront plus esth\u00e9tiques si leur dimension est adapt\u00e9e au contenu de votre page. Sur le blog de Codeur par exemple, les images n\u2019exc\u00e8dent pas les 800 px de large.<\/li>\n
- Choisissez le format ad\u00e9quat<\/strong> : vous devez utiliser le format PNG si votre image contient un logo, des ic\u00f4nes, du texte ou des illustrations. Dans les autres cas, optez pour le JPG. Quoiqu\u2019il en soit, n\u2019utilisez jamais les formats Tiffs et BMPs.<\/li>\n
- Un serveur d\u00e9di\u00e9<\/strong> ne contiendra que votre site et c\u2019est la solution id\u00e9ale si vous pensez recevoir un fort trafic et\/ou si vous avez de nombreux fichiers \u00e0 mettre en ligne<\/li>\n<\/ul>\n
- Un serveur mutualis\u00e9<\/strong> sera partag\u00e9 avec d\u2019autres sites, le v\u00f4tre devra donc \u00eatre de petite taille et ne pas accueillir trop de trafic<\/li>\n