destroytoday.com

Lighthouse, Now build env vars, and Nuxt manifest

In digging around Now, I discovered a Lighthouse integration, which automatically audits your site builds for performance and accessibility. I noticed that my still bare website didn’t have a perfect score out of the box, so I dug deeper and found that both my site and my PWA manifest were missing a title and description. I’m certain I set these as META_TITLE and META_DESCRIPTION environment variables when realizing that Now doesn’t carry over the process.env.npm_package_ env vars, so I’m not crazy, but it turns out my assumption that setting the top-level env vars in the now.json sets them for both build and runtime is incorrect. By removing my build.env configuration in that file also removed my env vars on build, leaving me with a blank title and description. I copy/pasted my env var configuration to appear twice as env and build.env, and it worked. Great, but now I guess I need to map my env vars twice whenever I add a new one—not so great.

I went to check the Lighthouse report for my new build, but it simply said “No report available”. This consistently happened with other builds, so I decided to run Lighthouse in the Chrome dev tools instead. I still had almost a perfect score, but my PWA manifest was still missing a title, description, and short name (used for mobile app icons). I dug into the @nuxt/pwa module, and found that they default these values to the process.env.npm_package_ env vars that Now doesn’t recognize. Simply setting these properties to my META_ env vars worked as expected, and I now had a valid PWA manifest file. I ran Lighthouse again (on desktop), and was closer than I’ll probably ever be, with 100s across the board except for a lone 99 on performance—for a 340ms “Max Potential First Input Delay”.

Lighthouse desktop audit (11/01/2019)

Researching this for a bit, I discovered that it’s par for the course with SSR websites. If I have more time to dig deeper and find a potential fix, I will, but for now, I moved on. Lighthouse also has an option to audit your website on mobile, so I ran that report, and was delighted with a flawless victory and animated fireworks on a dark theme. This felt like I truly accomplished something (rather than made sure all my env vars were set)—thanks, Lighthouse team.

Lighthouse mobile audit (11/01/2019)