Skip to content

ankurparihar/readme-pagespeed-insights

Repository files navigation

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

Example