Can we make a lighthouse audit on a preview url?

Hello i have this deploy-preview url: https://deploy-preview-1--angry-albattani-23fea0.netlify.app/

If i run a lighthouse audit on Google Chrome on this url the performance is very low.

The same website published on my server gets very high score using the same tool (Google’s lighthouse)

Can we perform this kind of light house tests on Delploys-previews and have valid scores?

This is the same build on my personal server: https://lycofil.com.mx/new/

you can perform a lighthouse audit on both and see the difference on performance.

We can only research the same time hosted two places. In this case, you are comparing two different sites. They are not identical and it would seem the site at Netlify is not optimized:

The Nginx hosted instance at the custom domain sends an HTML file initial which is 80449 bytes:

$ wget https://lycofil.com.mx/new/
--2020-07-19 22:36:15--  https://lycofil.com.mx/new/
Resolving lycofil.com.mx (lycofil.com.mx)... 159.203.157.214
Connecting to lycofil.com.mx (lycofil.com.mx)|159.203.157.214|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 80449 (79K) [text/html]
Saving to: β€˜index.html’

index.html                                 100%[========================================================================================>]  78.56K  --.-KB/s    in 0.1s

2020-07-19 22:36:16 (806 KB/s) - β€˜index.html’ saved [80449/80449]

The site at Netlify sends a 4209881 byte file HTML file:

$ wget https://deploy-preview-1--angry-albattani-23fea0.netlify.app/
--2020-07-19 22:40:24--  https://deploy-preview-1--angry-albattani-23fea0.netlify.app/
Resolving deploy-preview-1--angry-albattani-23fea0.netlify.app (deploy-preview-1--angry-albattani-23fea0.netlify.app)... 167.172.221.254, 165.227.0.164
Connecting to deploy-preview-1--angry-albattani-23fea0.netlify.app (deploy-preview-1--angry-albattani-23fea0.netlify.app)|167.172.221.254|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 4209881 (4.0M) [text/html]
Saving to: β€˜index.html’

index.html                                 100%[========================================================================================>]   4.01M  1.48MB/s    in 2.7s

2020-07-19 22:40:27 (1.48 MB/s) - β€˜index.html’ saved [4209881/4209881]

I don’t know why the two sites differ but they do. We cannot make a 1:1 comparision of these two sites as is.

Even looking a the total transfer sizes in developer tools shows a large difference.

The Netlify site:

The Nginx site:

The site at Netlify is over seven times larger than the site on Nginx which explains a great deal of the difference.

β€œWhy do your two sites differ?” would be the next question. Would be willing you tell us more about how you created both sites? Does the Nginx hosted site use server-side rendering for example?

1 Like

Gee that is some amazing insight @luke .Thank you. For some reason the npm run generate command on netlify creates a dist folder which is over 17mb in size. If i run the same command on my computer is only 1.4mb i think i am using the same node version as netlify (v12.18.0). Do you have any ideas? Maybe Netlify is using Yarn Install instead of Npm install? How can i tell? I remember telling netlify to run npm run generate to create the dist folder, but how can i know if netlify is running npm install or yarn install? That might be the difference? What else?

I was having a similar issue on a different project, it was solved by removing a folder from the .gitignore file, so it was added to github and therefore to netlify. But on this particular project, i don’t know yet.

Hi, @lmuzquiz. Looking at the site build logs should reveal answers to most if not all of these questions.

I took a look and based on those logs, yarn is being used:

6:16:00 PM: Installing NPM modules using Yarn version 1.22.4
6:16:01 PM: yarn install v1.22.4

Interestingly, however, the build command is npm run generate:

6:16:39 PM: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
6:16:39 PM: β”‚ 1. Build command from Netlify app β”‚
6:16:39 PM: β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
6:16:39 PM: ​
6:16:39 PM: $ npm run generate

The solution for build differences is to make certain the Netlify build matches that the local build as closely as possible.

If there are other questions about this, please let us know.

Ok i’m beginning to understand, i just read this:

" Starting today, if you deploy a site that includes a yarn.lock file in the base of the repository, we’ll use Yarn to install dependencies. We’ll do this automatically, without you having to change any configuration options."

So yeah, i gotta get rid of the yarn.lock Thanks @luke