E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
Le téléchargement de votre SlideShare est en cours.
×
Consultez-les par la suite
Suggestions
Plus De Contenu Connexe
Diaporamas pour vous (20)
Les utilisateurs ont également aimé (7)
Similaire à google amp pages (20)
Plus récents (20)
google amp pages
- 1. Creating Google AMP Pages Here There And Everywhere https://www.htae.net
- 2. Target audience • If you maintain a website Skills required • HTML • Some CSS • Some Javascript
- 3. References • Technology moves quickly, this was written October 2016. • Latest on AMP is available at https://www.ampproject.org/ Notes • Slides/notes and opinions are our own only and may not be correct, ensure you do your own research.
- 4. Why? • Currently (Oct 2016) one reason; • Facilitates fast page loading so; • better user experience for users, for example, people on slow mobiles/desktops may not have been able to load your pages in a sensible time (if your existing pages were bloated or not written for speed).
- 5. How does it work, maybe Original non-amp page Create an AMP page Your development Users search/Display to user Page available in cache Present user with cache if possible or AMP page Validate and load cache Validate and load cache from AMP page or next user N Y Valid Present AMP page N Y
- 6. Results • If done correctly the results from search will show an AMP option, clicking that AMP option will take the user to the fast cached page. speed).
- 7. When not to use? • If your pages are highly optimised anyway?. • If there is any kind of complexity to your pages and therefore you require forms/Javascript/heaps of css. Etc. • If your target audience all own highly specified mobile devices or desktops with heaps of bandwidth and you think they are happy for you to use bandwidth for your site?. • If you don’t have plenty of time or budget to rewrite or potentially double up on your pages. • If you are a “wait and see what others do” type, or if you only implement with “mature” technology?. • If you have limited “crawl budget” for your site as Googlebot likes to come and get fresh copies quite often.
- 8. Ideally suited to • For the moment (October 2016); • Static content like; • News articles • Blog pages • Recipes
- 9. Find an existing page
- 10. Mark-up • Copy the HTML • Remove any Java script • Ensure CSS is limited • Remodel any forms • Code up the surrounding AMP scripting • Create a new URL for your AMP page
- 11. Mark-up Key points • Original page needs to say where the AMP page lives;
- 12. Mark-up Key points • AMP Page needs to say where the original lives;
- 13. Mark-up Key Points • Boilerplate need to be last two items of the <HEAD>
- 14. Check your new AMP page is showing
- 15. Validate It • Either use the chrome add-in; • https://chrome.google.com/webstore/detail/amp- validator/nmoffdblmcmgeicmolmhobpoocbbmknc Will show green if valid code
- 16. Validate it • And/or use the validator at; https://validator.ampproject.org/ You are looking for a status of pass
- 17. Validate it • And/or use the developer tools; You are looking for no errors here
- 18. Validate it • Then check the google cache is also serving your page; • E.g. https://cdn.ampproject.org/c/s/www.htae.net/checklist/amp/english -madeleines/67/
- 19. The Need For Speed Original page: 1.72 Seconds to load DOM AMP Marked Up Version: 1.35 Seconds to load DOM Cache version should it be presented to user; 645 Milliseconds to load DOM Note: overall speed variable due to this page containing ads which are loaded when able and at their own pace
- 20. Handy Items • Clear cache • https://cdn.ampproject.org/update-ping/c/s/www.htae.net
