Download to read offline
Uploaded byJahia Solutions Group
Mobile First et AMP - Developers Meetup - May 2017
The document discusses Accelerated Mobile Pages (AMP), which enhance mobile browsing speed and are supported by Google's free CDN. It outlines how AMP works, its guidelines, and the process of making existing content AMP-compatible, while also addressing the pros and cons of using AMP. The presentation concludes with suggestions for extending support for AMP within existing content channels.
More Related Content
Similar to Mobile First et AMP - Developers Meetup - May 2017
More from Jahia Solutions Group
Mobile First et AMP - Developers Meetup - May 2017
- 1. 1 Accelerated Mobile Pages May31th, 2017, Paris
- 2. 2 Introduction David Griffon (dgriffon@jahia.com ) Core Team Senior developper Understand what is AMP Rendering capabilities of DX There are 24 slides
- 3.
- 4. 4 1 What is AMP? Accelerated Mobile Pages speed up mobile browsing
- 5. 5 1 What is AMP? Content targeted (news, article) Responsive design alternative
- 6. 6 1 What is AMP? Supported by Google Free CDN hosted by Google
- 7.
- 8. 8 1 What is AMP? AMP Flow
- 9.
- 10. 10 2 How itworks ? An HTML page with few constraints <!doctype html> <html amp lang="en"> <head> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <script async src="https://cdn.ampproject.org/v0.js"></script> </head>
- 11. 11 2 How itworks ? AMP Guidelines Never stop the content Inline size bound CSS Asset independent layout Use HTTPS ...
- 12. 12 2 How itworks ? No javascript Inline CSS (less than 50 Ko) Use custom tags amp-accordion amp-img amp-list amp-iframe amp-video See more at https://www.ampproject.org/fr/docs/reference/components
- 13. 13 2 How itworks ? Page validation needed in order to be cached Validation tools : - Online validation - Browser validation A cached page is searchable and can be delivered by Google cache.
- 14. 14 3 Make DX contentAMP compatible
- 15. 15 DX content toAMP page DEMO https://github.com/dgriffon/sample-AMP-DX-integration 3
- 16. 16 DX content toAMP page DX content template - Use to display content in full page - Set AMP headers 3
- 17. 17 DX content toAMP page DX content view - Use to display a single content - Use AMP custom tags 3
- 18. 18 DX content toAMP page DX Render Filters - Use to modify existing content while rendering 3
- 19.
- 20. 20 AMP pros .. Higherrankings (Google) Free CDN A detailed and active documentation and examples https://www.ampproject.org https://ampbyexample.com 4
- 21. 21 AMP cons .. Limitedfunctionality Ad revenues Analytics / SEO Google cache 4
- 22. 22 5 AMP and DX,what's next
- 23. 23 What's next Extend DXchannels to support AMP richText filter Sample components: - Authentication - Forms - Links 5
- 24. 24 THE END! THANKS FORLISTENING