
AirPods Pro Page Performance - golfer
https://foobartel.com/articles/airpods-pro-page-performance
======
jakear
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.

~~~
SECProto
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

~~~
tw04
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.

~~~
azinman2
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”

~~~
Xylakant
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.

------
mrtksn
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.

~~~
detaro
> _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.

~~~
mrtksn
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.

~~~
detaro
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.

~~~
ambicapter
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).

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

~~~
haburka
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.

~~~
IdontRememberIt
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?

------
izacus
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.

~~~
bsaul
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.

------
reaperducer
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.

~~~
oplav
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...](https://www.apple.com/105/media/us/airpods-
pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/02-head-bob-
turn/0021.jpg)

[https://www.apple.com/105/media/us/airpods-
pro/2019/1299e2f5...](https://www.apple.com/105/media/us/airpods-
pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/02-head-bob-
turn/0022.jpg)

[https://www.apple.com/105/media/us/airpods-
pro/2019/1299e2f5...](https://www.apple.com/105/media/us/airpods-
pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/02-head-bob-
turn/0023.jpg)

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...](https://www.nytimes.com/interactive/2019/10/30/world/middleeast/syria-
turkey-maps.html)

------
why-oh-why
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.

------
rauchp
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.)

------
droithomme
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.

------
ksec
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.

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

~~~
mrtksn
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.

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

------
dang
We changed the URL from
[https://twitter.com/foobartel/status/1189135552949317632](https://twitter.com/foobartel/status/1189135552949317632)
to the blog post pointed to by a tweet in the thread.

------
gandutraveler
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 ?

~~~
oplav
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...](https://www.nytimes.com/interactive/2019/10/30/world/middleeast/syria-
turkey-maps.html)

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

------
uxamanda
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.

~~~
paulirish
The `Save-Data` request header:
[https://developers.google.com/web/fundamentals/performance/o...](https://developers.google.com/web/fundamentals/performance/optimizing-
content-efficiency/save-data)

~~~
uxamanda
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](https://caniuse.com/#search=save-
data) [1]
[https://developer.apple.com/videos/play/wwdc2019/712/](https://developer.apple.com/videos/play/wwdc2019/712/)

Edit: typo

------
ErikAugust
[https://beta.trimread.com/articles/368](https://beta.trimread.com/articles/368)

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

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

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

------
m0zg
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.

~~~
woodgrainz
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?

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

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

------
jokoon
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.

~~~
oconnor663
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.)

~~~
beatgammit
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.

