mag amp 2015_v0.3
TRANSCRIPT
HelloT3EE!
Let‘s talk about AMP
What can you except?
AMP HTML
Mobile web
Speed TYPO3
Mobile Web some numbers
Evolution of content discovery
Mobile ContentFrom where does
the content comes?
Mobile Web – From where comes the Content ?
AMP HTMLAccelerated Mobile Pages
AMP HTML – General
Open Source ProjectA way to simplify the integration of static content on mobile devices.Built-in best practicePromice of speed, speed, speed
More info here:https://github.com/ampproject
AMP in actionCheck out the demo from Google
AMPPerformance
“Predictable performance is a key design goal for AMP HTML. Primarily we are aiming at reducing the time until the content of a page can be consumed / used by the user. In concrete terms this means that:“
HTTP requests necessary to render and fully layout the document should be minimized.Resources such as images or ads should only be downloaded if they are likely to be seen by the user.Browsers should be able to calculate the space needed by every resource on the page without fetching that resource.
AMP – What is the plan?
What is the plan?
Preloading Images
Minifying HTML and CSS
Special Lazy Loading
Best practice
CDN
AMP – More specific
a fary tale aboutthe good, the bad and the ugly one
AMP‘s point of view
JS
„HTML“
CSS
the bad the good
the “ugly”
magic always demands a sacrifice
AMP HTML documents MUST
start with the doctype <!doctype html>.contain a top-level <html ⚡> tag (<html amp> is accepted as well).contain <head> and <body> tags (They are optional in HTML).contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.contain a <meta charset="utf-8"> tag as the first child of their head tag.contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It's also recommended to include initial-scale=1.contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head.contain <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> in their head tag.AND read the Markup specification
AMP – Requirements
Allowed
<style><meta> (http-equiv not)<a> without “javacript”<link> for certain values<button><svg>
AMP Validator:Allowed / Prohibited / Replaced
Replaced
<img><video><audio><iframe>
Prohibited
<form><script> (only amp, and custom elements)<input><embend><object><param><applet><base>
Custom elements
Youtube
AMP HTML – examples
Iframe
AMP HTML – Elements Example
Carousel
AMP HTML (Examples)
AMP HTMLI want to try it
AMP HTML – Let‘s test the speed
AMP HTML vs. HTML
AMP HTML
HTML
Round 2
Round 2 (HTML)
Round 2 (AMP)
The point I mentioned TYPO3
at the beginning
Integration into the CMS
?
worth to think about