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

Joined
12 Feb 2006
Posts
17,605
Location
Surrey
you can see the pagespeed results below


for this site


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
 
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)
 
Last edited:
Have you tried referencing them by relative path? Depending on how the server has been set up it may work.
 
you can see the pagespeed results below

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.
 
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
 
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.

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.
 
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?
 
Combine all files and minify what you can and then put them on a free CDN that can be accessed on all domains. Cloudflare is good for that.

 
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.
 
Last edited:
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.
 
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.
 
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?

I only do web stuff on a hobby basis, I don't know what best practice on this stuff is. A lot of sites do it so there's probably a preferred way or five, but I'd probably just slap a script together to do it.
 
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.
This is what things like Webpack are for.

 
As others have said, you ideally want to get away from cross-site linking the CSS/JS files and instead opt for reducing requests, merging the CSS and JS where you can, and minify before serving to clients. And there are many ways you can, as it were, 'skin the cat' on this.

@throwaway4372 use of Git repositories for the websites and a submodule for the CSS/JS is probably the better way of going about this - Use of Git submodules.

But a quick (read, bodgy) "fix" would be split to the CSS/JS out as separate "project"/working directory, have a batch/bash script that concatenates/merges and copies (can use 'cat'/'type' command + 'cp'/'copy' command) the files to the various website working directories which you use as part of your "build" process*.
Then as @Cromulent mentions, throw the site behind a CDN like Cloudflare which has an 'auto minify' function option that serves minified versions "on the fly" or, there are various command-line minifiers for CSS and JS that you could use as part of that "build" process.

*If you're a Visual Code user then there is the RunOnSave (https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave) extension which you could use to automate this process when saving specific files.
 
Back
Top Bottom