Prevent reloading of header and footer

Kirby 3 Questions 🤔
1

Hey :slight_smile:

after all the help I got here in the forum, I finally clean up my page for the hosting.

On thing came to my attention I haven’t noticed before.
I have a header and a footer wich are on every template the same.
If I now click on one element in my navbar(header), it looks like the whole header loads again. It flickers for a second. I know that in technically open up a new side every time, but the css file is the same.

Do I have to cache them? or how to I do it?
the page is running on a valet server hosted on my machine. So it normally shouldn’t have long loading times.

Any Idea or suggestion?

Best
Marvin :slight_smile:

2

Not sure i understand - every webpage does this when you click from page to page unless you load stuff in via ajax or via something like Swup or Barba. Can you give more information?

3

Here is a small video of what I mean

Maybe baba or swup is the solution.
Are there Kirby plugins similar to them?

4

That looks to me like the scroll bar kicking in after the page or an element on the page gets its correct height. I dont think its the header realoading (it cant really, unless the whole page reloads), its more the page realising its dimensions. what is going on the on the rest of the page? Any external javascripts or stuff like that?

5

Only one js() wich loads the animation for the mobile menu and an css compiled from scss.

At the moment my page looks like this.

<?php snippet('header') ?>
<div class="maxwidth-wrapper">
    <?php foreach ($page->modules()->toBuilderBlocks() as $block) : ?>
        <section class="block">
            <?php snippet('blocks/' . $block->_key(), ['data' => $block]) ?>
        </section>
    <?php endforeach ?>
</div>
<?php snippet('footer') ?>

Only the content in the foreach changes.
The css is the same for all my because the css gets compiled to one css I guess.

6

OK, but i saw a product hunt button. Is that just a simple button? It feels like there is a delay due to an external script being slow to loads, causing the illusion that the head and footer are reloading (but they cant so its more like the whole page is taking a while to load).

7

Ah I completely forgot the button! deleted the button and the font awesome script as well.
The problem is still there :frowning:

Could it be the valet server?
Edit: if it would be the valet server the demokit would have this problem too…

Screenshot 2020-09-21 at 11.28.29 PM
Screenshot 2020-09-21 at 11.28.29 PM2880×830 296 KB

I just took a look at the demokit - there is not such a “reload”

8

I dont think its valet, i use that myself and dont see this (its superfast).

Something is blocking the page load. Is the javscript in the head or the footer? If its in the head, try moving it to just before the closing body tag. HTML gets read and executed line by line by the browser and rendered as it goes. With the script in the head, it waits for the script to run before loading the rest of the page. If its in the bottom, it allows the page to load first.

9

can u see something from this?

Screenshot 2020-09-21 at 11.33.39 PM
Screenshot 2020-09-21 at 11.33.39 PM2492×514 68.7 KB

here is the critical point where it flickers.

Screenshot 2020-09-21 at 11.36.03 PM
Screenshot 2020-09-21 at 11.36.03 PM2834×658 136 KB

10

Only that that is a pretty long time for a site running locally to load :slight_smile:

11

but I am loading two empty sites… so what am I doing wrong? :pleading_face:

12

its late here, so i will have to go now, but you can you maybe put it up on a subdomain so i can see it? I will help you more tomorrow.

13

I will do this :slight_smile:
Thank you very much for your support!!

Good night :slight_smile:

14

The styles are cached by the browser anyway, so it’s more a question of fingerprinting, so that styles are reloaded by the browser if there are any changes in the future.

What I noticed is also the 404 on the fonts loaded by the default.css scripts. I guess the file paths are not correct anymore after compilation.

15

I just uploaded the Kirby project here on my private space:

@ jimbobrjames if I (hopefully) manage to fix the error that it doesn’t show the subpages, maybe u find the bug causing it to be so slow

@texnixe - ill try to fix this one.

16

Yes, and check the other console errors, there are also images that are not found.

And another weird thing is that when I open the address http://studierepunktdesign.de/assets/images/icons/podcast.png it shows this page, which should not happen:

Bildschirmfoto von 2020-09-22 00-52-25
Bildschirmfoto von 2020-09-22 00-52-253698×1766 1.43 MB

But I have to get some sleep now as well… Maybe you can fix these issues first, before we start looking into other stuff.

1 Like
17

so finally I got Kirby running (had to switch to Uberspace because my currently hosted is shit)
with fixing the font errors the flickering disappeared

Big love and thanks for your support!! @texnixe @jimbobrjames

@jimbobrjames - are the loading times still way to slow?

18

@MisterEsite Looks fine to me now :slight_smile: Im in the UK and it loaded pretty quick from here (Uberspace are a good host!)