Live data from Hacker News

Making our new homepage fast and performant

github.blog

81–90 of 144 posts

Re: Making our new homepage fast and performant

#81
post #77

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

Gotta find something for hundreds of engineers and product people to do when you overhire, like most tech companies.

Re: Making our new homepage fast and performant

#82
post #7
post #5

I 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

Wow thank you, that's very helpful. Never knew about that feature.

Re: Making our new homepage fast and performant

#83

Earlier 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…

lazy loading images are implemented in the browser, you just need to add the loading="lazy" attribute to your img tag

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

#84
post #67

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

>made popular by Apple in recent years.

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

#86
post #34

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

I dont think designers like moving text either, I think they are told to make it happen, and they do.

Re: Making our new homepage fast and performant

#87

Talking 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…

Stripe is the example I always use at work of a top shelf home page.

Re: Making our new homepage fast and performant

#88
post #52

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

There are a few lossy transformations you can make to an image before saving it as a PNG that result in a lossy compressed PNG that's smaller than the image otherwise would be. This idea was used a ton with GIFs, it's less popular with PNGs, though. pngquant is one tool I know of that does this.

That said, I have no clue if such techniques would result in a smaller image than this approach.

Re: Making our new homepage fast and performant

#89
if they want it to be fast and performant they should check out source hut for inspiration. I find all the animation and interactions jarring persoally. Maybe they should just ditch it all - that should speed things up! Not having progress bars on PRs and issues could maybe be something they look at next.
Post reply on HN