Performance
      Back to home
      1. Knowledge Base
      2. Tips & Best Practices
      3. Performance

      Performance Best Practices

      With Nyla, you can create high performance shopping experiences, provided you configure things right. The final speed of the site your customers experience is dependent on many factors in your control including:
      • content on your site
      • apps you install
      • tags and tracking turned on
      In order to make the most out of Nyla, we highly recommend that you implement the following best practices to maximize your site performance.

      Images

      You can shave seconds off how long each page of your site takes to load by preparing and configuring your source files in specific ways. Following is a running list of rules of thumb our customers have had success with. 

      1. Upload images at least 2x the width and height of the largest screen that will be viewing them, taking into consideration that some screens are retina. Image widths of at least 2,000 pixels are highly recommended for product shots, and full width heroes should be at least double that.
      2. For optimal performance, use JPEG format unless they the image includes transparency or very fine details that are otherwise getting pixelated. When exporting your JPEG images , be sure to set quality to 100% (noting that JPEG is that it is an inherently "lossy" format and even 100% quality will technically delete picture information; see the next point for how to make images look better if JPEG is looking too pixelated).
      3. Use PNG format at if you want an image to look as good as possible and don't mind it loading slightly slower. Be sure to set quality to 100%.
      4. Images will be optimized automatically by Nyla, but the original file extension does matter as we apply different heuristics on JPEGs / PNGs.
      5. Make sure any large images intended to be seen above the fold on a page (e.g. a hero image) are added within the first two sections on the page (excluding the header). This will ensure these images are prioritized on the initial loading of the page.
      6. If your image looks like an icon or logo, export it as SVG.
      7. Images loaded directly as content items (rather than as backgrounds) should always have either a) Width and Ratio set, or else b) fixed Width and fixed Height to avoid displacing content as they load (creating a layout shift, which negatively impacts the Core Web Vital metric Cumulative Layout Shift).
      8. Color profiles: Any image that contains a color profile needs to have that converted to sRGB in order to be web-safe.
      9. Ratios: In Nyla, when uploading and configuring images, we recommend trying one of the built-in ratios -- you can choose between a number of common ones like 1:1 (great for mobile), 16:9 (most TVs), as well as 4:3, 3:2, etc. If you use one of these, it makes it easy to calculate your exact pixel resolution. You can always set a custom ratio if you like.

      If you are experiencing pixelated images on your site, see this article for how to troubleshoot. 

      Videos

      1. To add video to your site, use the Video content item, and make sure to add a Video Poster image (thumbnail), which can improve the performance for end-users, specially when using videos above the fold.
        1. Hint: In order to use video as a background, you can do this by absolute positioning the video content item and using the same ratio as the parent section.  
      2. For below the fold videos:
        1. Using Embedded as both Vimeo/YouTube will use adaptive video streaming (the quality you get varies based on your connection, which is a good thing).
        2. There is no hard and fast rule on whether Vimeo is better than YouTube, although many of our customers believe Vimeo provides a better looking picture.
      3. For above the fold videos:
        1. In our experience, above-fold video can slow down a page and increase bounce rate, especially on mobile, so for best performance, we suggest not including video above the fold.
        2. If, despite potential performance implications, you decide that having video above the fold is the right decision for your page, here are some things you can do to maximize performance:
          1. Use File Upload as source (not Embedded)
          2. Upload breakpoint-specific videos for Mobile / Desktop
            1. Mobile should not be wider than 1080px
            2. Desktop should not be wider than 1920px
            3. For best-looking videos, consider using square video on mobile
          3. Always upload a Video Poster in the same pixel dimensions as your video(s), which we recommend to set to the first frame of each Video, for a much better initial loading experience. This is mandatory or your page will likely fail Core Web Vitals' Largest Contentful Paint metric.
          4. If your video doesn’t need to include audio (e.g. as a background), delete the audio track (if any) from your video prior to uploading. This will lower the file size.
          5. Use the MP4 (format) / H264 (codec), and don’t exceed 30 frames per second (FPS)
            1. Do not use GIFs for animated media as they will weigh more and look worse.
          6. Optimize each video asset before uploading, using free software such as HandBrake
          7. If autoplaying, limit the length of your video to 15-20 seconds or less. If looping, consider editing your video so that at its conclusion point, a loop will look seamless and the shortness of the video won’t be as obvious.
      4. Content Item Videos should always have an Aspect Ratio set in Nyla to avoid displacing content as they load (creating a layout shift, which negatively impacts the Core Web Vital, Cumulative Layout Shift).

      Icons

      Most SVG work fine in Nyla, but note there are certain edge cases that might cause issues.

      1. Simplify vector information by reducing unnecessary anchor points.
      2. Convert Fonts to Outlines as otherwise custom fonts will not work as expected.
      3. Make sure your SVG doesn’t include embedded raster images (images based on pixels) or it might end up being overall slower than using an actual small image. It’s easy to check whether an image contains raster images – simply zoom in on it several hundred percent – as vector-based artwork scales perfectly given it contains data of vector paths, whereas a raster image will start looking pixelated as you zoom on it.
      4. If you’re still not sure if your SVG is as small as possible, you might try minifying it using a tool like svgminify.com.

      Sources and Properties

      1. When using Source Collection, make sure to maintain a Limit and/or use Grid Pagination to avoid Nyla having to retrieve the entire Shopify catalog as data necessary to render the page.
        1. For cross sells we recommend a limit of 8-12 products.
        2. For collection pages, we recommend paginating after a maximum of 25-30 products.
      2. Avoid using Sources from Apps that aren't server-side rendered (due to requiring information on the current session, like Nosto) above the fold.
      3. When using the Shopify Metafields app in Nyla, only opt in to use metafields in Source Collection if you are actually surfacing them in a collection source.

      Other

      1. We strongly recommend keeping the loading bar (Design > Loading Bar) enabled on Page to Page navigations, as providing instant visual feedback is a much better user experience, even if navigations take well under a second.
      2. When using animations and transitions, do not animate your largest element above the fold (as that will be picked as the Largest Contentful Paint and might make that page fail Core Web Vitals).

      Apps

      Nyla uses strategies to ensure that Apps you install through Nyla can be as optimized as possible, without sacrificing functionality.
      1. Avoid adding Apps/tags/trackers/pixels/scripts directly through Google Tag Manager, as that means Nyla can't help mitigate their impact on performance. A 3rd party app can't tell from the outside when's the best time and priority to load for an optimal initial loading sequence. Instead, if you must add apps/tags/trackers/pixels/scripts, use Nyla Custom App for best performance.
      2. Periodically check every 1-2 months to disable any Apps you're no longer using.
        1. This often takes less than a few minutes of work and yield tremendous performance gains.

      Analytics

      While Nyla takes a best in class approach to tagging, the more tags that you have on your site, the more third party code your customers are downloading to execute on their browsers.
      If you include a tag or tracker in your site, keep in mind that Nyla is not able to mitigate most  of the negative impact of this code itself, so each tag should be as small as possible. Some rules of thumb:
      1. For best performance, include tags directly in Nyla via "Nyla Custom App" as they will load more quickly than if using Google Tag Manager.
      2. Consider periodically checking every 1-2 months to disable any Tags you're no longer using.
        1. This often takes less than a few minutes of work and can yield tremendous performance gains.

      Fonts

      1. Try to keep the number of variants of each Font including different weights (and the total number of Fonts) to a minimum, and delete any unused ones as Nyla can't automatically infer which ones are not needed.
      2. Prefer using Custom Fonts (with .woff2  format) when possible, and prefer using Google Fonts over Adobe Typekit