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
2. 5 THINGS TO UNDERSTAND 5 THINGS
 TO DO
3. 5 THINGS TO UNDERSTAND
4. 5 THINGS TO UNDERSTAND IT MATTERS 1/ Conversion Rates Bounce Rates Brand Halo User Experience
5. Bounce Rates
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/
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/
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/
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/
11. 5 THINGS
 TO DO
12. 5 THINGS TO DO SET YOURSELF UP FOR SUCCESS 1/
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!
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/
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/
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/
17. 5 THINGS TO DO PERFORMANCE BOTTLENECKS 2/
18. 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/
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/
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/
21. Rendering Needs HTML, CSS, & JS
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/
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/
24. DOM and CSSOM Make the Render Tree
25. 5 THINGS TO DO THE COLOUR P .R.P .L. 3/
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 <Link Rel=“Preload”> Hints Think Minimalist, Only What You Need 3.1/
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/
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/
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/
30. Lazy Load Images That Are Below the Fold
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/
32. 5 THINGS TO DO HOW TO FISH 4/
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/
34. Use Chrome’s Performance Tools
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/
36. Key Metrics
 To Focus on and What They Mean
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/
38. Understanding the Waterfall View
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
40. Timings
 vs. Optimizations
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
42. Common Problems & What They Mean
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
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/
45. Dashboard Overview of Test Metrics
46. 5 THINGS TO DO CRAFT- SPECIFIC TIPS! 5/
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/
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/
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/
50. 5 THINGS TO DO CRAFT-SPECIFIC TIPS! PROFILING The Yii2 Debug Toolbar Measuring Queries Measuring Render Time Other Nifty Things 5.4/
51. The Yii2 Debug Toolbar
52. 5 THINGS TO DO CRAFT-SPECIFIC TIPS! PROFILING The Yii2 Debug Toolbar Measuring Queries Measuring Render Time Other Nifty Things 5.4/
53. Measuring Queries
54. 5 THINGS TO DO CRAFT-SPECIFIC TIPS! PROFILING The Yii2 Debug Toolbar Measuring Queries Measuring Render Time Other Nifty Things 5.4/
55. Measuring Render Time
56. 5 THINGS TO DO CRAFT-SPECIFIC TIPS! PROFILING The Yii2 Debug Toolbar Measuring Queries Measuring Render Time Other Nifty Things 5.4/
57. Other Nifty Things
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
60. nystudio107.com @nystudio107 SpeakerDeck.com/
 nystudio107