Optimize for GPU & User Agents

[00:00:00]
>> Matias Gonzalez: I'm talking about evaluating things from the user's device. Sometimes we may create effects that are expensive on the computer. Let's say we start playing with some shaders and we create like a cool effect like this. We might want to disable our effects on like a mobile device.

[00:00:28]
Well, let's say that I'm on, I'm using some SVG filter that's not supported in Safari, so I want to change my logic based on the browser type. What we're going to see next is how to detect different properties of the user's device and make our applications react to those changes.

[00:00:55]
So I'm going to go and open this device profiling experiment. Let's go into the starter. And we have our shader effect and we also have a static version of the same logo. You can just import that and preview how that looks, it's just an image. So what I want is to create some hook that will tell me, hey, you should render this effect or not.

[00:01:34]
So let's create a function, use should render WebGL, for example. Let's just return true by default. And let's use that hook, so const should use GL equals use should render GL. And depending on this property, we're going to return the shader effect or our static version.

[00:02:11]
So there are a couple of things that we can measure from a user's device. One thing is the GPU tier of the device, so different devices might have different GPUs. So maybe you are on a Mac with an M3, so everything's going to run smoothly, or maybe you're on an older device that doesn't even have a GPU, so you want to be able to detect that kind of thing, depending on the amount of effects that you have on your site.

[00:02:55]
So let's actually do that, let's add the useEffect. And we're going to use a library called Detect GPU. So I'm going to pull up the documentation quickly. So Detect GPU basically enables us to get information about the tier of the GPU of our user. We basically, I usually use this number, so this is a number that goes from 1 to 3, 3 being a really good machine, 1 being a really slower machine.

[00:03:50]
So I want to go back in here and run a get GPU tier from Detect GPU. And then we're going to get a result, and I want to get the tier. So let's store this tier on a state, so const GPU tier, set GPU tier, it's equal to useState. Let's start with null, so this could be either a number or null if it's not initialized.

[00:04:37]
So I'm going to set GPU tier using the result of the measurement. So let's start by logging this GPU tier in our application. And as we can see, on this machine it detects that it's a 3. So this number might change depending on the machine, so let's go and simulate like having maybe a Samsung Galaxy.

[00:05:13]
So we will detect that the GPU is a 1, so it's a less powerful machine that we're working with. So with this we can already have some information on the user's device and maybe disable some effects, like for example, if you have like a lot of animated layers that can be really, really expensive sometimes, so we might want to just double check that on different types of devices.

[00:05:56]
So let's say if a type of GPU tier is a number and the GPU tier is less than, I don't know, 2, then we will return false. Basically, we will disable the WebGL effects from our page. So again, here I will have all of the effects, and if I go into the Samsung version, I would just have an image.

[00:06:30]
Then we might also want to detect what type of browser and machine the user has, and for that there is also another really good library that I usually use, which is react-device-detect. And this library is going to use the information from our user agent in order to detect a bunch of information.

[00:07:01]
It's going to tell us if it's like a mobile device, what browser it's in, so we can change our content based on different parameters. So let's actually use this one too. So const result, it's equal to, this one is, I want to import getSelectorByUserAgent. So this function needs a user agent.

[00:07:48]
So the way we extract the user agent from the machine is that we use window.navigator.userAgent. So this is a string that contains a lot of information about our browser and our device. This is usually also appended to our requests, so if we fetch an API, usually we're sending also this information, so we have access to this also on the server if you want.

[00:08:24]
So we could even run like this logic if we need on the server. But let's just do it on the client for now. And this library doesn't have like a lot of good types, so I already went ahead and manually typed this as device type, so this is like all of the information that is extracting.

[00:08:50]
We can detect like the OS name and a bunch of stuff. Let's just console.log this. How often do you test on different GPUs, or do you have a general rule of thumb when you're kind of deciding what level to start disabling animations? It depends. If I'm creating a website that has WebGL, usually you do want to measure the GPU.

[00:09:22]
If it's a really simple effect, probably not, also depending on the time that you have, that's the reality. But it can be useful. For example, when I worked on a little multiplayer game that we did for Next.js Conf, we needed to decide that it was a multiplayer game and there were multiple users, and one user from the room was actually the host of the experience.

[00:09:50]
So the way that I decided which user is the host is to measure the device, and the user with the better device was going to run all of that extra logic. Other cases are, yeah, if you have again like a really complex effect that's really expensive and you guess that that's not going to perform well on lower spec devices, yeah, just measuring the GPU is good enough.

[00:10:26]
And this one is usually useful if you want to detect things like if you're on Safari or things like that using JavaScript. So in this case, let's actually create also a state for this, so device info, set device info, useState, and this is going to be device type or null.

[00:11:23]
And we can just set this with the result. So now we can also perform some logic based on the device information. So let's say that I am using some type of SVG filter that's not available for Safari, then I can just change my logic based on that. So if the device info is not null and device info is, for example, Safari, then we can just also disable my effects, for example.

[00:00:00]
Let's open Safari. Let's go to localhost and to this experiment. And again, it's disabled because I'm on this specific browser.