$30 off During Our Annual Pro Sale. View Details »

Making a Craft CMS Website That FLIES

Andrew Welch
September 27, 2018

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

Andrew Welch

September 27, 2018
Tweet

More Decks by Andrew Welch

Other Decks in Technology

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