Dear all,
While thinking about our URL structure, I came up with an idea. But I don’t know whether this is feasible or not, and would very much welcome feedback here.
We have a couple of URLs which already must issue HTTP redirects. For example, our root folder http://company.com issues an HTTP redirect based on the user’s language preference to f.x. http://company.com/en/ .
I thought, can these redirects serve a dual purpose by pre-loading or priming the browser cache with cache-able objects needed on the subsequent pages?
As an example, we load jQuery from the Google CDN on all our pages. Is there a way to make the browser cache jQuery while it’s being redirected?
I can think of a couple of ways to do this with Javascript. However:
[list=1]
[]I would insist on a solution which also works for those mobile browsers and search engine spiders that don’t understand Javascript.
[]If I load one “empty” HTML page which preloads JS and redirects to the proper page while blocking the redirect until the JS has loaded, then the overall page load speed for the content page doesn’t improve – it probably even gets worse.
[/list]
Should an HTTP 302 redirect header with a HTML body with regular script tags work, or is the combination of a redirect header and a content body pure nonsense?
Should an empty HTML page with a few SCRIPT tags in the BODY and a META REFRESH work?
Any suggestions, any insights, does this seem sensible or not? Thanks,
I would expect that the browser would dump any requests it would have made for the current page as soon as it goes to execute the redirect (immediately in the 302 case). Any time spent trying to pre-cache the content would be time wasted loading the actual page.
Wouldn’t hurt to try and verify but I expect the browsers would unload the page as soon as you redirect/navigate/refresh.
You might be able to pull something off with HTML5 local storage and code in the base HTML of the page that initiates the redirect but honestly, that seems like an awful lot of work - I’d focus on eliminating the redirect for as large a population as possible (have the default page serve the content in the language that gets the most use and only redirect for the lower-usage languages).
-Pat
I created a few skeleton pages which just load jQuery and jQuery UI from the Google CDN, and tested them with IE8 using WebPageTest.org.
Now, this is hardly a scientific test, but the first impression is that Patrick is spot on – at least the IE8 case seems to be that the browser jumps to the second page without downloading anything from the first page. I tried using an HTTP 302 header, and a META REFRESH tag (which appeared wonky on IE8, BTW).
So far, the only semi-sane way of doing this that I can see would be to use an async JS loader (like Kyle Simpson’s LABjs) to load the JS async & in parallel on the first page, and then issue a JS redirection to the second page. This would be somewhat faster on older browsers which don’t support parallel script loading … and near neutral on modern browsers. However, this method would likely break completely on mobile browsers with poor/buggy JS support.
Patrick’s suggestion to use HTML5 LocalStorage has merit too. Actually, after some investigation this seems to be what Google and Bing do for mobile: Storager case study: Bing, Google | High Performance Web Sites
I agree that using LocalStorage is too much work and very little or no benefit for regular sites. I will neither use async JS loader nor LocalStorage for now, both methods seem not to be worth it.