Startseite > informatik, oss > Web2py, JQuery Mobile and Caching

Web2py, JQuery Mobile and Caching

So I’ve been playing around with JQuery Mobile to build a nice mobile version of my web2py app. Once I had that running, I wanted to make the website load a bit faster, because waiting about five seconds is way too much! Time to install the Google Pagespeed extension into my trusty Firefox, set the UA string to something iphone-is and look at the recommendations!

Compression

The Pagespeed extension complained about my files not being compressed. Some googling turned up the necessary .htaccess magic to enable mod_deflate on HTML, CSS and JS files. The transfer size went down from 448kb to 124kb! That’s an insane improvement. Still, there was some work left. Speaking from memory, this took page load time from about 5s down to 3.4s.

Proper Caching

Another complaint by the pagespeed extension was the caching: I needed to set the expires header! By setting the timestamp in the expires header, you tell the browser not to worry for a while and just fetch the file from cache. If you don’t set that header (or „cache-control“, alternatively), the browser will perform a conditional request, asking the server „hey, did that file change since last time I downloaded it?“. This is not a lot of overhead, but still, setting the „expires“ header can save us quite a few network requests.

Modifying the header via .htaccess did not work because web2py was already setting it in gluon/main.py. Apparently, if there is a timestamp included in the file name, the expires header is set to a date in the far future. This technique is called URL fingerprinting. I decided not to care and just hardcoded the expires header for all static files. This will eventually come back to bite me. The result for this tweak: page load time went down from 3s to 1.85s with a warm cache! The 3s case was with a warm cache and conditional requests – each request took 500ms to execute and not all of them were parallel. Page load time with cold cache was 3.4s!

To Do

All requests are currently handled via the CGI interface. Letting Apache handle static files directly would likely increase performance and magically make the expires header work without having to hack web2py.

The real WTF

JQuery: 91.4kB, JQuery Mobile: 141.1kB, JQuery Mobile CSS: 92.4kB. That’s about 300kB of code. I have not done any benchmarking yet to determine parsing and execution time, but it would seem that 300kB of code is a bit excessive for a puny mobile device.

 

Advertisements
Kategorien:informatik, oss
  1. Es gibt noch keine Kommentare.
  1. No trackbacks yet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: