Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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/
  2. 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/
  3. 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/
  4. 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/
  5. 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!
  6. 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/
  7. 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/
  8. 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/
  9. 5 THINGS TO DO PERFORMANCE BOTTLENECKS SERVER
 REQUEST/ RESPONSE DNS

    Lookups, Https Handshakes <Link Rel=“Dns- Prefetch”> & “Preconnect” Database Queries Back End Page Rendering 2.1/
  10. 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/
  11. 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/
  12. 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/
  13. 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/
  14. 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 <Link Rel=“Preload”> Hints Think Minimalist, Only What You Need 3.1/
  15. 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/
  16. 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/
  17. 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/
  18. 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/
  19. 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/
  20. 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/
  21. 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/
  22. 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
  23. 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
  24. 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
  25. 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/
  26. 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/
  27. 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/
  28. 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/
  29. 5 THINGS TO DO CRAFT-SPECIFIC TIPS! PROFILING The Yii2 Debug

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

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

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

    Toolbar Measuring Queries Measuring Render Time Other Nifty Things 5.4/
  33. 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