Table of content
Measurement tools: your navigation aids
Reading the map: interpreting the results.
Understanding the results from these tools is much like reading a map. The information can guide your optimization journey:
- Files that are larger and have high percentages of unused code should be your prime targets for reduction. They are the ‘big wins’ in your optimization journey.
An ongoing journey: continuous assessment
- App audit: Start with an in-depth review of your installed apps. Please list all the apps you use and critically evaluate their necessity and the functionality they provide to your store. If any are rarely used or have negligible impact on your store’s user experience or function, remove them.
- Theme feature audit:
- Like with apps, evaluate the features that come with your Shopify theme.
- Disable the ones you aren’t using.
It relies on the static structure of ES6 module syntax, i.e., import and export. The ES6 module bundler rollup has popularized the name and concept.
- Use module bundlers supporting tree shaking: Webpack and Rollup offer tree-shaking capabilities. They eliminate dead code when creating a bundle by including only utilized modules in the final bundle.
- Enable HTTP/2 on your server: Check your server documentation on how to enable HTTP/2, or ask your hosting provider to enable it.
- Organize your code
- Follow a consistent naming convention: Implement and adhere to a consistent naming convention for variables, functions, classes, and IDs. This makes your code easier to read and understand.
- Regularly update and maintain dependencies
- Audit dependencies: Regularly audit your dependencies for any security vulnerabilities using tools such as npm audit or GitHub’s Dependabot.
- Regular testing and debugging
Regular testing and debugging help you catch and resolve issues before they affect your store’s performance or user experience.
- Use debugging tools: Use browser debugging tools or Node.js debugging tools to identify and fix any issues or inefficiencies in your code.
Clear documentation makes your code easier to understand and maintain for yourself and other developers who might work on your store.
- Comment your code: Use comments to explain the purpose of sections of your code, incredibly complex or non-obvious parts.
- Maintain codebase documentation: Alongside inline comments, maintain a separate document detailing your codebase’s structure, modules, and individual functionality.
Not all third-party apps are created equal. Some are well-coded and efficient, while others can slow down your store with bloated, inefficient code.
- App audit: Regularly review all third-party apps installed on your Shopify store. Remove any that aren’t providing enough value to justify their impact on your site’s performance.
- Research before installing: Before installing a new app, do some research. Look at reviews, check the app’s update history, and consider reaching out to other users to see how the app has impacted their site’s performance.
- Monitor script loading: Use developer tools like Google’s Lighthouse or the Network tab in Chrome DevTools to monitor what scripts are loading on your site.
Even after an app is installed, monitoring its impact on your site’s performance is vital.
- Use performance monitoring tools: Use performance monitoring tools to track how your site’s performance changes over time. Tools like Google’s Lighthouse, WebPageTest, or Shopify’s online store speed report can provide valuable insights.
- Test before and after installation: Take a performance measurement before installing a new app. After installation, take another measurement. Comparing the two can give you an idea of the app’s impact on your site’s performance.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.Get Started
People also searched for
- 2.2.x, 2.3.x, 2.4.x