I mean god damn stripe has some great front-end engineers.
It looks modern yet very readable thanks to great typography. Loads fast. Fully usable on mobile as well. E.g. Gets a hamburger menu on Mobile. The featured client animation is simpler. The spinning globe icon is replaced by a static image. They have absolutely top notch front end engineering talent.
This is in huge contrast to the current trend where they want to hijack browser's scrolling behavior for absolutely no gain to the end user.
There are 3MB of images on the page; the problem seems to be the high-res map, which weights in at 1.5MB. This image is 2290x798 and it's in an element of 1145x399. I've halved the resolution and converted it to a JPEG, now it's 0.2MB. To make it even easier for you to show the designers I've uploaded it here: http://imgur.com/XcGllGz.
EDIT: it's worse, almost every image in the carousel is double-sized and unoptimized.
Otherwise it's pretty.
Ok, that explains the huge PNGs; can't they be rendered as-is (i.e. include part of the background in the foreground picture?
> first paint is still under 3s
That's really slow. The jankey animation (yay Apple) and rasterized image rendering is horrible; it's a throwback to the late-90s internet.
> the audience for this page is 90% software developers, > with powerful machines and high bandwidth.
I.e. me, and I find it horribly slow. I'm using a year old rMBP and I have a pretty good internet connection (20MB/s, 10x what I could get in the UK and I actually get pretty close to the max all the time; for a comparison: http://www.webanalyticsworld.net/2014/08/internet-speed-gap-...).
Sure, I'd love fiber, but that's not exactly broadly available (though if I could move my house 1km to the east I'd have it).
This will bring the color palette down to less than 256, some images will work better than others, in this case I didn't notice a difference and the size went from 434KB to 133KB in size using the batch file I normally use for this[1]... I haven't checked recently to see if there are newer tools/versions for use, I keep several utils inside my dropbox for windows usage.
Edit: he commented below saying it was IE11 with the IE9 emulation enabled.
1. Forced waiting for transitions everywhere. For a page I'll probably only ever visit once. You want to ease-in to things. I get it. But you shouldn't hide them. If you want a dithering transition as you scroll, do that. Don't fade-in. There's almost never an excuse for that.
2. What's the point of the "meteor"? To look cool? Is there any point at all to the businesses scrolling in it? Because I don't know how many there are. There's no link to view them all. There's no points to click to go back a pin and re-read one that caught my eye.
I don't know. It just feels like people are obsessed with having the coolest Flash splash screens again.
Maybe there is a way that I just couldnt figure out. Why is it folks would never today implement a 6 or 7 step wizard with a bunch of next buttons. but its considered a good idea to do so with scrolling is involved...
would also like to see a big down arrow or some kind of standard indicator when a desktop page has this scroll behavoir... i was waiting a the starting screen for quite a while and then clicked on the 4 little icons before i figured out i just had to scroll down forever.
I do note that Stripe's page isn't exhibiting this issue, but don't see anything that appears to be a workaround or otherwise unconventional.
Anyone have any color on this? Is this a font-specific rendering issue, e.g. so Stripe's fonts don't exhibit this problem? Or perhaps the presence of a background image on the li tags forces the compositor to behave? TIA!
Either move the text off to a separate sister div, or move the animation to a div with a higher z-index. Or you can set -webkit-font-smoothing: anti-aliased - that will set all of the text to same antialiasing settings as GPU accelerated text.
Then it occurred to me that we do the same thing on our home page: we have animation which makes people (stupid like me) wait a little thinking that we will tell them more info - even that info is available only if you scroll down. Stupid me x 2.
But, it is very nice and well formatted. 10/10 would refresh again.
The whole page is slow to load, solutionyogi must benefit from different optimisations, but on an ipad it seems to get the worse of both worlds.
Even after the page is loaded, the sections are mostly blank until the animations kick in.
Their features page [1] in comparison has a similar concept but is much clearer, simpler and very fast to load and navigate.