With last week’s announcement that Chrome 38 supports the picture element and srcset attribute, it’s surely only a matter of time before web designers everywhere can breathe a big sigh of relief.
While responsive design has brought big advantages in terms of usability and cross-device compatibility, it can cause performance to suffer.
CSS media types have been around for a while now. They can be incredibly useful – styles that make sense on screen can be completely redundant on paper. And with the explosion in the number of devices on which websites need to be displayed, the more sophisticated media query can be invaluable in creating a responsive design.
But how does this affect performance?
Prerendering allows you to load a single web page in the background when someone visits your site. The prerendered page is invisible to the end user until they click on a link to that page, at which point it appears to load at breakneck speed.
We’ve already talked about Google and Bing sometimes prerender the top ranking URL in their results pages. However, it’s a technique that anyone can use. Simply add “prerender” to a rel attribute in a <link> element: for example, <link rel=”prerender” href=”prerender-this-page.html”>. This is potentially useful when you’re sure that your visitors will be moving on from a particular page (as they might if it’s an article spanning several pages).
In this post, we thought we’d look at the potential performance cost to prerendering.