ankurparihar / readme-pagespeed-insights

Google lighthouse stats of your website that you can put in readme

PageSpeed Insights for README

Embed your website's pagespeed score to your readme

About PageSpeed Insights

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Learn more.

Info

Guages

PWA

API and Usage

Important note: Do not embed url to readme, instead embed generated svg

• It takes time to perform audits of website. So embedding it directly in readme would not render due to server timeout. Instead you must first visit and download the svg from the api (by simply visiting api url with desired parameters). And then embed that svg to your README files.
• Typically it takes 10-15 seconds to obtain the results from pagespeed api
• Some servers don't allow (eg. google.com) or delay (eg. cloudflare) pagespeed crawler, so it may result in unexpected results.
• The result may fluctuate slightly sometimes.

API url

The api is called from https://pagespeed-insights.herokuapp.com

Simple usage

In simple form it will return result for all categories for desktop version of your website. Replace your_website_url with your website's url

https://pagespeed-insights.herokuapp.com?url=your_website_url

For example

https://pagespeed-insights.herokuapp.com?url=https://ankurparihar.github.io

Theme

Default result is theme-agnostic i.e. looks good in both light and dark environment. But you can force one of two additional themes that are light and dark.

https://pagespeed-insights.herokuapp.com?url=your_website_url&theme=dark

Strategy

Strategy specifies the type of device your website is audited for. You can specify strategy as either mobile or desktop. If none is specified desktop is chosen

https://pagespeed-insights.herokuapp.com?url=your_website_url&strategy=mobile

Category

There are 5 categories (in order)

Category Name	param
Performance	performance
Accessibility	accessibility
Best Practices	best-practices
SEO	seo
Progressive Web App	pwa

If not specified, all the categories are evaluated. But you can specify only categories which you want to evaluate. The category parameter is comma-separated category indicators.

Examples:

Only performance

https://pagespeed-insights.herokuapp.com?url=your_website_url&categories=performance

All but PWA

https://pagespeed-insights.herokuapp.com?url=your_website_url&categories=performance,accessibility,best-practices,seo

Ordering

Order of categories is preserved

https://pagespeed-insights.herokuapp.com?url=your_website_url&categories=seo,performance,accessibility

Options

Additional options you can specify in query parameter

Name (default)	Description
perfTestCount (1)	Specify how many times performance test to run

Embedding into readme

After downloading svg you can embed into readme as following

• markdown method

![alt text](path/to/svg "tooltip text")

• html method

<p align="center">	<!-- (optional) center align -->
    <img src="/path/to/svg" width="XXXpx">
</p>

Keep results updated with action workflow

• pagespeed.yml

Example

• ankurparihar.github.io

readme-pagespeed-insights's Issues

Add signature

idea: caching results for some time

Its allow to show an actual results on the page, instead of manual download and publish.

CLI, docker and ease of use improvements with `psi-svg`

I really liked the project and thank you for your work but the scope of the program did not fulfill all my requirements. I therefore went ahead and created a fork of this repo which implements a bunch of improvements to code quality and usability. Maybe you would like to check it out and tell me what you think? I was very careful to adhere to the license of your project, but please message me if anything is not in order.

Here is a link: https://github.com/nico-i/psi-svg

Not rendering the pagespeed insights and getting application error msg when using in readme file.

This is happening because the server is down, after heroku has stopped providing free dynos. A better approach would be to move the deployment from heroku to some other platform like vercel, cyclic etc.

Move to TypeScript

Move the code to TypeScript

Add background-agnostic theme

The light / dark themes are awesome but I think a background-agnostic theme could be preferred by some.

I've modified the output SVG a bit to make that happen, here's how it looks like

Left column is current light theme output on both light and dark background. Right column is SVG with my improvements.

You can find the modified SVG and a simple page I used to display both images here. Use diff to see the changes (:

Link is not working

https://pagespeed-insights.herokuapp.com/

This link is not working!

The api url doesn't work

Extract strings, numbers etc. to constants

Better error handling

Cases like

• Invalid or absent URL
• Invalid category, theme, strategy
• PageSpeed API failure

Change in categories specifier

Current method uses OR operation over category index to send category list to server. This is not intuitive to normal users and to request specific categories, they need perform this extra step to map category with number and ORing them.

Also this is a blocker for #7

Proposed URL schema
https://service.host/?url=URL&categories=perf,a11y,seo

Sort imports

Add import order

Website not working

Some issue with heroku may be :(

Heroku free tier no longer supported

Possible alternatives:

• Dokku
• Porter
• CapRover
• Render
• Fly.io
• Firebase
• DigitalOcean

Add ts definitions of pagespeed response

PageSpeed API response schema in TS definitions

Heroku application throws application error

The provided link for the application throws an error, which results in all other API requests also throwing an error.

Add ESLint to the code

Setup ESLint to detect bugs

Create a UI

Make a UI where people can submit website URL and download the SVG

Allow multiple tests for performance score

The performance score changes from test to test, so we should run this test multiple times (3-5) and average the perf score.

Ref: Why your score fluctuates

• Allow user to send a param perfTestCount to specify number of time perf test to run.
• Implement the feature in backend
• Have a maxPerfTestCount in backend to prevent abuse of the feature.

Better portability

Make it easy to use by other account

• Easy to host
• Easy to integrate gitlab action to any project

Deploy CI/CD pipeline

Add an CI/CD to automatically deploy the app

Feature to allow ordering of svgs

Currently the order of SVGs is fixed to - perf, a11y, best-practices, seo and pwa.

Allow users to specify the order from categories param.

Proposed URL to specify widgets

https://service.host/?url=<URL>&categories=perf,seo,a11y => should render in this order [perf, seo, a11y]

Github CI checks for PR

Perform some basic checks with Gitlab CI

• ESLint issues
• Formatting issues

Test driven development

Write unit, integration and e2e tests.

Improve README

Improve the way query params are documented