Update TaskMuncher for Lighthouse Findings

Update TaskMuncher for Lighthouse Findings

by John Vincent


Posted on April 08, 2019



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

TaskMuncher

For extensive discussions regarding TaskMuncher, please see TaskMuncher Overview

Lighthouse Scores after the work is complete

www.taskmuncher.com

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

One request not served via HTTP/2

/site.webmanifest

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 mimetype is not known for file type .webmanifest

Solution

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.

Accessibility

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;
`;