Fo­cus on

Sam Kapila ex­plains why 2016 was the year of per­for­mance

net magazine - - CONTENTS -

Sam Kapila homes in on site per­for­mance

This year, as an in­dus­try we took big steps in di­al­ing up the con­ver­sa­tions about web page per­for­mance. A few fo­cused changes can com­pletely al­ter a site’s per­for­mance, and ev­ery lit­tle bit – or rather, byte – is worth it. Per­for­mance mat­ters be­cause we’re de­sign­ing and de­vel­op­ing for the user; so if it doesn’t work for them, it doesn’t work at all.

Site per­for­mance can be af­fected by a va­ri­ety of el­e­ments, in­clud­ing net­work speeds, im­age sizes, non-mini­fied re­sources, font file size, and the num­ber of re­quests. Par­avel de­vel­oper Dave Ru­pert wrote not one ( netm.ag/bloat-286), but two ( netm.ag/bloat2-286) blog posts about how he tack­led a lot of these is­sues on his own re­spon­sive site.

When it comes to JavaScript and CSS, in­clud­ing work­flows with mini­fy­ing and pre­proces­sor op­tions is a huge help. Even though line breaks and white spa­ces (tabs) aren’t key cul­prits, if the project is large enough, they can be. If you’re us­ing ex­ter­nal JavaScript li­braries, opt for cus­tomised ver­sions rather than a whole li­brary for two func­tions.

Font host­ing can also cause page bloat. One way to re­duce this is by only in­clud­ing the type weights that have been used in your project. Keep to a few weights and con­sider other ways to push con­trast and hi­er­ar­chy.

On the right, check out three tools that help you dis­sect your site and learn more about how long it takes to load. ( 1) Varvy’s Page Speed Op­ti­miza­tion ( varvy.com/ page­speed) tool is well-or­gan­ised, de­tailed and in­cludes re­sources about the whys of per­for­mance to make it iden­ti­fi­able. ( 2) Ping­dom’s ( tools.ping­dom. com) free op­tion in­cludes de­tails on the water­fall load time of each el­e­ment or re­quest. ( 3) We­bPageSpeed ( www.web­pagetest. org) is an ex­tremely pop­u­lar tool. It in­cludes all those op­tions listed so far, plus down­load­able videos of how long a site and its el­e­ments took to down­load.

1

3

2

Sam ( samkapila.com) is a de­signer liv­ing in Texas and an in­struc­tor at The Iron Yard, an in­ter­na­tional, im­mer­sive cod­ing school

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.