Web Performance
Why and how in 2019
Why performance matters
IS your site driving customers away?
Why performance matters
IS your site driving customers away?
Every Second Counts
Predictably, performance pressure keeps growing.
Page response time drives an increase in page abandonment.
Why performance matters
IS your site driving customers away?
It's about Business value
Retaining users
Improving conversions
User experience
It's about People
Why performance matters
IS your site driving customers away?
Performance is about Retaining users
Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.
DoubleClick ,53% abandoned if a website need 3+ seconds to load
BBC, COOK ...
https://developers.google.com/web/fundamentals/performance/why-performance-matters/
Why performance matters
IS your site driving customers away?
Evaluate the impact of performance
TestMySite
https://www.thinkwithgoogle.com/feature/testmysite
Real world data collected via the Chrome User Experience Report (CrUX)
90th percentile First Contentful Paint (FCP)
Why performance matters
IS your site driving customers away?
Why performance matters
IS your site driving customers away?
Why performance matters
IS your site driving customers away?
Feature
Performance
X
Why performance matters
IS your site driving customers away?
How about ML
Speed
Competitors
Business
Focusing on users' fragmented time (3G)
Better Experience for parents (EC, CC)
Better Experience for parents (EC, CC) | 20% faster
Measuring
Why performance neglected
Organization Alignment
Why performance neglected
Organization Alignment
Lack of Ownership
Developer / Designer / Marketer / Owner
https://rigor.com/blog/web-performance-matters-marketers
Why performance neglected
Organization Alignment
Cross-Functional Buy-in challenge
performance budget for
feature designing / marketing / engineering
https://www.youtube.com/watch?v=SJiKWwBtQaU
Why performance neglected
Organization Alignment
https://www.youtube.com/watch?v=SJiKWwBtQaU
Why performance neglected
Organization Alignment
Hard to Proceed / Measure
feature progress meanwhile / engineering priority
Measuring performance
How we know the situation
Measuring performance
Organization Alignment
Auditing Performance
Lighthouse / PageSpeed /
WebPageTest / TestMySite
Measuring performance
Organization Alignment
PageSpeed
Google is using page speed in whole mobile search ranking - 2018/07/01
Measuring performance
Organization Alignment
blob:chrome-extension://blipmdconlkpinefehnmjammfjpmpbjk/4edaee83-7a2b-44b5-967e-055e039f3a95
Measuring performance
Organization Alignment
User-centric Performance Metrics
Measuring performance
Organization Alignment
1. Is it happening?
User Did the navigation start successfully?
Has the server responded?
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
First Contentful Paint (FCP)
Measuring performance
Organization Alignment
2. Is it useful?
Has enough content rendered that users can engage with it?
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
First Meaningful Paint (FMP)
Hero Element Timing
Measuring performance
Organization Alignment
3. Is it usable?
Can users interact with the page, or is it still busy loading?
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Time To Interactive (TTI)
Measuring performance
Organization Alignment
4. Is it delightful?
Are the interactions smooth and natural, free of lag and jank?
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
RAIL
Long Task
Measuring performance
Organization Alignment
RAIL
https://developers.google.com/web/fundamentals/performance/rail
Measuring performance
Organization Alignment
Time To First Byte (TTFB)
2019 Performance Metrics
Speed tooling evolutions: 2019 and beyond (Chrome Dev Summit 2019)
2019 Performance Metrics
Performance Budget
Building a web experience and stay fast
Performance Budget
Building a web experience and stay fast
https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3
Performance Budget
Building a web experience and stay fast
https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3
Performance Budget
Building a web experience and stay fast
Performance would be built-in subject for
front-end developing
Optimizing Javascript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
First-Time Load /
Ongoing Navigation
Optimizing JavaScript
Order Loading Thoughtfully
Critical Render Path
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Measuring performance
Organization Alignment
Optimizing JavaScript
Order Loading Thoughtfully
Loading Performance
Rendering Performance
Optimizing JavaScript
Order Loading Thoughtfully
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
Optimizing JavaScript
Order Loading Thoughtfully
Optimizing JavaScript
Order Loading Thoughtfully
Rendering on the web
architecture of web rendering
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Web Rendering
Order Loading Thoughtfully
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Web Rendering
Order Loading Thoughtfully
SSR
SSR
rendering a client-side or universal app to HTML on the server
Web Rendering
Order Loading Thoughtfully
CSR
CSR
rendering an app in a browser, generally using the DOM
Web Rendering
Order Loading Thoughtfully
Rehydration
Rehydration
reuse the server-rendered HTML’s DOM tree and data
Isomorphic App
Web Rendering
Order Loading Thoughtfully
Prerendering
Prerendering
running a client-side application at build time to capture its initial state as static HTML.
Web Rendering
Order Loading Thoughtfully
Performance Diff
Web Rendering
Order Loading Thoughtfully
Server Rendering
Web Rendering
Order Loading Thoughtfully
FAST TTFB / Cache / CDN
Static Rendering
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Web Rendering
Order Loading Thoughtfully
https://github.com/CodinCat/noPress
Web Rendering
Order Loading Thoughtfully
SSR x Rehydration
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Web Rendering
Order Loading Thoughtfully
Streaming server rendering and Progressive Rehydration
Server-Side Rendering - rendering a client-side or universal app to HTML on the server
Web Rendering
Order Loading Thoughtfully
https://zeit.co/blog/streaming-server-rendering-at-spectrum
Web Rendering
Order Loading Thoughtfully
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Web Rendering
Order Loading Thoughtfully
SEO Consideration
SEO x UX x Front-End Development
Web Rendering
Order Loading Thoughtfully
Dynamic Rendering
switching between client-side rendered and pre-rendered content for specific user agents
Web Rendering
Order Loading Thoughtfully
Rendertron
Puppeteer
https://github.com/GoogleChrome/rendertron
https://github.com/GoogleChrome/puppeteer
Case Study
E-commerce website
Case Study
e-commerce website
Client Rendering
Multiple Page App
No Client Routering
Case Study
e-commerce website
Case Study
e-commerce website
Server Rendering
Multiple Page App
No Client Routering
Case Study
e-commerce website
Case Study
e-commerce website
Client Rendering
Multiple Page App
No Client Routering
Case Study
e-commerce website
Case Study
e-commerce website
Client Rendering
Single Page App
Fast navigating
Service Worker
Client Cache strategy
Case Study
e-commerce website
Case Study
e-commerce website
Case Study
e-commerce website
Heavy JavaScript is performance killer
Even SSR is big burden
Case Study
e-commerce website
Third-Party SDKs is
Performance killer
All we can do is delaying.
- User Behavior Tracking System
- Third-Party Ads Tracking Service
Case Study
e-commerce website
InstantClick / pjax
Multiple Page App
Service Worker
prefetch, preload, cache stratgy
Preact
Case Study
e-commerce website
Simple and Fast
No SPA / No heavy JavaScript
It just depends
Performance x
Product Design
UX in modern E-commerce website
Performance x Product Design
UX in modern E-commerce website
Focusing On User
Navigations
User Journey / Experience Audit
Performance x Product Design
UX in modern E-commerce website
Reduce Friction
Performance x Product Design
UX in modern E-commerce website
Focusing on
Navigations
Forward / Go Back
Redundancy
Measuring action per landing
Performance x Product Design
UX in modern E-commerce website
Take how content be loaded as a built-in topic for designing
these technical issue let us be more clearer about how users really experience
Performance x Product Design
UX in modern E-commerce website
SEO / Performance / User Intention
Lazy-Loading / Feature Delaying / Navigations Behavior Prediction
Performance x Product Design
UX in modern E-commerce website
Take how content be loaded as a built-in topic for designing
Experience 2x Faster
Load Instantly
Experience 2x faster
Load instantly
http://instantclick.io/click-test
Experience 2x faster
Load instantly
pjax
Experience 2x faster
Load instantly
Prefetch / Preload
https://dev.to/addyosmani/speed-up-next-page-navigations-with-prefetching-4285
Experience 2x faster
Load instantly
Experience 2x faster
Load instantly
guess-js
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Experience 2x faster
Load instantly
API Principle
For SPA
Critical Resource Only | Page API
Partial Status Separating
Keep Fast
Experience 2x faster
Load instantly
GraphQL
a query language for APIs and a runtime for fulfilling those queries with your existing data
https://graphql.org/learn/
Experience 2x faster
Load instantly
https://graphql.org/learn/
Service Worker
PWA
PWA Training. yesterday !
Beta
