How to Fix Minified CSS and JS Issues on Our Website?

HTML & CSS
1

Hi everyone,
We’re experiencing some issues with minified CSS and JS files on our website, which is affecting its performance. Has anyone faced similar problems before? What are the best ways to identify and resolve these issues?

image
image1039×694 40.8 KB

Here is our website link: https://carbrandslogos.com/
Any help or suggestions would be greatly appreciated! Thanks in advance!

1 Like
2

I’m not sure that the CSS or JS are the major problems there based on that picture…your pageload time and the main-thread work are standing out more… is something in the javascript you’re loading blocking by running in the main thread?

1 Like
3

Thanks for your input. It’s possible that something in the JavaScript is indeed blocking by running in the main thread, which could be causing the page load time issues. I’ll dig deeper into the JavaScript to see if there’s anything there that’s contributing to the problem. If you have any suggestions on what to look for or ways to optimize this, I’d appreciate your insights!

1 Like
4

I’m not on a computer at the moment, so someone else will have to look into it probably before I can, but if I had to guess from a Mobile view, the sheer number of images being loaded is dragging part of the problem. The server seemed to be slow to respond to the initial request too, which wouldnt be the javascript or CSS, to my knowledge.

2 Likes
6

Why do you think that just because the CSS or JS is minified that is causing the problem?

I think you need to look at the 26 JS linked files and the 17 CSS linked files you have on this page. That adds a lot of load on top of all the other linked objects on the page.

1 Like
7

Minifying JS and CSS basically reduces the size of these files.
You can use these tools to do so:

I have done it for so many clients.

8

Hi there! :wave:

Yes, I’ve dealt with similar issues before, and it can definitely impact performance if not handled properly. Here are a few tips to help you out:

  1. Check for Errors: Use browser developer tools to see if there are any errors in the console related to your minified files. Tools like Chrome DevTools can point out the exact issue.
  2. Source Maps: Ensure that source maps are enabled so you can trace back minified code to its original format. This makes debugging much easier.
  3. Compression Tools: Sometimes, compression tools can cause issues if not configured properly. Try alternatives like UglifyJS, Terser, or CSSNano to see if different results occur.
  4. Manual Debugging: If all else fails, you might need to manually go through the code and see if certain rules or functions are causing the problem post-minification.