Slide 1
Slide 1 text
State of the Web
Presented by @fox
Slide 2
Slide 2 text
The Internet is growing exponentially,
but we fail to reflect on the greater picture.
Slide 3
Slide 3 text
We haven’t been building with empathy,
situation variability awareness, let alone
performance in mind.
Slide 4
Slide 4 text
51%
of 7 billion people have access to the Internet
Read: Q2 2017 Global Digital Statshot
Slide 5
Slide 5 text
7 mb/s
is the average network speed worldwide
Read: Akamai's State of the Internet Report for Q1 2017
Slide 6
Slide 6 text
93%
of Internet users go online via mobile devices
Read: Q2 2017 Global Digital Statshot
Slide 7
Slide 7 text
Read: Beyond the Bubble: The Real World Performance
0
3
7
10
13
Brazil Indonesia India Germany
Number of hours worked for 500 MB of data
Slide 8
Slide 8 text
3 mb
is the average site size
Please note that averages aren’t statistically accurate.
Read Ilya Grigorik’s “The average page is a myth”.
Slide 9
Slide 9 text
Daily application updates can easily yield 700 MB downloads.
Slide 10
Slide 10 text
As technologists often we find ourselves
in the position of privilege.
Slide 11
Slide 11 text
If we’re building the web platform from the
position of privilege and lack of empathy, it
results in exclusionary, subpar experiences.
Slide 12
Slide 12 text
Optimising all assets
Slide 13
Slide 13 text
One of the ways to significantly improve
performance starts with understanding how
the browser analyses and serves assets.
Slide 14
Slide 14 text
HTML
100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms
CSS
JAVASCRIPT
FONT
Slide 15
Slide 15 text
A critical request contains assets
that are necessary to render the content
within the users’ viewport.
Slide 16
Slide 16 text
Lead image
Logo
Web font
Which assets are critical?
Slide 17
Slide 17 text
Fetch immediately
Type of an asset
Slide 18
Slide 18 text
The Critical Request by Ben Schwarz
Slide 19
Slide 19 text
Enabling request priority in Chrome
Slide 20
Slide 20 text
1. Cache aggressively
2. Enable server-side compression
3. Prioritise critical assets
4. Use content delivery networks
Performance checklist
Slide 21
Slide 21 text
Optimising images
Slide 22
Slide 22 text
Images can account for most of transferred
payload, which is why imagery optimisation
can yield the biggest performance wins.
Slide 23
Slide 23 text
How do I pick the right format?
Slide 24
Slide 24 text
Vector
Resolution independent, usually significantly smaller in
size. Perfect for logos, iconography and simple assets
comprising of basic shapes (lines, polygons, circles and
points).
Raster
Offers much more detailed results.
Ideal for photographs.
Slide 25
Slide 25 text
JPEG imagery with many colours (photos)
PNG-8 imagery with a few colours
PNG-24 imagery with partial transparency
GIF animated imagery
Video for more lightweight GIFs ()
Read: Choosing an Image Format
Slide 26
Slide 26 text
Coach designers on picking and exporting
the most suitable format.
Slide 27
Slide 27 text
WebP is 25-34% smaller than other formats.
It can be safely used with fallbacks.
Read: A new image format for the Web
Slide 28
Slide 28 text
brew install webp
cwebp -q source.png -o output.webp
Slide 29
Slide 29 text
Using efficient image formats doesn’t warrant
skipping post-processing.
We need to optimise.
Slide 30
Slide 30 text
ImageOptim SVGO
Slide 31
Slide 31 text
Guetzli can produce up to 35% smaller JPEGs
(but be wary of its speed).
See: Guetzli on Github
Slide 32
Slide 32 text
We need to serve the right resolutions
and file types to the right devices.
Slide 33
Slide 33 text
The srcset attribute
Condition (media query)
Width relative to viewport
Width of the image source
Condition (media query)
Width relative to viewport
Width of the image source
Slide 34
Slide 34 text
The picture element
Condition (media query)
Image source to use
Read: Responsive Images 101
Condition (media query)
Image source to use
Read: Responsive Images 101
Slide 35
Slide 35 text
CDNs can take out a lot of complexity
from serving responsive, optimised assets
on image-heavy sites.
Slide 36
Slide 36 text
1. Choose the right format
2. Use vector wherever possible
3. Reduce the quality if change is unnoticeable
4. Experiment with new formats
5. Optimise with tools and algorithms
6. Learn about srcset and picture
7. Use an image CDN
Performance checklist
Slide 37
Slide 37 text
Optimising web fonts
Slide 38
Slide 38 text
68%
of websites use web fonts
Read: HTTP Archive Interesting Statistics
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
There are four web font formats.
It’s safe to use WOFF2 with a WOFF fallback.
Slide 41
Slide 41 text
WOFF2 font files are 30% smaller.
Slide 42
Slide 42 text
@font-face {
font-family: Post Grotesk;
src: url('/fonts/Post-Grotesk.woff2') format('woff2'),
url('/fonts/Post-Grotesk.woff') format('woff');
}
Always specify the format
Slide 43
Slide 43 text
Limit the number of typefaces,
font weights and styles.
Read: Weighing Aesthetics and Performance
Slide 44
Slide 44 text
Consider unicode-range subsetting to split
large fonts (proceed with caution).
Slide 45
Slide 45 text
npm install -g glyphhanger
fontsquirrel.com/tools/webfont-generator
Slide 46
Slide 46 text
Fonts are render-blocking,
often causing Flash of Invisible Text (FOIT).
Slide 47
Slide 47 text
We need a font loading strategy to prevent
users from not being able to access content.
Read: A Comprehensive Guide to Font Loading Strategies
Slide 48
Slide 48 text
@font-face {
font-family: Post Grotesk;
src: url('/fonts/Post-Grotesk.woff2') format('woff2'),
url('/fonts/Post-Grotesk.woff') format(‘woff');
font-display: swap;
}
Show fallback until
web font is ready
Slide 49
Slide 49 text
npm install webfontloader
npm install fontfaceobserver
Slide 50
Slide 50 text
Font loading strategy in action
Slide 51
Slide 51 text
1. Choose the right format
2. Audit the font selection
3. Use Unicode-range subsetting (carefully!)
4. Establish a font loading strategy
Performance checklist
Slide 52
Slide 52 text
Optimising JavaScript
Slide 53
Slide 53 text
There’s a much more sinister performance
bottleneck hidden behind our beloved
JavaScript than its size.
Slide 54
Slide 54 text
Unpacked JavaScript can become 2-3x bigger
than what we’ve sent down the wire.
Read: JavaScript start-up performance
Slide 55
Slide 55 text
Parse and compile times are so high it takes
8 seconds to reach an interactive state.
Slide 56
Slide 56 text
Package managers can easily obscure
the size of our dependencies.
Slide 57
Slide 57 text
npm install --save-dev webpack-bundle-analyzer
Slide 58
Slide 58 text
Serve only necessary JavaScript
based on context and routing.
Slide 59
Slide 59 text
Read: Webpack: Guide to code-splitting
If using Webpack: enable code splitting and
dynamic imports.
Slide 60
Slide 60 text
When starting a project, consider lightweight
framework alternatives.
Slide 61
Slide 61 text
1. Monitor how much JavaScript is delivered
2. Get rid of unnecessary dependencies
3. Implement code splitting
4. Consider framework alternatives
Performance checklist
Slide 62
Slide 62 text
Tracking performance
Slide 63
Slide 63 text
1. Leverage user-centric metrics
2. Set performance budgets
3. Monitor continuously
4. Build performance awareness and empathy
Performance checklist
Slide 64
Slide 64 text
Great performance metrics aim to be as close
to portraying users’ experience as possible.
Slide 65
Slide 65 text
Delivery-oriented metrics User-centric metrics
Speed Index First Paint
onLoad First Meaningful Paint
onDomLoaded Visually Complete
onContentLoaded Time to Interactive
Slide 66
Slide 66 text
First Paint
First Contentful Paint
First Meaningful Paint Visually complete
Slide 67
Slide 67 text
Metrics can quickly become confusing.
Without actionable targets, it’s easy to lose
track of what we’re trying to achieve.
Slide 68
Slide 68 text
Set attainable performance budgets.
performancebudget.io
browserdiet.com/calories/
Slide 69
Slide 69 text
Monitoring performance shouldn’t be manual.
Slide 70
Slide 70 text
Use Google Lighthouse
npm install -g lighthouse
Slide 71
Slide 71 text
Try out Calibre
calibreapp.com
Slide 72
Slide 72 text
Tracking performance is a shared
responsibility: make the data accessible.
Slide 73
Slide 73 text
Caring about performance shouldn’t be
a business goal.
…but if you need to sell it through possible revenue and engagement gains:
It’s about fundamental empathy.
Slide 74
Slide 74 text
As technologists, it’s our responsibility to not
hijack attention and time.
timewellspent.io
We need to be conscious of human focus.
Slide 75
Slide 75 text
Let’s build a better, more
mindful future for all of us.
Slide 76
Slide 76 text
Thank you
Slides: speakerdeck.com/fox/state-of-the-web
Questions and Feedback: @fox on Twitter