Frontend performance on the web

FRONTEND
PERFORMANCE
Mathias / Björn

16.03.2019 Performance 2
Björn Jacob

“ZALANDOSAWA0.7%INCREASEIN
REVENUEWHENTHEYSHAVED
100MSOFFTHEIRLOADTIME.”

“CAROUSELLREDUCEDPAGELOAD
TIMEBY65%ANDSAWA63%
INCREASEINORGANIC TRAFFIC[...]”

TIMKADLEC
17.6MILLIONKILOWATTHOURS
2BILLIONPEOPLE
5PAGES/D
1.500.000GBDATA

MAGIC NUMBERS
FCP (fast)
 TYPO3: 44,82%
 Neos: 51,3%
 Umbraco: 45,61%

PILLARS OF
PERFORMANCE

PILLARS OF PERFORMANCE
 Server Side Rendering
 Asset delivery
 Client bandwidth
 Client CPU cycles

SERVER SIDE RENDERING
 Write fast code
 Cache what can‘t be made fast
 Consider stuff older than 5 sec static
 Performance is design
 OP-TI-MIZE

ASSET DELIVERY
 Deliver fast
 Deliver regionally
 Deliver optimized
 Really mean that!
 OP-TI-MIZE… please

“53%OFVISITS TOMOBILESITES
AREABANDONEDAFTER3SECONDS
ACCORDING.”GOOGLEDOUBLECLICK

CLIENT BANDWIDTH
 3G is broadband
 Company culture: One day of 2G per month
 Ship less HTML
 Ship less CSS
 Ship WAY less JS
 OP-TI-MIZE…. Pretty please

CLIENT CPU CYCLES
 Test on slow devices
 Kill on-scroll
 Transition via CSS
 Offload defered JS onto threads
 Aim for 60 fps
Some Flowers™: 15fps  60fps +25%
conversion

TERMINOLOGY

TERMINOLOGY
 FCP, FMP, TTI
 PB: Performance Budget
 Bloat: CSS/JS not used in current document

12 TIPS

1 SET GOALS
 First Meaningful Paint < 1 sec
 Time to Interactive < 5 sec (on slow 3G)
 Time to interactive < 2 sec (repeated visits)

2: CRITICAL CSS
 Max Budget: 14kb
 Include in <head>
 Consider click through
 Bloat Budget: 15%
 Stay < 170kb textfile-size (compressed)

3 LOAD LIGHTLY
 Trim
 Defer
 Lazy-load
 Use lightweight alternatives
 Minimize 3rd party scripts

4 LEGACY LOADING
 Load core scripts normally
 Use <script type=„module“> for modern
browsers

5 CSS GROUPING
 Load blocking JS before blocking CSS
 Split up critical CSS per media query
 Measure
 Experiment
 Repeat

6 RESOURCE HINTS (HTTPS://W3C.GITHUB.IO/RESOURCE-HINTS/)
 dns-lookup
 preconnect
 prefetch
 preload (carefully)

7 WEBFONTS
 Seriously consider system fonts
 Remove bloat subsets
 Remove bloat charsets
 Make use of font-display
(swap/ optional)

“CHANGING THE WAY
FONTS WERE LOADED
[…] RESULTED IN THE
SPEED INDEX DROPPING
BY 50% FOR 4G
MOBILES.“
GOV.UK

8 OPTIMIZE IMAGES
 Use webP
 Optimize image size per viewport
 Bootstrap package can help here
 dreistrom.land‘s Image Rendering Service
for lossless compression and convertion to
modern images formats

9 HEADERS
 Set HTTP Cache headers properly
 Set HTTP security headers properly

10 COMPRESSION
 Use Brotli
 Use Zopfli
 Use at least gzip

11 HTTP/2
 Serve via HTTP/2
 Verify HPACK compression is available
 Monitor mixed-content warnings
 Enable OCSP stapling
 ^^ speeds up TLS handshakes

12 SERVICE WORKER
 Use service worker cache for
 … webfonts
 … CSS
 … JS
 … re-used images

STILL THINK
YOU‘RE
„DESIGNING“?

SOURCES
 https://wpostats.com/
 https://timkadlec.com/
 https://www.smashingmagazine.com/2019/01/front-
end-performance-checklist-2019-pdf-pages/
 https://technology.blog.gov.uk/2018/10/04/making-
gov-uk-pages-load-faster-and-use-less-data/
 https://docs.google.com/spreadsheets/d/1lBQ0T1VB
lBrpkv5Q1vQJkU8hnya_5tRczf9c5TfIgnQ/edit#gid=0

THANK YOU!

Frontend performance on the web

More Related Content

Similar to Frontend performance on the web (20)

More from TRITUM (11)

Recently uploaded (20)

Frontend performance on the web