5 ms·

The Guardian sample AMP page: With AMP: http://www.theguardian.com/science/2015/oct/07/lindahl-modrich-and-sancar-win-nobel-chemistry-prize-for-dna-research/am

by cbowal 11y ago

The Guardian sample AMP page: With AMP: http://www.theguardian.com/science/2015/oct/07/lindahl-modrich-and-sancar-win-nobel-chemistry-prize-for-dna-research/amp http://www.theguardian.com/science/2015/oct/07/lindahl-modri... Without AMP: http://www.theguardian.com/science/2015/oct/07/lindahl-modrich-and-sancar-win-nobel-chemistry-prize-for-dna-research http://www.theguardian.com/science/2015/oct/07/lindahl-modri...

djrogers 11y ago
Odd, the second page loaded much faster for me...
- on_ 11y ago
  Which page did you click first?
solidpy 11y ago
No flash, no sidebars, no bottom bars, no comments, a total of 6 requests vs 98. Of course it loads faster. And looks better. This is the way the web should be.
- julien 11y ago
  Exactly! The WEB! Not yet another format that a small percentage of people will ever use but that everybody else will have to deal with for centuries.
  - bryanlarsen 11y ago
    AMP is a subset of HTML.
    - cpeterso 11y ago
      AMP : HTML :: asm.js : JavaScript?
      - callumlocke 11y ago
        That's a good analogy (as long as you mean "HTML" as a banner term to include the HTML spec and associated specs like CSS and Custom Elements [1]). • AMP is a subset of HTML. • Any normal HTML engine can, therefore, render any AMP file, without needing to know about the AMP spec. • It's also possible to make an engine that specialises in rendering AMP (either exclusively, or by switching to a faster mode when it detects the file is just AMP). • Even in normal HTML engines, AMP files will generally be fast because they avoid 'slow' parts of HTML. The above points all hold true if you switch the terms to JavaScript and asm.js. Where the analogy falls short: • It's easy to write AMP by hand, but asm.js is really only meant to be generated by a compiler. • Obviously, what is meant by 'fast' is very different in each case. In HTML:AMP, it's about things like reducing network usage, and avoiding layout thrashing by requiring up-front declarations of image dimensions, etc. In JS:asm.js, it's about making compiler optimisations possible so code can execute faster. Note: AMP does create extra elements, like `<amp-img>`, but these are legit uses of the Custom Elements spec. You can see these elements rendering correctly in Chrome. [2] [1] http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/ [2] https://www.ampproject.org/how-it-works/ https://www.ampproject.org/how-it-works/
    - callahad 11y ago
      s/subset of/overlapping set with/ AMPHTML whitelists a handful of HTML tags, but adds a bunch of its own custom elements, like <amp-instagram>, <amp-img>, and <amp-ad> on top. It's neither a subset nor a superset of HTML in the common understanding of those terms.
      - cramforce 11y ago
        Custom elements are a thing in HTML. Using them doesn't make it a superset. http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/
AdmiralAsshat 11y ago
So the AMP page looks great on a mobile device, but am I the only one that thinks we don't have enough emphasis on the desktop side of "mobile-friendly" styling? I'm reading this page on a 24" monitor, and literally 2/3rds of the page is whitespace. Why isn't more of that space being filled with text?
- randomguy7788 11y ago
  hey would you mind linking me? just unsure if you're talking about the landing page or the how-to page i work for the amp team and would love to fix it and give our marketing site some love.
  - cbowal 11y ago
    I'm guessing he's talking about The Guardian article linked to above with AMP. The AMP site looks great to me on a large display.
  - AdmiralAsshat 11y ago
    Hi there! Thanks for taking the time to reply. To be clear, I was referring to the AMP version of the Guardian page from the parent comment, so that would probably be outside of your domain to fix. But to show what I'm talking about, here's how the page looks on my desktop in Chrome: https://imgur.com/OGy3ltz https://imgur.com/OGy3ltz Again, that just seems like wasted real-estate.
    - randomguy7788 11y ago
      gotcha thanks for clarifying!
    - what_ever 11y ago
      I actually would prefer the page this way while reading a text article. They want to cut down on the sidebars to make the page faster and only load the main content. And making the content wider just makes more difficult to read. I often lose track of the lines.
- 11y ago
imaginenore 11y ago
Both are very fast, especially on the second load.

by cbowal 11y ago

djrogers 11y ago

Odd, the second page loaded much faster for me...

on_ 11y ago
Which page did you click first?

solidpy 11y ago

No flash, no sidebars, no bottom bars, no comments, a total of 6 requests vs 98. Of course it loads faster. And looks better. This is the way the web should be.

julien 11y ago
Exactly! The WEB! Not yet another format that a small percentage of people will ever use but that everybody else will have to deal with for centuries.
- bryanlarsen 11y ago
  AMP is a subset of HTML.
  - cpeterso 11y ago
    AMP : HTML :: asm.js : JavaScript?
    - callumlocke 11y ago
      That's a good analogy (as long as you mean "HTML" as a banner term to include the HTML spec and associated specs like CSS and Custom Elements [1]). • AMP is a subset of HTML. • Any normal HTML engine can, therefore, render any AMP file, without needing to know about the AMP spec. • It's also possible to make an engine that specialises in rendering AMP (either exclusively, or by switching to a faster mode when it detects the file is just AMP). • Even in normal HTML engines, AMP files will generally be fast because they avoid 'slow' parts of HTML. The above points all hold true if you switch the terms to JavaScript and asm.js. Where the analogy falls short: • It's easy to write AMP by hand, but asm.js is really only meant to be generated by a compiler. • Obviously, what is meant by 'fast' is very different in each case. In HTML:AMP, it's about things like reducing network usage, and avoiding layout thrashing by requiring up-front declarations of image dimensions, etc. In JS:asm.js, it's about making compiler optimisations possible so code can execute faster. Note: AMP does create extra elements, like `<amp-img>`, but these are legit uses of the Custom Elements spec. You can see these elements rendering correctly in Chrome. [2] [1] http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/ [2] https://www.ampproject.org/how-it-works/ https://www.ampproject.org/how-it-works/
  - callahad 11y ago
    s/subset of/overlapping set with/ AMPHTML whitelists a handful of HTML tags, but adds a bunch of its own custom elements, like <amp-instagram>, <amp-img>, and <amp-ad> on top. It's neither a subset nor a superset of HTML in the common understanding of those terms.
    - cramforce 11y ago
      Custom elements are a thing in HTML. Using them doesn't make it a superset. http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/

AdmiralAsshat 11y ago

So the AMP page looks great on a mobile device, but am I the only one that thinks we don't have enough emphasis on the desktop side of "mobile-friendly" styling? I'm reading this page on a 24" monitor, and literally 2/3rds of the page is whitespace. Why isn't more of that space being filled with text?

randomguy7788 11y ago
hey would you mind linking me? just unsure if you're talking about the landing page or the how-to page i work for the amp team and would love to fix it and give our marketing site some love.
- cbowal 11y ago
  I'm guessing he's talking about The Guardian article linked to above with AMP. The AMP site looks great to me on a large display.
- AdmiralAsshat 11y ago
  Hi there! Thanks for taking the time to reply. To be clear, I was referring to the AMP version of the Guardian page from the parent comment, so that would probably be outside of your domain to fix. But to show what I'm talking about, here's how the page looks on my desktop in Chrome: https://imgur.com/OGy3ltz https://imgur.com/OGy3ltz Again, that just seems like wasted real-estate.
  - randomguy7788 11y ago
    gotcha thanks for clarifying!
  - what_ever 11y ago
    I actually would prefer the page this way while reading a text article. They want to cut down on the sidebars to make the page faster and only load the main content. And making the content wider just makes more difficult to read. I often lose track of the lines.
11y ago

imaginenore 11y ago

Both are very fast, especially on the second load.