Here’s a talk I gave today about edu mobile web performance and related topics.
Category Archives: mobile
Pickyfill: Offline caching for picturefill responsive images
Responsive images and offline application caching do not play well together. (For an explanation, see “Gotcha #6” of Jake Archibald’s application cache article with a moderately NSFW title.)
Pickyfill (partially) solves the problem using Scott Jehl’s picturefill as a starting point. Pickyfill stores responsive images as data URLs in LocalStorage. If your page is using the HTML5 offline Appcache, pickyfill will detect this and store picturefill images as they are loaded. It will only store the images that your device displays, so (for example) an iPhone will only cache iPhone-sized images; it will not download and store crazy large images designed for large screens.
Pickyfill makes the cached images available if the user is offline. It can also improves page load time if the user is on a slow network.
Support, or Where Won’t This Work?
Pickyfill requires ApplicationCache, LocalStorage, and Canvas. If a browser that does not support these features visits a site that uses pickyfill, then pickyfill will do nothing and the experience will gracefully degrade to straight-up picturefill.
| Browser | Version | Support |
|---|---|---|
| Internet Explorer | 10.0+ | full support |
| Internet Explorer | < 10.0 | degrades to regular picturefill |
| Firefox | 3.5+ | partial support* |
| Chrome | 4.0+ | full support |
| Safari (OS X, Windows) | 4.0+ | full support |
| Safari (iOS) | 3.2+ | full support |
| Opera | 10.6+ | full support |
| Android | All versions | it’s complicated** |
*In Firefox, pickyfill will cache images on load, but not on resize. This is to avoid caching truncated/corrupted images. On resize, behavior gracefully degrades to regular picturefill behavior.
**Android browser in Android 2.3 (and probably others) does not implement toDataURL() completely/correctly. Pickyfill will detect the problem and degrade gracefully to regular picturefill behavior. Otherwise, pickyfill is fully supported in Android.
How do I use it?
Use picturefill the same way you would without pickyfill. The only changes will be to load pickyfill.js after picturefill.js and to give your site/page an HTML5 Appcache manifest.
<html manifest="/manifest.appcache">
<head>
...
<script src="/assets/js/matchmedia.js"></script>
<script src="/assets/js/picturefill.js"></script>
<script src="/assets/js/pickyfill.js"></script>
...
Although it would be better to minify and concatenate the JS files, the above code is for clarity.
Because pickyfill will only cache images that are actually displayed, it is possible for a user to visit the site, then visit the site again while offline, resize their browser, and end up with a broken image (because the image that is required at the new browser size was never downloaded before and therefore has not been cached). For this reason, it is important to have an appropriate small FALLBACK image in your offline Appcache.
FALLBACK: imgs/ imgs/fallback.png Demo URL: http://trott.github.com/pickyfill/
Project on GitHub: https://github.com/trott/pickyfill
Edu Mobile Web Performance Peanut Butter Cup
Dave Olsen’s site offers a Higher Ed Mobile Directory that lists higher education mobile web sites.
And Patrick Meenan’s awesome WebPagetest site has an API that allows for the automation of performance testing of web sites with actual devices.
Allow me to smash these two great things together and present my edu mobile web performance Reese’s peanut butter cup.
I screen-scrape Olsen’s list and have a Node.js script that instructs WebPagetest to load and reload each of the sites on an iPhone, measuring the performance.
The results end up in a publicly available Google spreadsheet.
I expect to update the spreadsheet at least once a day.
I am excited about this data to an unhealthy degree. More to come, as I look more closely at various sites to see what they’re doing really well and not-so-well.
Speeding Mobile Site Loading
After having used Lightning Touch to greatly speed up the interface for UCSF Mobile, it was time to improve load and render times.
What really set me down this path was discovering Mobitest. Their results will assign a decile for your site’s load time. Being unhealthily competitive, I of course wanted to see m.ucsf.edu in the top tier with the adorable “90th Percentile” indicator.
I went down a load of dead ends in the process. Here’s what worked for me (and a few things that didn’t).
Lightning Touch
Lightning Touch is a JavaScript utility the CKM has released to make web site navigation crazy-fast on touchscreen devices like iPhone, iPad, Android, and Blackberry.
If you are on a touchscreen device, you can see it in action at UCSF Mobile.
And here’s the obligatory video demo:
Mobile Maps That Aren’t Terrible (Part V)
Going Small with Mobile Web Framework
A few weeks back, on a developer conference call for the Mobile Web Framework, Ike Lin from UCSD presented data about the network payload size of various higher education mobile web site home pages.
UCSF’s mobile web site did pretty well in the comparison, but there was room for improvement.
Those improvements have since been implemented. This short video discusses what tools were used and how effective each was.
Tools discussed are:
- mod_deflate
- YUI Compressor (online version here)
- pngnq