{"id":10656,"date":"2016-03-17T22:05:13","date_gmt":"2016-03-17T21:05:13","guid":{"rendered":"http:\/\/flaven.fr\/?p=10656"},"modified":"2016-03-17T22:11:57","modified_gmt":"2016-03-17T21:11:57","slug":"mobile-amp-petit-introduction-sur-amp-accelerated-mobile-pages-de-google","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2016\/03\/mobile-amp-petit-introduction-sur-amp-accelerated-mobile-pages-de-google\/","title":{"rendered":"Mobile, AMP &#8211; Petit introduction sur AMP Accelerated Mobile Pages de Google"},"content":{"rendered":"<p>\n\tLa vitesse c&#8217;est la modernit\u00e9, pas vrai ? Rappelez-vous le train \u00e0 vapeur au 19eme si\u00e8cle ! Et bien au 21\u00e8me, la vitesse, symbole de modernit\u00e9, a pris la forme de l&#8217;affichage d&#8217;une page sur mobile. Blague \u00e0 part, il existe plein de b\u00e9n\u00e9fices pr\u00e9tendus ou av\u00e9r\u00e9s \u00e0 la diminution du temps de chargement. Les voici, en vrac.<\/p>\n<ul>\n<li>Le taux de conversion tombe de 27% apr\u00e8s une seconde ! Il semble qu&#8217;un site ou application dispose de 8 secondes pour convaincre l&#8217;internaute, c&#8217;est la fameux taux de rebond (bounce rate). Donc, afficher votre contenu rapidement est capital, sinon c&#8217;est termin\u00e9 bonsoir.<\/li>\n<li>D&#8217;un point de vue SEO, la vitesse de chargement est un des crit\u00e8res d\u00e9terminants dans le classement de la page au sein de Google par exemple. Un site lent est un site invisible.<\/li>\n<\/ul>\n<p><b>En conclusion : l&#8217;exp\u00e9rience utilisateur (UX), le fait d&#8217;\u00eatre correctement index\u00e9, le taux de transformation sont donc directement impact\u00e9s par la vitesse de chargement et &#8220;Mobile first&#8221;. Il est donc imp\u00e9ratif d&#8217;infl\u00e9chir positivement la vitesse de chargement de votre site.<\/b><\/p>\n<p><b>Autant de bonnes raisons de s&#8217;initier au concept de AMP et par extension au format de ces principaux concurrents : Facebook Instant Articles ou Apple News. La solution AMP propos\u00e9 par Google est open-source, celle de Facebook comme de Apple est bien \u00e9videmment contingente \u00e0 leurs environnements.<\/b><\/p>\n<p>Voil\u00e0 les deux artciles les plus exhaustifs sur la question.<\/p>\n<ul>\n<li>Un article tr\u00e8s complet sur la question<br \/><a href=\"http:\/\/www.sitepoint.com\/an-introduction-to-googles-accelerated-mobile-pages-amp\/\" target=\"_blank\">http:\/\/www.sitepoint.com\/an-introduction-to-googles-accelerated-mobile-pages-amp\/<\/a><\/li>\n<li>Un excellent article sur la question, avec notamment un bon comparatif sur les Instant Articles de FaceBook et Apple News de Apple<br \/><a href=\"https:\/\/www.smashingmagazine.com\/2016\/02\/everything-about-google-accelerated-mobile-pages\/\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2016\/02\/everything-about-google-accelerated-mobile-pages\/<\/a><\/li>\n<\/ul>\n<h4>AMP de lancement<\/h4>\n<p>Bon la lecture des articles, ci-dessus, vous instruira bien plus que n&#8217;importe quelle synth\u00e8se mal fagot\u00e9e qui pourrait \u00eatre faite. Non, le souhait est plut\u00f4t de plonger sans trop de connaissances \u00e0 priori sur la conversion &#8220;stricto sensu&#8221; de contenu existants en HTML en AMP-HTML. <b>Pour se faire, il faut des exemples, un peu de temps et un bon environnement de d\u00e9veloppement. C&#8217;est la vocation des lignes qui suivent ci-dessous.<\/b><\/p>\n<p><b>Via la console, vous pouvez lancer le serveur. Vous pourrez ensuite lancer l&#8217;un des exemples gracieusement offerts par google \u00e0 l&#8217;adresse suivante http:\/\/localhost:8000\/metadata-examples\/<\/b><br \/>\n<code>python -m SimpleHTTPServer<\/code><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/03\/amp_google_1.jpg\" width=\"640\" height=\"480\" alt=\"Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google\"><\/p>\n<p><b>La balise image incorrecte en AMP-html. C&#8217;est intentionnel car on voit clairement avec l&#8217;aide de Chrome, la possibilit\u00e9 de d\u00e9bugger votre code HTML pour \u00eatre conforme aux recommandations AMP de Google.<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/03\/amp_google_2.jpg\" width=\"640\" height=\"480\" alt=\"Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google\"><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n&lt;!-- bad --&gt;\r\n&lt;img src=\"leader_lion_small_800x300.jpg\" alt=\"Lorem Ipsum?\" height=\"300\" width=\"800\"&gt;&lt;\/amp-img&gt;\r\n<\/pre>\n<p><b>La balise image correcte en AMP-html<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/03\/amp_google_3.jpg\" width=\"640\" height=\"480\" alt=\"Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google\"><\/p>\n<pre lang=\"html\" escaped=\"true\">\t\r\n\t&lt;!-- good --&gt;\r\n\t&lt;amp-img src=\"leader_lion_small_800x300.jpg\" alt=\"Lorem Ipsum?\" height=\"300\" width=\"800\"&gt;&lt;\/amp-img&gt;\r\n<\/pre>\n<p><i>Source : <a href=\"https:\/\/www.ampproject.org\/docs\/guides\/validate.html\" target=\"_blank\">https:\/\/www.ampproject.org\/docs\/guides\/validate.html<\/a><\/i><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>WordPress plugin for adding AMP support, ce qui est une bonne entr\u00e9e en mati\u00e8re sur le format AMP. La lecture du code est instructive<br \/><a href=\"https:\/\/github.com\/Automattic\/amp-wp\/\" target=\"_blank\">https:\/\/github.com\/Automattic\/amp-wp\/<\/a><\/li>\n<li>AMP HTML Templates<br \/><a href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/spec\/amp-html-templates.md\" target=\"_blank\">https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/spec\/amp-html-templates.md<\/a><\/li>\n<li>Validate AMP Pages<br \/><a href=\"https:\/\/www.ampproject.org\/docs\/guides\/validate.html\" target=\"_blank\">https:\/\/www.ampproject.org\/docs\/guides\/validate.html<\/a><\/li>\n<li>Using the Console<br \/><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/debug\/console\/\" target=\"_blank\">https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/debug\/console\/<\/a><\/li>\n<li>Le dossier <code>ampproject\/amp-publisher-sample<\/code><br \/><a href=\"https:\/\/github.com\/ampproject\/amp-publisher-sample\" target=\"_blank\">https:\/\/github.com\/ampproject\/amp-publisher-sample<\/a><\/li>\n<li>Le projet Accelerated Mobile Pages Project<br \/><a href=\"https:\/\/www.ampproject.org\/\" target=\"_blank\">https:\/\/www.ampproject.org\/<\/a><\/li>\n<li>AMP HTML source code, samples, and documentation<br \/><a href=\"https:\/\/github.com\/ampproject\/amphtml\" target=\"_blank\">https:\/\/github.com\/ampproject\/amphtml<\/a><\/li>\n<li>Google Accelerated Mobile Pages<br \/><a href=\"http:\/\/bradforster.org\/google-accelerated-mobile-pages\/\" target=\"_blank\">http:\/\/bradforster.org\/google-accelerated-mobile-pages\/<\/a><\/li>\n<li>Les exemples <code>amphtml\/examples\/metadata-examples\/<\/code><br \/><a href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/master\/examples\/metadata-examples\" target=\"_blank\">https:\/\/github.com\/ampproject\/amphtml\/tree\/master\/examples\/metadata-examples<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>La vitesse c&#8217;est la modernit\u00e9, pas vrai ? Rappelez-vous le train \u00e0 vapeur au 19eme si\u00e8cle ! Et bien au 21\u00e8me, la vitesse, symbole de&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2016\/03\/mobile-amp-petit-introduction-sur-amp-accelerated-mobile-pages-de-google\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Mobile, AMP &#8211; Petit introduction sur AMP Accelerated Mobile Pages de Google<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"AMP Accelerated Mobile Pages boost mobile speed, reducing bounce rates. See tools and outcomes for faster loading times.","bf_ai_og_title":"AMP Mobile Pages: Speed Matters","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3437,3454,3444,3447,3449,3450,3435,3452],"tags":[2319,2318,2321,53,2214,2320,31,44,2223],"class_list":["post-10656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-case-studies","category-journalism-writing","category-programming-databases","category-technology-trends","category-tutorials-how-to","category-ux-product-design","category-web-development","category-wordpress-cms","tag-accelerated-mobile-pages","tag-amp","tag-apple-news-de-apple","tag-facebook","tag-google","tag-instant-articles","tag-mobile","tag-seo","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2LS","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/03\/amp_google_b.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10656"}],"version-history":[{"count":4,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10656\/revisions"}],"predecessor-version":[{"id":10664,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10656\/revisions\/10664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10657"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}