AWS Lambda function for generating critical stylesheets.
Initially this function was created to be used with WordPress via plugin AWS Lambda Critical CSS, so you just need to install plugin.
Event JSON:
Name | Type | Description |
---|---|---|
key | string |
Identifier, it could be a template name. |
styles | array |
List of original CSS files. |
url | string |
URL for grabbing critical CSS. |
hash | string |
Version hash. |
return_url | string |
Endpoint where result should be returned. |
secret | string |
Secret to be added to POST callback request. |
- Hash is something how you can determine that callback is still actual. There is MD5 hash of concatenated string of stylesheet names with file version is used in WordPress plugin.
- Secret is for authorization. In WordPress plugin this secret has 20 minutes live time (15 minutes is a maximum execution time of AWS Lambda function and plus 5 minutes of reserve).
Example:
{
"key": "single",
"styles": [
"https://site.com/css/bootstrap.min.css",
"https://site.com/css/screen.min.css?ver=1.0.0"
],
"url": "https://www.site.com/blog/hello-world/",
"hash": "a05d2d03525b97379c42ef1525a4a6b9",
"return_url": "https://site.com/api/v1/stylesheet",
"secret": "aQ3qnPPnDwhaB7pzI3Y0jQx*"
}
- Use this template from Github.
- Create AWS Access Keys. You can follow this gist to create policy.
- Add API Key & Secret with Region to Github Repository secrets into
AWS_ACCESS_KEY_ID
,AWS_SECRET_ACCESS_KEY
andAWS_REGION
variables. - Deploy function with Github Actions.
dev
branch will be deployed on push into critical-css-dev-processor function, production should be deployed manually throughworkflow_dispatch
into critical-css-production-processor.