Add note to README about using preconnect/preload to improve google page speed
datapolitical opened this issue · comments
Google says I should consider adding a prefetch to improve load times for google analytics. I know how to do that if I was just doing an href but this code is more complex. How should I add that when using ga-lite?
Hey, could you give me an example how you would do this with Google Analytics or link to the page where Google suggests using the prefetch?
I'm guessing this should do it:
<link rel="prefetch" href="https://cdn.jsdelivr.net/npm/ga-lite@2/dist/ga-lite.min.js" as="script">Here’s the example: https://web.dev/uses-rel-preconnect/
and the current code says to load it like this:
<script>
(function(e,t,n,i,s,a,c){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)}
;a=t.createElement(i);c=t.getElementsByTagName(i)[0];a.async=true;a.src=s
;c.parentNode.insertBefore(a,c)
})(window,document,"galite","script","{{site.url}}/assets/js/ga-lite.min.js");
galite('create', '{{site.google_analytics}}', 'auto');
galite('send', 'pageview');
</script>
I don’t see how that integrates with the recommended script.
Great, thank you for the additional information!
You're using {{site.url}}/assets/js/ga-lite.min.js, so it seems you're self-hosting ga-lite. That's great!
This page seems to suggest that you use the <link rel="preconnect" href="https://example.com"> to open up connections to domains other than your own to speed up the DNS resolving, making https connection etc.
In your case it seems that you're serving ga-lite from your own domain, so AFAIK this would have very little effect.
However the page says that:
In general, try to use
<link rel="preload">, as it's a more comprehensive performance tweak, but do keep<link rel="preconnect">in your toolbelt for the edge cases like:
- Use-case: Knowing Where From, but not What You're Fetching
- Use-case: Streaming Media
In this case we don't have streaming media, and we know what we're fetching, so <link rel="preload"> seems like a better approach.
I think in your case the best solution would be to use:
<link rel="preload" href="{{site.url}}/assets/js/ga-lite.min.js" as="script">So I would just put that somewhere else early on the page, I don't need to modify what's already there in the script, correct?
I thought preconnect needed to be part of the loading code which is why I was confused.
And I should say, thank you for the extensive and prompt replies.
So I would just put that somewhere else early on the page, I don't need to modify what's already there in the script, correct?
Yes, very good point. I think you should always put the <link> tags inside your <head> tag
I thought preconnect needed to be part of the loading code which is why I was confused.
Yes, I can see your point of view. Thank you for bringing this up! I'll make sure to add a note about this to the readme a bit later. I'll leave this issue open to remind myself until I do 👍
Here's another lighthouse issue I just came across

Thank you for reporting! I opened a separate issue for that at #253