![\"Pr\u00e9sentation](\"https:\/\/www.yateo.com\/blog\/wp-content\/uploads\/2017\/12\/DSC06109-1024x683.jpg\")
<\/h2>\nLe mois dernier, YATEO participait au Hackathon, un \u00e9v\u00e9nement sign\u00e9 Google. 5h durant lesquelles deux de nos d\u00e9veloppeurs, Alexandre et Miloud, ont pu mettre au d\u00e9fi leurs connaissances au sujet de l\u2019optimisation de la vitesse de chargement des pages d\u2019un site mobile. Retour sur ce meeting qui nous en apprend plus sur l\u2019optimisation SEO d\u2019un site sur mobile.<\/p>\n
<\/p>\n
<\/h2>\nAfin de booster le r\u00e9f\u00e9rencement de son site depuis une connexion mobile, certains \u00e9l\u00e9ments m\u00e9ritent d\u2019y pr\u00eater une attention particuli\u00e8re.<\/p>\n
Le sujet avait \u00e9t\u00e9 \u00e9voqu\u00e9 dans l’un de nos article pr\u00e9c\u00e9dent (\u00ab\u00a0SEO : optimiser le chargement de ses pages\u00a0\u00bb<\/a>), il est aujourd\u2019hui primordial de proposer aux internautes des sites aux temps de chargement les plus courts possibles.\u00a0 En effet, les retomb\u00e9es peuvent \u00eatre tr\u00e8s n\u00e9gatives pour les entreprises qui n\u2019y accordent pas d\u2019attention\u00a0:<\/p>\n On comprend vite l\u2019int\u00e9r\u00eat d\u2019am\u00e9liorer le temps de chargement de ses pages\u00a0: moins votre site est performant, plus vous privez de visiteurs potentiellement int\u00e9ress\u00e9s par votre activit\u00e9.<\/p>\n Cependant, avant de s\u2019int\u00e9resser aux recommandations, il faut tout d\u2019abord analyser les performances de votre site actuel. Pour ce faire, vous devrez prendre en compte le Speed Index. Cet outil correspond au temps de chargement de votre page au dessus de la ligne de flottaison. Afin de mesurer votre Speed Index, vous pouvez-vous rendre sur le site https:\/\/www.webpagetest.org\/<\/p>\n Afin d\u2019appr\u00e9cier les r\u00e9sultats de votre test\u00a0 Speed Index, voici une \u00e9chelle de notation propos\u00e9e par Google\u00a0:<\/p>\n Trop souvent, les performances d\u2019affichage d\u2019un site sont intimement li\u00e9es aux images qui y sont int\u00e9gr\u00e9es. Des images lourdes entrainent des ralentissements de la vitesse de chargement. Ainsi, Google nous a fait part de quelques recommandations durant ce Hackathon\u00a0:<\/p>\n La m\u00e9thode du Download & Shrink \/ Hide\u00a0<\/strong>: il s\u2019agit de pr\u00e9voir des images diff\u00e9rentes adapt\u00e9es \u00e0 chaque format d\u2019\u00e9cran afin que le chargement des images soit optimis\u00e9 lors de l\u2019affichage de la page, quelque soit le l\u2019appareil utilis\u00e9 pour se connecter.<\/p>\n L\u2019encodage Base 64\u00a0<\/strong>: afin d\u2019optimiser davantage le poids de vos photos, Google incite les entreprises \u00e0 avoir recours \u00e0 l\u2019encodage Base 64. Il permet de compresser les images en les transformant les images en cha\u00eene de caract\u00e8res. C\u2019est un moyen efficace de gagner en l\u00e9g\u00e8ret\u00e9 et donc en rapidit\u00e9 de chargement.<\/p>\n Le Lazy Loading<\/strong>\u00a0: ce dispositif permet le chargement de vos visuels avant m\u00eame que les internautes en aient besoin. Il s\u2019agit d\u2019anticiper la visite de l\u2019internaute pour lui offrir une exp\u00e9rience utilisateur irr\u00e9prochable.<\/p>\n La suppression des sliders sur mobile<\/strong>\u00a0: de nombreux \u00e9l\u00e9ments agissent au d\u00e9triment de votre site web lorsque vous utilisez des sliders sur votre site mobile. Par exemple, les sliders sont souvent per\u00e7us comme des banni\u00e8res publicitaires de la part des visiteurs et leurs rotations sont synonymes de distraction pour les internautes. Par ailleurs, utiliser des sliders, c\u2019est demander \u00e0 vos visiteurs de charger d\u2019autant plus d\u2019images tout en ayant recours au JS. Autant dire qu\u2019on est loin de l\u2019optimisation de l\u2019affichage de votre page ! En fin de compte, les performances des sliders sont bien souvent d\u00e9risoires vis-\u00e0-vis des b\u00e9n\u00e9fices que l\u2019on en tire.<\/p>\n Tout d\u2019abord, accordons-nous sur ce que d\u00e9signe le chemin critique. Le chemin critique permet de charger uniquement le style qui se trouve au dessus de la ligne de flottaison. Google recommande ainsi de valoriser les \u00e9l\u00e9ments relatifs au chemin critique, au d\u00e9pit des informations que l\u2019on retrouve en-dessous, qui chargeront dans un second temps. Optimiser le chargement du chemin critique de son site permet donc de donner un aper\u00e7u de la page plus rapidement aux visiteurs.<\/p>\n <\/p>\n Suite \u00e0 ce brief des nouveaut\u00e9s SEO, Google a d\u00e9fi\u00e9 les d\u00e9veloppeurs pr\u00e9sents au meeting : quoi de mieux qu’appliquer aussit\u00f4t les recommandations propos\u00e9es ? C’est l’occasion id\u00e9ale pour les d\u00e9veloppeurs pr\u00e9sents \u00e0 l\u2019\u00e9v\u00e9nement de tester et de v\u00e9rifier qu’ils ont bien int\u00e9gr\u00e9 les nouveaut\u00e9s pr\u00e9sent\u00e9es par Google.<\/p>\n Le but\u00a0: am\u00e9liorer le speed index de votre site, c’est-\u00e0-dire obtenir un speed index de 4000 ou plus bas (le + bas gagne).<\/p>\n L\u2019objectif\u00a0: atteindre les 3000 en speed index.<\/p>\n L\u2019enjeu\u00a0: remporter un drone et la satisfaction d\u2019\u00eatre le meilleur\u00a0!<\/p>\n C\u2019est donc durant 4h que notre d\u00e9veloppeur en alternance Miloud et son tuteur Alexandre ont travaill\u00e9 pour atteindre\u00a0les meilleurs r\u00e9sultats possibles. En appliquant les recommandations issues du brief, et \u00e0 l\u2019aide de leur connaissances personnelles, ils ont r\u00e9ussi \u00e0 obtenir les meilleurs r\u00e9sultats du concours, face \u00e0 une dizaine d\u2019autres \u00e9quipes. C\u2019est donc avec une fiert\u00e9 non dissimul\u00e9e que nos deux d\u00e9veloppeurs sont revenus victorieux, drone \u00e0 la main.<\/p>\n Miloud, notre d\u00e9veloppeur en alternance, prend la parole au sujet de cet \u00e9v\u00e9nement sign\u00e9 Google :<\/p>\n Ses domaines de comp\u00e9tences\u00a0:\u00a0<\/strong>Programmation d\u00e9veloppement et analyse de code, mod\u00e9lisation de bases de donn\u00e9es, gestion de serveurs\u00a0et environnement linux, outils de versionning de projets.<\/i><\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/p>\n \u00ab\u00a0Premier \u00e9v\u00e9nement professionnel auquel je suis convi\u00e9, je ne savais pas vraiment \u00e0 quoi m’attendre lors de ce meeting. Ce fut une exp\u00e9rience extr\u00eamement enrichissante, non seulement parce qu’elle m’a permis de mettre \u00e0 jour mes connaissances, mais \u00e9galement parce que j’ai pu tester mon savoir-faire et les notions que j’ai int\u00e9gr\u00e9 durant ce meeting.\u00a0<\/em><\/p>\n D’ailleurs, c’est un nouveau type de challenge que d’affronter en direct d’autres \u00e9quipes de d\u00e9veloppeurs ! <\/em><\/p>\n L’optimisation pagespeed est une des offres de l’agence. J’avais donc un bagage de savoir-faire peut \u00eatre plus important que d’autres d\u00e9veloppeurs \u00e0 ce sujet, et cela m’a sans doute permis de prendre l’avantage pour remporter la premi\u00e8re place de ce concours !<\/em><\/p>\n Ce meeting m’a confort\u00e9 dans l’id\u00e9e qu’il ne faut jamais rester sur ses acquis dans le domaine du digital. C’est un environnement en constante \u00e9volution, et une veille quotidienne ainsi qu’une mise en pratique r\u00e9guli\u00e8re sont essentielles afin de rester comp\u00e9titif ! \u00ab\u00a0<\/em><\/p>\n <\/p>\n Les ateliers organis\u00e9s par Google pour ses partenaires (les \u00ab\u00a0Google Partner Premiers<\/a>\u00ab\u00a0) sont donc une opportunit\u00e9 pour YATEO de rester \u00e0 l\u2019aff\u00fbt de toutes les nouveaut\u00e9s concernant le r\u00e9f\u00e9rencement sur ce moteur de recherche. Il permet aussi \u00e0 notre agence de vous proposer des services de haute qualit\u00e9 et fortement concurrentiels.<\/p>\n <\/p>\n\n
\n\n
\n Speed<\/strong><\/td>\n \u00a0Estimation<\/b><\/td>\n<\/tr>\n \n 4500<\/td>\n Passable<\/td>\n<\/tr>\n \n 4000<\/td>\n Ok<\/td>\n<\/tr>\n \n 3500<\/td>\n C’est bien<\/td>\n<\/tr>\n \n 3000<\/td>\n C’est tr\u00e8s bien<\/td>\n<\/tr>\n \n 2500<\/td>\n Excellent<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n La gestion des images sur votre site mobile. <\/strong><\/h3>\n
![\"Les](\"https:\/\/www.yateo.com\/blog\/wp-content\/uploads\/2017\/12\/DSC06147-1024x683.jpg\")
<\/h3>\nL\u2019optimisation du chemin critique. <\/strong><\/h3>\n
Le Hackathon\u00a0: un concours entre d\u00e9veloppeurs\u00a0!<\/h2>\n
![\"Miloud](\"https:\/\/www.yateo.com\/blog\/wp-content\/uploads\/2017\/12\/DSC06554-1024x683.jpg\")
<\/p>\n\n\n
\n ![\"\"](\"https:\/\/www.yateo.com\/blog\/wp-content\/uploads\/2017\/12\/IMG_0093-300x200.jpg\")
<\/td>\nSon profil\u00a0:\u00a0<\/strong>S\u00e9duit par la programmation d\u00e8s le lyc\u00e9e, Miloud a ensuite orient\u00e9 ses \u00e9tudes sur le d\u00e9veloppement en langage C (langage proche de celui de la machine) mais aussi sur les technologies de d\u00e9veloppement web et traitement de donn\u00e9es.<\/p>\n