1

I'm using the Google PageSpeed service to improve the page loading time of my site. The site is on GAE/P but I don't think that matters so much.

My page depends on a few resources:

  • Bootstrap (css and js)
  • jQuery (js)
  • jQuery UI (js and css)
  • My own stuff (js, css, and images)

The waterfall of a page load (link) is below. In this page, I use Javascript to render a jQuery UI sortable.

The PageSpeed recommendations of inlining needed css/js seems impractical because of Bootstrap and jQuery.

I'm looking for advice as to how I can get the most bang for my buck to improve page speed. For example:

  • Should I combine all js (Bootstrap, jQuery, jQuery UI, mine) into a single js file and serve it myself?
  • Should I combine all css (Bootstrap, jQuery UI, mine) into a single css and serve it myself?
  • Should I combine images into a css sprite?
  • Other things I should consider?

I'd appreciate your ideas.

Chrome waterfall

Improve this question

1 Answer 1

Reset to default
1

I think this answer will fall under the category of an opinion, but I'll try and make as logical an argument as I can for each statement.

Should I combine all js (Bootstrap, jQuery, jQuery UI, mine) into a single js file and serve it myself?

Yes. A single resource means fewer round trips to the server, however don't be lazy with that server, look into some different options than just serving it from your domain.

Should I combine all css (Bootstrap, jQuery UI, mine) into a single css and serve it myself?

Yes, for the same reasons.

Should I combine images into a css sprite?

Maybe, this can be hard to maintain, and the benefits really depend on your application.

Other things I should consider?

Consider hosting your static content with a service like Amazon's Cloud Front, this will have your users faster access to these bits of static content without as much effort (or cost). You can also look into combining your pages into a single page web app. This way your users will only download and execute your resource once, while subsequent pages will only load in data. This approach presents other challenges though like searching/indexing as well as complexity in the code.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Should you combine all files? No, you'll lose the benefits of cached CDN versions of the major libraries. Just bundle your own.
I can see the benefit that strategy as well. Perhaps the best advice is to measure before you optimize. Combining can be a more predicable way to optimize while utilizing CDNs only have the potential to be optimal (it only benefits people who have already accessed that specific version from the same CDN on another site.
I agree with this. Ideally, you should use a tool (uncss) to remove all unused styles from bootstrap as well as any other css to reduce payload. This will leave you with a smaller file as well as one that's almost guaranteed not to be on anyone's cdn.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.