AMP Is What HTML Should Have Been
kartick-log.blogspot.com
kartick-log.blogspot.com
The blog post isn't wrong, but it's also not right. Today's web isn't slow because of HTML's features, shortcomings, or other properties; it's slow because of excessive reliance on client-side scripting, including client-side DOM manipulation, ad serving, tracking, and A/B testing. Turning off Javascript vastly improves pageloads, and did -- once upon a time nearly 10 years ago -- improve UX, but these days more sites break without Javascript than those that don't.
AMP can impose constraints because it's a corporate effort to re-frame content in a way that provides centralized ad serving, tracking, and the like. It gives the content publishers the same tools (ads, tracking) they have to provide themselves with on the open web, while simultaneously benefiting those like Google who will put their own viewport and context around that content. It's not that much different from when an individual wants to publish on Medium or Tumblr, so the platform provides the author with a box to put text in, a dashboard, view tracking, and stuff the author wants, while they get to host interesting content with which to attract an audience for ads. It's a win-win, symbiotic relationship, while on the self-hosted web, every publisher is on their own.
This isn't about HTML vs AMP at all. It's about business models, which are given in AMP, but left as an exercise for the publisher on the open web.
Sure, disabling JavaScript will improve pageloads. However, are you suggesting clicking a link and waiting for an entirely new page to load is good UX?
Good UX is instantaneous feedback, client-side code is a requirement... Unless you want some kind of enormous super-spec that is supposed to encompass anything anyone could ever wish to express in pure markup. In which case, good luck getting that supported and rendering quickly.
The whole point of JavaScript (or any client side code, including mobile apps) is that it vastly improves UX.
If your site is a traditional content-heavy website, you need to load a full page of content with both ways, it doesn't matter that much if you are loading the skeleton around it or not, and there is way less chance of accidentally breaking something. I don't need instantaneous feedback that you have begun to squeeze content through the pipe (if I'm on mobile the content will take time to load anyways, on a wired connection you can deliver a full page quickly enough)
Sure, real "apps" are a different thing, but they are not the ones people typically complain about being overloaded with scripts.
It's true that some markup framing the content is duplicated; incidentally in the olden days we used <frame> tags to separate a site-global navigation from the page-specific content, but that went out of style -- it had URL addressability drawbacks and no convention ever developed to fix it.
But ultimately the client needs to render the View, while the server (at some point presumably) originates the Model. Somehow you have to turn the M into the V, and there have been hundreds of different takes over the last couple decades on how exactly to accomplish this. Classically, every HTML page was the complete view, but then the DOM API was introduced to allow this view to be mutated imperatively after the View has been rendered.
The main innovation of client-side scripting was Ajax, which was explicitly about lazy- and/or continuous loading of small snippets of innercontent, like a single Tweet or a couple Google Maps tiles. This emboldened some to push more and more state onto the client, and now we have entire frameworks that do MVC or MVVM in (client-side) Javascript. If we had a way besides the DOM API to morph one state of the View to another; say, a declarative HTML-diff, or, something like XSLT or JSON-patch, I'm sure people would take it. If this sounds a lot like Virtual DOM, it's because they solve the same problem.
Maybe they aren't saying that, but sure I'll bite. Why wouldn't it be good UX? I would challenge anyone to argue that non-JS/static UIs are anything but simple, intuitive and easily teachable. I have had the displeasure of repeatedly having to explain to family/relatives, how to use these "modern" UIs to the point where I'm fairly convinced that none of them have any utility, as far as UX is concerned.
It's not to say there isn't a place for SPAs but I would argue many of these would be better suited to being full fledged desktop apps instead (better performance and snative integration).
I fully expect that when I type the first few digits of my credit card number that the site knows precisely which card provider I'm supplying and updates the UI (highlight the card type) accordingly and immediately update the security code field to request my 3-digit MasterCard CCV vs. a 4-digit AMEX CID.
To be clear, I'm not suggesting code needs to run on a client. One day when we all have fast enough connections (with minimal latency), including on mobile network, then perhaps all the code can run server-side and we just be streamed the output (video) - which again, updates in real-time!
However, living in the real world as it stands today, client-side scripting is a fantastic solution to a real-world problem i.e. latency and bandwidth constraints, and real-time responsive UIs.
Heh, tell that to someone in, say, Australia.
If done right there is not much wasted and there is not much to wait for as most of the things which are not new already are cached. Most of the time such slowness results from unnecessary bloat or slow code on the server side.
> The whole point of JavaScript (or any client side code, including mobile apps) is that it vastly improves UX.
In practice it worsens UX more often than not.
I contribute to this goal by only allowing native applications on my devices, unless I don't have any good alternative to switch to.
No disagreement about excessive scripting, ad serving and other bloat. But those are orthogonal to my points. Are there some things in AMP that would make HTML faster or improve the UX? If so, let's evolve HTML based on what we learnt.
So give me plain old HTML any day. It renders fast, scrolling is predictable and smooth, and the URL is right there if you want to share.
This. I want the user to know they are on my site and be able to share the URL when they want to. Google News, admittedly the only implementation of AMP I've seen so far, fails in making visible that basic unit of the Internet -- the URL.
The worst UX sin though is when your finger moves ever slightly to the side, which is incredibly common when holding your phone. Most of the time Safari ignores that input as it didn't meet the threshold to go back/forward. AMP pages, however, seem to implement a canvas or something and wind up being really twitchy on left/right input. Not to actually go back/forward mind you, but to do something completely unexpected - reinterpreting left/right swipes to be navigating through entirely different articles. This is something one only discovers by accident, and something I'm not sure very many people would find utility in. It's another case where Google is trying to add their own entirely non-standard view of how UI should work rather than following the conventions of the platform they are on (ahem Material Design iOS apps).
And, just because they hadn't had enough of messing up typical reading UX, Google News AMP pages add a large fixed header so they could show you those many pages you can scroll through with little pagination dots. Sadly, this prevents Safari's own URL header from collapsing as you scroll down, meaning maybe 20% of your view is covered by interface instead of 5%. My assumption is that Google News decided that it was better for users to have the opportunity to view another article + their ads rather than providing a quality reading experience on the article the user actually wanted to read.
TL;DR: whatever AMP's tech offers is more than countered by the pointlessly awful implementation by Google News. If you're in an unfortunately enough situation to have to tap on an AMP page, the best possible outcome is to immediately go into Safari Reader View so your screen is 100% content and your every tiny input isn't likely to take you someplace you do not want to go.
But yes, I use the Samsung browser because of the performance and feature benefits, and my complaints may not be applicable to chrome.
It says, like Google's Accelerated Mobile Pages (AMP) project, HTML should (1) require each img tag have the height and width specified, and (2) allow only the CSS filters that can be GPU-accelerated.
These are nice and all, but the problem is this. Why stop there? Why not forbid illegible fonts, text columns that are too wide or too narrow, green text on a red background, and assortment of other "poor UX"? Why not enforce that no page exceed the byte length of a Russian novel? (Now that's a law I can get behind [http://idlewords.com/talks/website_obesity.htm].)
HTML could be better, but like all open-source projects, I'm amazed how good it is, and even more so how much better it is than any alternative offered for money.
1. HTML5, without syntax errors. UTF-8 only.
2. IMG and EMBED tags must have size info.
3. All CSS, Javascript, and font files must have subresource integrity hashes. The browser can cache anything with subresource integrity, even across site boundaries, since the hash guarantees the content value. This will speed up asset loading. No more loading "jquery.js" over and over.
4. All off-site content (ads, trackers, etc.) must go in iframes. All iframes must have a height and width, so rendering can proceed without waiting for them. This eliminates delays caused by slow ad servers. Iframe content is requested at a lower priority than main page content.
5. Rendering doesn't start until the entire main page is loaded, or a <page> tag is encountered for really long pages. Almost everybody has enough bandwidth now that we don't really need to frantically re-render as pages come in.
These guys might be a good first step: https://indieweb.org/
(Disclaimer: I work on one of these libraries.)
The Amp guys make the claim in one of their videos[1] that the GPU can do nothing if a page-layout event is triggered. Amp is geared to minimizing the number of times this has to happen, by demanding that elements are size-bounded for example; the same reason for the CSS GPU-acceleration limits.
Hopefully new render engines will address this, but having them out in the wild is a ways off even if they were ready today. Amp seems like a pretty reasonable stop gap. Although I find their demo site[2] not a perfect experience with all of my normal Firefox plugins. Another comment in that video mentioned above is that Amp sites should be faster without an ad blocker.
That's a Blink restriction, not an inherent one. It's also an onerous restriction. Having these footguns is a bad way to treat Web developers.
> Would be interested in taking a look at your project if you'd offer a link. :-)
WebRender [1], part of Servo.
This is a problem with all major news sites. CNN, NBC, FOX all do this to varying degrees. The main page is static, subsections are injected via async requests. It's annoying on a desktop (because you cant necessarily go back to where you were) and infuriating on a phone. I can't imagine what it's like for people on a limited data plan.
I also find it annoying when I see multiple links I want to read, but it's not obvious if I click on one, read it and go back that the other is now replaced.
The evolution of technology always starts with ramification of features, and mature with a much smaller set of them, which have been proven to be really useful and efficient.
At the beginning, no one really know that html should just be like AMP. So we tried, and it largely worked. Use this to prove that html should start like AMP is like to claim the cave man 10000 years ago should use internet to communicate, which is plain irrational.
It's like banning all screws because you've got a kickass shiny hammer.
The fact is that there are many barriers between web apps and native-level performance. AMP's focus on delivering good performance on mobile is to be applauded, but you don't do it by trapping software in the past.
(Context: Previous member of Firefox and Chrome teams)
Agreed that AMP is the wrong approach. But I think it's not that difficult in terms of programmer-months to fix the rasterization problems. You just need the right design as opposed to '90s style imperative APIs.
Of course, all this is in the context of features that make sense to GPU-accelerate, like CSS filters.
Likewise, HTTP2 languished for a long time, but took off quickly once SPDY was implemented in Chrome + Safari + Firefox.
As I was told, the best way to spur a standards body into action is to threaten to make them irrelevant.
I run a pretty tight technical ship, so that non-cached JS ends up being more than half the page weight. I don't _really_ care about the additional ~40kb, but I guess I'm not seeing any advantages yet.
AMP != An HTML-subset. If it were, that'd be fine, and I'd basically agree with the article. But AMP seems to also require me using some strange JS from an ad company, which I'm extremely skeptical of.
On one hand, you have a faster loading site/page which is good for users and helps with SEO ranking, but as a developer, you lose some flexibility in terms of specifying your layout for multiple cases.
I guess if the majority of your traffic is mobile-based in areas with typically slower internet connections, then it makes more sense to utilize something like AMP. But if that is not the case, it seems like you have to do twice the work for not much gain...
There is no reason why a normal website can't be as fast or faster than an AMP one, but AMP gives the framework to get organisations that otherwise wouldn't care enough to do so.
Besides, Google has announced that search rankings will be affected by speed, not by what library you use. So, if your site is already optimal (doesn't benefit from AMP) or you want to use some competing project that also does a great job, you won't be penalised.
I don't see the walled garden argument here.
I had jumped to some conclusions; if I am not mistaken, CSS needs to be written inline for AMP and so I assumed that the spec (based on the author's post) would require that the image be specified in exact pixels.
HTML is what it is and it's not going anywhere. AMP is not a solution to anything, because the whole world isn't going to adopt it.
A real solution is to write your HTML rendering engine to eliminate behaviors you don't like. If you don't want repainting/reflowing of the page when the img dimensions aren't known then don't start rendering until you know them.
But browser vendors aren't going to do that because users DO prefer reflow/repaint over waiting for the page to load. So this is a silly argument.
Alas, what we have is a Frankenstein stack, which when one does the magic incantations of HTML and CSS, maybe just maybe if the browser and corresponding version are the right ones, those transformations will land on the GPU.
HTML + knockout is a lot like xaml, but a lot simpler.
Stricter browser engines would punish devs more, to avoid punishing devs with AMP?
I'm not a big fan of AMP, but I'm not sure if intentionally worsening browsers for unliked but valid markup would be better. Users will leave a browser doing so.
The web needs interactivity and without a powerful open platform it's going to be 2 or 3 incompatible, non-free silos. No links & nothing too abnormal please – not one piece if information outside of some AOL/MS/Apple/Google-controlled curated marketplace.
It's still ideal to put the sizes inline if you can, though.
Along with crypto and improved compression, HTTP2 offers multiplexing. HTTP also has historically offered range requests, where you can request a small subrange of a file.
This means that a browser could collect image URLs when doing its initial parse of the page (pretty easy, since you want a small, simple page for AMP anyway) and then issue a set of requests for the headers of all the images - for PNG, at least, you know the header will be of known, relatively small size. The header requests can all be multiplexed by HTTP2, which means that you will be able to get all the headers before you start getting the full bodies of the images. You won't have to download the headers or images twice since you can download the rest of the image bodies with another range request. Range requests could also be cached under this scenario.
This optimization can be implemented (in theory) by every browser engine and doesn't require changes to developers' content or web servers. And it would be an improvement that is web-wide instead of just focused on AMP.
Not having to make an extra HTTP request is the only way to get good performance in this case.
(I still think AMP is a good idea, but side-effects need to be considered at scale)
An ideal solution for simple pages would be to run a build tool before deployment that adds width/height attributes to all your image tags by checking the files. You could probably do this pretty easily before minification.
No, you should not have to specify sizes of every span in existence of insert manual line breaks. That makes the pages just fall to render properly on current multitude of screen sizes.
edit Google cache isn't loading everything - at least to my knowledge.
edit 2 Yay web-archive to the rescue!
http://web.archive.org/web/20160811220337/https://www.amppro...
It's by design that our site is only available via HTTPS. Is there a good reason for why you can't consume the HTTPS version?
edit All I get is "ERR_SSL_PROTOCOL_ERROR" - I'm pretty sure I tested this link out at work but I will again on Monday to verify it happens there (currently I'm tethered as well as vpn'd to PIA and I don't think my provider T-Mobile is doing anything to block this one ssl)
AMP is an optimization with narrow application focus than HTML has that introduces a number of things (including coupling, limitations on technologies other than HTML, etc.) that are undesirable in general for the broad role HTML has, but tolerable trade-offs for the focus of AMP.
They were throwing jabs at native applications while at the other tracks everyone was talking about native Android applications, how to run native Android applications on ChromeOS and how to stream native Android applications.
I can't tell what's worse: this post, or the fact that people are responding to it.
I hate this idea. What if I just want the photo to be there at its natural size? Why should I keep updating my CSS when I change the photo?
They're talking about the HTML image attributes so layout placeholders can be rendered, not CSS. The original height and width should be specified and styling can optionally be applied in CSS.
The question applies to either.
and perfectionist tears
it echoes, echoes:
worse is better