2

I've been researching responsive web design technologies and head.js and I have a few questions.

  • How much of a realistic reduce in load time head.js have you experienced when lazy loading external js files?
  • How much extra development/effort is required to prevent Flash of Unstyled Content problems?
  • Are all the CSS features of head.js useful in creating a responsive design (for different size screens, devices, etc)?
  • Does head.js play into lazy loading of images and plugins?

Would people recommend something different when we are trying to accomplish the following things:

  • Fast, efficient load times for a lot of javascript files
  • Reducing development time and increasing UX for multiple devices, screen sizes
  • Extensibility of a large scale application
  • Following best practices

Any input is appreciated, thanks.

Evan
  • 5,975
  • 8
  • 34
  • 63

1 Answers1

7

My two cents:

I had some problems with head.js, and eventually opted to use script.js for asynchronous Javascript loading. For the sites I am working on, most functionality is static or has fallbacks. FOUC problems are generally mitigated by hiding content (with css) until the javascript is loaded (and then showing it with javascript). And because the Javascript is cached, I only really have to worry about the first page load.

Modernizr gives you all the feature-detection from head.js. Bundle it with html5shiv and you've got the HTML5 IE bootstrapping from head.js. CSS3 Media Queries are best for responding to screen-width (and respond.js can be used to add support for IE 6-8). These scripts are probably best loaded with a traditional <script> tag instead of an asynchronous loader. Ideally they'd all be compressed into one file.

Modernizr automatically hides any content with a .no-js CSS class. I also found it helpful to create a .js class, hide it in the CSS file, and show with javascript after any necessary scripting is complete.

Not having to load jQuery and a bunch of plugins in a <script> tag definitely makes a difference in load-time perception. Maybe some behavior doesn't kick in for a few seconds, but oh well. Btw, for avoiding FOUC or Flash of Undefined Behavior problems, the jQuery liveQuery plugin is great. Inlining works too, but...

Luke Abbott
  • 435
  • 3
  • 11