Nuxt in depth: make your website faster by removing google analytics. Still get metrics!

what is up welcome back to yet another video so if you know me a little um and if you don't you'll get to know me very soon i really enjoy performance of websites but a performance of anything basically but because i'm such a geek i also really like to see metrics about this performance and i also like privacy related subjects so having google analytics on your website is not as great for its performance because it's loading like separate files and stuff and it's also tracking your users but i just like those metrics so i saw this tweet the other day or maybe it's on that side let's see how i edit this and this is from surma where he did like the mini hack of the day and in which he kind of removed um analytics.js from google and added a very simple way with the web b consent of the analytics code and so this means there's no longer tracking javascript of google i don't think it's gdpr compliant exactly but at least it's way lighter and then on top of that he added a web vitals package and all that information is also sent to google so i am really interested to see how that works and you know what i did it i gained some performance and i did it in next so in this video you will learn how to minimize your google analytics page weight stuff be more good for privacy and get really cool metrics on performance in next okay that was a long intro let's run all righty then let's dive into the code so i have here idea.js just to show you what the ideas of this tweet from server and so this is its simplest form so we now no longer have the next analytics plugin and we also don't have analytics.js from google so what i've done now is like this is a plugin i'll show you what that means later in next but for now assume that this works so i'm getting the router which is view router from next and after each route so when i go to slash videos or slash about this function is fired which is called send and then my send function receives a bunch of data and it has a bunch of default data and it's using sendbeacon which is a browser feature to send something quickly it's super lightweight and so it's actually sending it to googleanalytics.com collect and if you have normal analytics on your web page you tend to see this collecting happen all the time and it's actually a gif because that's the easiest way for google to collect information that is not blocked by anyone so i'm actually sending like my id of my account and the c id actually sirma also said that it's completely random so google cannot track subsequent calls because every call is a new id so it's a new user and then of course we need the location and then you can see that data is sent on top of this for if i wanted to send more stuff so in this case i want to send a page view after each route so this is the simplest way this works and so let's have a look at how i actually did it myself because i said it's a plug-in right so in the next config you'll see plugins analytics.js only for client-side because i'm doing a jamstack website for so for me this this is important and so let's have a look at that analytics plugin because when you have a plugin in next in your default function you get the context of next and in my case i only need the app because it has the router so after each route you can see that's the same code here right so i'm sending a page view but so when you look at my code i actually made it a little bit bigger right because i thought maybe i need a little bit more information not to break my google analytics interface right because they actually have like user agent they use that to say hey it's a mobile user or not and so for me that's still pretty important i look at the referrer if there is one i look at the actual screen width and height we're looking at the so this is the this is a screen and this is like the viewport of the user so if they have devtools open it's a bit smaller right i look at pixel depth and then at the language so this gives a little bit more it might be on the edge of what privacy is and what not so i might remove it later but i wanted to add a bit more just to be sure that it works and then on top the same thing that serma also did is add the web files package here and this has really cool stuff right so like time to first bite you know first contentful paint things like that so all the stuff that you get in your audits panel you have that as functions here so i decided to follow suit from serma and actually on each page load i will fire all those functions and when they actually complete so when it calculated the number of my first contentful paint stuff like that it will actually then fire this function which is here which again uses descent with a whole bunch of extra variables right so it's sending web vitals as an event in this case it's an event right and so it has a bunch of numbers and it's also that it's not an interactive click of someone but i automatically send it so this is going to google as well so over time i will now gain a bit of information about users specifically on their browser how fast my website was for them and so this is more than you normally get from google and but i'm not even using their analytics library anymore i'm doing it myself and so this is cool i love this stuff so now let's have a look at the performance enhancements that i got on my website itself this is debug beer it's one of my new favorite tools because it really looks into performance really well and it checks stuff over time so debug bear i will make a video later by the way on this because i'm really i really enjoy this kind of stuff so what they do is they run google audits from their server farm or from the cloud and then you can add some pages in the interface and then over time you can see the differences so that's what i did so i won't go into debugger as much now we'll just look at this so this is the mobile view of my home page and so with google analytics this was where i was at and now you can see here that the google analytics file has been removed and things went down quite a bit and also in things i didn't expect look this is first contentful paint it went down from 883 milliseconds to now 486 or a bit higher today anyways it's close right and then the largest contentful paint actually went down time to interactive went down everything went down js time beam total blocking time beam i can almost not believe that this is just my analytics code that is removed you can also see that from my my package i have a bit less javascript because the the next package for analytics is also gone and it uses few analytics which is pretty big so it's all gone however it this these numbers are almost too much so let's not pin ourselves completely to how awesome this changes because it might not be that for you i might have changed another thing that made this so good maybe there was a cdn hiccup in for sale but anyways we can see that i removed 18.6 kilobytes anyways and i moved some of my own code and i gained more information in my analytics interface so without really taking this as complete truth you can see a difference and i think that's really really cool anyways this was a short video thanks for watching and happy hacking on next cheers