Mouthcrafted by
Andrew Welch
Making a
Craft CMS
Website that
FLIES
Slide 2
Slide 2 text
5 THINGS TO
UNDERSTAND
5 THINGS
TO DO
Slide 3
Slide 3 text
5 THINGS TO
UNDERSTAND
Slide 4
Slide 4 text
5 THINGS TO UNDERSTAND
IT MATTERS
1/
Conversion
Rates
Bounce Rates Brand Halo User Experience
Slide 5
Slide 5 text
Bounce Rates
Slide 6
Slide 6 text
5 THINGS TO UNDERSTAND
IT DOESN’T
MATTER
Real
Performance
Matters Less
Perceived
Performance
Is Key
Keep People in a
Mentally Active
State
Metrics Give Us
Insights, but UX
Is What Matters
2/
Slide 7
Slide 7 text
5 THINGS TO UNDERSTAND
IT’S NOT
ABOUT YOU!
Forget About
Page Load
Times
They Are Really
People Wait
Times
Respect Their
Time, Make
Them Happy
Happy People
Engage &
Convert More
3/
Slide 8
Slide 8 text
5 THINGS TO UNDERSTAND
RESPONSIVE
PERFORMANCE
DESIGN
Device Size &
Screen Size
Is a Variable
Processing
Power
Is a Variable
Network Speed
& Quality
Is a Variable
People’s
Attention Span
Is a Variable
4/
Slide 9
Slide 9 text
5 THINGS TO UNDERSTAND
PLANNING FOR
PERFORMANCE
You Don’t
Decide To Make
a Car “Go Fast”
You Design It To
Go Fast From
Day One
You Test It
During
Development
It Isn’t
Something
You Can Bolt on
5/
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
5 THINGS
TO DO
Slide 12
Slide 12 text
5 THINGS TO DO
SET YOURSELF
UP FOR
SUCCESS
1/
Slide 13
Slide 13 text
5 THINGS TO DO SET YOURSELF UP FOR SUCCESS
SET UP
A STAGING
SITE FIRST
Start Your
Workflow
From Day One
Allows You
To Do External
Testing
1.1/
Testing in a
Real World
Environment
Disable
Indexing and
Sitemaps!
Slide 14
Slide 14 text
5 THINGS TO DO SET YOURSELF UP FOR SUCCESS
CONSIDER THE
COST OF ANYTHING
YOU ADD
The Cost of
JavaScript
The Cost of
CSS
The Cost of
Database
Queries
The Cost of
Images
1.2/
Slide 15
Slide 15 text
5 THINGS TO DO SET YOURSELF UP FOR SUCCESS
RUN EXTERNAL
PERFORMANCE
TESTS WEEKLY
Google
PageSpeed
Insights
Chrome
Lighthouse
WebPageTest.org Cloudinary
Image Analysis
1.3/
Slide 16
Slide 16 text
5 THINGS TO DO SET YOURSELF UP FOR SUCCESS
INCLUDE
A PERFORMANCE
BUDGET
A Budget for
How Many
Fonts
A Budget for
the Weight of a
Web Page
A Budget for
Development
Time
A Monetary
Budget Added
to the Project
1.4/
Slide 17
Slide 17 text
5 THINGS TO DO
PERFORMANCE
BOTTLENECKS
2/
Slide 18
Slide 18 text
5 THINGS TO DO PERFORMANCE BOTTLENECKS
SERVER
REQUEST/
RESPONSE
DNS Lookups,
Https
Handshakes
&
“Preconnect”
Database
Queries
Back End Page
Rendering
2.1/
Slide 19
Slide 19 text
5 THINGS TO DO PERFORMANCE BOTTLENECKS
NETWORK
LATENCY &
BANDWIDTH
You Design
on a Best-Case
Device
Latency &
Bandwidth Are
Not the Same
Optimize Not
Just What Is
Sent, but When
Make the Worst-
Case Scenario
Tolerable
2.2/
Slide 20
Slide 20 text
5 THINGS TO DO PERFORMANCE BOTTLENECKS
DELIVERY OF
RESOURCES
Feed the Client
What It Needs,
When It Needs It
Rendering
Needs HTML,
CSS, & JS
Don’t Block the
Render!
Imagine an
Assembly Line
2.3/
Slide 21
Slide 21 text
Rendering
Needs HTML,
CSS, & JS
Slide 22
Slide 22 text
5 THINGS TO DO PERFORMANCE BOTTLENECKS
DELIVERY OF
RESOURCES
Feed the Client
What It Needs,
When It Needs It
Rendering
Needs HTML,
CSS, & JS Don’t Block the
Render!
Imagine an
Assembly Line
2.3/
Slide 23
Slide 23 text
5 THINGS TO DO PERFORMANCE BOTTLENECKS
IN-BROWSER
RENDERING
How the
Render Tree
Works
DOM and
CSSOM Make
the Render Tree
Layout
Determines the
Size and Place
Finally,
Everything Gets
Painted
2.4/
Slide 24
Slide 24 text
DOM and
CSSOM Make
the Render
Tree
Slide 25
Slide 25 text
5 THINGS TO DO
THE COLOUR
P
.R.P
.L.
3/
Slide 26
Slide 26 text
5 THINGS TO DO THE COLOUR P.R.P.L.
P - PUSH
CRITICAL PATH
RESOURCES
Critical Path
Is Everything
Above the Fold
Critical CSS Is a
Subset of Your
Full Site CSS
Hints
Think
Minimalist, Only
What You Need
3.1/
Slide 27
Slide 27 text
5 THINGS TO DO THE COLOUR P.R.P.L.
R - RENDER
CRITICAL PATH
First Paint
Is When People
See Something
Time to
Interactive Is
Do Something
Minimal if any
JavaScript;
Render Blocks
Render Quickly
Regardless of
Entrypoint
3.2/
Slide 28
Slide 28 text
5 THINGS TO DO THE COLOUR P.R.P.L.
P - PRE-CACHE
OTHER PAGES/
RESOURCES
Where
Might They
Go Next?
Use a Service
Worker To Pre-
Cache Pages
Use Mouse-Over
Intents
To Pre-Load
Anticipate
What They
Might Do Next
3.3/
Slide 29
Slide 29 text
5 THINGS TO DO THE COLOUR P.R.P.L.
L - LAZY LOAD
EVERYTHING
ELSE
Lazy Load
Large or Seldom
Used Elements
Lazy Load
Images That Are
Below the Fold
Lazy Load
JavaScript for
Video Players
Lazy Load
Maps on Mouse-
Over or Click
3.4/
Slide 30
Slide 30 text
Lazy Load
Images That
Are Below
the Fold
Slide 31
Slide 31 text
5 THINGS TO DO THE COLOUR P.R.P.L.
L - LAZY LOAD
EVERYTHING
ELSE
Lazy Load
Large or Seldom
Used Elements
Lazy Load
Images That Are
Below the Fold Lazy Load
JavaScript for
Video Players
Lazy Load
Maps on Mouse-
Over or Click
3.4/
Slide 32
Slide 32 text
5 THINGS TO DO
HOW TO FISH
4/
Slide 33
Slide 33 text
5 THINGS TO DO HOW TO FISH
YOU BUILD ON
THE BEST-CASE
Your Computer
Is Fast, and Has
Stable Internet
Your Client Does
Too, You Are
Not the Users
Use Chrome’s
Performance
Tools
Show the Client
Performance
Degradation
4.1/
Slide 34
Slide 34 text
Use Chrome’s
Performance
Tools
Slide 35
Slide 35 text
5 THINGS TO DO HOW TO FISH
UNDERSTANDING
WEBPAGETEST.ORG
Renders in a
Real Browser/
Device
Renders From
Anywhere
in the World
Key Metrics
To Focus on and
What They Mean
Understanding
the Waterfall
View
4.2/
Slide 36
Slide 36 text
Key Metrics
To Focus on
and What
They Mean
Slide 37
Slide 37 text
5 THINGS TO DO HOW TO FISH
UNDERSTANDING
WEBPAGETEST.ORG
Renders in a
Real Browser/
Device
Renders From
Anywhere
in the World
Key Metrics
To Focus on and
What They Mean Understanding
the Waterfall
View
4.2/
Slide 38
Slide 38 text
Understanding
the Waterfall
View
Slide 39
Slide 39 text
Measures
in-Browser
Performance
Timings
vs.
Optimizations
Common
Problems &
What They Mean
GPSI Is a
Ranking
Signal…
4.3/5 THINGS TO DO HOW TO FISH
UNDERSTANDING
GOOGLE
PAGESPEED
INSIGHTS
Slide 40
Slide 40 text
Timings
vs.
Optimizations
Slide 41
Slide 41 text
Measures
in-Browser
Performance
Timings
vs.
Optimizations Common
Problems &
What They Mean
GPSI Is a
Ranking
Signal…
4.3/5 THINGS TO DO HOW TO FISH
UNDERSTANDING
GOOGLE
PAGESPEED
INSIGHTS
Slide 42
Slide 42 text
Common
Problems &
What They
Mean
Slide 43
Slide 43 text
Measures
in-Browser
Performance
Timings
vs.
Optimizations
Common
Problems &
What They Mean GPSI Is a
Ranking
Signal…
4.3/5 THINGS TO DO HOW TO FISH
UNDERSTANDING
GOOGLE
PAGESPEED
INSIGHTS
Slide 44
Slide 44 text
5 THINGS TO DO HOW TO FISH
UNDERSTANDING
LIGHTHOUSE
Renders From
Your Browser &
Your Network
Dashboard
Overview of
Test Metrics
PWA Is a
Progressive
Web App
Performance
Defaults
to Mobile
4.4/
Slide 45
Slide 45 text
Dashboard
Overview of
Test Metrics
Slide 46
Slide 46 text
5 THINGS TO DO
CRAFT-
SPECIFIC TIPS!
5/
Slide 47
Slide 47 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
TWIG IS A
TEMPLATING
LANGUAGE!
If You See More
Than 50%
Twig…Trouble
Data Should Be
Prepared for
Presentation
You Can Do a
Lot in Twig.
But Should You?
Tons of Twig Is
Usually a Result
of Bad IA
5.1/
Slide 48
Slide 48 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
UNDERSTANDING
EAGER LOADING
N+1
How To Sound
Smart
Load What You
Know You’re
Going To Need
Saves
Round-Trips to
the Database
The Same Data
Gets Retrieved
Either Way
5.2/
Slide 49
Slide 49 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
CACHE AS
CACHE CAN
Caching Solves
Scaling, Not
Performance
We Are Trying
To Trade 1 Db
Query for Many
{% Cache %}
Chunk Is Stored
in the Db
ElementQueries
Inside Are
Also Cached
5.3/
Slide 50
Slide 50 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
PROFILING
The Yii2 Debug
Toolbar
Measuring
Queries
Measuring
Render Time
Other Nifty
Things
5.4/
Slide 51
Slide 51 text
The Yii2
Debug
Toolbar
Slide 52
Slide 52 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
PROFILING
The Yii2 Debug
Toolbar
Measuring
Queries
Measuring
Render Time
Other Nifty
Things
5.4/
Slide 53
Slide 53 text
Measuring
Queries
Slide 54
Slide 54 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
PROFILING
The Yii2 Debug
Toolbar
Measuring
Queries
Measuring
Render Time
Other Nifty
Things
5.4/
Slide 55
Slide 55 text
Measuring
Render Time
Slide 56
Slide 56 text
5 THINGS TO DO CRAFT-SPECIFIC TIPS!
PROFILING
The Yii2 Debug
Toolbar
Measuring
Queries
Measuring
Render Time
Other Nifty
Things
5.4/
Slide 57
Slide 57 text
Other Nifty
Things
Slide 58
Slide 58 text
WRAPPED UP
IN A BOW
You’re Making
Custom
Applications
Performance Is
a Mindset and
an Approach
You Engineer
Performance,
Not Bolt It on
These Skills Are
in Demand for
Higher-End Sites