Same UCSS used for desktop & mobile

  • Resolved mmwbadmin

    (@mmwbadmin)


    4 years, 1 month ago

    Hi,
    Using latest versions of WP en LSCWP.
    Cache mobile = ON (default user agents)
    Minify CSS = OFF
    Combine CSS = ON
    Generate UCSS = ON
    Inline UCSS = OFF
    Load CSS async = ON
    Inline CSS async lib = ON

    Looking at a page in Chrome devtools I see the same (u)css file used for both the desktop and the mobile version:

    /litespeed/ucss/682a……..597…f94e79b6f.css?ver=ad2..

    @ Pagespeed Insights the Mobile results are commented with ̈”reduce unused CSS”. This could shave 32KB from 39KB.

    Is ‘Cache Mobile’ setting just for the page cache and the crawler? Or should it also create UCSS for both Mobile and non-Mobile?

    Best regards.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • serpentdriver

    (@serpentdriver)

    4 years, 1 month ago

    Is ‘Cache Mobile’ setting just for the page cache and the crawler? Or should it also create UCSS for both Mobile and non-Mobile?

    Cache Mobile is only if your theme has a device detection to deliver different code for mobile and desktop devices. In your case you can disable Cache Mobile because you don’t have any device detection.

    Thread Starter mmwbadmin

    (@mmwbadmin)

    4 years, 1 month ago

    Thanks, but in the documentation I read:

    but there are other situations where you would want to set Cache Mobile to ON, such as:

If your site has mobile-specific content, like widgets that only appear on Mobile (or only appear on Desktop)
If you are using AMP on your site
If you are using the CCSS service
If you are using the UCSS service

    And I’m using CCSS and UCSS

    serpentdriver

    (@serpentdriver)

    4 years, 1 month ago

    Again, Cache Mobile is only used if your theme or any plugin generates and delivers code that depends on the kind of device. For this a device detections is needed. In 99.999999999% of all cases there is no need to use Cache Mobile, because all themes are responsive. Using Cache Mobile is not only a setting. It generates additional cache varies. Each vary needs its own cache and makes it almost impossible to use crawler for cache warmup for each vary.

    My Advice: Disable Cache Mobile and test your with different devices or use browser functions to simulate different devices. If everything looks okay let this setting be disabled.

    Thread Starter mmwbadmin

    (@mmwbadmin)

    4 years, 1 month ago

    Still puzzled. On the Lite Speed Blog I read:

    “Next, turn on Cache Mobile. This is because Unique CSS for a mobile view will be different from that of a desktop view. Navigate to LiteSpeed Cache > Cache and set Cache Mobile to ON.”

    in the post titled “Generate Unique CSS with LSCWP v4.0” (June 14th, 2021)

    Get the impression it has less to do with device detection, but with calculating the effective use of CSS, hence the Quic.cloud processing in the background.

    serpentdriver

    (@serpentdriver)

    4 years, 1 month ago

    @mmwbadmin

    You are right, but I am not wrong. Cache Mobile function is based on a hardcoded device detection that uses entries from User Agents that also must be defined to get Cache Mobile work. The problem is that LiteSpeed only considers smartphones, but not tablets. Tablets are also mobile, but uses different User Agent valus than smartphones. You can define this values in User Agent settings, but these settings will not be differentated from other mobile User Agents. That mean, that tablets get the same CSS like smartphones. Tablets have a bigger screen resolution and depending on this tablets need other CSS than smartphones. Cache Mobile function works, but only for smartphones.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Same UCSS used for desktop & mobile’ is closed to new replies.