Critical CSS not generating right image url’s
-
I have a small issue regarding Critical CSS. The generated Critical CSS rules contain the wrong url’s to background images. The generated rules background url’s are pointing to a path, relatively to the page url instead of the ‘site main url’.
Example:
My CSS:
header.site-header #video-bg-wrapper .video-item .thevideo-img-replacement { background: url(/wp-content/themes/my-theme/img/v2/header-new.jpg); }Generated by Litespeed/CCSS:
header.site-header #video-bg-wrapper .video-item .thevideo-img-replacement { background: url(wp-content/themes/my-theme/img/v2/header-new.jpg); }The CSS rule generated by Litespeed has a missing ‘/’ before ‘wp-content’. So on all other pages than the homepage the image is pointing to a URL relative to it’s page url.
So if i’m visiting https://www.my-website.com/my-example-page . The image is trying to load an image on (which is throwing a 404):
https://www.my-website.com/my-example-page/wp-content/themes/my-theme/img/v2/header-new.jpginstead of
https://www.my-website.com/wp-content/themes/my-theme/img/v2/header-new.jpg
-
Tried debugging it myself. Created a staging environment of the same website en tried to reproduce the issue there. I couldn’t ;-).
I requested a new domain key on the original website. After this, the CCSS rules are generated as it should. Don’t know what it caused, but it seems to be fixed now.
Also worth to mention, the right CSS rules for background images have a quote around the path:
background: url('/wp-content/themes/my-theme/img/v2/header-new.jpg');The ‘wrong’ url’s didn’t had quotes around the path:
background: url(wp-content/themes/my-theme/img/v2/header-new.jpg);
- The topic ‘Critical CSS not generating right image url’s’ is closed to new replies.
