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.