AirPods Pro Page Performance | Hacker News Reader

AirPods Pro Page Performance

foobartel.com

107 pointsgolfer69 comments

Curious: does anyone have an actual negative user experience on the website? I tested it on both my shotty WiFi (for reference, I’m unable to stream YouTube at 720p), and cellular (2 bars), and I found the page to load quickly and be reasonably responsive either way. In the thread I think twitter user Kenneth Auchenberg puts it best:

> Come on. Look at the experience and tell me you expected it to be 1kb? This is an interactive application, not a text document. [...] We have started to chase a false “unicorn” narrative of websites with expected app-like experiences, but sizes like text documents from the 2000s. Something doesn’t add up.

I avoid video like the plague on my phone to prevent excess data charges. But it's reasonable for a single page load to use more than 1% of my monthly limit?

I don't expect websites to being the kB range, but somewhere in the single digit megabytes seems to me like a reasonable limit

Maybe the problem Isn’t the page size. Maybe the problem is the artificial bandwidth scarcity being created by US cell providers.

They have no way to increase sales due to basically complete market saturation, so instead they find new ways to soak their existing customer base.

People always seem to forget how horrible things were when at&t was about to acquire T-Mobile. Had they not been forced to hand TM all that spectrum we’d still be paying $100/mo for 2GB of hard capped data.

> Maybe the problem is the artificial bandwidth scarcity being created by US cell providers.

This. When I (in France) can €15.99 a month for unlimited calls and texts to phones in France, the US, Canada, China (plus unlimited calls to fixed lines in 100 other countries, too) and a 100GB 4G data plan included, too, it seems crazy that US carriers charge so much. Sure, there are infrastrcuture differences in serving a country of more than 300 million spread out over a landmass so big rather than a small, more densely populated country like France, but it still seems out of control.

I've lived in both Japan and Canada, not the US. All the reasonable-priced plans in both countries had limits in the single digit GBs. Japan was better in that data over the limit just got capped at a very low speed, rather than paying extra. But in all three cases, a single page load unexpectedly using 65mB is outside reasonable.

Not sure about the GP but they might not be in the US. There are many parts of the world where bandwidth is scarce and expensive (w.r.t. average income). There’s a reason why both Android and Apple have “low data modes”

If you read the tread that follows on the original tweet: It seems that the Apple website respects this and returns a low data version on low bandwidth connections.

> Maybe the problem is the artificial bandwidth scarcity being created by US cell providers.

Spectrum is actually limited and cell towers aren't free.

Spectrum should’ve been a shared resource from the start. It’s scarce because there’s Massive amounts that have been purchased just to stifle competition and isn’t even in use.

Funny, for all those reasons 5g has moved to a shared model.

As an electrical engineer, I am honestly astounded by how well spectrum has been allocated/shared. It's one of the greatest miracles of the modern era that tens of thousands of antennas can simultaneously jam into a stadium and still have cell service, radio, TV, wifi, walkie talkies, and

Bandwidth is scarce because it's limited by physics. There's some minor inefficiencies, but it's generally pretty good, in terms of bits per second per Hertz.

> Maybe the problem Isn’t the page size. Maybe the problem is the artificial bandwidth scarcity

Is he using it wrong?

Mobile browser apps aren't doing anything in this arena; they could be doing a lot more. They could, for example, pause all requests upon hitting a configured limit for the page (like 1 MB) and then only continue downloading if you confirm. The ideal experience would be to confirm the total amount to download ahead of time, but that often isn't known.

Sounds like your limit is 6GB.

I understand that you don’t want a high phone bill, but in a lot of ways this limit is self-imposed.

You chose a small limit that fits a light user. Someone who doesn’t check webpages purely out of boredom or phone addiction will have no problem staying within a small data limit like this even if they occasionally visit a large, video-based marketing site once in a while.

Meanwhile, unlimited plans from various carriers in the United States are reasonably priced enough. $40/month from Visible (Verizon MVNO), for example.

If you read sibling comments, you'll see that I am not in the US, so most of your comment does not apply. A $40 plan in Canada might get me 1 GB if I was lucky (I can't actually find a plan that cheap that includes any data at all). The cheapest "unlimited" plans (which are 10gb then speed restricted) is about $80.

As to 6GB being a "small limit that fits a light user" - I use my data for work, tethering a couple hours every work day. I also browse/read probably an hour a day on data. I stay within the limit by avoiding YouTube, and now apparently apple websites.

I have not tested it, but I believe the site does not load 65.4Mb when on a phone (might consider bandwidth too)

It loads 29MB when loaded on simulated iPhone 6 screen size.

Yeah. I do routinely tether my laptop, I wonder if there is any recognition of that.

There is the "Save-Data" HTTP header[0] that your browser can send[1], but the AirPods page doesn't support it (not many websites do actually).

[0]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sa...

[1]: https://addons.mozilla.org/en-US/firefox/addon/save-data/

The scrolling is unpleasantly rough and unpredictable on Firefox for Android on my relatively recent phone. I could only successfully move to the next item half of the time or so.

FWIW, John Gruber posted about high CPU usage, the page being slow and scrolljacking just a few days ago. [1]

The page isn’t well designed (from the performance point of view) for whatever it’s meant to showcase.

People accuse Google of being hostile to Firefox and partial to Chrome on its properties, and here Apple seems to be doing the same to its own hardware and browsers (depending on the year and version).

[1]: https://daringfireball.net/linked/2019/10/28/airpods-pro-scr...

It seems to have some adaption to available bandwidth: as soon as I enable throttling in the browser dev tools, it stops loading all the videos and only loads images instead. Which is better than the experience unthrottled: fans spinning up, stuttery scrolling, ...

> We have started to chase a false “unicorn” narrative of websites with expected app-like experiences, but sizes like text documents from the 2000s. Something doesn’t add up.

May be it is just me, I dont expect or want a "App Like" experience. I want a page, and at best a slightly interactive, moderate animation added web page. Not Web App.

I dont see many around me wanted Web App either ( At least for AirPod Pro Page Purposes ). The chase to Web App, or expected to be web apps has been coming from developers and solely developers.

So the I think the chase App experience and Size from 2000s is a false narrative in itself.

I would have given it a pass grade if the Apple AirPro Page were loading smoothly, but it wasn't. The page didn't even scroll at 30fps with my quad core MacBook Pro, and I am longing for Webpage or even Apps to render at 120fps.

It's not that it looks slow, it does a very good job at loading fast what you see first, and preloading the rest before you see it. The problem is that is keeps preloading and preloading content even after you've reached the end of the page, just in case you need it.

It is heavy but looks fast because you pay for it in advance, and it looks and works great. Well, except for the bit about needing an iPhone or iPad to see the airpods in AR, I'm sure it could have been done in a more compatible way.

Edit: gave in and opened the AR bit on an iPad. it's just a non-interactive 3D model of the opened case with the earphones shown, that you can spin manually or image in your desk and spin yourself around it. Nothing actually interesting.

First off all, yes. On mobile(Note 10+) the first experience is lag when I start scrolling. Second, it has very little information and a bunch of scroll-points are just blank and a total waste of time, resulting in "oh, slightly further down, whops, too far".

Runs pretty terrible on my LG G7 ThinQ, scrolling is incredibly janky

Opened on a Moto G6 (but on a good enough wifi internet) and it loaded seemingly instantenously. No problem scrolling too.

Wholeheartedly agree with the quoted comment

Scrolling lags and stutters horribly on my MacBook Pro with Safari.

Okay, this is something that I was thinking about: Are megabytes and seconds really a good indicator for UX quality of a website?

Youtube is amazing, it starts playing the video before even the video title is rendered or any other part of the page is loaded. Who cares if it downloads who knows how many megabytes of JS or HTML before the DOM is ready?

On the other hand, after clicking on a tweet link Twitter would show me multiple loading indicator, load the main page then show me some more loading indicator and then show me the tweet text and after a while, I can see the images attached to the tweet. It is often the same for any other "Web App".

On Apple's case, the page actually becomes usable almost instantly. The page would first show me the title on the black background and then the airpods photo would fade in from the darkness and I would be able to scroll immediately. I would say, the experience is closer to Youtube than Twitter.

> Who cares if it downloads who knows how many megabytes of JS or HTML before the DOM is ready?

People with limited data caps. If it really did download 60 MB on my phone (it seems like it's somewhat adaptive, so it's quite likely Apple's web designers paid attention and it wouldn't), that'd be 2 % of my monthly data cap, for what's effectively a product page.

Fair enough but I think you can also appreciate that Apple's job here is to create the best user experience here for the potential buyer. It's not really a website that you have to visit or your children will starve.

They probably set the limits to accommodate best the iPhone users who are willing to spend 250$ on a non-essential device that will last about 2 years.

I mean, on desktop it spins up my laptop fans and doesn't even scroll smoothly, so they're clearly somewhat failing at UX. If I pretend-throttle in dev tools it gets better.

Then of course I'll probably never buy their product, so my experience isn't that important.

That's weird, b/c I'm on a 2011 macbook pro and it scrolls perfectly smoothly, when there are a LOT of websites on the internet right now where that is not the case (including twitter and facebook).

We have customers in industrial processes that care. Internet is questionable and they are not working overtime for bloated software.

I was thinking yesterday about how poor the YouTube UX is actually. Just a bunch of personal annoyances, nothing major. The speed and scalability are quite good though

On holiday, with our 100MB datarooming package outside Europe at USD13, watching this page would cost me over USD8?!

He didn’t include this in the main tweet, but in his deeper analysis he found on mobile they only send 2.4 mb of resources so, it would only be 2% of your 100 mb cap. Still a lot but you probably shouldn’t be shopping for apple products on that data budget.

What I wanted to say ( :) ): as a user there is no obvious link between cost and usage. (Vs phone when you are billed by the minute which is easier to "understand")

How can a user know that browsing a single page will cost him more than a whatsapp (video) call before doing it?

An extreme cynic could say: If you don't have a fast connection with dataplan for that, you're not rich enough to be the target market.

A lot of iOS and macOS software and websites are designed with assumption of having good infrastructure only affluent western world has.

i think the discussion on that page shows that « connection quality » shouldn’t be only based on bandwidth to determine which version of the page should be sent. Progressive downloading of compressed images has been invented for low bandwidth , but no technics exists yet to show a different webpage depending on your data plan.

There are a few comments in this thread about how the page is able to determine if you're on a low-bandwidth connection and sends pictures instead of videos.

If anyone knows how this is achieved, I'd love to follow some links.

Even at high bandwidth connections, I think they are always using images to power the animations. At lower bandwidth's, they might just be limiting how many frames come down.

For example, here are 3 frames of the hair flip:

https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5...

NYT did a similar scrolly article recently, but they used a video that was synced to scroll position: https://www.nytimes.com/interactive/2019/10/30/world/middlee...

One option is to download an asset and check how many bytes can be transferred in a given time. The classic speed test. You could do that with the first video file you want to load. If the download takes too long, abort the download and start loading the fallback image.

Another option is the Network Information API: https://developer.mozilla.org/en-US/docs/Web/API/Network_Inf... (Only supported by Chrome so far.)

The Save-Data request header: https://developers.google.com/web/fundamentals/performance/o...

And in the client, the NetInfo API: https://wicg.github.io/netinfo/

Apple has some amazing web people.

What really annoys me is that it’s 2019 and companies, even Apple, are still doing these unnerving “parallax” sites that force you to scroll riiight there to read a paragraph. Overscroll? You’ll have to scroll back.

How’s that a good experience?

On mobile it would be super easy to just have it snap in place: one flick goes to the next “slide.”

But no. Let’s treat websites as videos and the scroll as a way to manually play them.

To be fair, it is a nice site.

Those numbers definitely make it sound like it's not the ideal solution for the client. But from Apple's perspective, does anyone know how much more their servers are being taxed per-view? (Not sure if they have caching solutions to alleviate the load. That is a lot of packets to send, though.)

On my system it made 54 requests totaling 4.13MB of data. Artwork looks pretty good, like it's more than 4MB.

This machine doesn't have retina. Maybe for retina machines it loads larger artwork. Also there's a bunch of errors in the console including:

Error: WebGL: Disallowing antialiased backbuffers due to blacklisting.main.built.js:10:16167

Error: Cannot find module '@marcom/ac-polyfills/Array/prototype.forEach' ac-analytics.js:1:166

Strict-Transport-Security: The site specified a header that could not be parsed successfully

The errors don't seem to have affected anything, but maybe more stuff didn't load because of the errors.

Oh wait people are seeing video? Yeah I don't get any videos.

Apple, ( And Stripe ) used to be very good in their Web Page design and performance, but over the page few years things has gone downhill, along with their product and software quality. This cant be all a coincidence.

FWIW, I'm not able to replicate that - getting ~70-80 requests with 2.9MB transfer/4.8MB resources on Chrome.

The page does not behave the same with the developer tools open on the same window, the animation would not start etc. To replicate, open the developer tools in a sperate window.

can't replicate either with firefox 70 even with devtools off and all my blockers off, don't see any animations

We changed the URL from https://twitter.com/foobartel/status/1189135552949317632 to the blog post pointed to by a tweet in the thread.

I am planning to build a landing page for a small beverage product similar to this. Can anyone help me understand on how this web experience was implemented. Is it as simple as onScroll-> load next image ?

Also what is a recommended tool of 2019 to convert video to images ?

NYT also created a similar experience using video where video.currentTime was tied to scroll location: https://www.nytimes.com/interactive/2019/10/30/world/middlee...

I think there are some restrictions on video encoding parameters in order to make scrolling feel smooth which will increase the video size.

Surprisingly, yes, the video is exported as a sequence of JPEGs: https://jsbin.com/wodusuzeja/1/edit?js,output

As for the tool, ffmpeg seems to work well enough.

The page load doesn't seem to change with "Low Data Mode" enabled on Safari (seeing ~30MB).

Does anyone know if there is a way to detect that setting from within Safari? Would be cool to provide a low-fi version of a page if that was detected.

The `Save-Data` request header: https://developers.google.com/web/fundamentals/performance/o...

Interesting. That is a separate experimental low-data setting that's been around for a while in Chrome, but isn't supported by Safari [0]. Haven't run across it before, thanks!

For low data mode specifically, looks like you can easily get "allowsConstrainedNetworkAccess" from an iOS app [1], but don't see anything comparable available for Safari or Firefox.

[0] https://caniuse.com/#search=save-data [1] https://developer.apple.com/videos/play/wwdc2019/712/

Edit: typo

https://beta.trimread.com/articles/368

Trim strips it down to 12KB. And really it still conveys the message with just text just fine.

I don't get how people can get upset about a website.

Didn't read but sounds like web components without a bundling concept.

It's a "presentation" page. Who cares how many requests it makes. You'll only load it once, if that. Its only function is to present stuff in a way that'll make you buy it, which is something it accomplishes really well.

That's an interesting argument to make. So egregious design choices are fine for Apple "presentation" pages. Got it. Transferring one-tenth of a CD-ROM is fine because Apple is selling you something.

What other types of pages would you let Apple get away with that you might not let, say, Amazon, or Google, or Microsoft, or Facebook get away with?

> Transferring one-tenth of a CD-ROM is fine because Apple is selling you something.

Yes.

You can choose not to visit Apple.com if you don't like it?

I don't mind apple.com at all -- nothing against them. I just don't understand OP's argument.

I'm no expert at rendering HTML, but I wonder if HTML can be "optimized" so that some css rules and redundant divs can be "merged".

If that can be done server-side, it might reduce page weight. If it's not possible, well, I guess HTML should be removed from the face of the earth. The language has too much nonsense and ambiguity. The fact that html can now have its structure dynamically changed with javascript inserting string at random places means it will always let web developers build bloated websites like this.

I really don't know how to solve such problem. Usually the language will encourage the flawed usages it allows. A language must always put constraints to avoid unwanted usages. Either that or have browsers not display pages that are too large, by having a size limit or something of that fashion.

I think most of the HTML you get from large websites is gzipped. Gzip is pretty good at compressing things like three nested div tags. So I think if you tried to build this sort of optimizer, you'd find that a big chunk of the plaintext savings gets lost through reduced compression efficiency. But who knows how much? Maybe it could help in some cases. (Though then of course you'd have to figure out how not to break CSS selectors.)

Yeah, CSS selectors in JavaScript would probably be the main issue here, and figuring out if a selector path is used is a very difficult problem to solve.

I really wish we could just collectively move away from stupidly complex webpages and get back to JavaScript as optional for most pages. Once you eliminate JavaScript as a required component, you tend to design things more simply and page loads become lighter and faster.

IMO, JavaScript should only be required for applications (maps, games, perhaps video playback), with everything else using primarily HTML and CSS. That would kind of put me out of a job though, but I think it would make the internet better, and it would certainly help improve efforts to improve accessibility.

Reply on news.ycombinator.com