Search code examples
javascriptcssreactjsnginxpagespeed

Create-react-app pagespeed confusion

I've been facing pagespeed problems using this tool from google

My goal is to reach ~95 on pagespeed insights;

I use create-react-app, and after I've:

  • Enabled gzip in nginx for all project files,
  • Compressed all images as suggested by Google,
  • Used loadCSS polyfill to avoid css-blocking while page renders (I placed links of sanitize.min.css, and slick-carousel I use in public/index.html as suggested),
  • Loaded fonts as suggested here using fontfaceobserver,
  • Reviewed my css files, reduced amount of inline-css in js files to minimal

my current pagespeed is Medium(72) and Good(85) and PageSpeed Insights suggests to remove JS file which are blocking download (this is my main.js from react) and optimize CSS delivery (which is my main.css), and to make use of browser-caching (which I think is not the case here).

I seen similar questions and I tried to load pages as chunks using code-splitting (from this tutorial) but it only reduced the pagespeed from what I have now, to 40-70 for mobile and for desktop respectively which makes no sense to me because why smaller chunks of code would do this? I also tried different approaches of react-router code-splitting but they didn't help to improve pagespeed at all, even worsen it.

I thought the issue might be that I 

@import "material-components-web/material-components-web";

In my index.scss which is pretty heavy itself, I tried to import separate MDC packages but it didn't affected page speed at all. What can be done to reach desired 90+ pagespeed in my case? Thank you!

Solution

  • Well create-react-app is a broad starter project, meaning it is made with different things in mind, and with that, come ~50-100 dependencies which most of them you probably don't need/use. Such a simple tool comes with it's downsides like this. If you are a beginner it is a very awesome tool to use, if you are advanced you'll see you have to eject to make more advanced config changes.

    If you really need to tweak it for you every single need, you need to eject, then start by cutting off dependencies that you don't need, but if you are a beginner, I'd say stick with it.

    I know this isn't a precise answer to your question, but broad questions receive broad answers :)