Deployed site has incorrect CSS, Site also loads slow

Hi there, I seem to be having my annual deployment issues.

I managed to deploy my site on Netlify but on top of it not looking like the local build (the CSS is slightly different, most notably the background color), the site load time is also painfully slow.

Deployed site: https://www.prosearium.net
Link to source code: https://github.com/LadySith/prosearium
Theme: https://themes.gohugo.io/kross-hugo-portfolio-template/

Local build looks like this

Live site looks like this

I checked all the gotchas and also looked up other similar problems on the site but haven’t been able to find a solution.

Any help would be greatly appreciated

The theme site says to use the Github issue tracker for questions so, I would point you there at first. :slight_smile:

I notice you don’t have a netlify.toml file in your repository. My guess is that Netlify is using a different version of hugo than the one you’re testing with.

Follow the steps here: https://gohugo.io/hosting-and-deployment/hosting-on-netlify/#configure-hugo-version-in-netlify

In addition, looking at the deployed site it is very slow, and there are errors. You should look at your browser’s dev console and look into each of the errors. For example, it’s complaining about a malformed woff (font) file, which the theme author might best help with I think.

Hey Lady. I took a quick peek and it appears your load time is caused by some large images. Over my VPN connection to Frankfurt :de: it took between 1-2 minutes :turtle: for the page to load with images enabled and less than 1 second :rabbit2: without them.

You can reproduce my findings in any browser which allows you to disable images while loading a webpage. To fix the problem please consider optimizing your images if the theme you’re using does not support it using Hugo’s built-in image processing tools or though some other method.

2 Likes