PerformanceChecklist.md

Consider performance early and often

• Think about performance at the beginning of every project
• Set a goal and baseline
• Set trip wires to perform audits along the way

Cache where you can

• Use memoize

function Badge(props) {};

const Badge = React.memo(function Badge(props) {});

const formattedTotal = useMemo(
  () => renderBadge(i18n, total, useShopMoney),
  [i18n, total, useShopMoney],
);

@memoize()
private renderBadge() {}

Keep track of query costs

• The admin has a recommended query limit of 1000. We shouldn’t be even getting close to this
• Push back on API decisions when you can

Use the tools

• Use speed curve
• Use lighthouse
• Familiarize yourself with React profiler
• Test different sites daily with performance and network dev tools

Make your components asynchronous

• Use createAsyncComponent from @shopify/react-async which comes with:
• usePreload()
  • starts loading your component query on hover or other types of navigation intent
• usePrefetch()
  • starts loading your component query on hover or other types of navigation intent
• useKeepFresh()
  • keeps data fresh on pages that are expected to change often and also when the user is expected to navigate back to them

const MySection = createAsyncComponent({
  load: () => import(/* webpackChunkName: 'mySection' */ './MySection'),
  usePreload: () => usePreload(MySectionQuery),
  usePrefetch: () => usePrefetch(MySectionQuery),
  useKeepFresh: () => useKeepFresh(MySectionQuery),
});

Defer page hydration

• Start “below the fold” component queries after the page above has finished loading
• Consider adding loading states to these components if they don’t have them built in

Use dashboards

• Data dog
• Mode
• Splunk

Use fast.shopify.io

• Read about Apdex - Wikipedia
• Set a score that makes sense for your project and try to improve on that score

Use reasonable image sizes

• Set a maxWidth on your query i.e. transformedSrc(maxWidth: 480)
• Use responsive images

<Image
  source={avatar.smallScreen}
  sourceSet={[
    {
      source:{avatar.mediumScreen},
      descriptor: '720w',
    },
    {
      source:{avatar.largeScreen},
      descriptor: '1080w',
    }
  ]}
/>

Dial back on the fonts

• Use a Font style matcher
• Split your bundled font into subsets using Filament groups Glyphhanger

Testing your work

• Throttle your network and cpu to test load times and animations or interactions
• Better yet find a lesser performant device and do real life testing
• Keep an eye on the FPS meter in dev tools when animating
  • Keep in mind that some devices could be expecting 120fps over 60
• Test your site while showing layer borders – Try not to create too many layers.
  • Check to see which css properties trigger layer changes and repaints at CSS Triggers