Update TaskMuncher for Lighthouse Findings

Update TaskMuncher for Lighthouse Findings

by John Vincent

Posted on April 8, 2019

Let's discuss updating TaskMuncher to address some Lighthouse findings.


For extensive discussions regarding TaskMuncher, please see TaskMuncher Overview

Lighthouse Scores after the work is complete


90: Performance
100: Accessibility
100: Best Practices
100: SEO

Lighthouse Findings

Lighthouse suggestions follow

Best Practices

Does not use HTTP/2 for all of its resources

A request not served via HTTP/2


This doesn't make sense. Let's check.

Verify ngxinx version

nginx -v
nginx version: nginx/1.10.3 (Ubuntu)

which supports HTTP2

Check server block

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    include snippets/ssl-taskmuncher.com.conf;
    include snippets/ssl-params.conf;
    include h5bp/basic.conf;

which looks good.

curl -I -k --http2 https://www.taskmuncher.com/site.webmanifest
curl -I -k --http2 https://www.taskmuncher.com/site.webmanifest
HTTP/2 200 
server: nginx

which also looks good.

Probable problem

The nginx MIME type is not known for file type .webmanifest


So rename site.webmanifest to app-manifest.json

and change index.hbs

<link rel="manifest" href="/app-manifest.json">

which still failed.

Refreshed and tested again and the problem appears to be fixed.


Contrast problem.

Background and foreground colors do not have a sufficient contrast ratio.

Failing Elements
<a class="jss46 jss63 jss75 jss72 jss3" href="/"><svg class="jss81" aria-hidden="true"><use xlink:href="/assets/icons.svg#icon-monster"></use></svg>TaskMuncher</a>
<span class="jss87">Terms of Service</span>
<span class="jss87">Privacy Policy</span>
<span class="jss87">Contact</span>
<a href="https://www.taskmuncher.com" target="_blank" class="sc-bwzfXH cZRhpi">© 2019 TaskMuncher</a>

The only way to solve this is to darken the background.

HomeLayoutStyles.jsx added

backgroundColor: theme.palette.primary.dark
appBar: {
	display: 'flex',
	minHeight: `calc(2 * ${topNavLineHeight}px)`,
	justifyContent: 'space-between',
	backgroundColor: theme.palette.primary.dark

MemberLayoutStyles.jsx added

backgroundColor: theme.palette.primary.dark
appBar: {
	position: 'absolute',
	transition: theme.transitions.create(['margin', 'width'], {
		easing: theme.transitions.easing.sharp,
		duration: theme.transitions.duration.leavingScreen
	backgroundColor: theme.palette.primary.dark

FooterStyles.jsx changed color to dark from main

export const Container = styled.footer`
	background-color: ${appTheme.palette.primary.dark};
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 10px 0px;