Audit with Google Lighthouse

[ashawley]

I ran Google Lighthouse in Chrome† against the current Pixyll and the open PRs using the default settings. There may not be anything actionable here, so this may just be a mile marker to have as a baseline. Although, I think there are tools to automatically run this.

• Performance: 99
• Progressive Web App: 81
• Accessibility: 87
• Best Practices: 100
• SEO: 100

Metrics:

• First Contentful Paint: 1.7 s
• Speed Index: 1.7 s
• Time to Interactive: 2.0 s
• First Meaningful Paint: 2.0 s
• First CPU Idle: 2.0 s
• Estimated Input Latency: 10 ms

Performance opportunities:

Opportunity	Estimated Savings
Eliminate render-blocking resources‡	0.93 s

‡ Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles:

URL	Size (KB)	Potential Savings (ms)
fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic	1 KB	780 ms
fonts.googleapis.com/css?family=Lato:900,300	0 KB	780 ms

Performance diagnostics:

1. Ensure text remains visible during webfont load: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

URL	Potential Savings (ms)
fonts.gstatic.com/s/merriweather/v19/u-4n0qyri....woff2	30 ms
fonts.gstatic.com/s/merriweather/v19/u-4l0qyri....woff2	110 ms
fonts.gstatic.com/s/lato/v14/S6u9w4BMU....woff2	50 ms
fonts.gstatic.com/s/lato/v14/S6u9w4BMU....woff2	40 ms

2. Minimize Critical Requests Depth
   The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.

   Maximum critical path latency: 310 ms (7 chains found)

   Initial Navigation

   • / (pixyll.com)
     • ...css/pixyll.css?201... (pixyll.com) - 50 ms, 4.57 KB
     • /css?family=Merriweather:900,900italic,300,300italic (fonts.googleapis.com) - 100 ms, 0.91 KB
     • /css?family=Lato:900,300 (fonts.googleapis.com) - 100 ms, 0.4 KB
     • ...v19/u-4n0qyri....woff2 (fonts.gstatic.com) - 30 ms, 11.63 KB
     • ...v19/u-4l0qyri....woff2 (fonts.gstatic.com) - 110 ms, 12.25 KB
     • ...v14/S6u9w4BMU....woff2 (fonts.gstatic.com) - 50 ms, 13.4 KB
     • ...v14/S6u9w4BMU....woff2 (fonts.gstatic.com) - 40 ms, 13.62 KB

Progressive Web App failures:

1. User will not be prompted to Install the Web App: No manifest was fetched, Service worker does not successfully serve the manifest's start_url, No usable web app manifest found on page.
2. Is not configured for a custom splash screen: No manifest was fetched.
3. Address bar does not match brand colors: Failures: No manifest was fetched, No <meta name="theme-color"> tag found.

Accessibility opportunities:

1. Background and foreground colors do not have a sufficient contrast ratio: Low-contrast text is difficult or impossible for many users to read.

Failing elements:

<a class="nav-link" href="/about/">About Pixyll</a>
<a class="nav-link" href="/contact/">Say Hello</a>
<p class="post-meta"> Jul 11, 2015 </p>
<p class="post-meta"> Jun 11, 2014 </p>
<p class="post-meta"> Jun 10, 2014 </p>
<span class="pagination-item disabled">Newer</span>
<div class="pagination-meta">Page 1 of 2</div>
<small> Theme crafted with &lt;3 by <a href="http://johnotander.com">John Otander</a> (<a href="https://twitter.com/4lpine">@4lpine</a>).<br> &lt;/&gt; available on <a href="https://github.com/johnotander/pixyll">GitHub</a>. </small>

Best practices

Passed audits

SEO

Passed audits.

---

† Google Lighthouse 3.2.0 for mobile with Simulated Fast 3G, 4x CPU Slowdown

[johno]

Love this idea. Seems like we could improve the accessibility pretty easily, too. Bump up that contrast and get that score to 100!

One thing I've been pondering is removing the web fonts. They're pretty heavy when compared with the rest of the theme and not sure they provide enough value over a system font stack.