pagespeed results - losing speed due to using css files on another domain but same server

[unwashed potato!]

you can see the pagespeed results below

https://pagespeed.web.dev/analysis/https-www-mayercleaning-co-uk/14tjmfnuc2?form_factor=mobile

for this site

Mayer Cleaning | Your Local Family-Run Professional Cleaning Service Company

www.mayercleaning.co.uk

unless i'm mistaken, my issue is that i'm losing time accessing a variety of css files that are on another domain.

the thing is those files are actually on the same server, and are stored on the server something like this.

server-root/site1/- php-files/
- html-files/
- jquery-files/
- css-files/files-that-all-websites-access

server-root/site2/- php-files/
- html-files/
- jquery-files/
- css-fies/files-just-for-site2

and site 2, which is the cleaning website linked above, needs the files from site1 as these are shared across a variety of sites, and to avoid having to reupload them many times over when i make a change, i just put them all in one folder and every other sites links to them.

how can i solve this? 4 seconds is a long time, especially as the files are just simply a few folders across on the server

 

[unwashed potato!]

In this situation id be putting the files onto git (or whatever versioning system you prefer) and just sync them as needed from the main branch.

(This would be after altering the css to be served from the same domain rather than cross domain)

how would i go about this?

 

[unwashed potato!]

Git submodule
Or npm package

i'm sorry this is something i've never dealt with before so have no idea what this means.

 

[unwashed potato!]

Looking at those results, and also at the Network data on my browser when I connect to your site, I don't think the cross-site is the problem. I think it's simply the number of requests. It takes longer to request five files than it does to request one. I'd try and combine your .css files into a smaller number of files, and perhaps reducing the overall load for the mobile version. Although, having said that, when I try it on my phone it pops up pretty much instantly.

i don't think it'll be possible to combine the css files. it's such a mess when they are reduced down that it'd be a bigger job in future when updating files and working with them.

Have you tried referencing them by relative path? Depending on how the server has been set up it may work.

this isn't possible unfortunately, as i've just found out with chatgpt guiding me

 

[unwashed potato!]

You don't have to work directly with the files as they're served. Add a build/deploy step which combines your .css files into one or two combined and possibly minified ones.

It's not something I've ever done before or have any knowledge of. Would you be able to point me in the right direction?

 

[unwashed potato!]

Combine all files

but that's the issue isn't it, because doesn't it means combining them all each time i update a single file? so if a jquery script gets updated along with the css file, i need to minify that file, fine that's easy, then copy paste that code, then all other css files copy and paste into one combined file. seems messy and prone to issues.

 

[unwashed potato!]

Is this actually a problem in reality, or you just think it's a problem because pagespeed said it is?
coz like... I'm viewing the site and it isn't slow.

because pagespeed says it's a problem. which i get may not be causing my any real world problems, but i figured if it was a relatively simple fix, it makes sense to fix it. especially as the low score is on mobile view only which pagespeed could effect conversion rate.

it feels like this may end up being a bigger fix than i had hoped so may end up leaving it.