How to speed up website done in Astro

[noble crater]

I have developed Astro website on this domain: https://wallcreo.sk , but Google Speed Insight (https://pagespeed.web.dev/) gives me quite low score.

There are some tools implemented, that should be there like Google Tag Manager, Google Analytics 4, Cookie consent pop up window. Yeah, these slow down.

Are there some good advices, tweaks, suggestions to my code, how to optimize to have best score as possible?

[serene needle]

Have you tried Partytown? It moves stuff like that off the main thread and it supposed to speed up all those kinds of things!

Worth a look at least. Fwiw I didn't think your site was slow? Seemed pretty instant to me

https://docs.astro.build/en/guides/integrations-guide/partytown/

[noble crater]

@serene needle thanks,

Does partytown support GTM or just GA4?

Hm ...Speed score on official Google tool https://pagespeed.web.dev/ is terrible.

[drifting totem]

@noble crater also I think your hero image is being lazy loaded

You should probably make that eager

[noble crater]

@drifting totem thanks for hint great. I did it in previous deploy but score did not changed as much, but i'll do it based on your suggestion again

[drifting totem]

@noble crater I’m just reading off of pagespeed btw

Usually stuff like this ( and those analytics scripts ) cause issues

[serene needle]

Never used it! But I'd be surprised if it didnt given those kinds of things are basically the reason it exists but hey don't take my word for it 😂

[noble crater]

No problem @serene needle it's need of client gtm, later on facebook pixel, some sort of marketing standard

[drifting totem]

You can add all those in with partytown

While we have you here

I have a question for you too

What are you doing in regards to consent management

[noble crater]

I tried to implement open source library, for now it just allow or disallow loading Google Analytics 4. There is ongoing issue to delete cookie i need to figured it out. How to.

It's EU law so when running some analytics tracking service, needs to be on website as option.

[drifting totem]

What’s the open source project you’re using

[noble crater]

@drifting totem it's this one.

https://github.com/orestbida/cookieconsent

[drifting totem]

thank you

this looks pretty nice

this looks, like really nice

fully customizable, you got the events too

@remote path this looks pretty good

[noble crater]

guys @serene needle @drifting totem

any idea how to optimize cookie consent with partytown?

there is need to use:

type="text/partytown"

but cookie consent needs to have type="module" then there is conflict and cookie consent don't work

[drifting totem]

because you're importing it right?

[noble crater]

@drifting totem @serene needle any idea how to eliminate this point?

[noble crater]

yes whole implementation into layout.astro at the bootom is

<script defer type="module" src="/cookieconsent-config.js"></script>

[drifting totem]

Well you have the src

Can’t you just remove all the other attributes

And put =text/partytown

[noble crater]

when i remove type="module" from <script defer type="module" src="/cookieconsent-config.js"></script> it stop loading / showing pop window cookie consent

[drifting totem]

What dies the html look like when you inspect in browser

And does /cookieconsent-config.js exist when type=module is removed

I’m in bed and I’m not sure what the solution is

I hope Jumper or Oliver can help

[remote path]

haha I’m reading but not sure about this, I’ll have to do some experimenting myself

there’s some confusing scoping stuff with partytown scripts

[noble crater]

@remote path @drifting totem @serene needle happy to hear some ideas later on after tests will be provided, thank you a million

[serene needle]

I feel bad! I suggested partytown and sent you down a rabbit hole but I've never used it and am 0 help with it 😂 So sorry I guess, but hopefully you're a bit further forward

[drifting totem]

Ill do some tests this evening or tomorrow

this is interesting

something that should be doable for sure

[noble crater]

@serene needle partytown is cool, thanks for advice, it helped to fix scores like 75 to above 95, but we want to have astro fast as fast as possible :), so cookie consent is a bit tricky, but i guess can be solved to get closer to 100%

[drifting totem]

I'm going to look into it in the evening @noble crater 🙂

[remote path]

my thought is, load the consent script on page load, then after consent add the GTM script and because the GTM script will only be loaded after consent you dont need to worry about it blocking rendering so partytown isnt a big deal, then when you store the consent in local storage you can have a moduel script ( wont block) check if consent is stored in local storage and then load GTM script

[noble crater]

okie cool @drifting totem go on

[noble crater]

thanks @remote path maybe i need more flat explanation, how to load consent script on page load, position in html or something else?
gtm now is separated with datalayer via partytown, no control over the consent script at the moment, just for now

[remote path]

I'm coming at this not having had time to investigate that consent library but my thought is

if they haven't consented there's no point in loading GTM

so my thought would be

on every page load load two scripts

1. consent script
2. module script that checks the local storage ( assuming consent library sets local storage ) and creates a GTM script in the head

then have the consent script actually create a script element that loads GTM and add it to the head of the page ( this way GTM will only ever be loaded either by a module or by the consent library )

@buoyant anchor worked on consent and google analytics a fair bit, did you ever get a good solution working?

[buoyant anchor]

I got something working but if they didn’t consent we lost all analytics which seemed sub optimal. Vercel can do analytics without cookies and invading privacy, so need to check into Google’s solution 🥴
Edit: Writing a response directly after opening my eyes in the morning may have been sub-optimal.

[noble crater]

@buoyant anchor hm ...

[buoyant anchor]

hahaha, I meant without cookies invading privacy. Vercel can do analytics without cookies. And Google might have something, but I haven't looked into it yet.

[noble crater]

it's client need to use GTM, i can't change.

/// only thing i need to solve is how to put https://wallcreo.sk/cookieconsent-config.js into partytown, in other words mark it with type="text/partytown" or find the way how to because it already have type="module" and it's needed

this will solve everything

@buoyant anchor i'm solving speed score on https://pagespeed.web.dev/ not privacy. cookies privacy is controled by cookieconsent-config.js

[buoyant anchor]

Oh I see, I thought this was a different thread 🙏🏻

[noble crater]

@buoyant anchor no problem, just looking for solution in this particular case, thanks for any help

[sudden grotto]

@noble crater Did you manage to find a solution? I