React/nextjs website poor mobile performance

Dominik Braun 0
Viewed 37

could anyone please help with my webbsite loading times? Whilst desktop pagespeed ranks 99 the mobile version ranks 75 only.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.muscle-cars.eu%2F&form_factor=mobile

What could I do? I already use next/image and wepb, do I have to compress it more?

Yesterday I tried to remove Catamaran font from the website and it speeds up to 96, but it is very unlikely that removing 80kb font would help that much, I think there is something blocking up loading the font. I tried Google API and self hosted both similar result.

Thanks for help.

next.js reactjs
1 Answers

Here is the result of your website test, we can see that the mobile version only ranks 75.

enter image description here

I used chrome devtools to check this web page and found some issues to enhance your web user experience.

  1. Your website gets the raw css and javascript files from the server. It's too big and will waste more time. You can reduce file size by using ugly javascript and css files when the page is first loaded.

enter image description here

  1. Your website is getting too many javascript files on first load. I found more than 10 files to load. In mobile 3G networks, more time is wasted. So use webpack or other bundling tool to combine these files into fewer files.

enter image description here

  1. You can reduce file size by using tree shaking javascript and css.

  2. Your web page home page can use server-render teck, which renders javascript in server and sends whole html file to mobile browser.

userrOLX0
Related