4.12.122 • Published 12 months ago

@diotoborg/asperiores-placeat-officia v4.12.122

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

PageSpeed Insights SVG

Example Insights for https://inico.dev/

npm

This node module performs a Google PageSpeed Insights analysis on a given webpage and returns the result as an SVG.

Installation

npm

npm i -g @diotoborg/asperiores-placeat-officia

bun

bun i -g @diotoborg/asperiores-placeat-officia

yarn

yarn global add @diotoborg/asperiores-placeat-officia

Usage

The module can be used as a CLI tool or as a web server. Different options can be used to customize the output for each use case.

CLI

To use the module as a CLI tool, simply run it with the URL of the webpage to analyze and the path to the output SVG.

Example:

@diotoborg/asperiores-placeat-officia https://www.example.com ./out.svg

Flags

The following flags can be used to customize the analysis:

FlagDescriptionTypeValues
--strategy or -sThe strategy to use for the analysis.desktop | mobilemobile
--categories or -cThe categories to include in the analysis as CSV.performance | accessibility | best-practices | seo | pwaperformance, accessibility, best-practices, seo, pwa
--legend or -lWhether to include the legend in the SVG.true | falsetrue

npx

The module can also be run without installing it by using npx:

npx @diotoborg/asperiores-placeat-officia https://www.example.com ./out.svg

Server

To run the application as a web server, the --srv or -s flag can be used:

@diotoborg/asperiores-placeat-officia -s

By default the server will listen on port 3000. To change this, the --port or -p option can also be set:

@diotoborg/asperiores-placeat-officia -s -p 8080

After the server has been started, an insights SVG can be generated by sending a GET request to the server with the URL to analyze as a query parameter:

curl http://localhost:3000/?url=https://www.example.com > example-insights.svg

Query Parameters

The server accepts similar parameters as the CLI tool:

ParameterDescriptionValuesDefault
urlThe URL to analyze.string-
strategyThe strategy to use for the analysis.desktop | mobilemobile
categoriesThe categories to include in the analysis as CSV.performance | accessibility | best-practices | seo | pwaperformance, accessibility, best-practices, seo, pwa
legendWhether to include the legend in the SVG.true | falsetrue

This GET request for example

curl http://localhost:3000/?url=https://www.example.com\&strategy=desktop\&categories=performance,accessibility,seo\&legend=false > example-insights.svg

will return this SVG

Example Insights for https://www.example.com

Note: this analysis ran on the 17. November of 2023; the example page may be prone to change and the results may not be accurate anymore.

Environment Variables

The following environment variables can be used to customize the application:

VariableDescriptionValuesDefault
DOMAIN_WHITELISTA comma-separated list of domains to allow requests from. Currently only supports domain name i.e. no wildcardsstring-

Setting the DOMAIN_WHITELIST environment variable to example for example will allow requests from https://example.com and https://example.org. This is especially useful when running the web server in a public environment.

Docker

The application can also be run as a Docker container by following the following steps, although this requires docker to be installed.

  1. Clone the repository
git clone https://www.github.com/nico-i/@diotoborg/asperiores-placeat-officia
  1. Build the image
docker build -t @diotoborg/asperiores-placeat-officia .
  1. Run the image
docker run -p 3000:3000 @diotoborg/asperiores-placeat-officia

Github Actions

The application can also be run as a Github Action an example workflow can be found in .github/workflows/pagespeed.yml. The results of which are visible in docs/img/. To use the action, simply copy the workflow file to your repository and modify the value of the URL_TO_ANALYZE and RESULTS_DIR variables. Also ensure that the Github Action Workers have write access to the repository. You can configure this under Settings > Code and automation > Actions > General > Workflow permissions.

Development

This project uses Node.js and Typescript for development. To get started, clone the repository and install the dependencies:

git clone https://www.github.com/nico-i/@diotoborg/asperiores-placeat-officia
cd @diotoborg/asperiores-placeat-officia
npm install

To run the application, use the following command:

npm run start

This will start the web server on port 3000.

For development I recommend using the API testing tool bruno, which you can point to the /.bruno/ directory of this repo. It contains some helpful requests to test the application.

Credits

This project is based on ankurparihar's readme-pagespeed-insights.

This project improves the original project in the following ways:

  • Added a CLI implementation
  • Added Docker compatibility
  • Removed unnecessary options which previously bloated the code
  • Better SVG generation with individual SVG-files instead of inline SVG strings
  • SVG styling CSS moved to an individual file to facilitate intellisense and linting
  • Improved the file structure and code coupling with Domain Driven Design (DDD)
  • Added the option to disable the legend
  • Made Github action independent of running server
  • TODO: Added automated tests

License

See LICENSE.

ECMAScript 5buffersidlenpmbatchvaluesrfc4122ESnextnamesexpressarraybufferttytypedarraysreact poseefficientzodnegativesettingscensorObjectintrinsicincludesFloat64ArraysymbolwafglobalglobalsHyBiArray.prototype.findLastescapequerystringcssbrowserlistastemittestingprettyinternal slothasOwnbufferframerroute53l10npromisefile systemenumerableStyleSheetargssqsBigInt64ArrayArray.prototype.flatrandoma11ydeepes-shimswrapcommand-lineparserkarmaregexpunicodeeslintconfigfps@@toStringTagdeep-copydeepclone-0dependenciesdebugscheme-validationrmprototypetapeponyfillInt8ArrayutilityelbObservablerapidlibphonenumberES2020eslintpluginthroatkey valuermdirFunction.prototype.namecommandercoveragepluginsharedarraybuffereslint-plugintoobjectStreamtostringtagprocesses-abstracthasheventsES2023shebangchromeapipushpipecolordescriptorECMAScript 2020SymbolhookformiteratorURLutilequalArray.prototype.includespackagespropertydayjsglaciertypescriptopenerprefixequalityextendArrayBufferqueuestringifyvalidfullwidthtextserializationgetconsumeinferenceprotobufkinesisicuavaObject.getPrototypeOfES7mapreduceES2018styleguideslotfast-deep-clonereact-hookssetImmediateArraytesterstoragegatewayArray.prototype.flatMapUint16Arrayxdg-openlockfilepatchtermfetchcharactersreact-testing-libraryInt32ArrayWebSocketsdotenvtapeventEmitter[[Prototype]]rangeerrorcolorsurlsjsonIteratorrequest.envjQueryinternalslicedateansimake dirfolderfinduppackage manageroutputimportexportdependency managerjavascriptglobmodulesbyteOffsetreal-timedirectorysymbolsdynamodbredactBigUint64ArrayeslintconcurrencycirculardataViewpolyfilljapanesecolumnsMapconcathelperinspectflatMaplogflagentriespopmotionObject.keyssameValueZeropyyamlregularchaitriminputUint8ArrayInt16Arrayweaksetfull-widthRegExp.prototype.flagsoncerouteschemeidentifiersshrinkwrapdebuggerECMAScript 2016traverseCSSStyleDeclarationyamlcallbackYAMLredux-toolkitobjectRFC-6455ES8es6i18nspeedterminalhelpersbannerieeventDispatcherWeakSetpostcsscolourrgbspecviewflagscodesroutingfilequeueMicrotaskfastJSONforEachtc39startgesturesECMAScript 2021keywait3ddefinepositiveparsingjsdomserializestringjestprune$.extendform-validationprotocol-buffersimportextensionwebsiteaccessibilityassigncreateargumentsconcatMapES2019reduxsyntaxassertswalkbundlingfromvalidationajvshimratelimitlanguagecheckflatinstrumentationextraArray.prototype.filtertypeerrorsetprivateoffsetec2functionaldataviewrecursivestablestreamsstylediffES2015linewrapreduceprogressbreakhooksprivate datapackage.jsonurlTypedArraystyled-componentsendpointsearchoptimizeriterationwalkingio-tstypesclass-validatorcallboundcoercibleartspringES2017mimefunctionsboundasciiduplexObject.definePropertydefaultrequirewaapimobileconfigapollomkdirpchildgetOwnPropertyDescriptorfunctionlastparsegetintrinsicelasticachephoneyupmkdirhardlinkscollectionspawncharactereast-asian-widthCSSappclienthassetterpreserve-symlinkssidevarsPushawesomesaucesortedtakesortcall-bindecmascripttypanionsimple cachefindLastIndexarktypefast-deep-copytoArraylengthiamdeepcopyhasOwnPropertycloneECMAScript 2017descriptorsfindcall-boundcachecollection.es6tdddropbrowserairbnbRxJScss-in-jsdeletetestconsolestructuredCloneperformantcloudsearchwarningmulti-packagedatastructurestylesconfigurableEStypedarrayeditorwordbreakcharsetbddconvertmimetypesmatchAlllintworkflowStreamssesaccessorbusyfastifyTypeScriptsymlinksescloudfrontguidObject.valuescommandgenericswhatwginvariableslimitedtypetaskformsvalidatedomcallarraysupES5ReactiveXArray.prototype.flattenstarteranimationstreamemojierrorcomparelinkassertsymlinkdatatypesafeinstallrm -rfECMAScript 2022writablezeroObject.fromEntrieses2015spinnerlookvisualjasmineflattenvaluetrimEndreadUint8ClampedArraytrimLeftjsxexe_.extendes2018RegExp#flagssnselectronmoveinvariantRx0locationgdprhttpmonoreposomecolumnutilitiespropertieschromiumimmutablereducerisConcatSpreadableArrayBuffer.prototype.sliceidfindLastgetoptlaunchomitutil.inspectlimitECMAScript 2019numberkey parsetPrototypeOfoptionECMAScript 2023stdlibgetPrototypeOfReflect.getPrototypeOfloggingminimalArrayBuffer#slicewritetimeopensmatchesstreams2awaitsuperagentspinnersxhrsequenceeverythreetelephoneloadbalancingObject.entriesgetteres7touchoptimistremoveworkspace:*regular expressionmapnodejsTypeBoxenvironmentsformlrufastcopybeanstalkmetadataes8jsonpathtypedquerybrowserslistserializerestreecmdhttpsdom-testing-libraryargvreact animationchinesepicomatchpnpm9String.prototype.trimtslibamazonproxyjsnopeUnderscorecryptodirpropsuperstructcontainsredirectparentsreadablestreamfastclonekoreanobjPromisetoSortedcloudformationjoinativerobustbyteLengthfile cachees5mruratevestECMAScript 2015momentsyntaxerrorloggeriterates3execformattingfigletsafeuninstallquotelook-upES2016keystrimStartstylingasyncWeakMaptsWebSocketresolveschemaECMAScript 3reusees2017coreindicatorhigher-orderfunction.lengthshellloadinges2016toStringTagECMAScript 7promisespostcss-pluginfixed-widthcurlautoprefixerString.prototype.matchAllperformanceespreeexecutableimmergroupes-shim APIexpressionisthrottletyped arraydeterministicfast-clonecjkcliregexdraglazyawscallbindrm -frSymbol.toStringTagenvprotogroupByES3vpcinstallertrimRight__proto__cloudtrailmatchbytemochafast-copyfind-upfullECMAScript 6parentECMAScript 2018nodeReactiveExtensionsarrayAsyncIteratorpathautoscalingSetgraphqlregular expressionsArray.prototype.findLastIndexreadablextermpersistentchannelfilterhas-ownformat
3.10.95

1 year ago

2.3.28

1 year ago

3.10.90

1 year ago

2.3.29

1 year ago

3.10.93

1 year ago

3.10.94

1 year ago

3.10.91

1 year ago

3.10.92

1 year ago

3.8.69

1 year ago

3.8.67

1 year ago

3.8.68

1 year ago

3.8.65

1 year ago

3.8.66

1 year ago

3.12.98

1 year ago

3.10.75

1 year ago

3.12.97

1 year ago

3.10.76

1 year ago

3.10.73

1 year ago

3.12.99

1 year ago

3.10.74

1 year ago

3.10.79

1 year ago

3.10.77

1 year ago

3.10.78

1 year ago

2.6.37

1 year ago

2.1.23

1 year ago

3.10.72

1 year ago

2.6.38

1 year ago

2.1.24

1 year ago

3.12.96

1 year ago

2.6.39

1 year ago

3.8.63

1 year ago

3.8.64

1 year ago

3.8.62

1 year ago

1.1.16

1 year ago

2.8.59

1 year ago

1.1.15

1 year ago

2.8.58

1 year ago

1.1.14

1 year ago

2.8.57

1 year ago

1.1.13

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

2.8.62

1 year ago

2.8.61

1 year ago

2.8.60

1 year ago

3.10.86

1 year ago

3.10.87

1 year ago

3.10.84

1 year ago

3.10.85

1 year ago

3.10.88

1 year ago

3.10.89

1 year ago

2.4.29

1 year ago

3.10.82

1 year ago

2.6.48

1 year ago

3.10.83

1 year ago

2.6.49

1 year ago

3.10.80

1 year ago

3.10.81

1 year ago

2.6.44

1 year ago

1.1.23

1 year ago

2.6.45

1 year ago

1.1.22

1 year ago

2.6.46

1 year ago

1.1.21

1 year ago

2.6.47

1 year ago

1.1.20

1 year ago

3.8.70

1 year ago

2.6.40

1 year ago

3.8.71

1 year ago

2.6.41

1 year ago

2.6.42

1 year ago

2.6.43

1 year ago

2.6.50

1 year ago

3.12.102

1 year ago

3.12.101

1 year ago

3.12.104

1 year ago

3.12.103

1 year ago

2.6.51

1 year ago

2.6.52

1 year ago

2.4.30

1 year ago

4.12.120

12 months ago

4.12.121

12 months ago

4.12.122

12 months ago

4.12.113

12 months ago

2.2.28

1 year ago

4.12.114

12 months ago

4.12.115

12 months ago

2.2.26

1 year ago

4.12.116

12 months ago

2.2.27

1 year ago

4.12.117

12 months ago

2.2.24

1 year ago

4.12.118

12 months ago

2.2.25

1 year ago

4.12.119

12 months ago

4.12.110

12 months ago

4.12.111

12 months ago

4.12.112

12 months ago

4.12.104

1 year ago

4.12.105

12 months ago

4.12.106

12 months ago

4.12.107

12 months ago

4.12.108

12 months ago

4.12.109

12 months ago

3.9.71

1 year ago

3.9.72

1 year ago

3.11.96

1 year ago

3.12.100

1 year ago

2.5.36

1 year ago

2.5.37

1 year ago

3.11.95

1 year ago

2.7.55

1 year ago

2.5.32

1 year ago

2.7.54

1 year ago

2.5.33

1 year ago

2.7.53

1 year ago

2.5.34

1 year ago

2.7.52

1 year ago

2.5.35

1 year ago

2.7.57

1 year ago

2.5.30

1 year ago

2.7.56

1 year ago

2.5.31

1 year ago

1.1.12

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

1.1.7

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago