Webstore Performance Considerations

Tools such as Google's PageSpeed Insights Report and other performance reports are a quick and easy way for merchants to check their site performance. Whether you are developing a new theme or customising an existing one, it is important to consider how your changes will affect webstore performance.

Before making any large scale theme changes consider running a performance report to get a baseline for current webstore performance. Then once you have completed your changes run the report again. If the score has considerably decreased, reconsider your changes or look at ways to optimise the theme to counteract the score change.

Note, because of the way most performance reports are calculated and how Neto caches content you should not expect to see the exact same score every time the report is generated. Even with no changes, small fluctuations in performance scores are expected.

General Webstore Improvements

  • For production or live webstores always have the Web Accelerator ON (if you must turn off caching do so using the Developer Mode setting)
  • Only break the cache when absolutely necessary. If you need to check theme changes without affecting the live site do so using a staging theme or an empty nview query, e.g: ?nview=
  • Reduce and optimise images on the page. Image dimensions should be between x1 and x1.5 their display size and the file size as small as possible. For the later, Neto will process and optimise images uploaded through the control panel but you could also consider using a compression tools such as https://tinypng.com/ and upload the image files directly to the webstore server using the raw_imagedrop folder
  • Ensure product image sizes are set to their default or work with current theme (update and reprocess images if needed)

Custom Script Improvements

  • Audit custom script setup and set any unused scripts inactive
  • Defer / async and minify 3rd party code where possible
  • Remove any thumbnail code that references 3rd party assets as this can quickly drag down load times
  • Provide a facade for any widgets that customers must interact with first to trigger (e.g. customer chat)

Theme Template Improvements

  • Lazy load any images not visible on page load and prioritise key images (use the browsers native support or a plugin)
  • Add image dimensions to help the browser reserve space and stop potential layout shifts. For adverts you can use [@img_width@] and [@img_height@]. For products, pull image setting values via their corresponding configs, e.g: [@config:IMG_THUMB_WIDTH@]. Ensure images are still responsive with additional CSS
  • Defer or async external JavaScript files where possible and include minified versions - do not do this to Neto hosted files or files that are required on page load (such as the Bootstrap Framework for example) without thoroughly testing the outcome as this may affect theme functionality and make the webstore perform worse
  • When adding 3rd party assets ensure these are not main-thread blocking. If there is a chance the asset will be needed on page load, ensure the browser knows about it by using resource hints such as “dns-prefetch“, “preload“, and/or “preconnect“
  • When using custom fonts, ensure these are loaded as soon as possible and provide a system fallback to ensure text remains visible while loading and doesn’t delay rendering of the page
  • When using 3rd party plugins, consider if it is better to link to a CDN hosted asset which can then be deferred vs hosting the plugin files directly in the theme code. This will depend on the plugin and when its needed vs the page load
  • When adding new content to a page, be aware of the DOM size. A large or heavily nested DOM will cause longer load times. If a larger DOM size is required, consider AJAX loading content to take it out of the initial page load

BASE Code Improvements

  • Check content limits and adjust if needed e.g. no more than 24 thumbnails total per page, no more than 3 or 4 banner images (note, some limits may be set from control panel settings)
  • If the same function appears in multiple areas of the same template, combine them into a single function call and set all required variables to be used later on in the template instead of calling a new function each time (hint, you can set almost any template contents into a variable, including HTML blocks)
  • Ensure static content is cached appropriately and has the correct cache type
  • Do not nest functions too heavily or run complex code in large looping functions as this can become inefficient very quickly. If this is required, consider separating out the content to its own template and AJAX loading that template to take it out of the initial page load

Not sure about the above changes, or looking for something a bit different? If you are experienced with HTML and CSS, our developer docs provide details on the Neto by Maropost specific parts of web development. If you are not comfortable editing code, we recommend submitting a request to a Neto by Maropost design partner.

Was this article useful?

Be notified when this page is updated. Optional.