Responsive Design Weekly #136

Hey everyone and welcome to week 136 of Responsive Design Weekly.

This week I’ve been playing around with the performance of the site and the feature image this week is a snapshot of the tool I’ve been using to keep track of the changes I’m making to the site to see if the performance is improving — a report from SpeedCurve.

The good news is that I’ve managed to reduce the number of blocking requests in the<head> above the content, but as a result I’ve increased the overall size of the HTML document.

Why? Well aren’t you glad you asked. (if you’re not glad you asked, just skip down to the links).

I have gone through the process of removing all of the JS from the head and loading the CSS asynchronously. The first culprit I found was was Modernizr — a great tool to check for browser capabilities which is preferred over browser sniffing. The thing is that the tests I was using Modernizr to perform were done 2 years ago and since that time either the browsers now fully support what I was looking for or I took the interactive feature off the site. That’s one request down.

The next step was to implement CriticalCSS. The idea behind this is to include the CSS you need to render the visible part of the page (the bits above the fold) into a <style> tag in thehtml, and then using javascript to load in the full CSS file afterwards. This means the page can be rendered for viewing without having to wait for the CSS file to be downloaded.

To do this I used a combination of two tools. The first was Critical Path CSS Generatorwhere you include the URL of the page you need the critical CSS for in one input and the full CSS of the site in another text area. Run the generator and it will spit out the “above the fold” critical CSS for you. This can then be included in the <head> between a couple of<style> tags. Make sure you include the style tags or this happens. This is also the cause for my HTML page to increase in size (4kb in total).

The next stage is to load in your full CSS file using a bit of JS prepared by our Headliner this week, Mr Scott Jehl & Filament Group.

Include the following just above the closing </body> tag


<script> 
function loadCSS( href, before, media ){ 
"use strict"; 
// Arguments explained: 
// `href` is the URL for your CSS file. 
// `before` optionally defines the element we'll use as a reference for injecting our <link> 
// By default, `before` uses the first <script> element in the page. 
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document. 
// If so, pass a different reference element to the `before` argument and it'll insert before that instead 
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/ 

var ss = window.document.createElement( "link" ); 
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; 
var sheets = window.document.styleSheets; 
ss.rel = "stylesheet"; 
ss.href = href; 

// temporarily, set media to something non-matching to ensure it'll fetch without blocking render 
ss.media = "only x"; 
// inject link 
ref.parentNode.insertBefore( ss, ref ); 
// This function sets the link's media back to `all` so that the stylesheet applies once it loads 
// It is designed to poll until document.styleSheets includes the new sheet. 

function toggleMedia(){ 
var defined; 
for( var i = 0; i < sheets.length; i++ ){ 
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){ 
defined = true; 
}} 
if( defined ){ 
ss.media = media || "all"; 
} else { 
setTimeout( toggleMedia ); 
} } 
toggleMedia(); 
return ss; 
} 
// load in your full CSS file
loadCSS(‘/css/global.css?v=0.1.35')

</script>

<noscript> // just incase js is disabled.
<link rel="stylesheet" href="/css/global.css?v=0.1.35">
</noscript>

Another slightly more advanced approach is to set a cookie once the visitor receives the CSS file the first time, and then use that cookie to determine whether the Critical CSS is included in the

or if to the stylesheet is used instead as it will already be cached and it won’t cause a blocking request. This does require your CMS to serve different HTML on the same URL which can cause havoc with caching so tread carefully.

Let me know if you try this out and the results.

Lets check out those links.

Articles

Planning for Performance
Last week Scott Jehl’s new book was our feature story, this week A List Apart bring you an excerpt from Chapter 3 of that very book.

Tips for authoring fast-loading HTML pages
These are some basic lessons, but we should all start with the basics and build up from there.

An Event Apart News: Content, Content Everywhere: An Interview with Sara Wachter-Boettcher
Sara Wachter-Boettcher talks about how she got into the web, the thoughts behind her book and how she came to realise the fundamental problem with CMS.

The State of the Internet: Q3 2014
An interesting review from Co+Lab about 10 of the website they manage and how the device fragmentation breaks down. I wish more people wrote beautiful posts like this (hint hint, nudge nudge).

PRESENTATIONS & PODCASTS

Better Performance Through Better Design
We need better visualisations of performance data to allow access to the wider teams we work with. Get your whole organisation more involved and excited about performance work by making it more visible, attractive and adding the power of design to engage everybody.

Screencast: SpeedCurve
I go through some of the new features available on the beta release of Speed Curve (our feature image this week).

Design Consistency For The Responsive Web
Through a range of client projects including news sites, e-commerce, and custom web applications, we’ll look at concrete examples of design deliverables, documentation and demonstrations that capture UI design patterns for delivering a coherent design system that works, and discuss a mental model for evaluating how to apply those rules optimally across the responsive spectrum.

The Guardian — Responsive Web Design
Ethan & Karen speak with Alex Breuer, Creative Director of The Guardian, about his involvement in the responsive redesign.

RWD PODCAST EPISODE #21 : PATRICK HAMANN
If you like what Alex had to say above and want some more techincal details about the approach by The Guardian team then check out our chat with Patric Hamann.

TUTORIALS

Driving Phantom from Grunt
Jeff Lembeck from Filament Group takes us through a detailed tutorial on how to use Phantom and Grunt together to produce screenshots of the pages your developing

Introducing “daisy” a sass/pattern-lab workflow solution
Last week we covered the tool, this week here’s a bit of a tutorial to get you going.

Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)

 

TOOLS & PLUGINS

Lining.js
In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line. Lining.JS gives you the ability to achieve this.

Critical Path CSS Generator
Generate your Crtitical CSS and improve your site performance.

lumX
The first responsive front-end framework based on AngularJS & Google Material Design specifications. lumX will help you to design your applications faster and easier. We followed Google Material Design recommendations to bring the best experience to your users.

TouchSwipe-Jquery-Plugin
TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

deSVG
A nice little tool from Ben Howdle that swaps <img> tags referencing SVG files with the SVG tags allowing you to style them with CSS. READ the caveats at the end. Choose wisely.

Inspirational Sites

Chickenbot
All I ever want to do is eat chick when I see this site. Job done.

Pelican Books
Pelican books went live with a great new and highly consumable site.

RWD Examples
I’ve recently made some updates to the layout of the RWD examples section on our site. I’ll be adding some performance metrics against the sites soon enough, please recommend new sites to feature.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>