high performance web - full stack toronto
TRANSCRIPT
Picture from Simon Howden freedigitalphotos.net!Picture from Simon Howden freedigitalphotos.net!
high performance
webMaximiliano Firtman
@firt
mobile+web developer & trainer
trainer
Original Books
Translations I don’t really understand
Let’s start with data
500ms delay, +26% user’s frustration
Source: Radware
:(
500ms delay, -20% Google’s traffic
1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(
+100ms delay, -1% Amazon’s sales
1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(
-2.2s page load, +15% downloads
Source: Firefox
:)
+60% faster, +14% donations ($$$)
Source: Obama Campaign
:)
Site speed in search rank
Screen shot of blog post
…we’ve decided to take site speed into account in our search rankings
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Web Performance
Optimization
where to optimize?
server frontend development
Top 100,000 sites
Perception and Goals
immediate feedback
100ms
Jakob Nielsen - Usability Engineering
losing user’s flow of
thoughts 1s
Jakob Nielsen - Usability Engineering
Source: Google Developers
RAIL
100ms
RAIL
100ms 16ms
RAIL
100ms 16ms 50ms
RAIL
100ms 16ms 50ms 1s
RAIL
The Web today
Desktop and Mobile
Chrome, Firefox, Edge, IE
iOS and Android
Safari and Chrome?
Browsers only?
web view browsing
Web View25%
Browser75%
Source: MOVR Report
Let’s see some data
Others 10%
iOS45%
Android45%
iOS45%
Safari100%?
Apps (WebView) 25%
Safari75%
iOS45%
Others 10%
iOS45%
Android45%
Android45%
Browser33%
Chrome67%
Android45%
Opera 3%
UC Browser 3%
BB 4%
Samsung 11%
Chrome37%
Safari42%
Cellular
Networks
4G is here! We shouldn’t worry about performance anymore...
(
)
50% of users are on 2G networks
only 21% has 4G Worldwide
~30% of the time 4G not used
Bandwidth (Mbps)
0 3.5 7 10.5 14
2G 3G Wifi 4G
2G
3G
4G
Home
0 250 500 750 1000
Min Max
Latency
2G
3G
4G
Home
0 250 500 750 1000
Min Max
Latency
latencyrequest
bandwidth
Responsive Web Design
Mobile websites are the past, right?
Responsive Web Design as a goal
who said that?
Your goal is more conversions
responsive -> +conversion?
Usability Speed Accessibility
RWD is a tool
RWD is not a goal
Wait! Google will penalize non-responsive websites…
(
)
Mmm…. NOT REALLY
RESPONSIVE WEB DESIGN
is the future
I’m not advocating for m.*
Don’t penalize your mobile users
Responsive Web Design is a GREAT TOOL
Show me how to perform better!
Basic Tips
Consider moving to HTTP/2
#PERFTIP TLS only
Reduce redirects
#PERFTIP
• Consume 100ms to 1s each • Social networks will use one
Remover App Banners
#PERFTIP
Avoid Client Side Rendering
• Reduces in 5x page load performance • Embrace plain HTML for initial loading
#PERFTIP
CSS as appetizer
#PERFTIP
JavaScript as dessert
#PERFTIP
• Use non-blocking JavaScript
Use Responsive Images
#PERFTIP
• Deliver the right image to the current device • srcset and <picture>
Use SVG
#PERFTIP
#PERFTIP
Careful with Web Fonts
#PERFTIP
Extreme tips
Load the page in 1 second
#PERFTIP
ATF content in 1 second
#PERFTIP
We need to separate ABOVE THE FOLD
(ATF)
ATF in 1 second
#PERFTIP
14Kb packet
#PERFTIP
14Kb packet • HTML, embedded CSS, embedded JavaScript
• Images?
Reevaluate RWD usage
#PERFTIP
Alternative compression
• Zopfli (over Gzip or deflate)
#PERFTIP
•+8% compression ratio
• Brotli +25% compression ratio
#PERFTIPTLS only
Alternative compression
Alternative Image Formats
• PNG with Zopfli (-8%) • WebP (-35%) • JPEG-HDR (-30%) • BPG (-50/-70%)
#PERFTIP
Service Workers
• Cache Storage API • Offline Experience • Immediate loading experience
#PERFTIP
Upgrading to a Progressive Web App
• Uses Service Workers • Performance is a key
#PERFTIP
AMP
AMP-HTML
Consider creating AMP content
• Alternative vs. Replacement • Where responsive comes?
#PERFTIP
Picture from Simon Howden freedigitalphotos.net!
uf! we've covered a
lot!
• Performance -> conversion • Perception Goals • Understanding Mobile • Basic Optimizations • Extreme Optimizations
oreilly.com/ideas/mobile-web-performance-checklist
