High Performance Web Sites: Essential Knowledge for Front-End Engineers

Category: Programming
Author: Steve Souders
All Stack Overflow 20
This Month Stack Overflow 8


by anonymous   2019-07-21

security: http://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project

scalability (db layer): http://oreilly.com/catalog/9780596003067 (half of the book is very relevant for any database)

scalability (app layer): http://www.javaconcurrencyinpractice.com/ (half of the book is very relevant for any language with shared state and threads)

front end: http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ and http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304

Also, just to get a grasp of how difficult things are sometimes, you should start reading that those 2 blogs:

  • http://engineering.twitter.com/
  • http://www.facebook.com/notes.php?id=9445547199
by anonymous   2019-07-21

Recommend two books to you:




enter image description here

by anonymous   2019-07-21

A good book on optimizing for high performance websites from the Yahoo engineers is High Performance Web Sites: Essential Knowledge for Front-End Engineers. It is nice and short and basically a bulleted guide on the steps to take to make websites faster by optimizing the less well explored front-end.

by anonymous   2019-07-21

Depending on how the frequency you need to do it, maybe you can try using Selenium (a automated testing tool for web applications), since it users internally a web browser, you will have a pretty close measure. I think it would not be too difficult to use the Selenium API from a .Net application (since you can even use Selenium in unit tests).

Measuring this kind of thing is tricky because web browsers have some particularities when then download all the web pages elements (JS, CSS, images, iframes, etc) - this kind of particularities are explained in this excelent book (http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/).

A homemade solution probably would be too much complex to code or would fail to attend some of those particularities (measuring the time spent in downloading the html is not good enough).

by anonymous   2019-07-21

Here's a few things that may help you:

EDIT: I tried the second tip in the list below (tinypng.com) and it reduced the size of your image with 71% to 39.1 KB. So that's a big win.

  1. Make sure to set the cache headers on your webserver so that the browser can cache the file. Also use the same URL for all other times you use the image. Doing these two simple things will make sure that the image will only get downloaded the first time the browser requests it. All other times it will be loaded from the browser's cache.

  2. Make sure to check if the image is as small as it can be. If you use a PNG then use tools like https://tinypng.com/ to squash all metadata out of the image. If you use a JPEG then maybe lower its quality. If you use Photoshop make sure to "save the image for web". This will also reduce the size. For photographs you are mostly better of using JPEGs, for text or other images that need to be lossless use PNG or GIF.

  3. Loading images will not really slow down your page that much. Not like JavaScript anyway. Loading Javascript will block the rendering of the page until the JS file is downloaded unless you use special loading techniques. That is not the case for images: the page will continue being rendered and the user can start using the page.

  4. If the image is placed using an IMG tag the make sure to set the width and the height of the image in the CSS (or using the img width and height attributes). That will make sure that the browser does not need to reflow the page when the image is downloaded. It will know what size it needs to be even before the image is downloaded.

  5. There is a maximum number of parallel requests per domain that the browser will do. If the image has a very low priority you could postpone its loading and wait for the onLoad event. This will make sure the other resources (with a a higher prio) will be downloaded first. This will require some JavaScript, but not that much (Use an image lazy loader, there are many).

  6. As I said in the previous item the are a maximum number of requests PER DOMAIN. This is why you could also create a new (sub)domain and load some content from there. It will increase the total number of resources that will be downloaded in parallel. using a CDN will also help here because they also have a separate domain (and they are optimised as well).

  7. If you want to read some REALLY GOOD books about this kind of optimising, read these: http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309 http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304

by Hank Gay   2017-08-20

It's definitely faster to do it all at once. Also check out Steve Souder's blog and his book.

by anonymous   2017-08-20

That's not entirely correct. Said simply:

  • Style declarations should be as close to the top as possible, since browsers won't render your page before loading the CSS (to avoid a flash of unstyled content)

  • Script tags should be as close to the bottom as possible, since they block browsers from parsing after the tag before it is loaded and complete (because the script may change the document with document.write)

If you're interested in frontend performance, I highly recommend reading High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Souders.

by anonymous   2017-08-20

You should look into some simple but useful tips on the Web that are highly recommended a combination of all of these will give you different results.

Front End Pro Tips

ASP.NET Pro Tips

ASP.NET White Paper

There are a few books also.