Optimize & UX

I. Why smaller image sizes are better for SEO and user experience?

Using smaller image sizes helps your website load faster. Search engines like Google consider page speed an important ranking factor, so optimized images can improve your SEO.

Faster loading also makes the website smoother and more enjoyable for visitors, especially on mobile devices or slower connections. This means users are more likely to stay on your site and continue exploring your products.

II. How does Navi+ process your images?

Navi+ first uploads your image in its original size. Then it compresses the image with an optimized algorithm and reduces the display size. This size is carefully chosen by Navi+ to be ideal for both user experience and SEO, since images in menus are usually thumbnails or icons that need to be small and load quickly.

Note: For small images like logos or icons, Navi+ does not compress them to preserve sharpness.

After that, Navi+ stores your image on BunnyCDN — a powerful content delivery network (CDN) for images, JavaScript, CSS, and more. BunnyCDN provides extremely fast loading speeds through its global server network. This ensures your website can handle millions of visits without slowing down or causing delays.

III. What should I do if I want to keep my images at their original quality?

In some special cases, you may want Navi+ not to modify your image quality—otherwise, the compression could reduce the quality you expect, for example, some important product images. In this case, you need to upload the image directly to Shopify and provide the link to Navi+ to keep the original quality.

Step 1: Prepare your image (manual process) Prepare your image as desired and rename it for SEO optimization. (Navi+ will only rename images for SEO if uploaded through the Navi+ tool.) You should also compress the image to a reasonable size—ideally a few hundred KB. You can use Shopify’s Image Resizer here: https://www.shopify.com/tools/image-resizer.

Step 2: Upload to Shopify Right-click on the menu Content, select Open link in new Tab, then go to Files. Drag and drop the image prepared in Step 1. Once uploaded, find your file in the list and click the link icon to copy its URL. This URL will be used in Navi+ for uploading the image.

Step 3: Use the image URL in Navi+ Paste the URL obtained from Step 2 into Navi+ using the Upload Image tool.

Why do you need to do this? Isn’t Navi+ already fast?

Navi+ is very fast. It is fully deployed on a leading CDN with very low latency (around 100ms) and can serve millions of customers without slowing down.

However, Navi+ still runs within the Shopify ecosystem. Shopify has its own loading rules:

1. Shopify prioritizes loading its own resources first.

2. Then Shopify loads the theme content.

3. Finally, Shopify loads app content, but not in any specific order.

This means if you are using multiple apps, Navi+ may sometimes be loaded later than expected. That’s why it can feel slower in certain cases.

What is my solution?

Currently, Navi+ has high priority when loading on Shopify websites. However, there is still a certain delay. We will address these issues one by one here:

Slide Menu: Add a loading effect and lock the trigger selector

Very simple: just enter the CSS selector you use for the Slide Menu into the embed section of the Navi+ app (see image below).

Mega Menu (Replacement mode): Add a loading effect and lock the trigger selector

Note:

• Add the suffix (M) if you want it to apply only on mobile.

• Add the suffix (D) if you want it to apply only on desktop.

• Leave no suffix if you want it to apply on both platforms.