{"id":251707,"date":"2023-08-21T09:47:00","date_gmt":"2023-08-21T06:47:00","guid":{"rendered":"https:\/\/inform.click\/adapte-aux-mobiles-et-vitesse-du-site-deux-elements-importants-a-prendre-en-compte-lors-de-la-conception-dun-site-web\/"},"modified":"2023-08-21T10:42:00","modified_gmt":"2023-08-21T07:42:00","slug":"adapte-aux-mobiles-et-vitesse-du-site-deux-elements-importants-a-prendre-en-compte-lors-de-la-conception-dun-site-web","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/adapte-aux-mobiles-et-vitesse-du-site-deux-elements-importants-a-prendre-en-compte-lors-de-la-conception-dun-site-web\/","title":{"rendered":"Adapt\u00e9 aux mobiles et vitesse du site &#8211; Deux \u00e9l\u00e9ments importants \u00e0 prendre en compte lors de la conception d&rsquo;un site Web\u00a0?"},"content":{"rendered":"<p>\n  Dans le monde Web 2.0 d&rsquo;aujourd&rsquo;hui, tout tourne autour d&rsquo;Internet. Si vous cherchez un plombier, vous allez sur le web. Si vous cherchez un restaurant local, vous allez sur le Web. Si vous voulez acheter une maison, devinez quoi? Vous allez sur le Web.\n<\/p>\n<p>\n  Les gens n&rsquo;utilisent plus les pages jaunes pour trouver une entreprise pour un besoin ou un d\u00e9sir. Ils vont sur le Web car il fournit les informations les plus pr\u00e9cises et les plus rapides.\n<\/p>\n<p>\n  Pour obtenir ces informations il y a cinq \u00e0 sept ans, une personne se rendait sur son ordinateur de bureau ou portable \u00e0 la maison ou au travail, ouvrait un navigateur Web et un moteur de recherche et effectuait une recherche.\n<\/p>\n<p>\n  Aujourd&rsquo;hui, le paysage a compl\u00e8tement chang\u00e9 car les gens ne se contentent pas d&rsquo;utiliser des ordinateurs portables et des ordinateurs de bureau pour obtenir des informations, ils utilisent des appareils mobiles, notamment des smartphones et des tablettes.\n<\/p>\n<h5>\n  Votre site Web est-il adapt\u00e9 aux mobiles&nbsp;?<br \/>\n<\/h5>\n<p>\n  Cela signifie qu&rsquo;un site Web qui a fi\u00e8re allure sur un ordinateur de bureau ou un ordinateur portable n&rsquo;a probablement pas l&rsquo;air tr\u00e8s bien lorsqu&rsquo;il est visualis\u00e9 via un appareil mobile portatif. La copie est trop petite, les liens sont minuscules et vous devez faire d\u00e9filer lat\u00e9ralement pour voir tout le contenu. Non seulement le site n&rsquo;est pas convivial, mais il pourrait aussi maintenant avoir un impact (un impact tr\u00e8s important &#8211; potentiellement extr\u00eamement n\u00e9gatif) avec les moteurs de recherche &#8211; en particulier Google.\n<\/p>\n<p>\n  Qu&rsquo;est-ce que cela se traduit exactement aussi? Fondamentalement, si votre site Web n&rsquo;est pas adaptatif pour un appareil mobile, il peut perdre son classement organique aupr\u00e8s des moteurs de recherche. Cela signifie que lorsque quelqu&rsquo;un visite Google sur son t\u00e9l\u00e9phone ou sa tablette et recherche un plombier, il y a de fortes chances que vous ne veniez pas et si vous le faites, il ne sera probablement pas sur la premi\u00e8re page des r\u00e9sultats.\n<\/p>\n<p>\n  De plus, Google appose d\u00e9sormais un label \u00ab\u00a0mobile-friendly\u00a0\u00bb sur ses r\u00e9sultats de recherche mobile. Un site Web est \u00e9ligible \u00e0 ce label s&rsquo;il r\u00e9pond aux crit\u00e8res suivants tels que d\u00e9tect\u00e9s par l&rsquo;algorithme de Google&nbsp;:\n<\/p>\n<ul>\n<li>\u00c9vitez les logiciels qui ne sont pas courants sur les appareils mobiles tels qu&rsquo;Adobe Flash.\n  <\/li>\n<li>Utilisez des tailles de texte lisibles sans zoom.\n  <\/li>\n<li>Les liens sont suffisamment \u00e9loign\u00e9s les uns des autres pour que l&rsquo;utilisateur puisse facilement s\u00e9lectionner celui qui convient.\n  <\/li>\n<li>Le contenu s&rsquo;adapte \u00e0 l&rsquo;\u00e9cran afin que les utilisateurs n&rsquo;aient pas besoin de faire d\u00e9filer horizontalement pour voir.\n  <\/li>\n<\/ul>\n<h5>\n  Le test adapt\u00e9 aux mobiles<br \/>\n<\/h5>\n<p>\n  Un webmaster ou un propri\u00e9taire d&rsquo;entreprise peut v\u00e9rifier dans quelle mesure son site est compatible avec les mobiles en visitant la page <a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/\" target=\"_blank\" rel=\"noopener\">de test de compatibilit\u00e9 mobile de Google<\/a>. Si le site \u00e9choue au test, Google vous fournira des informations et des conseils sur la fa\u00e7on de rendre le site adapt\u00e9 aux mobiles.\n<\/p>\n<p>\n  De nombreux syst\u00e8mes de gestion de contenu (CMS) tels que WordPress, Drupal et Joomla offrent d\u00e9sormais une assistance sur la fa\u00e7on de migrer votre site Web convivial vers un site adaptatif et mobile.\n<\/p>\n<p>\n  Avant de faire cela, vous voudrez vous assurer de sauvegarder votre site actuel et de mettre \u00e0 jour votre CMS actuel vers la derni\u00e8re version. Dans certaines situations, une mise \u00e0 jour vers la derni\u00e8re version appliquera automatiquement les mises \u00e0 niveau de s\u00e9curit\u00e9 n\u00e9cessaires et rendra votre site adapt\u00e9 aux mobiles. Si le processus n&rsquo;est pas d\u00e9clench\u00e9 automatiquement, assurez-vous de pousser la mise \u00e0 jour manuellement pour \u00e9viter les failles de s\u00e9curit\u00e9.\n<\/p>\n<p>\n  Si le CMS que vous utilisez propose des th\u00e8mes personnalis\u00e9s, assurez-vous que la version que vous choisissez est adapt\u00e9e aux mobiles. Sinon, vous devrez peut-\u00eatre recommencer.\n<\/p>\n<h5>\n  \u00c0 quelle vitesse votre site Web se charge-t-il&nbsp;?<br \/>\n<\/h5>\n<p>\n  En plus de rendre votre site adapt\u00e9 aux mobiles, un autre \u00e9l\u00e9ment important \u00e0 prendre en compte lors de la conception de votre site Web est la vitesse de son site. Si un site Web prend trop de temps \u00e0 se charger, il y a de bonnes chances que l&rsquo;utilisateur rebondisse et aille vers celui qui se charge plus rapidement. En fait, selon de nombreuses enqu\u00eates et \u00e9tudes, pr\u00e8s de la moiti\u00e9 des internautes s&rsquo;attendent \u00e0 ce qu&rsquo;un site se charge en deux secondes ou moins. Ces m\u00eames personnes abandonneront un site qui n&rsquo;est pas charg\u00e9 dans les trois secondes. Pour rendre les choses encore plus importantes, 79&nbsp;% des acheteurs en ligne qui ont des probl\u00e8mes avec les performances du site Web d\u00e9clarent qu&rsquo;ils ne reviendront pas sur le site pour acheter \u00e0 nouveau et environ 44&nbsp;% d&rsquo;entre eux diraient \u00e0 un ami s&rsquo;ils avaient eu une mauvaise exp\u00e9rience d&rsquo;achat en ligne.\n<\/p>\n<p>\n  En plus de perdre des clients potentiels parce que votre temps de chargement est long, un site Web lent peut \u00e9galement nuire \u00e0 votre classement aupr\u00e8s de Google. En effet, Google a indiqu\u00e9 que la vitesse du site est l&rsquo;un des signaux utilis\u00e9s par son algorithme pour classer les pages. Une vitesse de page Web lente signifie \u00e9galement que le moteur de recherche peut explorer moins de pages, ce qui peut signifier moins de pages index\u00e9es par Google. Essentiellement, tout cela signifie que vous perdez des affaires si votre site Web se charge lentement.\n<\/p>\n<h5>\n  Test Google Page Speed \u200b\u200b\u200b\u200bInsights<br \/>\n<\/h5>\n<p>\n  Semblable au test adapt\u00e9 aux mobiles, Google propose un <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">outil gratuit Page Speed \u200b\u200b\u200b\u200bInsights<\/a>. Cet outil mesure les performances d&rsquo;une page Web pour les ordinateurs de bureau et les appareils mobiles.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Une fois que vous copiez et collez l&rsquo;URL dans l&rsquo;outil, un score entre z\u00e9ro et cent points appara\u00eetra. Plus le score est \u00e9lev\u00e9, meilleur est votre site pour l&rsquo;algorithme de Google et un score de 85 ou plus indique que la page fonctionne bien.\n<\/p>\n<p>\n  Avec Page Speed \u200b\u200bInsights, vous apprenez comment votre site Web peut s&rsquo;am\u00e9liorer sur divers aspects cl\u00e9s, y compris le temps \u00e9coul\u00e9 entre le moment o\u00f9 un utilisateur demande une nouvelle page et le moment o\u00f9 le contenu ci-dessus de la nouvelle page est rendu par le navigateur. Il mesure \u00e9galement le temps \u00e9coul\u00e9 entre le moment o\u00f9 un utilisateur demande une nouvelle page et le moment o\u00f9 la page est enti\u00e8rement rendue par le navigateur.\n<\/p>\n<p>\n  \u00c9tant donn\u00e9 que le r\u00e9seau des utilisateurs peut avoir un impact important sur cette vitesse, Page Speed \u200b\u200bInsights ne prend en compte que les aspects ind\u00e9pendants du r\u00e9seau des performances de la page. Cela inclut la configuration du serveur, la structure HTML et l&rsquo;utilisation de ressources externes telles que les images, CSS et JavaScript.\n<\/p>\n<p>\n  Par exemple, en optimisant votre code (y compris en supprimant les espaces, les virgules et autres caract\u00e8res inutiles), vous pouvez <a href=\"https:\/\/inform.click\/fr\/comment-ameliorer-la-vitesse-du-site-wordpress-8-conseils-simples-mais-efficaces\/\" title=\"augmenter consid\u00e9rablement la vitesse de votre page.\">augmenter consid\u00e9rablement la vitesse de votre page.<\/a> Supprimez \u00e9galement les commentaires de code, la mise en forme et le code inutilis\u00e9. Google recommande d&rsquo;utiliser <a href=\"https:\/\/developer.yahoo.com\/yui\/compressor\/\" target=\"_blank\" rel=\"noopener\">YUI Compressor<\/a> pour CSS et JavaScript.\n<\/p>\n<p>\n  La r\u00e9duction des redirections am\u00e9liorera \u00e9galement la vitesse du site. En effet, chaque fois qu&rsquo;une page redirige vers une autre page, le visiteur fait face \u00e0 un temps suppl\u00e9mentaire d&rsquo;attente pour que le cycle requ\u00eate-r\u00e9ponse HTTP se termine. Par exemple, si votre mod\u00e8le de redirection mobile ressemble \u00e0 ceci&nbsp;: \u00ab\u00a0ABC.com -&gt; www.ABC.com -&gt; m.ABC.com -&gt; m.ABC.com\/home\u00a0\u00bb, chacune de ces deux redirections suppl\u00e9mentaires rend votre page charger plus lentement.\n<\/p>\n<p>\n  Les webmasters doivent toujours tirer parti de la mise en cache du navigateur. Cela inclut des \u00e9l\u00e9ments tels que des images, des feuilles de style et autres. Cela se produit afin qu&rsquo;un visiteur qui revient sur votre site Web n&rsquo;ait pas \u00e0 recharger la page enti\u00e8re. En utilisant un outil comme <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/YSlow\/\" target=\"_blank\" rel=\"noopener\">YSlow,<\/a> vous pouvez voir si vous avez d\u00e9j\u00e0 d\u00e9fini une date d&rsquo;expiration pour votre cache. Une fois que cela est d\u00e9couvert, vous pouvez d\u00e9finir un en-t\u00eate \u00ab\u00a0expire\u00a0\u00bb pour la dur\u00e9e pendant laquelle vous souhaitez que ces informations soient mises en cache. \u00c0 moins que votre site ne change fr\u00e9quemment, un an est un d\u00e9lai raisonnable pour le d\u00e9finir.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Cherchez toujours des moyens d&rsquo;am\u00e9liorer le temps de r\u00e9ponse de votre serveur. Pour ce faire, examinez divers goulots d&rsquo;\u00e9tranglement des performances, tels que les requ\u00eates lentes dans la base de donn\u00e9es, le routage lent ou le manque de m\u00e9moire ad\u00e9quate. Les temps de r\u00e9ponse optimaux du serveur doivent \u00eatre inf\u00e9rieurs \u00e0 200 millisecondes.\n<\/p>\n<h5>\n  Les images peuvent \u00e9galement jouer un r\u00f4le important dans la vitesse de votre site Web.<br \/>\n<\/h5>\n<p>\n  Les PNG sont g\u00e9n\u00e9ralement le meilleur format de fichier pour les graphiques de moins de 16 couleurs. Les JPEG sont g\u00e9n\u00e9ralement le format id\u00e9al pour les photos. Assurez-vous qu&rsquo;ils sont \u00e9galement compress\u00e9s pour le Web et qu&rsquo;il n&rsquo;est absolument pas n\u00e9cessaire de t\u00e9l\u00e9charger des photos de 200 et 300 DPI.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Une astuce que vous voudrez peut-\u00eatre essayer est d&rsquo;utiliser <a href=\"http:\/\/csssprites.com\/\" target=\"_blank\" rel=\"noopener\">des sprites CSS<\/a> pour cr\u00e9er un mod\u00e8le pour les images que vous utilisez fr\u00e9quemment, telles que les ic\u00f4nes, votre logo et d&rsquo;autres boutons couramment utilis\u00e9s. Les sprites CSS combineront vos images en une seule image plus grande qui se chargera en une seule fois. Cela signifie moins de requ\u00eates HTTP, ce qui \u00e9quivaut \u00e0 \u00e9conomiser sur le temps de chargement en n&rsquo;obligeant pas les utilisateurs \u00e0 attendre le chargement de plusieurs images.\n<\/p>\n<p>\n  Enfin, une autre option pour augmenter la vitesse de chargement de vos sites consiste \u00e0 utiliser un r\u00e9seau de distribution de contenu ou CDN. Ces r\u00e9seaux de serveurs sont utilis\u00e9s pour r\u00e9partir la charge de livraison du contenu. Fondamentalement, cela signifie que des copies de votre site Web sont stock\u00e9es dans plusieurs centres de donn\u00e9es g\u00e9ographiquement diversifi\u00e9s afin que les utilisateurs aient un acc\u00e8s plus rapide et plus fiable au site Web o\u00f9 qu&rsquo;ils se trouvent physiquement dans le monde.\n<\/p>\n<p>\n  Bien que la cr\u00e9ation d&rsquo;un excellent site Web puisse \u00eatre passionnante et enrichissante, vous voudrez vous assurer qu&rsquo;il est correctement optimis\u00e9. Cela inclut de s&rsquo;assurer qu&rsquo;il est adapt\u00e9 aux mobiles et \u00e0 la vitesse du site. Sinon, il y a de fortes chances que vous perdiez des affaires potentiellement nouvelles et r\u00e9p\u00e9t\u00e9es.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Source d&rsquo;enregistrement: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/09\/09\/mobile-friendly-site-speed\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dans le monde Web 2.0 d&rsquo;aujourd&rsquo;hui, tout tourne autour d&rsquo;Internet. Si vous cherchez un plombier, vous allez sur le web. Si vous cherchez un restaurant local, vous allez sur le Web. Si vous voulez acheter une maison, devinez quoi? Vous allez sur le Web. Les gens n&rsquo;utilisent plus les pages jaunes pour trouver une entreprise pour un besoin ou un d\u00e9sir. Ils vont sur le Web car il fournit les informations les plus pr\u00e9cises et les plus rapides. Pour obtenir ces informations il y a cinq \u00e0 sept ans, une personne se rendait sur son ordinateur personnel ou professionnel ou\u2026<\/p>\n","protected":false},"author":1,"featured_media":155657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[197,119,145,54],"tags":[],"class_list":["post-251707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creation-de-sites-web","category-outils-web","category-trucs-et-astuces-web","category-web-et-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/comments?post=251707"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media\/155657"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media?parent=251707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/categories?post=251707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/tags?post=251707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}