4 ms·

I see this more and more recently where a webpage takes ~5 seconds to load if it’s an AMP page if I have some sort of ad blocking (cookie restriction) in place.

I see this more and more recently where a webpage takes ~5 seconds to load if it’s an AMP page if I have some sort of ad blocking (cookie restriction) in place. What’s interesting is that the page content is already loaded but my browser (Safari) is waiting for something to render everything. So, if I have the Reader Mode pre-activated on the same page, I can read the page before the ~5 seconds is over and I can actually see the page!

ryanpetrich 7y ago
That's likely due to amp-font, which will wait a certain amount of time for custom fonts to load before continuing with a fallback browser font (see: https://amp.dev/documentation/components/amp-font https://amp.dev/documentation/components/amp-font)
- JoshMnem 7y ago
  8 seconds is not a reasonable delay, and AMP pages work perfectly fine if the JavaScript is blocked. Which is going to annoy users more -- a slight delay in a font's loading or an 8-second delay in the entire page's loading? I suspect that Google is trying to get most users to not block their JavaScript by making their access to "the Web" unbearable if they do it. (For other types of user punishment, see the other article on that site: https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp/ https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp... ) I put "the Web" in quotes, because a "standard" that requires you to load JavaScript from Google's servers, lets other sites serve your content while spoofing the URL, attempts to fundamentally change the way navigation on the entire Web works (portals) without input from other browsers, and that most people have to be coerced to use by reducing their traffic if they don't implement it, can't seriously be considered a real standard.
hadrien01 7y ago
That's because to create a valid AMP page you need to add an 8 seconds delay of blank page for users that disable Google's third-party js.
- psandersen 7y ago
  You actually have to make it deliberately slow if Google's js is disabled? that seems a little malicious...
  - hadrien01 7y ago
    Yup. This snippet adds a css animation to make the page white for 8s, and it's stopped by Google's JS or the browser's noscript (which you don't enable if you only block Google's JS and not the domain JS): https://amp.dev/fr/documentation/guides-and-tutorials/learn/spec/amp-boilerplate https://amp.dev/fr/documentation/guides-and-tutorials/learn/...
    - amirmasoudabdol 7y ago
      So, is there a way that I can block this tag somehow and drop it during the load time?
      - hadrien01 7y ago
        You can add a Stylus stylesheet enabled for the regex .[star]amp.[star] (replace [star] with the star symbol) that contains body{animation:none}, but I don't know if that's good for performance. Edit: Developers can also add that css in their amp style, and it seems to be accepted by the amp validator. AMP devs, you know what to do! ;)
        TazeTSchnitzel 7y ago
        Btw you can begin a line with two spaces for code formatting: .*amp.*
        chrismorgan 7y ago
        Go for this on all pages instead: html[\26a1] body, html[amp] body { animation: none; } (I wrote \26a1 because HN doesn’t allow the literal U+26A1 character.) That way it applies to all AMP pages, regardless of their URL, and doesn’t clobber any other pages (though I can’t actually imagine any genuine animation on a body element).

ryanpetrich 7y ago

That's likely due to amp-font, which will wait a certain amount of time for custom fonts to load before continuing with a fallback browser font (see: https://amp.dev/documentation/components/amp-font https://amp.dev/documentation/components/amp-font)

JoshMnem 7y ago
8 seconds is not a reasonable delay, and AMP pages work perfectly fine if the JavaScript is blocked. Which is going to annoy users more -- a slight delay in a font's loading or an 8-second delay in the entire page's loading? I suspect that Google is trying to get most users to not block their JavaScript by making their access to "the Web" unbearable if they do it. (For other types of user punishment, see the other article on that site: https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp/ https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp... ) I put "the Web" in quotes, because a "standard" that requires you to load JavaScript from Google's servers, lets other sites serve your content while spoofing the URL, attempts to fundamentally change the way navigation on the entire Web works (portals) without input from other browsers, and that most people have to be coerced to use by reducing their traffic if they don't implement it, can't seriously be considered a real standard.

hadrien01 7y ago

That's because to create a valid AMP page you need to add an 8 seconds delay of blank page for users that disable Google's third-party js.

psandersen 7y ago
You actually have to make it deliberately slow if Google's js is disabled? that seems a little malicious...
- hadrien01 7y ago
  Yup. This snippet adds a css animation to make the page white for 8s, and it's stopped by Google's JS or the browser's noscript (which you don't enable if you only block Google's JS and not the domain JS): https://amp.dev/fr/documentation/guides-and-tutorials/learn/spec/amp-boilerplate https://amp.dev/fr/documentation/guides-and-tutorials/learn/...
  - amirmasoudabdol 7y ago
    So, is there a way that I can block this tag somehow and drop it during the load time?
    - hadrien01 7y ago
      You can add a Stylus stylesheet enabled for the regex .[star]amp.[star] (replace [star] with the star symbol) that contains body{animation:none}, but I don't know if that's good for performance. Edit: Developers can also add that css in their amp style, and it seems to be accepted by the amp validator. AMP devs, you know what to do! ;)
      - TazeTSchnitzel 7y ago
        Btw you can begin a line with two spaces for code formatting: .*amp.*
      - chrismorgan 7y ago
        Go for this on all pages instead: html[\26a1] body, html[amp] body { animation: none; } (I wrote \26a1 because HN doesn’t allow the literal U+26A1 character.) That way it applies to all AMP pages, regardless of their URL, and doesn’t clobber any other pages (though I can’t actually imagine any genuine animation on a body element).