9 ms·
How we improved our website's performance
- dmitriid 6y agoSorry for being snarky, but the title should really be: Team at a Static Website Discovers that Dozens of Megabytes of Unnecessary Javascript Is a Bad Idea, Learns Nothing.
- dairylee 6y agoSo brave.
- stanislavb 6y agoSo HN.
- Daho0n 6y agoReddit v3.
- timbit42 6y agoWell, if they "discover" it, then they did "learn" something.
- franklyt 6y ago12 people for a static site seems like a huge team to me.
- tyingq 6y agoI'm pretty sure most of them would double as writers, or illustrators, etc. It's not a normal magazine per-se, since the articles are all technical ones. It also mentions many of the 12 are part-time and/or wear other hats.
- open-source-ux 6y agoIt's not a static site. It has a site-wide search. It lets users post comments on articles. It also has its own store selling books. And it serves ads too.
- franklyt 6y agoI’m not entirely sure you quite get the phrase, unless you feel that the definition of a “static site” is too permissive.
- nicbou 6y agoIt's still way too slow. It's a big page of text. It should load in an instant. In my browser, I see 1.75 MB sent over the wire and a 2.5 second load time. My big pages of text [1] need 105 kB and load in 0.4 seconds. Their compressed critical CSS is the same size as my entire uncompressed CSS file. They send more CSS bytes than I send bytes in total. If you want to make a content website fast, it's quite simple: send just the content. [1] https://allaboutberlin.com/guides/german-health-insurance https://allaboutberlin.com/guides/german-health-insurance
- CharlesW 6y ago> It should load in an instant. FWIW, it does load in an instant for me. (Lighthouse Performance = 99, Speed Index = 0.4s.)
- lwansbrough 6y agoMe too, but I'm loading it on a $3000 computer with 150Mbps/<10ms internet. Generally it's a good idea to only focus on the mobile score. :)
- esperent 6y agoIt also loads very fast (close to instantly) for me on a pretty old mobile (moto g6). Most websites are slow to load for me on this device. This one isn't.
- llacb47 6y agoYour website was way faster on mobile data, kudos.
- nicbou 6y agoI was thinking of the person reading about something on the U-Bahn on their way home.
- deleted 6y ago[deleted]
- lwansbrough 6y agoNice to see another company covering all these steps and validating the work we've done at my company. Unfortunately we weren't as successful, or at least, our results were not as fruitful. A good score for our site (tracker.gg) is 70 on mobile. Turns out it's pretty hard to optimize the bootstraping of an application that can render 20 different websites! Mobile devices spend 1200ms on the main thread. It will be interesting to see how these changes impact our page rank when Google starts incorporating Core Web Vitals into its algorithm this year.
- worldofmatthew 6y agoNot fantastic: https://www.websitecarbon.com/website/smashingmagazine-com-2021-01-smashingmag-performance-case-study/ https://www.websitecarbon.com/website/smashingmagazine-com-2...
- tolstoyswager 6y agoHow could this be improved?
- worldofmatthew 6y ago250KB: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe8c277d-8a1e-4454-9f82-850f4cf77f0c/06-perf.gif https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42... 249KB: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/795a6245-c924-423b-85ba-c65b74ce5803/07-perf.png https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_a... 180KB: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/87d143f5-ad36-4743-86a2-eee7ff439286/11-perf.png https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_a...
- systemvoltage 6y agoThis site is atrocious. About 4.5% of world's population has some level of color deficiency. How do people come up with this shit?
- brazzy 6y ago"Modern" web development is apparently a game of Jenga.
- CharlesW 6y agoI don't understand the point you're making. Mind elaborating?
- brazzy 6y agoThere is a ridiculous number of moving parts, stacked on top of each other, interacting in unforeseeable ways to allow you to shoot yourself in the foot, and absolutely nothing is straightforward. OK, that basically describes any kind of software development, but web seems so much worse than anything else. And I say that as someone doing mainly Java backend development who's learned to live with the AbstractProxyFactoryManagerFactory jokes.
- CharlesW 6y agoThanks! I appreciate the explanation.
- lwansbrough 6y agoIt certainly feels that way sometimes. But web is rather unique. There aren't any other platforms that demand you deliver an application for "a device" (specifications unknown!) in under 1 second.
- majewsky 6y agoWeb is indeed unique. No one else would consider a magazine article "an application".
- Frost1x 6y agoThere's such a thing as an unreasonable, unrealistic, or downright stupid demand as well. What you often see is a house of cards hacked together to try and support such demands on the web. Sending reasonably well visually formated text is definitely a reasonable demand though.
- olliepop 6y agokey takeaways: - fonts can be unnecessarily huge - monolithic js = slow. Chunk at build time. - content-visibility: auto for lazy rendering
- wackget 6y agoChunking JS just leads to massive latency issues as the client is forced to download dozens (or hundreds) of "efficiently" chunked JS files. The e-commerce platform Magento 2 is packed with this kind of bullshit and is part of the reason my colleagues and I abandoned it for our clients' large e-commerce websites: https://magento.stackexchange.com/questions/104583/magento-2-heavy-loading-time-too-many-js-files https://magento.stackexchange.com/questions/104583/magento-2... https://old.reddit.com/r/Magento/comments/bli7vz/seriously_why_does_magento_2_load_almost_200/ https://old.reddit.com/r/Magento/comments/bli7vz/seriously_w... https://magento.stackexchange.com/questions/277544/page-loads-take-around-10-minutes-due-to-requirejs https://magento.stackexchange.com/questions/277544/page-load... https://magento.stackexchange.com/questions/270553/is-it-possible-to-drastically-reduce-the-number-of-js-files-being-served-from-ma https://magento.stackexchange.com/questions/270553/is-it-pos...
- sumoboy 6y agoMagento 2 sucks, but clients are stupid and think that 10+ page loads are ok.
- brailsafe 6y agoIt seems though that in your example, all of the files being loaded are necessary on first load, and the total quantity is huge. Would the problems still be present if less JavaScript was depended upon on first load?
- seanwilson 6y ago> Around the same time we switched from an (outdated) manually created critical CSS file to an automated system that was generating critical CSS for every template — homepage, article, product page, event, job board, and so on — and inline critical CSS during the build time. Yet we didn’t really realize how much heavier the automatically generated critical CSS was. Is reducing the total amount of CSS per page so you don't have to calculate the critical CSS at all an option? To throw my own page into the ring, here's a non-trivial product website of mine where the homepage is 0.3MB total over the wire and renders in 0.4 seconds for me (includes custom fonts, payments, analytics, large screenshot and real-time chat widget): https://www.checkbot.io/ https://www.checkbot.io/ The major tricks I'm using is keeping the website CSS small (CSS for homepage + rest of site gzips to less than 8KB), inlining all CSS, rendering default fonts before the custom font has loaded, SVG for all images (this saves a ton), and not using JavaScript for content (which blocks rendering). The screenshot in the header is in SVG format and inlined directly into the page along with the CSS, so the moment the HTML arrives the browser can display all above the fold content. Logos are another good one for the SVG + inline treatment.
- ramraj07 6y agoThat's one of the fastest loading modern pages I've ever been to. Kudos!
- seanwilson 6y agoThanks! I wouldn't mind seeing a list of fast loading pages like this that have images + functionality that aren't mostly text. There's only so much you can do if your design requires large photos or a video in the header though.
- markdown 6y agoThe problem with inlining all CSS is serving all the global styles all over again with every page load. You're gaining a great first impression at the cost of a poorer experience for every subsequent page load. Have you considered inlining CSS in the head (as you've done), but then serving it again with a linked css file just before </body>. Then, with subsequent page loads (of the current or other pages), you don't have to inline any CSS anymore. Of course this requires that you serve two versions of all your pages, one for if that page is a first hit, and another to be served to users who already have your CSS cached.
- joegahona 6y agoPage Speed Insights shows this site scoring a poor 39/100.
- hizxy 6y agoSuch an odd design for the site.
- throwaway189262 6y agoSnarky TLDR: half the JS load time was ad scripts. IMO Most of the performance increase was around specifying image heights, using facades for third party embeds, and optimizing around ad and analytics scripts. Nice write up but not a big surprise to anyone that blocks analytics tracking, ads, and third party embeds.
- brainzap 6y agoThe layout jumps