Liquid Diet: Optimising Shopify Theme Performance

Transcript

1. twnsnd.com/shopifypartnersnorth
2. • Leeds-based • >20 years in web development, primarily eCommerce & SaaS • Co-founded SHIFT Commerce, 10 years as CTO • Now: Fractional CTO / Web Consultant • Lifter, Foodie, Coffee, Wine, Travel
3. • Why should we care about web performance • How we measure & monitor web performance • Laying stable foundations • Optimisations techniques & footguns to avoid
4. WHY SHOULD W e CARE ABOUT WEB PERFORMANCE?
5. Permanent Abandonment Rate 0% 10% 20% 30% 40% Unavailable Slow 28% 9% Source: Akamai, The Impact of Web Performance on E - Retail Success
6. C arp e impr o ved LARGEST CONTENTFUL PAINT (LCP) b y 52% a n d CUMULATIVE LAYOUT SHIFT (CLS) b y 41% and s a w a 10% i n cre a s e in t r af fi c , a 5% in c re a se i n o n l i ne s t ore c on v er sio n r a te , an d a 15% i n c r e a se i n re v en ue . Source: Shopify via WPOStats
7. IT'S NOT JUST YOUR STOREFRONT
8. HOW DO WE MEASURE PERCEIVEDPERFORMANCE? PERCEIVED
9. IF A TREE FALLS SLOWLY IN THE WOODS... SLOWLY
10. I t ' s been a jour ne y ...
11. 2020 s 2000 s Time To First Byte Full Page Load Time Largest Contentful Paint Cumulative Layout Shift Interaction to Next Paint
12. THE “CORE WEB VITALS”
13. LCP CLS INP LARGEST CONTENTFUL PAINT CUMULATIVE LAYOUT SHIFT INTERACTION TO NEXT PAINT VISUAL STABILITY LOAD TIME RESPONSIVENESS
14. Metric Good Needs Improvement Poor LCP < 2.5s 2.5 – 4s > 4s CLS < 0.1 0.1 – 0.25 > 0.25 INP < 200ms 200 – 500ms > 500ms (at the 75th percentile)
15. SHOPIFY'S RUM REPORTS Real User Monitoring
16. CLS so good Shopify doesn't even grade it!
17. LCP
22. CLS
24. INP
28. We shouldn't just ignore 25% of our data
29. GOING DEEPER
30. rumvision.com
31. cruxvis.withgoogle.com
32. rumvision.com
33. rumvision.com
34. rumvision.com (redacted)
35. cruxvis.withgoogle.com 4% from reloading page 2:1 ratio of going back/forward being cached vs requiring new HTML 30% instant, thanks to Speculation Rules pre-rendering
36. SYNTHETIC (LAB) TESTING
37. 59/100?! 18 seconds?!
38. 2ms INP breach < 1 second LCP
39. Now it's 49/100?! 🤷
41. Simulate real world conditions Pro fi le a page load
42. How does your machine compare to the real world? Bandwidth / CPU time attribution Useful data and insights
43. PUTTING OUR RIGHT FOOT FORWARD
44. “ s t a r t w i t h a t h e m e t h a t a l r e a d y h a s g o o d p er f o r m a nc e a s i t ’ s h ar d t o o p timiz e a t h e m e t ha t h a s b a d p e r f o r m a n c e w i t h o u t a l o t o f c o s t l y c us t omi z a t ion s " Sia Karamalegos, ThemeVitals.com
45. themevitals.com
46. themevitals.com
47. THIRD-PARTY APPS
48. First-party cookie banner
49. “A l w a y s p u t y ou r cli e n t and t h e u s er f ir s t . D o n ' t impl e men t s o me th in g jus t b e c a us e y o u ' re c o mf or t abl e with a p a r t i c u l ar a p p , theme , or t e c h n o l o g y : ch oos e t h e s o l u t i o n t h a t k e e p s t h e s t o r e f a s t , s i m p l e , r e l i a b l e , a n d a l i g n e d w i t h t h e b u s i n e s s n e e d s . O p t imi z e f or UX, n o t DX" Estela Franco, Senior Technical Architect for Web Performance @ Shopify
50. WEB PLATFORM-FIRST
51. See: developer.chrome.com/docs/web-platform/view-transitions
52. BEFORE AFTER • Huge client-side JS framework • Missing user feedback • Endless routing library churn • CSS-only for cross-document • 1 JS call for same-document • Native browser user feedback See: developer.chrome.com/docs/web-platform/view-transitions
53. CSS SCR oll -SNAP Z e r o J a v a S cr i p t See: web.dev/articles/css-scroll-snap & developer.chrome.com/blog/carousels-with-css
54. SCR oll -LINKED ANIMATION Z e r o J a v a S cr i p t See: developer.chrome.com/docs/css-ui/scroll-driven-animations
55. SCR oll -LINKED ANIMATION Z e r o J a v a S cr i p t (see also scroll-state() container queries) See: developer.chrome.com/blog/css-scroll-state-queries
56. BEFORE AFTER • @radix-ui/react-accordion • react-modal • swiper.js • react-select • GSAP / Framer Motion • fl oating-ui • <details> • <dialog> & Command Invokers • CSS snapping & carousels • Customisable <select> • Scroll-driven Animation • Popovers, Interest Invokers, Anchor Positioning
57. OPTIMISATIONS
58. “I t m ight no t s o un d te ch i e or g l amor ou s , but one of th e main i ss u e s I f a ce is a g e n c i e s and d e ve l op er s o ft e n a d d i n g la yer s of c omp l e xi t y b y us i n g f ami l iar JAVASCRIPT l ibr ar ie s in s t ea d of le v er a g in g L i q u i d , c a u s i n g se ve r e web p er f ormance i s s ue s " Estela Franco, Senior Technical Architect for Web Performance @ Shopify
59. Shopify Theme Inspector Chrome Extension
60. Shopify Theme Inspector Chrome Extension
61. • Ignoring the power of {% paginate %} to limit database time • Relying on looping through product.tags instead of assigning proper meta fi elds/ metaobjects • Assigning all the meta fi elds at variant- level rather than de-duping to product-level Mateusz Krzeszowiak, Lead Technical Architect, Performance @ Shopify
62. section.index & section.location
63. preload_tag / preload argument
64. inline_asset_content
65. YOU DON'T NEED ANYTHING FANCY OR COMPLEX
67. <script type="speculationrules"> { "prefetch": [ { "source":"document", "where": { "selector_matches": ".c-product-card__heading a" }, "eagerness":"moderate" } ], "prerender": [ { "where": { "or": [ { "href_matches": "/products/*" }, { "href_matches": "/collections/*" }, { "href_matches": "/pages/*" }, { "href_matches": "/blogs/*" } ] }, "eagerness": "moderate" } ] } </script> See: developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
68. lessonsofacto.com
69. THANK YOU twnsnd.com/shopifypartnersnorth