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:
- Code using standards-Based HTML and CSS, and validate
- Replace JPEGs with PNGs, especially for mobiles
- Replace bitmap logos with downloadable webfonts
- Replace bitmap files with inline images, using Base64 encoding
- Use SVG vector graphics instead of bitmaps
- Use CSS Sprites for background images
- Use CSS styles instead of bitmap images for gradients and other backgrounds
- Maximally compress bitmaps with a tool like Smush-It
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.|
|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.
- Experimental techniques replacing HTTP or TCP, like Google’s SPDY protocol, SCTP, and BEEP. They’re fast, but not well-supported