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

unwashed potato!

unwashed potato!

unwashed potato!

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


for this site

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

www.mayercleaning.co.uk 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
 
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.
 
unwashed potato! said:
you can see the pagespeed results below
Click to expand...

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.
 
Mr Jack said:
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.
Click to expand...
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.

Mr Jack said:
Have you tried referencing them by relative path? Depending on how the server has been set up it may work.
Click to expand...

this isn't possible unfortunately, as i've just found out with chatgpt guiding me
 
unwashed potato! said:
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.
Click to expand...

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

www.cloudflare.com

Cloudflare CDN | Content Delivery Network

The Cloudflare CDN is a content delivery network with enterprise-grade speed and reliability. Learn why IDC named us a leader in the latest Marketscape.
www.cloudflare.com www.cloudflare.com
 
Cromulent said:
Combine all files
Click to expand...
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:
throwaway4372 said:
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.
Click to expand...

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.
 
unwashed potato! said:
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?
Click to expand...

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.
 
unwashed potato! said:
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.
Click to expand...
This is what things like Webpack are for.

webpack.js.org

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org webpack.js.org
 
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.
 
You must log in or register to reply here.
Back
Top Bottom