How can I enhance mobile speed without altering desktop design?

Technical Q&A
1

Hello,

My store - florabymillie.com - is super slow on mobile. When it comes to store design, how can I change the design for mobile without changing desktop design ? Apparently I already have too many apps so I am hoping I can do this without adding another app. Any help would be appreciated thanks.

1 Like
2

Hello @Millie03 I have checked your store in google page speed https://pagespeed.web.dev/report?url=https%3A%2F%2Fflorabymillie.com%2F

I suggest to fix these issue to improve speed

Reduce unused JavaScript (remove unwanted apps, optimize current apps JS files, compress, inline them)

Properly size images (resize and convert them to webp)

Eliminate render-blocking resources (inline CSS files)

Serve images in next-gen formats (Convert images to webp)

Hope this will improve load time, if you are unable to do it i can help with this. Thanks.

3

Hi @kazi_1

Thanks but I have no idea how to do any of that except remove unwanted apps.

4

@Millie03 you can discuss with me in PM. Thanks

5

Hello @Millie03 ,

Greetings from flareAI app! I am Gina, and I am here to help.

I have run a speed test for your store for mobile and the score is only 38.

2023-02-24 2023-02-24 16-39-24.png
2023-02-24 2023-02-24 16-39-24.png1563Ă—773 211 KB

There are a few things you can do to improve the mobile performance of your Shopify store without adding another app or changing your desktop design.

Here are some tips:

  1. Use a responsive theme
    A responsive theme is designed to adapt to different screen sizes and devices, so it can help optimize your store for mobile users without affecting the desktop design.

  2. Optimize your images
    Large images can slow down your store’s loading time on mobile. You can optimize your images by compressing them, reducing their size, or using lazy loading techniques.

  3. Simplify your design
    Consider simplifying your mobile design by removing any unnecessary elements or reducing the number of images and videos. This can help improve your store’s loading time and make it easier for mobile users to navigate.

  4. Minimize the use of JavaScript
    JavaScript can slow down your store’s loading time, especially on mobile devices. Try to minimize the use of JavaScript on your mobile pages to improve performance.

  5. Remove all unwanted Shopify Apps which you are not using
    You should disable app features you don’t use, or you can remove the app if you don’t need it. If you are removing an app make sure to remove the code that was added as part of the app install process.

By implementing these tips, you can help optimize your store for mobile users without changing the desktop design or adding another app.

I hope this information proves useful.

Gina

6

Hello @flareAI

Thanks for your reply.

I don’t know what themes are “responsive” but at this point in time I need to stay on a free theme. I have an app that is supposed to be optimizing my images already. I don’t know how to “simplify” my mobile design. If I changed my mobile design, wouldn’t I also be changing my desktop design?

I have not idea about minimizing use of javascript. I don’t even know what javascript is. I don’t have any unused apps.

So where do I go from here?

1 Like
7

Hello @Millie03 ,

We are AliReviews - All-in-one reviews solution for all businesses.

We know starting your online business may require a lot of effort on technical things - which not everyone comfortable with. In your case, you can use “Responsive” theme to resolve the issue.

Responsive theme is a theme allow your site to adapt to different screen sizes. Responsive design involves creating a single design that is flexible enough to adapt to different screen sizes, whether it’s a desktop, tablet, or mobile device.

Shopify offers a variety of free responsive themes that you can use for your online store. Here are some options:

  1. Debut: Debut is a versatile and modern theme that is great for new online stores. It has a clean and simple design with a customizable homepage, collection pages, and product pages.
  2. Brooklyn: Brooklyn is a stylish and responsive theme that is perfect for stores with a large number of products. It has a customizable homepage, collection pages, and product pages, as well as a range of built-in features.
  3. Simple: Simple is a minimalistic theme that is perfect for stores with a small number of products. It has a clean and modern design with a customizable homepage, collection pages, and product pages.
  4. Venture: Venture is a bold and dynamic theme that is great for stores selling outdoor or adventure-related products. It has a customizable homepage, collection pages, and product pages, as well as built-in features like product filtering and a multi-level menu.
  5. Boundless: Boundless is a modern and elegant theme that is perfect for stores with large, high-quality images. It has a customizable homepage, collection pages, and product pages, as well as a range of built-in features.

Hope these can help, don’t be hesitate to contact us if you have any further questions, we’d love to assist. Please hit the Like Button or mark this as Accepted Solution to let us know, it encourage us a lot.

Regards,

AliReviews team.

8

Hi @irene-vintage

Thanks for your reply, but I don’t think those themes are available anymore. I can’t find them in the theme store.

1 Like
9

Hello again,

You can try access this https://themes.shopify.com/collections/free-themes to find the suitable themes. Most of Shopify themes are responsive to both desktop and mobile. Hope these can help.

Have a nice day,

AliReviews team.

10

Hello @Millie03 ,

Optimizing your Shopify store for mobile devices is crucial to gain conversions. There are a few things you can do to improve the mobile performance of your store without changing the desktop design:

  1. Optimize images: Large images can slow down your website on mobile devices. Use image optimization tools like TinyPNG or Kraken.io to compress your images without losing quality.
  2. Minimize JavaScript and CSS files: Minimizing JavaScript and CSS files can help reduce the amount of code that loads on your website. You can use tools like Minify JS and Minify CSS to compress these files.
  3. Optimize your website’s code: Optimizing your website’s code can help reduce the amount of data that loads on mobile devices. You can use tools like GTmetrix or Google PageSpeed Insights to identify the critical areas where the website’s code needs optimizing.
  4. Use a responsive design: Responsive design ensures your website looks good on any device, including mobile devices. Your website’s layout and design will automatically adjust to fit the screen size of the device used.
  5. Use a mobile-friendly theme: Shopify offers various mobile-friendly themes optimized for fast loading on mobile devices. Choose a responsive and well-optimized theme for more speed.
  6. Reduce the number of apps: Review your installed apps and remove any that are no longer necessary or are causing performance issues.
  7. Enable lazy loading: Shopify has a built-in lazy loading feature that loads images only as needed, which can help reduce the amount of data that loads on mobile devices.
  8. Use a mobile-friendly checkout: Shopify’s mobile checkout is fast and easy for mobile devices. Ensure your checkout process is optimized for mobile and loads quickly.

By implementing these tips, you can help improve the mobile performance of your store without changing the desktop design or adding additional apps.

The above solution will surely help. Let us know if you need any further help with speed and optimization.

All the best,

CedCommerce