On a web project the most important thing is not how it looks, it is whether it can be used. Next.js projects put a heavy load on the browser because of the compile work they do there, and that leads to stutter. So the design element we added while thinking “yes, this is a nice touch” is something whose effect we have to measure properly too.
Well measured additions make sites open faster, and that is a real advantage, but it is not the only one. The second big advantage is that they act directly on user experience. If a user connects to your site quickly but then has a rough time moving around it, that builds a tendency in them not to come back.
On Next.js projects we noticed breaks in the page flow fairly often. There is still no name or assessment for this in the PageSpeed and Chromium data, so in our own testing we settled on an average phone and we run these tests on it.
Now, depending on who your website audience is and how comfortable they are with technology, the phone model they carry changes, and with it the power of their browser. We at Türk SEM did a fair amount of research and found that the average phone in Turkey lands somewhere around the Samsung A13 or the Note 20. Whatever market you are in, the point holds: work out what your own visitors are actually carrying and take that device as your baseline.
On every client website, we run the first tests on devices like the A13 and the Note 20.
A Critical Finding for Next.js and SEO
On every parameter and under every condition, Next.js is hugely favorable for SEO work. The user meets a fast site in the first moment, and that naturally gives them a good reason to come back. But; on sites with overdone animation built on faulty logic, what you win at load time can turn negative the moment someone starts moving around.
Google will read that as “Long Tasks”. If framer-motion has not been set up properly on your site, a high Long Tasks figure will be no surprise. You finish the site, you test it on an iPhone 17 Pro Max, and you have not tested the user experience at all. The soundest approach is an average device, which by our own findings means the stronger devices in the A13 to Note 20 range.
The Infinite Animation Mistake
What we are describing here holds for 2026 and 2027, of course. This piece will probably not be worth much by 2028. Because; Tailwind CSS and Next.js keep shipping improvements and they will keep getting better. But; this much is certain: think about which phone the average of your visitors will be holding, and run your tests on that device. Infinite animations can bring on heavy stutter even on good devices after a while, and even in desktop views. If it is not adding something genuinely important, stay away from infinite animation. Not using it can work in favor of your site’s SEO.
The “Real World” Test in Chrome DevTools: CPU Throttling
A Next.js project running on a top end machine (i9 processor, 32GB RAM) can feel like it is “freezing” for someone on a real Samsung A13. To get ahead of that, during development we use CPU Throttling to slow the device down artificially by a factor of 4.
Throttling the CPU, Step by Step
- Open developer tools: on the page you want to test, press
F12, or right click and choose “Inspect”. - Go to the Performance tab: click Performance in the top menu.
- Reach the capture settings: click the gear icon in that tab (or “Capture settings”).
- Throttle the CPU: from the “CPU” dropdown, pick “4x slowdown”.
- Note: if you want to simulate a much weaker device, such as an entry level Android, you can use “6x slowdown” as well.
- Record and test: press “Record” (the circle icon) and move around the page like a user would, click buttons, trigger the animations. Then hit “Stop” to end the analysis.
What Should You Look At? (The Critical Metric)
Once the test is done you will see red lines in the Main thread. These are called “Long Tasks”.
- Red lines: a lot of red on the main thread means the CPU is “freezing” while it works through those tasks.
- Interaction to Next Paint (INP): if the gap between a user clicking a button and the browser responding goes above 200ms, the A13 or Note 20 user is probably leaving that site.
In short: focus not only on load speed but on “how smooth it feels at the moment of interaction”. If your site still runs smoothly on a processor slowed down 4x, your code structure and your animations are optimized for the “real world”.
