3 ms·

Ask HN: Small projects to improve web performance coding skill

11 points by sofyan 10y ago

Hi, I'm a leader in a small web developer team. We want to build website with a high performance in mind. Do you have any small projects / applications recommendation that we should create so we can improve our coding skills especially on web performance? Thanks in advance.

generj 10y ago
I'd make a small single page website with a few fixed parameters (and maybe a few database calls) and then optimize everything on it using Google PageSpeed and other resources [0]. Make a script which runs during check-in which measures speed changes and have a contest to see who can reduce the speed the most. A good example of this is the homepage of t.co which clocks in at 3.08 kb and yet looks fantastic. [0] https://developers.google.com/speed/pagespeed/ https://developers.google.com/speed/pagespeed/
- sofyan 10y ago
  Thank you, we are going to try that for sure. But I think I missed something in my question. We will create an interactive website that has many ajax call and will often modify the DOM. There are other points that we'd like to learn which are: * DOM performance * CSS layout * Improve javaScript execution speed * Minify memory usage
  - afarrell 10y ago
    > CSS layout I just recently discovered http://book.mixu.net/css/ http://book.mixu.net/css/ which is the book on CSS layout that I've been looking for for years. It actually teaches a comprehensive mental model rather than a bag of tricks.
imauld 10y ago
Odds are the biggest bottlenecks in any webapp are going to be the DB and the network itself. So unless you're doing some really complex computations your actual business logic likely won't be taking up most of the time between a request and a response. So you can work on something that will help you tune DB queries or you can take the DB out of (some) of the equation(s) and learn how to make good use of something like Redis or memcache to reduce DB load. Learn how to use a CDN to decrease static asset loading time. I would also checkout this talk: https://vimeo.com/147806338 https://vimeo.com/147806338 It's pretty long but it's pretty funny and should give you some things to think about. There aren't any technical examples or demos but it's a good high level talk about the balloning size of web pages.

11 points by sofyan 10y ago

generj 10y ago

I'd make a small single page website with a few fixed parameters (and maybe a few database calls) and then optimize everything on it using Google PageSpeed and other resources [0]. Make a script which runs during check-in which measures speed changes and have a contest to see who can reduce the speed the most. A good example of this is the homepage of t.co which clocks in at 3.08 kb and yet looks fantastic. [0] https://developers.google.com/speed/pagespeed/ https://developers.google.com/speed/pagespeed/

sofyan 10y ago
Thank you, we are going to try that for sure. But I think I missed something in my question. We will create an interactive website that has many ajax call and will often modify the DOM. There are other points that we'd like to learn which are: * DOM performance * CSS layout * Improve javaScript execution speed * Minify memory usage
- afarrell 10y ago
  > CSS layout I just recently discovered http://book.mixu.net/css/ http://book.mixu.net/css/ which is the book on CSS layout that I've been looking for for years. It actually teaches a comprehensive mental model rather than a bag of tricks.

imauld 10y ago

Odds are the biggest bottlenecks in any webapp are going to be the DB and the network itself. So unless you're doing some really complex computations your actual business logic likely won't be taking up most of the time between a request and a response. So you can work on something that will help you tune DB queries or you can take the DB out of (some) of the equation(s) and learn how to make good use of something like Redis or memcache to reduce DB load. Learn how to use a CDN to decrease static asset loading time. I would also checkout this talk: https://vimeo.com/147806338 https://vimeo.com/147806338 It's pretty long but it's pretty funny and should give you some things to think about. There aren't any technical examples or demos but it's a good high level talk about the balloning size of web pages.