Optimize media and resource file lookups

Review Request #684 — Created Dec. 27, 2008 and submitted

Information

Review Board SVN (deprecated)
trunk

Reviewers

This introduces a number of changes for allowing the browser to safely cache resource files persistently, and to load resources in the most efficient order.

We make use of the media serial suffix computed by Djblets. Every media file we access appends this as a query parameter. A supplied .htaccess file (generated by rb-site install/upgrade) will cache all media files for a long period of time. This improves page load time for a user once they've visited Review Board once, until they clear their cache or Review Board is upgraded.

This also combines <script> tags in order to minimize the time the browser has to spend parsing them, which does have an impact, even if small.

We optimize resource load orders. We now handle the const-defining <script> tags before loading in CSS or JavaScript files. Browsers will parallelize loads of images, CSS and JavaScript files when possible, but only when there's no script processing inbetween these requests. By making sure we request all CSS files first, before any JavaScript files, we parallelize the loads and also give the browser a better chance to set the style before anything happens.

As part of this, we also move as much JavaScript file loading as we can to the end of the file. This speeds up display time of the page, since the browser isn't blocking on interpreting and executing the JavaScript before it continues rendering the page. We can't do this with all scripts (jquery often needs to be loaded early on for our embedded <script>s), but we can do it with some.

We GZip the result of any data we send in order to minimize transfer times.

We also have a flexible way to set the Last-Modified header. We'll be able to use this in several views to set the last time the view was modified and then check if the browser has requested the view only if newer than a specified time. We can use this to prevent any long or complex rendering based on the timestamps.

In total, this shaves off a couple seconds on several of our pages, according to YSlow.

This is geared toward Apache. In the future, we'll add the proper flags for lighttpd.
Tested all this with Apache. Page load times were faster with an unprimed cache, and much faster with a primed cache since we no longer had to reload all the CSS, JavaScript and image files.
chipx86
Review request changed

Description:

   

This introduces a number of changes for allowing the browser to safely cache resource files persistently, and to load resources in the most efficient order.

   
   

We make use of the media serial suffix computed by Djblets. Every media file we access appends this as a query parameter. A supplied .htaccess file (generated by rb-site install/upgrade) will cache all media files for a long period of time. This improves page load time for a user once they've visited Review Board once, until they clear their cache or Review Board is upgraded.

   
   

This also combines <script> tags in order to minimize the time the browser has to spend parsing them, which does have an impact, even if small.

   
~  

Lastly, we optimize resource load orders. We now handle the const-defining <script> tags before loading in CSS or JavaScript files. Browsers will parallelize loads of images, CSS and JavaScript files when possible, but only when there's no script processing inbetween these requests. By making sure we request all CSS files first, before any JavaScript files, we parallelize the loads and also give the browser a better chance to set the style before anything happens.

  ~

We optimize resource load orders. We now handle the const-defining <script> tags before loading in CSS or JavaScript files. Browsers will parallelize loads of images, CSS and JavaScript files when possible, but only when there's no script processing inbetween these requests. By making sure we request all CSS files first, before any JavaScript files, we parallelize the loads and also give the browser a better chance to set the style before anything happens.

   
   

As part of this, we also move as much JavaScript file loading as we can to the end of the file. This speeds up display time of the page, since the browser isn't blocking on interpreting and executing the JavaScript before it continues rendering the page. We can't do this with all scripts (jquery often needs to be loaded early on for our embedded <script>s), but we can do it with some.

   
  +

We GZip the result of any data we send in order to minimize transfer times.

  +
  +

We also have a flexible way to set the Last-Modified header. We'll be able to use this in several views to set the last time the view was modified and then check if the browser has requested the view only if newer than a specified time. We can use this to prevent any long or complex rendering based on the timestamps.

  +
   

In total, this shaves off a couple seconds on several of our pages, according to YSlow.

   
   

This is geared toward Apache. In the future, we'll add the proper flags for lighttpd.

david
  1. This all looks fairly straightforward.
  2. 
      
Loading...