Making a Craft CMS Website That FLIES

We'll go through the steps you can take to write a website that performs well, learning how to use the Debug Toolbar to profile our website, and make substantive improvements via the {% cache %} tag, Eager Loading, and other techniques.

Related articles:

A Pretty Website Isn’t Enough

Implementing Critical CSS on your website

Speed up your Craft CMS Templates with Eager Loading

Transcript

1. Mouthcrafted by
   Andrew Welch
   Making a

   Craft CMS
   Website that
   FLIES
   

   View Slide

2. 5 THINGS TO
   UNDERSTAND
   5 THINGS

   TO DO
   

   View Slide

3. 5 THINGS TO
   UNDERSTAND
   

   View Slide

4. 5 THINGS TO UNDERSTAND
   IT MATTERS
   1/
   Conversion
   Rates
   Bounce Rates Brand Halo User Experience
   

   View Slide

5. Bounce Rates
   

   View Slide

6. 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/
   

   View Slide

7. 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/
   

   View Slide

8. 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/
   

   View Slide

9. 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/
   

   View Slide

10. View Slide

11. 5 THINGS

    TO DO
    

    View Slide

12. 5 THINGS TO DO
    SET YOURSELF
    UP FOR
    SUCCESS
    1/
    

    View Slide

13. 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!
    

    View Slide

14. 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/
    

    View Slide

15. 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/
    

    View Slide

16. 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/
    

    View Slide

17. 5 THINGS TO DO
    PERFORMANCE
    BOTTLENECKS
    2/
    

    View Slide

18. 5 THINGS TO DO PERFORMANCE BOTTLENECKS
    SERVER

    REQUEST/
    RESPONSE
    DNS Lookups,
    Https
    Handshakes
    Prefetch”> &
    “Preconnect”
    Database
    Queries
    Back End Page
    Rendering
    2.1/
    

    View Slide

19. 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/
    

    View Slide

20. 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/
    

    View Slide

21. Rendering
    Needs HTML,
    CSS, & JS
    

    View Slide

22. 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/
    

    View Slide

23. 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/
    

    View Slide

24. DOM and
    CSSOM Make
    the Render
    Tree
    

    View Slide

25. 5 THINGS TO DO
    THE COLOUR
    P
    .R.P
    .L.
    3/
    

    View Slide

26. 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
    Rel=“Preload”>
    Hints
    Think
    Minimalist, Only
    What You Need
    3.1/
    

    View Slide

27. 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/
    

    View Slide

28. 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/
    

    View Slide

29. 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/
    

    View Slide

30. Lazy Load
    Images That
    Are Below
    the Fold
    

    View Slide

31. 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/
    

    View Slide

32. 5 THINGS TO DO
    HOW TO FISH
    4/
    

    View Slide

33. 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/
    

    View Slide

34. Use Chrome’s
    Performance
    Tools
    

    View Slide

35. 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/
    

    View Slide

36. Key Metrics

    To Focus on
    and What
    They Mean
    

    View Slide

37. 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/
    

    View Slide

38. Understanding
    the Waterfall
    View
    

    View Slide

39. 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
    

    View Slide

40. Timings

    vs.
    Optimizations
    

    View Slide

41. 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
    

    View Slide

42. Common
    Problems &
    What They
    Mean
    

    View Slide

43. 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
    

    View Slide

44. 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/
    

    View Slide

45. Dashboard
    Overview of
    Test Metrics
    

    View Slide

46. 5 THINGS TO DO
    CRAFT-
    SPECIFIC TIPS!
    5/
    

    View Slide

47. 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/
    

    View Slide

48. 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/
    

    View Slide

49. 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/
    

    View Slide

50. 5 THINGS TO DO CRAFT-SPECIFIC TIPS!
    PROFILING
    The Yii2 Debug
    Toolbar
    Measuring
    Queries
    Measuring
    Render Time
    Other Nifty
    Things
    5.4/
    

    View Slide

51. The Yii2
    Debug
    Toolbar
    

    View Slide

52. 5 THINGS TO DO CRAFT-SPECIFIC TIPS!
    PROFILING
    The Yii2 Debug
    Toolbar
    Measuring
    Queries
    Measuring
    Render Time
    Other Nifty
    Things
    5.4/
    

    View Slide

53. Measuring
    Queries
    

    View Slide

54. 5 THINGS TO DO CRAFT-SPECIFIC TIPS!
    PROFILING
    The Yii2 Debug
    Toolbar
    Measuring
    Queries
    Measuring
    Render Time
    Other Nifty
    Things
    5.4/
    

    View Slide

55. Measuring
    Render Time
    

    View Slide

56. 5 THINGS TO DO CRAFT-SPECIFIC TIPS!
    PROFILING
    The Yii2 Debug
    Toolbar
    Measuring
    Queries
    Measuring
    Render Time
    Other Nifty
    Things
    5.4/
    

    View Slide

57. Other Nifty
    Things
    

    View Slide

58. 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
    

    View Slide

59. View Slide

60. nystudio107.com @nystudio107 SpeakerDeck.com/

    nystudio107
    

    View Slide