Mobile Page Speed far slower than Desktop Page Speed

[vayzen]

Hi everyone!

I own the following website, and I am running Dawn version 10.0.0 - https://selfishcompany.com/ 

Google PageSpeed Insights suggests the mobile version of my homepage, and product page speed is far slower than the same pages when viewed on desktop.

When refering to the diagnostics section within PageSpeed Insights, there are several suggestions which are only displayed for mobile. I have attached a side by side screenshot of the comparison from mobile vs desktop.

Would someone very kindly be able to take a look at this on my behalf, and let me know what I can do to improve the mobile version speed of my pages?

Google Tag Manager seems to be largely responsible - I'm not even sure if I need it as I already use Google Analytics, though I wouldn't know how to remove the Google Tags even if I tried.

I just don't know why there are some issues effecting the speed of mobile, but not desktop.

Any help would be hugely appreciated!

Many thanks - Charlie.

[flareAI]

Hello @vayzen,

Greetings! I am Gina from the flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

I'd be happy to help you with optimizing the mobile version of your Shopify store and addressing the speed issues you're experiencing.

1. Evaluate the Impact of Third-Party Code:
- Google Tag Manager (GTM) and other third-party scripts can impact page load times. Assess whether each script is necessary for your store's functionality.
- Determine if there are alternative ways to implement certain features without relying on additional scripts.
- Minimize the number of third-party scripts you use and consider removing or disabling any unnecessary ones.

2. Optimize Images:
- Compress and resize images to reduce their file size without sacrificing visual quality. Use image optimization tools or plugins to automate this process.
- Leverage modern image formats such as WebP, which provides better compression compared to traditional formats like JPEG or PNG.

3. Enable Caching:
- Leverage browser caching to store static resources on visitors' devices, reducing the need to download them on subsequent visits.
- Configure caching headers or use caching apps/plugins available for Shopify to enable this functionality.

4. Minify and Combine Files:
- Minify your CSS and JavaScript files to remove unnecessary characters, spaces, and line breaks.
- Combine multiple CSS or JavaScript files into a single file to minimize the number of HTTP requests made by the browser.

5. Prioritize Above-the-Fold Content:
- Optimize the critical rendering path by ensuring that the most important content is loaded and displayed first.
- Defer non-critical JavaScript and CSS to prevent them from blocking the initial rendering of the page.

6. Evaluate Shopify Apps:
- Review the installed apps on your Shopify store and consider whether any of them are affecting performance.
- Disable or remove any apps that are unnecessary or causing significant slowdowns.

7. Leverage Content Delivery Networks (CDNs):
- Use a CDN service to deliver your store's static assets from servers located closer to your visitors, reducing latency and improving load times.

Remember to regularly test your store's performance using tools like Google PageSpeed Insights, GTmetrix. These tools can provide specific recommendations tailored to your store's current setup and help you track your progress.

If you're unsure about making changes or removing specific scripts like Google Tag Manager, it's recommended to consult a Shopify developer or reach out to Shopify support for further assistance.

Let me know if you have any further questions.

Gina

[Cedcommerce]

Hello @vayzen, 

We will be happy to help you with optimizing the mobile version speed of your Shopify store. Based on our analysis, we have a few recommendations that will definitely help you improve your mobile page speed and address the Google Tag Manager concerns.

• Minimize JavaScript and CSS: One common reason for slower mobile page speed is the excessive use of JavaScript and CSS. Minimize and combine these files to reduce the number of requests made by the browser.
• Enable Compression: Compressing your website's resources can significantly reduce file sizes and improve loading times. Ensure that Gzip compression is enabled on your server to compress HTML, CSS, and JavaScript files.
• Optimize Images: Large image files can contribute to slow loading times. Optimize your images by compressing them without compromising quality. Use image formats like JPEG or WebP, which offer better compression. Additionally, leverage lazy loading to defer the loading of off-screen images.
• Leverage Browser Caching: Set up caching headers on your server to instruct the browser to cache specific static resources. This way, returning visitors won't need to download the duplicate files again, resulting in faster load times.
• Evaluate Third-Party Scripts: Review the third-party scripts and tags running on your website, including Google Tag Manager. Determine if each is necessary and consider removing any not critical to your website's functionality. Be cautious when removing tags, as they may impact your analytics or other tracking systems.
• Use a Content Delivery Network: A CDN can distribute your website's content across multiple servers worldwide, reducing the distance between the user and the server and thus improving the loading speed.
• Prioritize Above-the-Fold Content: Load the essential elements of your webpage first, particularly the content above the fold. This approach provides a perception of faster loading times, even if some parts of the page continue to load.
• Reduce Redirects: Minimize the number of redirects on your website. Each redirect adds an HTTP request, leading to slower page speed.
• Upgrade Shopify Theme: Consider upgrading your Shopify theme to a more optimized and lightweight version specifically designed for better performance on mobile devices.

Apart from implementing these measures, you must constantly monitor your store’s webpages performance on Google PageSpeed Insights, Lighthouse, or GTmetrix to identify improvement areas and monitor your mobile page speed and implement changes accordingly.

If you encounter any specific issues or need further assistance, feel free to provide more details, and we’ll be glad to help you further.

All the best, 

CedCommerce

[Stacy_Zhuk]

Hello @vayzen,

I noticed that your banner "Take 10% Off Your First Order With Us" makes a bad favor for your website speed on mobile view.

Follow these tips to optimize performance:

• make a complete revision of installed apps
• make additional optimization of images, product photos and media used throughout the website
• reduce the number of HTTP requests
• use Lazy Load
• minimize redirects and eliminate broken links

Best regards,
Anastasia

[SamuelTBeslogic]

Wow are those AI answers vague, generic and unhelpful. Anyway:

Similarly for us, gtag (Google Tag Manager) is the biggest third party offender in terms of blocking execution (taking about half a second) as reported by PageSpeed.
I downloaded the theme to be sure and there's no reference in code.
We have no Custom Pixels.
We only set it up through the "Google & Youtube" Sales Channel.

It would seem there's nothing that can be done other than contacting the app's developers to ask them to load in a non-blocking way.