Poor performance on mobile only

[kamzata]

Using Lighthouse to test on Desktop the website performs great (around 99 or 100% score). Testing on mobile the score is around 62% and this is the result:

Here are some other metrics:

Any suggestions?

[addison74]

Copilot's opinion:

Mobile performance is a critical issue: In modern web development, mobile optimization is essential, especially for e-commerce platforms like Magento, where a large portion of traffic typically comes from mobile devices.

Lighthouse metrics are a good starting point: The screenshots provided help pinpoint specific areas of concern (e.g., slow loading, layout shifts, resource-heavy scripts) that are common culprits for poor mobile performance.

Possible causes:

• Theme and frontend resources: Magento themes are often desktop-centric by default; images, fonts, and scripts may not be optimized for mobile.
• JavaScript execution: Mobile devices have less processing power. Heavy client-side JS, third-party scripts, or legacy code can impact performance.
• Server-side bottlenecks: While the backend seems fine for desktop, mobile could be affected by additional roundtrips or unoptimized server responses.
• Responsive design: Some themes or modules may not fully implement responsive best practices, causing layout shifts or inefficient rendering on mobile.

Suggestions for improvement:

• Audit third-party modules and scripts for mobile compatibility.
• Optimize images (use WebP, proper sizing, lazy loading).
• Minimize and defer non-critical JavaScript.
• Implement efficient caching and critical CSS.
• Test with real devices and emulators, not just Lighthouse.

Summary:

Addressing mobile performance requires a combination of frontend optimization, auditing third-party dependencies, and possibly reviewing server-side configuration. Sharing more details (e.g., theme, extensions, test URLs) could help others provide more targeted advice.

[kamzata]

How can I move those network requests out of the critical path? Furthermore, any free extension for minify both css and js files?

[addison74]

OpenMage already includes working mechanisms for CSS and JS minification and merging, integrated into its caching and static content system. These features are sufficient for most use cases and generally do not require additional implementation.

However, for real-world performance improvements, I recommend enabling HTTP/2 support at the web server level (Apache, Nginx, LiteSpeed, etc.). HTTP/2 allows multiple files to be delivered in parallel over a single connection, removing the old need for heavy bundling. This means individual minified files can still be served efficiently without extra processing overhead.

In short:
– the built-in minification in OpenMage works as intended;
– for modern performance benefits, HTTP/2 is the recommended solution at the infrastructure level.

[kamzata]

My setup include Nginx as reverse proxy in front of Apache. My Nginx is optimized to supports HTTP/3 with QUIC and Zstd compression (among the others things).

I'm using Openmage 20.12.0. I don't want merge all files. I'd just like want to minify them. How can I enable just the minification and how I can defer those single files?

[addison74]

OpenMage already includes working mechanisms for CSS and JS minification and merging. If you only want to minify the files without merging them, you can configure this directly from the admin panel:

Backend > System > Configuration > Developer > JavaScript/CSS Settings

Set Merge CSS Files = No
Set Merge JavaScript Files = No
Set Minify CSS Files = Yes
Set Minify JavaScript Files = Yes

This way, OpenMage will keep your CSS and JS files separate, but still minified before being served. As for deferring individual JS files, OpenMage doesn’t include native per-file defer control, since this is typically handled either: via a frontend optimization module or directly at the theme/template level by adding the defer or async attributes in the layout XML or template files.

Given that your stack already uses Nginx (HTTP/3 + QUIC + Zstd) in front of Apache, you’re in a very good position — HTTP/2/3 multiplexing eliminates the old performance penalty of having multiple requests. So, keeping separate minified files is perfectly fine and actually a best practice with modern HTTP versions.

[kamzata]

Thanks but I cannot see the options to minify. Should I see them?

[DegrizNet]

if you can share a link it would be much more helpfull. Based on screenshot I would say problem is large image load. For images look at their sizes and resize and also add loading="lazy" tag to iamges below the fold.
Also I think you may have set very low memory limit.. look at server setting and htaccess.

[addison74]

There are a lot of old modules which still work. Copilot can help to update them. You can merge your CSS and JS files, minify it is not available by default in the Magento 1/OpenMage. Why do you still want to minify the files when you are using HTTP/2?