"This post is the third installment of our five-part series on building GitHub’s new homepage" Imagine the ridiculous amount of money that has to have been spent on the spinning globe thing. Enough not to have a random blog post talking about, it but a five-part SERIES!!! The frontpage eats up almost 90% CPU on firefox on my computer[0] and not as much, but still high in chrome. Maybe that has something to do with gr…
> As an aside, I understand this is GitHub's primary marketing vehicle to really Impress and Wow newcomers to the site The thing is, who are these newcomers? Who ever ends up on GitHub's homepage? What company is gonna take this globe thingy into account when deciding to use GitHub or not? This looks like such a waste of money/time.
Making our new homepage fast and performant
81–90 of 144 posts
Re: Making our new homepage fast and performant
#82I was wondering where the metrics in this graphic are coming from? Great collection of tips, btw. https://github.blog/wp-content/uploads/2021/01/106009495-af8...
Guessing Chrome's dev tools performance monitor. The metric names are the same: https://i.stack.imgur.com/vAIxk.png Edit: Since it's a little confusing how to find it, I made this: https://i.imgur.com/sQpHFoU.png
Re: Making our new homepage fast and performant
#83Earlier quoted context omitted.
And hopefully, some of those extra analytics, animations, and experiences add value. One great thing about high performance on the fundamentals is that it let’s us move to a higher level of abstraction.
It's nice when performance improvements can be abstracted away or optimized in the browser. HTTP2/3 are good examples. Something like lazy loading images could be implemented in the browser, but instead we each spend time devising our own lazy loading hacks. Vendors add W3C specs like IntersectionObserver to an ever growing list of web API's that must overwhelm new comers. I guess it's nice that we have complete cont…
intersectionobserver still has a ton of use cases where it's massively faster than continuously monitoring the scroll event (e.g. infinite scrolling)
Re: Making our new homepage fast and performant
#84I don't understand the fad in making content flop around the page as one scrolls. At the very least, it would be courteous of them to respect the prefers-reduced-motion media query. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
It's one of the few truly bad design paradigms made popular by Apple in recent years. Their site has always been full of it.
Oh I have vivid memories.
Mac Pro Trashcan 2013. If I remember correctly it was the first time Apple turns to using lots of animations for their product page. Before that Apple's product page were fast, beautiful and elegant.
The TrashCan webpage was using lots of animations to show case their cant innovate anymore my ass. Your MacBook Fan would spin up simply by scrolling through the page as if Apple were nagging you its time to upgrade your Mac.
I think they learned their lesson and tune down those animation abit with later products and pay more attention to performance. But since then it has spread across the industry like plague. You dont get fired for using and designing with flashy animation because Apple are doing it.
Re: Making our new homepage fast and performant
#85Re: Making our new homepage fast and performant
#86I don't understand the fad in making content flop around the page as one scrolls. At the very least, it would be courteous of them to respect the prefers-reduced-motion media query. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
I find them quite annoying. I'm pretty sure the only people enjoying these kind of animations are the designers themselves. Most people don't go to a website to have an "experience". They just want to find some information as fast and easily as possible.
Re: Making our new homepage fast and performant
#87Talking about nice looking homepages that load fast the first one that came to mind is Stripe's. It starts with 952.83 KB / 364 KB transferred and goes to 1.70 MB / 482.03 KB transferred on final load (once you reach the bottom of the page) Github's starts with 3.10 MB / 969.27 KB transferred and goes to 6.64 MB / 4.54 MB transferred Yeah, Github's homepage has more content, it's true... but what I find really amazin…
Re: Making our new homepage fast and performant
#88This JPGs-in-a-SVG thing is grotesque, an example of how web development often seems like a Jenga tower of hacks. Why not find minimally-perceptible pixel changes to the image that allow it to compress better as PNG?
PNG is lossless while JPG is lossy so I'm not sure how you'd want to do this.
That said, I have no clue if such techniques would result in a smaller image than this approach.