How to Run Page Speed Insights on a Locally Hosted Webserver

Posted on in: All Posts, How To's.
Tags:

psi – page speed insights
ngrok – secure tunnels to localhost

npm install -g psi
npm install -g ngrok
sudo vim /etc/apache2/sites-available/000-default.conf

The file should look something like:

DocumentRoot /path/to/siteroot

Then restart apache and browse to localhost. You should see the site you want to test. If not adjust the Apache config file

Once you see the site on localhost run:

ngrok http 80

if we had a paid plan we could run something like

ngrok http -hostname=flakekelley.dev 80

but it isn’t really necessary since we can simply swap out the DocumentRoot in the apache configs

after running ngrok you should see something like this:

ngrok by @inconshreveable (Ctrl+C to quit)

Tunnel Status online
Version 2.0.19/2.0.19
Web Interface http://127.0.0.1:4040
Forwarding http://4bc51cae.ngrok.io -> localhost:80
Forwarding https://4bc51cae.ngrok.io -> localhost:80

Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00

Since 4bc51cae.ngrok.io is technically a “public” url you can run page speed on the web

https://developers.google.com/speed/pagespeed/insights/?url=4bc51cae.ngrok.io

if you need to run this on the command line, copy paste the generated ngrok url into the following command:

psi 4bc51cae.ngrok.io

This should print somethig like:

——————————————————–

URL: 4bc51cae.ngrok.io
Strategy: mobile
Speed: 70
Usability: 99

CSS size | 440.89 kB
HTML size | 26.75 kB
Image size | 479.42 kB
JavaScript size | 1.19 MB
CSS resources | 11
Hosts | 8
JS resources | 15
Resources | 57
Static resources | 30
Other size | 5.4 kB
Total size of request bytes sent | 6.06 kB

Enable GZIP compression | 0.9
Leverage browser caching | 15.75
Minify CSS | 0.37
Minify HTML | 0.07
Minimize render blocking resources | 24
Optimize images | 0.74
Size tap targets appropriately | 0.18

——————————————————–

Logo smleimberg.com