Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add note to README about using preconnect/preload to improve google page speed #252

Open
datapolitical opened this issue Mar 14, 2021 · 7 comments
Open

Add note to README about using preconnect/preload to improve google page speed #252

datapolitical opened this issue Mar 14, 2021 · 7 comments
Labels
enhancement

Comments

@datapolitical
Copy link

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?
@jehna
Copy link
Owner

jehna commented Mar 14, 2021

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">

@datapolitical
Copy link
Author

datapolitical commented Mar 14, 2021 •
edited
Loading

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.

@jehna
Copy link
Owner

jehna commented Mar 14, 2021

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!

https://web.dev/uses-rel-preconnect/

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">

@datapolitical
Copy link
Author

datapolitical commented Mar 14, 2021 •
edited
Loading

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.

@jehna
Copy link
Owner

jehna commented Mar 14, 2021

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 👍

@jehna jehna changed the title preconnect to improve google page speed Add note to README about using preconnect/preload to improve google page speed Mar 14, 2021
@datapolitical
Copy link
Author

Here's another lighthouse issue I just came acrossimage

@jehna jehna mentioned this issue Mar 15, 2021
Closed
@jehna
Copy link
Owner

jehna commented Mar 15, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@datapolitical @jehna