\u00c0 une \u00e9poque o\u00f9 presque toutes les informations sont disponibles \u00e0 tout moment et de n'importe o\u00f9, les sites web et autres contenus en ligne doivent r\u00e9pondre \u00e0 certains crit\u00e8res pour satisfaire les utilisateurs (et donc les moteurs de recherche). L'un de ces crit\u00e8res est le temps de chargement. Nous t'expliquons comment analyser la performance et l'optimiser par la suite afin d'obtenir un meilleur classement \u00e0 long terme.<\/p>\n\n\n\n
Imagine que tu entres dans un snack-bar, que tu as une \u00e9norme faim de loup et que tu n'es tout simplement pas servi. Que se passe-t-il ? Exactement, tu quittes pr\u00e9cipitamment le magasin et tu vas chez la concurrence, en esp\u00e9rant y trouver plus rapidement quelque chose \u00e0 manger. M\u00eame si tu ne pars pas directement, tu ne reviendras probablement pas.<\/p>\n\n\n\n
Si l'on transpose cet exemple dans le monde num\u00e9rique, le snack devient le site web et la rapidit\u00e9 devient le service, le temps de chargement de ce site web. Celui qui veut jouer dans la cour des grands en mati\u00e8re de classement devrait donc se pr\u00e9occuper au plus vite de son service, autrement dit de sa performance. En effet, Google classe volontiers les sites web qui sont particuli\u00e8rement conviviaux. Outre une r\u00e9partition coh\u00e9rente et une pr\u00e9sentation claire d'un th\u00e8me, le temps de chargement du contenu fait \u00e9galement partie de la convivialit\u00e9. Si la page met trop de temps \u00e0 s'afficher, le taux de rebond augmente, car de nombreux utilisateurs cliquent sur le bouton \"retour\" et se servent dans le r\u00e9sultat de recherche suivant sur la SERP de Google.<\/p>\n\n\n\n
Avant d'am\u00e9liorer les performances de ton site web, il est pr\u00e9f\u00e9rable de v\u00e9rifier si ton PageSpeed est vraiment mauvais. Pour cela, tu peux utiliser diff\u00e9rents outils.<\/p>\n\n\n\n
Tendances PageSpeed<\/a> est un outil mis \u00e0 disposition par Google qui te permet de v\u00e9rifier en un clin d'\u0153il la performance d'une URL donn\u00e9e. Dans le meilleur des cas, tu obtiens la note \"Good\" pour la sortie sur les appareils mobiles et sur les ordinateurs de bureau. Si le temps de chargement n'est pas optimal, l'outil attribue la note \"Medium\" \u00e0 la performance. Un besoin d'optimisation existe pour l'\u00e9valuation \"low\". Ce qui est bien : Google te fournit directement des propositions d'optimisation apr\u00e8s l'analyse.<\/p>\n\n\n\n Utilisez-vous le Test de vitesse de site web Pingdom<\/a> pour analyser la performance de tes pages, tu constateras qu'il donne une image nettement plus positive des temps de chargement que PageSpeed Insights de Google. En outre, tu as la possibilit\u00e9 de s\u00e9lectionner diff\u00e9rents emplacements de serveur pour ta requ\u00eate. Apr\u00e8s l'analyse, l'outil t'indique le temps de chargement (en millisecondes, esp\u00e9rons-le), le degr\u00e9 de performance de Google PageSpeed (qui devrait \u00eatre A), la taille de la page web et une s\u00e9rie d'autres donn\u00e9es.<\/p>\n\n\n\n L'analyse est encore plus compl\u00e8te avec le Outil de webpagetest.org<\/a>. Ici, tu peux choisir encore quelques autres emplacements de serveur et - particuli\u00e8rement cool - d\u00e9finir l'environnement de test (mod\u00e8le de smartphone, navigateur, etc.). Les r\u00e9sultats sont extraordinairement complets et constituent une excellente base de donn\u00e9es qui t'aidera \u00e0 optimiser les performances de ton site web.<\/p>\n\n\n\n Apr\u00e8s avoir analys\u00e9 o\u00f9 le b\u00e2t blesse en mati\u00e8re de temps de chargement du site web, tu peux commencer \u00e0 l'optimiser.<\/p>\n\n\n\n Pour rendre les donn\u00e9es d'analyse livr\u00e9es un peu plus compr\u00e9hensibles pour toi : Les causes les plus fr\u00e9quentes d'une mauvaise performance sont...<\/p>\n\n\n\n de grandes quantit\u00e9s de donn\u00e9es,<\/p>\n\n\n\n les images non compress\u00e9es,<\/p>\n\n\n\n un th\u00e8me surcharg\u00e9 et<\/p>\n\n\n\n bases de donn\u00e9es & serveurs lents.<\/p>\n\n\n\n Ton site web fonctionne sur WordPress ou Joomla ! et le th\u00e8me premium que tu as achet\u00e9 a l'air vraiment chic ? C'est bien, mais il n'est pas rare que les th\u00e8mes soient compl\u00e8tement surcharg\u00e9s, ce qui entra\u00eene des temps de chargement du site web tr\u00e8s lents. Regarde simplement s'il n'y a pas un th\u00e8me plus l\u00e9ger qui se distingue non seulement par son aspect visuel imm\u00e9diatement attrayant, mais aussi et surtout par ses performances.<\/p>\n\n\n\n Si le probl\u00e8me ne vient pas du th\u00e8me lui-m\u00eame, les plugins peuvent \u00e9galement avoir une influence n\u00e9gative sur le temps de chargement des pages web s'il y a trop d'acc\u00e8s \u00e0 la base de donn\u00e9es. C'est surtout le cas pour les plugins peu connus et mal mis en \u0153uvre. V\u00e9rifie simplement quels plugins se sont accumul\u00e9s au fil du temps et d\u00e9sinstalle tout ce dont tu n'as pas absolument besoin.<\/p>\n\n\n\n Si moins de requ\u00eates HTTP sont effectu\u00e9es, ton site web se construit logiquement plus rapidement. Une telle requ\u00eate serveur a toujours lieu lorsqu'un fichier doit \u00eatre charg\u00e9. Si tu mets moins de fichiers (images, scripts, etc.) dans un document, ton site se chargera plus rapidement.<\/p>\n\n\n\n Astuce : tu peux regrouper diff\u00e9rentes feuilles de style dans un seul fichier CSS et le lier \u00e0 partir de la zone du document HTML. Si tu veilles \u00e0 ce qu'il n'y ait plus d'indications de style en ligne dans le document HTML, le fichier CSS peut \u00eatre mis en cache, ce qui acc\u00e9l\u00e8re \u00e9galement le chargement des pages.<\/p>\n\n\n\n Un site web ne peut pas se passer de bonnes images (de pr\u00e9f\u00e9rence au format .jpg) et de graphiques (de pr\u00e9f\u00e9rence en fichier .png), car une image vaut souvent mille mots. Il est toutefois important que ces images soient optimis\u00e9es pour le web afin d'\u00e9viter des temps de chargement trop longs. L'erreur la plus fr\u00e9quente dans ce contexte est de charger les images sur le serveur dans leur taille originale et de les int\u00e9grer exactement de la m\u00eame mani\u00e8re dans le contenu.<\/p>\n\n\n\n Exemple : Si une image fait 2500 x 1000 pixels, mais qu'elle n'est int\u00e9gr\u00e9e que dans une zone de contenu de 750 pixels de large, elle sera ensuite affich\u00e9e en taille r\u00e9duite. Toutefois, l'image ou le graphique doit quand m\u00eame \u00eatre charg\u00e9(e) dans toute sa taille. Pour \u00e9viter un tel encombrement inutile, tu devrais toujours r\u00e9duire les images \u00e0 la taille dans laquelle elles doivent effectivement \u00eatre affich\u00e9es.<\/p>\n\n\n\n D'ailleurs : d\u00e8s qu'une URL est appel\u00e9e, toutes les images sont en g\u00e9n\u00e9ral charg\u00e9es automatiquement - m\u00eame celles que l'on ne voit pas encore, par exemple parce que l'on ne fait pas d\u00e9filer la page aussi bas. Pour ne charger les images que lorsque cela est n\u00e9cessaire, tu peux utiliser des plugins tels que Crazy Lazy<\/a> pour l'utiliser. Et pour ajouter directement une astuce de plugin : WP Smush.it<\/a> compresse automatiquement la taille des fichiers d'images lors du t\u00e9l\u00e9chargement. Tu peux \u00e9galement optimiser ult\u00e9rieurement les images d\u00e9j\u00e0 t\u00e9l\u00e9charg\u00e9es.<\/p>\n\n\n\n Il n'y a pas que les images qui peuvent \u00eatre compress\u00e9es, mais aussi les fichiers syst\u00e8me (par exemple de WordPress). Comment faire ? Tout simplement avec Gzip, un programme de compression gratuit qui, tout comme le format de fichier, est disponible pour tous les syst\u00e8mes d'exploitation. Tout ce que tu dois faire, c'est ins\u00e9rer un extrait de code dans le fichier .htaccess. Avec WordPress, tu n'as pas besoin d'intervenir manuellement \u00e0 ce stade, mais tu peux compter sur des plugins tels que Gzip Compression de vitesse Ninja<\/a> pour les utiliser. Joomla dispose \u00e9galement d'extensions correspondantes qui font exactement la m\u00eame chose.<\/p>\n\n\n\n En tant qu'utilisateur de WordPress, tu ne peux pas non plus te passer d'un bon plug-in de mise en cache. La mise en cache consiste \u00e0 cr\u00e9er des versions statiques de toutes les pages au lieu de les cr\u00e9er de mani\u00e8re dynamique, ce qui a un impact consid\u00e9rable sur la vitesse de chargement de l'ensemble du site. Un plugin de mise en cache tr\u00e8s bien \u00e9crit pour WordPress est le suivant Cachify<\/a>. Le plugin W3 Total Cache te permet de b\u00e9n\u00e9ficier d'un package sans souci. Sinon, il fait WP Rocket<\/a> de ton c\u00f4t\u00e9 une petite fus\u00e9e<\/p>\n\n\n\n Conseil suppl\u00e9mentaire :<\/strong><\/p>\n\n\n\n Pour acc\u00e9l\u00e9rer encore ton site web, tu peux supprimer les espaces et les retours \u00e0 la ligne inutiles en HTML, CSS et Javascript. Comme l'ensemble du code est ainsi all\u00e9g\u00e9, le temps de chargement diminue \u00e9galement. Seule la clart\u00e9 du code se d\u00e9t\u00e9riore. Le Plugin W3 Total Cache<\/a> te propose, en tant qu'utilisateur WordPress, une fonction appel\u00e9e \"Minify\". Toutefois, celle-ci ne fonctionne particuli\u00e8rement bien que si tu d\u00e9finis toi-m\u00eame dans le mode manuel du plugin la mani\u00e8re dont les scripts Java doivent \u00eatre charg\u00e9s. Comme cela n'est pas vraiment adapt\u00e9 aux d\u00e9butants, nous recommandons pour le \"minify\" (minification) le Plugin Autoptimize<\/a>.<\/p>","protected":false},"excerpt":{"rendered":" In Zeiten, in denen fast jede Information zu jeder Zeit und von jedem Ort aus verf\u00fcgbar ist, m\u00fcssen Webseiten und andere Online-Inhalte gewisse Kriterien erf\u00fcllen, um User (und damit auch die Suchmaschinen) zufriedenzustellen. Eines dieser Kriterien ist die Ladezeit. Wir erkl\u00e4ren dir, wie du die Performance analysierst und im Anschluss optimierst, um langfristig bessere Rankings […]<\/p>\n","protected":false},"author":1,"featured_media":3344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,55,52],"tags":[],"class_list":["post-3343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogboxx","category-seo","category-sichtbarkeit-reichweite"],"acf":[],"_links":{"self":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/posts\/3343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/comments?post=3343"}],"version-history":[{"count":0,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/posts\/3343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/media\/3344"}],"wp:attachment":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/media?parent=3343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/categories?post=3343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/tags?post=3343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Pingdom<\/h3>\n\n\n\n
Test de la page web<\/h3>\n\n\n\n
\u00c9tape 2 : l'optimisation<\/h2>\n\n\n\n
Repenser le th\u00e8me & d\u00e9sactiver les plugins inutiles<\/h3>\n\n\n\n
R\u00e9duire les requ\u00eates HTTP<\/h3>\n\n\n\n
Optimiser les images pour le web<\/h3>\n\n\n\n
Compression Gzip<\/h3>\n\n\n\n
Utiliser la mise en cache<\/h3>\n\n\n\n