Idea: Different mobile and desktop caches

  • Hey there,

    First of all – great plugin, you guys rock ??

    Recently I’ve run into a problem with full page cache. It’s not the FFPC specific, but might be important. Here’s the idea:

    If you want to make your site truly mobile-friendly (and you really should) you should never limit yourself with only responsive media-queries and hiding some ‘desktop-only’ parts using display: none; in CSS. You should avoid loading that ‘desktop-only’ parts in the first place. Prevent large desktop js-libraries from loading etc.

    WordPress gives us a handy conditional function wp_is_mobile(). With it you can conditionally load some parts on desktop and prevent them from loading on mobile. You can alter your html, or even target different js logics if you add ‘is_mobile’ / ‘is_not_mobile’ to body classes (or any other component).

    But with full page cache it’s not working. If you’re pre-caching your site, all users will get the desktop version. If you don’t pre-cache, all users will be served with a same version (desktop or mobile) which was generated on a first request, depending on what type of device was used. Total mess.

    So what I think. Optionally, we can generate 2 sets of cache files – desktop and mobile. On the Nginx side, we can detect mobile/desktop and serve proper page (See https://gist.github.com/perusio/1326701 for sample mobile detection). It looks like it’s not a lot of work to do, but definitely a game change.

    What do you think? If you like the idea, I would be happy to help.

    https://www.ads-software.com/plugins/wp-ffpc/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author petermolnar

    (@cadeyrn)

    I’ll take a look; I was not aware of wp_is_mobile, but I don’t think it’ll work.

    The problem is that when the cache gets queried, WordPress functions are not yet available; this is how the advanced-cache layer in WordPress works.

    Also, to be honest, I disagree with you on the design part: I don’t think two, different setups can be beneficial.

    I disagree also. It is not really limiting to only use responsive media queries. display: none; actually tells the browser not to render that element, so for small things (e.g. menus), you dont save much loading time or data by leaving out the desktop menu markup for mobiles. In my opinion it is certainly not worth the complexity. If you are serving completely different pages based on user agent you should ask yourself, “Do I need 2 seperate websites?”.

    I am a bit shocked that wordpress made this function unavailable in the advanced cache layer as it could easily be used to implement some kind of Vary caching against User-Agent strings. The problem with this is that there are just so many User-Agent strings out there that it would probably render the cache useless.

    Thread Starter headonfire

    (@headonfire)

    display: none; actually tells the browser not to render that element

    You don’t really understand how display:none works. Yes, it prevents browser from rendering the element and its contents on the screen and saves some microseconds on rendering, but it still downloads the contents – that’s far more than microseconds needed for rendering the element. wp_is_mobile() function actually helps to remove those items from the code completely, preventing from being downloaded in the first place. Use WireShark or even your browser’s Network panel to test it. See this post and this thread for some details.

    If you are serving completely different pages based on user agent

    Not user agent, but device type. And those pages are not completely different, they are optimized for dekstop / tablet + mobile. Consider tablet + mobile not only the device with smaller screen size but the device with slow network connection, high latency and bandwidth limit / high cost. Then it’s worth the effort. For mobile devices your primary goals are reducing the number of queries (assets, not DB), reducing the total page weight, reducing the number of DOM elements.

    Yes of course. Your example is specifically for when you are hiding images with display none which was not what I was talking about. And yes that is silly to do because it doesn’t prevent download.

    I’m not going to say one way to do things is right or wrong, but I am just pointing out that if you write truely responsive code which is user agent agnostic (identical for all devices) and “responds” appropriately, then you would not have any problems with caching. This is one direction you can take and in my opinion the easiest.

    Thread Starter headonfire

    (@headonfire)

    You are right that this is one of possible directions, and the easiest one. The problem is, it works only for some types of websites, mostly small and relatively simple. For blogs, corporate, portfolio sites. It does not work for large apps, platforms, ecommerce – user experience for this types of sites must be optimized for mobile. There’s a lot of debate about responsive vs adaptive vs whatever. However, it’s for me, the developer to choose if a particular site needs separate mobile cache. It’s not a must for all, you can use it or not, depending on your current tasks and goals. Just another useful tool on your belt.

    Yep true. If that function could be made available at the application cache layer somehow, it would be possible to add this as a feature to the plugin. It could just be a checkbox called “Vary cache based on wp_is_mobile”. Modifications would also need to be made to the crawler to crawl each page twice with different user agents.

    Thread Starter headonfire

    (@headonfire)

    That sounds fine. Possibly, a good reason for a ticket on Core Track and a patch. And if going this route – we should also modify the wp_is_mobile() function to be able to separate mobile and tablet. Right now it’s pretty limited. I’ll check Track tickets if there’s already smth related.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Idea: Different mobile and desktop caches’ is closed to new replies.