SatelliteWP / rocket-nginx

Rocket-Nginx is a Nginx configuration that makes WP-Rocket even faster by serving static pages directly without loading WordPress or PHP.
MIT License
579 stars 129 forks source link

Is it possible to serve mobile cached versions using NginX? #203

Closed vaccinemedia closed 8 months ago

vaccinemedia commented 9 months ago

Describe the bug Website: https://www.prolificnorth.co.uk

The site is built using Elementor and due to the way the header is designed with two menus in two separate sections on desktop it needs two separate headers. This is due to the way the site is designed and I'm not sure if it is technically possible to have two mobile menus becoming 1 burger / mobile menu with the search added too. So I have made it so that there are two headers - one for desktop and one for mobile. Another site which uses the same technique is Crocoblock's at https://crocoblock.com - if you take a look at this site you will see that with their website it also makes sense to have a desktop and mobile header.

My server is running Plesk with the default Apache web server with NginX proxy.

I have the option to generate separate cache files for mobile devices enabled.

The rocket-nginx default config works great serving the cached desktop version of pages but also sends the desktop version to mobile devices. Running the server in pure NginX skips the cached versions on both mobile and desktop completely and runs Wordpress / php on each and every page load.

Is it possible to detect if the user is on mobile and serve the cached mobile version? Or do I need to use Cloudflare?

Versions What version of Nginx are you using ? Latest on Plesk as of today. What version of Rocket-Nginx are you using ? Latest as of today (3.0.2) What version of WP Rocket are you using ? 3.15.2 Are you using Nginx as a reverse proxy (with Apache for instance) ? Yes

Did you activate the debug in Rocket-Nginx ? Please do and include any headers. Yes - I was getting "Hit" initially but the mobile version was showing the desktop header. When I enabled pure Nginx by disabling the proxy I saw "BYPASS" due to "Specific mobile cache activated"

Ideally I would like to reduce the ttfb which using this script does - but for mobile devices too.

maximejobin commented 8 months ago

This is a limitation due to the fact that it is not possible to properly detect if the device is desktop, tablet or mobile with Nginx scripting. Therefore, Rocket-Nginx does not serve the file directly and lets WP Rocket do its job.

If Cloudflare can add a header to let Nginx know it is a mobile, then Rocket-Nginx could work by adding Nginx scripting in the configuration files: https://github.com/SatelliteWP/rocket-nginx#configuration

Unfortunately, this won't work out of the box and will need some scripting. That being said, I'm pretty confident you won't need to edit Rocket-Nginx directly. It would have to be tested.