10 Principles of Sustainable Virtual Design VI – WPO that helps, not hurts, Sustainability


Principle #8 Apply front-end WPO strategies that help, not hurt, sustainability…

It’s Green because: Good WPO really improves your sustainability benchmark.

Your Competitive Edge: You’re WPO won’t negatively affect your site in other ways.

Good front-end optimization can provide up to 80% of the potential efficiency increase for your site, according to guru Steve Souders. The full set of techniques makes for a big list, but some common techniques for WPO include:

However, we’re not just interested in performance, but in overall sustainability. Insights gained from a round of WPO should suggest changes to the design itself. I’ve listed some examples of how this rollback might happen:

Downstream Problem WPO Insight Design Rollback
A swarm of little bitmaps is needed for the design, but is slowing the site down Bitmap images can be replaced with font glyphs It might be time for designers to use a tool like ShapeCatcher to find glyphs that can replace their bitmap icons and symbols.
A new large gradient added to the site suddenly lowers page speed Hardware acceleration for CSS3 gradients is limited to small page widths and heights If a gradient is bigger than 1024x1024px, it might be time to re-think using the gradient, and replacing it with something else
Users requiring high contrast screens can’t see site images CSS image sprites disappear in Microsoft Windows’ high contrast mode Re-think why the design needs sprites, or even images
A Photoshop comp with lots of curves can’t be made efficient Rounded corners are one of the most expensive CSS styles. Does everything really needs to be rounded?
Large graphics are slowing down the site SVG vector graphics are more efficient than bitmaps, as are images created completely in CSS. Consider replacing bitmaps with SVG vector files created in Illustrator or Inkscape, or exploring CSS3 based images
A client with a site aimed at the “browser challenged” wants the site to look the same everywhere Support for older browsers with a given design might require too many polyfills and special CSS stylesheets. A design rollback involving the client (yup) might require fewer polyfills.
18_png_vs_csse
PNG graphic (left), pure CSS3 in Google Chrome (right)

It’s also true that overzealous WPO can make a website less sustainable. Here are some things to watch out for:

  • Concatenating assets into a very few HTTP requests increases the lag before screen drawing starts at the user’s end. The page seems to take longer to load, even if it actually loads faster
  • CSS sprites are faster, but hog the computer’s memory, especially affecting mobile performance
  • Using CSS3 instead of bitmaps leaves out older web browsers, unless extra polyfill code is added
  • Base64 inline images have several disadvantages, as described in David Calhoun’s blog.
  • CSS animations lose hardware acceleration beyond a certain size, e.g., 1024px for webkit browsers like Chrome and Safari
  • Inefficient CSS selectors are much more important than shrinking CSS file size
  • Cryptic command-line tools prevent the whole team is involved in sustainable design.

Front-developers and companies sometimes obsess on WPO techniques which provide only a modest benefit. The methods listed below have marginal effects on efficiency, and may reduce sustainability:

  • Removing CSS extensions that support older browsers, (like the IE8 stuff in Compass) has a negligible impact on CSS file size.
  • Minifying HTML and CSS have limited effects, since these files are already small
  • Minify tools all give give nearly identical speedups.
  • Hyper-optimizing JavaScript or .NET language code in a way that makes it difficult to understand in the future.
  • Experimental techniques replacing HTTP or TCP, like Google’s SPDY protocol, SCTP, and BEEP. They’re fast, but not well-supported

More on WPO:

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s