Search code examples
javascripthtmlcssdompagespeed

Optimizing page speed when jQuery needed to render

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

Solution

  • 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.