About two or three years ago, I would have summarised the answer to this as.
- compile all js to one file and minify.
- complie all css to one file and minify.
- load external scripts async.
- set cache control headers to the far future.
- fingerprint asset urls for invalidation.
- use your own CDN.
Now applications seem to be much heavier on javascript. And I have seen evidence that browsers are able to open more parallel connections.
What currently is the best practice for web performance when including static assets.
When I use a framework like angular, backbone or ember, should I bundle the framework with my application or use a public cdn (like googles https://developers.google.com/speed/libraries/) and just bundle my application code?
I would say the answer is...it depends. I appreciate that isn't very useful so I'll expand.
- If you're writing an internal (intranet) application it would be better, and more efficient, to bundle the framework into your app. Your users will then only need to pull files from the local network. If you have multiple internal apps using the same framework then an internal CDN would be a good option.
- If your users are unlikely to access other apps that use the same framework then you won't get any benefit from a CDN (unless they're in a different part of the world to your server) but there are no real downsides either.
- If you want to auto update to the latest version of a library (99 times out of 100 this is a bad idea) you can use a CDN to provide the current version automatically.
- If you have bandwidth concerns using a CDN can alleviate this as your users will be downloading the files from someone else.
- If your application js will change frequently then, if you bundle all js together, you'll force a redownload of all the framework libraries. Obviously, there are simple ways to get around this such as bundling libraries separately.
For external apps I'd say using a CDN is the right choice.
Menu
622
