Site loads online but not local

Hi,
my site loads only sometimes local… I have to right click and hit inspect to get it workin and then refresh my browser alot. After refresh my homepage is loading but the links in my navigation do not work.

Strange is, that my site is working online on my domain and I do not know why.
Hope someone can help me or have the same error.

mmh,

i dunno the exact reason, but it seems you have some interferance with all your js handlers in combination with the preloader.

If I remove the preloader css settings in main.css lines 30-74. I get working menues and loaded pages ofc some styling is missing.
maybe that stuff always is there, but just hidden behind the styles :wink:

at least a starting point for you to head on.

btw: your theme folder is unused and doe not do anything :wink:


dunno whats happening underneath, but even if I stop the server, close and kill all chrome processes. then restarting chrome, I still loads the local page and I can navigate the site.
… never seen something so persistent in the chrome cache before :thinking:

havent played with hugo server settings to narrow the problem …

In addition to the remarks of @irkode:

  • Your homepage contains several HTML errors, see https://validator.w3.org/nu/?doc=https%3A%2F%2Fkettenbeil.com%2Fde%2F. Invalid HTML will be “fixed” by browsers in whatever they deem an appropriate way – not necessarily what you intended.
  • Nobody needs jQuery in 2024. It entails useless overhead (useless because whatever it once did all browsers can do nowadays anyway)
  • Your site scored badly in Lighthouse. Your homepage sends 15MB over the wire, the images are about 1.5 MB too large, you have tons of unused CSS…
  • Accessibility is bad
  • Lots of render blocking resources
  • Five DOMContentLoaded handlers – what’s the point, why not have one?

To me, this site looks heavily over-engineered. And apparently it has become so complex that it’s not possible to figure out why it runs when and where (or not).

Oh, and e.g. clicking on any of the navigation menus (e.g. “Logos”) opens a new document with no navigation – on your domain. Even clicking on “Startseite” does the same thing. Personally, I’d try to get the logic working first and then do the fancy stuff.

Aside: Instead of

<span class="whatever">[</span> some string <span class="whatever">]</span>

use CSS. Something like

.menu:hover::before {
  content: "[";
}
  .menu:hover::after {
   content: "]"
}

Reduces the number of DOM elements, is a lot more flexible, and doesn’t cause accessibility issues (do you want a screen reader to say “opening square bracket homepage closing square bracket” to explain the navigation to a visually impaired person?)

2 Likes

Thanks to both of you @irkode and @chrillek

My site is working if I remove the preloader css and js. @irkode
Trying to build my own template, therfore it is empty. But still learning and do not know how to build it.

I fixed with w3c the html errors and checked the page speed. My speed for desktop is OK and for mobile I have to use smaller images, will do it later. Do not know, how to fix the Largest Contentful Paint-Element in page speed. @chrillek

What kind of framework should I use/learn else then jQuery?

That can wait, I think, until all other things are fixed. And then the net is full with information on that. For example, preloading an image might help.

Why would you need a framework? For what? jQuery was invented at a time when browsers were a lot less capable than they are today (notably, there was no querySelector method available). These times are long gone, and jQuery always introduced a massive overhead.

I’m not sure I understand what you are saying here. If you mean
my site works if I remove the CSS and JS that was preloaded (that is, entirely), then you perhaps don’t need that CSS and JS. If you mean it works with the CSS and JS, but only if you do not preload them – that makes hardly any sense.

Personally, I’d start from scratch with my own CSS and partials (aka “theme”). But that’s just me – I love having full control over my site, and I don’t like pulling in lots of stuff I don’t need. Not to mention that many themes are under-documented.

Start out simple, so that your navigation is always visible (and responsive) and that it works. After that, you can start with the fancy stuff like animations, loaders, what not. “Form follows function”, as they say.

1 Like

I have removed the preloader… deleted css and js from the prelaoder. Like @irkode says lines 30-74. Now the site/server loads with no errors and I can work again.

How to start without a Theme? I want a blank site and start from scratch.

an empty site without anything (but a bare archetype):

hugo new site mysite
cd mysite

Let’s close that here

guess initial problem solved (at least you got the right hint), in case, mark a solution
and continue with a new topic in case

This might be helpful:
https://discourse.gohugo.io/t/creating-new-site-and-theme-skeletons-with-v0-118-0-and-later/46018

In particular, this creates a minimally opinionated functional site with sample content and no theme:

hugo new theme mysite --themesDir .

I know, the syntax is a bit strange, but it works great.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.