3 ms·

I have a hard time understanding why it is justifiable to use 1.8mb of javascript to produce a static website. The author's site is plain text, stylized and op

by frfl 9y ago

I have a hard time understanding why it is justifiable to use 1.8mb of javascript to produce a static website. The author's site is plain text, stylized and opens a modal (with animation) when you click on a link. It looks great, but I don't see why 1.8mb worth javascript is required to produce this (of which there a good chance <5% is actual code for the site's functionality/styling). When it comes down to it, what you should be optimizing for is efficiency of delivering information to your users. Animations don't help there in cases like this. And I doubt the javascript is helping either. EDIT: 1.8mb figure is from the bundle.js file from the author's live website

AboutTheWhisles 9y ago
Yeah, it's pretty easy to get a 10x increase when you are stripping out nonsense.
z3t4 9y ago
JavaScript doesn't necessary have to slow down the page. I recently optimized a full blown web app with basically just JavaScript to fully load in less then 200 ms.
- avhon1 9y ago
  > JavaScript doesn't necessary have to slow down the page. If I have to wait for it to download, it sure will slow down the page. > [...] fully load in less then 200 ms On how fast of a connection? It's one thing for you web app to load quickly on my university's (very nice) network, but quite another for it to work on my apartment's fritzy, bussy wifi, or at the hackerspace when 10+ other people are sharing 2MB/s.
  - mlok 9y ago
    Firefox Dev Tools has a "Responsive Mode" (see top right icons) available that offers to throttle the network speed. This might be a good way to benchmark loading times.
    - z3t4 9y ago
      I picked "regular 3d" in firefox and loading time went up 10x. So it seems size does matter. But 2s is not that bad, it's better then some "native" apps.
jonluca 9y ago
The reason why there was such a small effort on optimization in the first place is that this isn't meant to be a revenue generating site, or one that focuses on "ultimate performance" - it's more of just a personal, online resume. Any time I needed something new, I'd just throw it in, because "it worked and looked good on my machine". If I found a cool js snippet that needed an entire library, I'd just throw it in. An argument could be made that that's part of what's wrong with modern webdev, and I wouldn't necessarily disagree, but this wasn't trying to be the fastest or most efficient site out there. I think there's a pretty distinct difference between making a scalable, well optimized webapp and just making a personal site as an online resume. This was me documenting my updates - I just revised the article with a few more updates, and the total site size is 250kb, 99kb without images. This still isn't great, but total page speed is pretty quick (js execution takes ~70ms on my 2016 MBP). Thanks for the feedback!
- frfl 9y ago
  I know JavaScript is cool and I'm not saying it's not a good idea to try things out and experiment -- it is! But I personally feel an individuals resume/personal site isn't what should stand out. Make it a true static site, lose the bloated JavaScript, add some basic styling and it will do what this site is doing -- maybe do a little more as people will not have to click on things, wait, read, close, click, read, etc. Let your projects speak for your skill set, not a fancy resume. All the best.

by frfl 9y ago

AboutTheWhisles 9y ago

Yeah, it's pretty easy to get a 10x increase when you are stripping out nonsense.

z3t4 9y ago

JavaScript doesn't necessary have to slow down the page. I recently optimized a full blown web app with basically just JavaScript to fully load in less then 200 ms.

avhon1 9y ago
> JavaScript doesn't necessary have to slow down the page. If I have to wait for it to download, it sure will slow down the page. > [...] fully load in less then 200 ms On how fast of a connection? It's one thing for you web app to load quickly on my university's (very nice) network, but quite another for it to work on my apartment's fritzy, bussy wifi, or at the hackerspace when 10+ other people are sharing 2MB/s.
- mlok 9y ago
  Firefox Dev Tools has a "Responsive Mode" (see top right icons) available that offers to throttle the network speed. This might be a good way to benchmark loading times.
  - z3t4 9y ago
    I picked "regular 3d" in firefox and loading time went up 10x. So it seems size does matter. But 2s is not that bad, it's better then some "native" apps.

jonluca 9y ago

The reason why there was such a small effort on optimization in the first place is that this isn't meant to be a revenue generating site, or one that focuses on "ultimate performance" - it's more of just a personal, online resume. Any time I needed something new, I'd just throw it in, because "it worked and looked good on my machine". If I found a cool js snippet that needed an entire library, I'd just throw it in. An argument could be made that that's part of what's wrong with modern webdev, and I wouldn't necessarily disagree, but this wasn't trying to be the fastest or most efficient site out there. I think there's a pretty distinct difference between making a scalable, well optimized webapp and just making a personal site as an online resume. This was me documenting my updates - I just revised the article with a few more updates, and the total site size is 250kb, 99kb without images. This still isn't great, but total page speed is pretty quick (js execution takes ~70ms on my 2016 MBP). Thanks for the feedback!

frfl 9y ago
I know JavaScript is cool and I'm not saying it's not a good idea to try things out and experiment -- it is! But I personally feel an individuals resume/personal site isn't what should stand out. Make it a true static site, lose the bloated JavaScript, add some basic styling and it will do what this site is doing -- maybe do a little more as people will not have to click on things, wait, read, close, click, read, etc. Let your projects speak for your skill set, not a fancy resume. All the best.