2019-05-01+Web+Designer+UK

88 _________________________________________________feature

ithPWAandSPA,developers

havethetechnicaltoolstodeliver

fastandengagingweb

experiences,rivallingtheirnative

counterparts.Butthereexistsa

missingpieceofthepuzzle,a

catalystthatcanpropela high-performingwebapptoa

hyper-performant,best-in-classuserexperience.This

ingredientis foundthroughconsideringperformancea

fundamentalprincipleoftheUXandvisualdesignprocess.Thisis

PerformantDesign.

A delaybetween 300 and1,000millisecondsmakestheuser

feellikea machineis working,buttheybegintomentally

context-switchabove1,000milliseconds.Anythingthatprovides

thecontentfasterwillresultina morepositiveengagement.

LoadtimescanbesignificantlyreducedbyLazyLoading

offscreenelements.Thisdeconstructstheinitialpayloadtorender

contentthatis inviewfirst.Imagesandotherheavyelements

loadlaterinthesequence,orastheuserscrolls.

Lighthouseis a Googletoolfullofactionableinsightsthat

helpdesignersanddevelopersoptimiseperformanceinfine

detailacrosstheloadingspectrum.

Downloading custom fonts cost around 200–500ms on 3G

connections. Letting the device handle font rendering by using

system fonts ensures text loads instantly, and using variable

fonts offers typographic variation without forcing the user to

download fonts in multiple weights. Check out variable fonts in

action at v-fonts.com.

Exporting vector icons and illustrations often adds a lot of

unnecessary bloat to the file. This can be cleaned up

considerably, reducing a site’s image payload and giving the

user quicker access to key icon-based navigation and

signposting. Coming from Google’s Development Team,

SVGOMG is a useful tool to help optimise SVGs.

The task of optimising images is a job that holds space in both

the design and development process. The art of image

optimisation comes from the human eye judging the

compression tool’s impact on image quality. Several algorithms

and rendering techniques can significantly reduce the size of an

image in ways that are invisible to the naked eye.

The Google Chrome team introduced Squoosh to help in

both these processes. This powerful web-based image

compression tool puts high-resolution visual comparison to the

forefront, while giving users access to all the complex behind

the scenes compression options.

Delays of less than 100 milliseconds still feel instant, but

anything above that is perceptible. When it comes to optimising

speed, it’s what the user perceives that really matters, which is

what makes designing for those in-between states integral to

delivering hyper performance.

This demo of SVGOMG shows
60 per cent + savings from
optimising artwork markup.