• Resolved iTeamWP

    (@iteamwp)


    Hello,

    LiteSpeed Report ID: IGDVAAMZ

    We’ve noticed an issue on a few of our clients sites recently which all use the LiteSpeed page optimisations.

    Sometimes when viewing a page the CSS does not appear for that page, meaning the page basically loads as plain text.

    This always seems to target a specific page e.g. it doesn’t effect the whole site and usually the issue resolves itself when the LiteSpeed CSS is rebuilt.

    We’ve only noticed this error since updating to the latest version of LiteSpeed.

    Any advice please? We don’t want to disable LiteSpeed optimisations as they help with our Google PageSpeed score.

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Please check the browser’s dev tool when that happens , you should see some error on CSS request, please check what is the error there, like mix-content , or 404 , or 403 or something ?

    Best regards,

    Thread Starter iTeamWP

    (@iteamwp)

    Hi @qtwrk

    We’ve not been able to replicate this issue ourselves yet, we’ve only had reports from clients regarding this issue.

    If we look at our apache logs we can’t see any LiteSpeed css requests when the user visits the broken page.

    e.g. we would usually expect to see something like the following: GET /wp-content/litespeed/cssjs/d350b.css?4e062 HTTP/2 200

    But we do not see this when we review the logs after a user report the problem to us.

    Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    we do not see this when we review the logs after a user report the problem to us.

    now this makes issue more weird.

    I mean , if user requested it , even it’s broken link , it will at least, respond 404 error

    if you don’t even find any trace of it , that means the user’s browser did NOT even request this file , only possible case I can think of is the mixed content , that case , browser will directly deny it without requesting to server.

    pleaase try :

    1. check your setting , if both URL are set to https://

    and please do double check in database, I have seen a case, even both link in wp setting page shows https:// but DB still gives http:// for whatever reason it was.

    2. try implement

    Content-Security-Policy: upgrade-insecure-requests;

    header , this will instruct browser to automatically send https request when sees http request.

    Best regards,

    Thread Starter iTeamWP

    (@iteamwp)

    Hi @qtwrk

    Thanks for the reply.

    I’ve checked our domain settings and these are configured correctly.

    We already have content security policy in place configured by our htaccess file.

    We don’t think mixed content is to blame here.

    As nothing shows in the logs for a LiteSpeed css request on this page we believe the LiteSpeed CSS was not included in the page source and thus the visitors browser didn’t request it.

    Any ideas if this is feasible? If an error occurs with the LiteSpeed CSS merging would the file potentially not be included in the header of the page?

    Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Any ideas if this is feasible? If an error occurs with the LiteSpeed CSS merging would the file potentially not be included in the header of the page?

    hmmmm ,well , in theory , yes , if something wrong during the CSS optm , it would leads to empty file or not being inserted into page

    but I have never seen such case so far, the worst case so far I see if that if page is problematic , LSCWP will bypass itself to do anything.

    I was looking at the code

    
    				if ( $this->cfg_css_comb ) {
    					$url = $this->_build_hash_url( $src_list );
    					// Handle css async load
    					if ( $this->cfg_css_async ) {
    						$this->html_head .= '<link rel="preload" data-asynced="1" data-optimized="2" as="style" onload="this.onload=null;this.rel=\'stylesheet\'" href="' . $url . '" />'; // todo: How to use " in attr wrapper "
    					}
    					else {
    						$this->html_head .= '<link data-optimized="2" rel="stylesheet" href="' . $url . '" />';// use 2 as combined
    					}
    
    					// Move all css to top
    					$this->content = str_replace( $html_list, '', $this->content );
    
    					// Add to HTTP2
    					$this->append_http2( $url );

    did you happen to have CSS push enabled ? if that so , maybe we can check from that direction , like if it is pushed, but not in HTML

    Best regards,

    Thread Starter iTeamWP

    (@iteamwp)

    Hi @qtwrk

    Many thanks for the reply.

    We use the following CSS settings:
    – CSS Minify => ON
    – CSS Combine => ON
    – CSS HTTP/2 Push => ON
    – Inline CSS Async Lib = > ON

    All other CSS settings are OFF.

    Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    okay, you do have css push , but still , we will need to a way to reproduce the issue to verify your theory

    Best regards,

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    I’m going to mark this topic “Resolved”, due to lack of activity.

    If you still need help, please feel free to re-open it.

    When re-open it, please also change the topic status to “not solved”

    Best regards,

    Thread Starter iTeamWP

    (@iteamwp)

    Hi @qtwrk

    We are struggling to find reliable replication steps as the issue seems to occur at random on certain pages after making changes (not necessarily on the same page).

    Where do we go from here? Are you suggesting disabling HTTP/2 Push might be a good idea?

    Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    No , upon our last conversation:

    you thought maybe CSS was not included into HTML source , in which I suggest to , check the HTTP header , because as you have enabled push , these files will be shown up in response header as link header to push resources.

    so this way , you can compare the HTML source code and HTTP response header to see if the CSS files are same on both sides.

    Best regards,

    Thread Starter iTeamWP

    (@iteamwp)

    Hi @qtwrk ,

    This issue has become a lot more common recently on our clients websites.

    We’ve noticed that when the issue occurs the CSS is included in the CSS HTML source so that’s not the cause of the issue.

    What is the cause is the CSS that is being generated by LiteSpeed.

    E.g. Recently the “About Us” page on our website suffered this issue.

    During this time the following file wp-content/litespeed/cssjs/ded8b.css?37e3d was only 25.8kB missing the majority if not all of our styles.

    After flushing the LiteSpeed cache the page returned to normal and the stylesheet changed to /wp-content/litespeed/cssjs/8b0ee.css?af9cf with a size of 177kB.

    So LiteSpeed had generated a CSS file for the page with ~150kB of styles missing from the stylesheet.

    As mentioned previously this issue has become increasingly common so would appreciate any advice as when this issue occurs it’s basically makes the site completely unusable for any visitors until we flush the cache.

    Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    please create a ticket by mail to support at litespeedtech.com

    my colleague will follow you up

    Best regards,

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

The topic ‘CSS lost on some pages’ is closed to new replies.