This is one in a series of posts that will look at the performance and #a11y metrics of the websites for the currently declared 2020 Democratic presidential candidates. Yeah, all of them! For more background on what I’m doing and how I’m doing it check read this.
Google Lighthouse
Performance: 73 out of 100
For the relative svelteness of the site, a single background video and signup form, I’d expect this metric to be much higher. Time to interactive is 7 seconds, first meaningful paint (when something appears on screen) is 3 seconds. Digging a little deeper my only guess is this poor performance is due to the javascript framework of choice: actionkit.js. I’ll admit I’m unfamiliar with this particular framework but sure enough Bernie and other candidates are counted as clients. Certainly we’ll meet again. *shakes fist in general direction of actionkit*
Accessibility: 67 out of 100
- Default browser focus outlines appear for all buttons and links.
- Lighthouse dings them for not having labels on form fields, a big no-no, but looking closer at the source reveals this to be incorrect score. Labels are in fact present.
- The logo is a yuuuuge missed opportunity to include the most basic of things, “Bernie Sanders”, in a link or heading text. Looking at code such as below drives me nuts!
<h1 class="logo ">
<a class="logo__link" href="/">
<span class="sr-only"></span>
</a>
</h1>Best Practices: 93 out of 100
Lighthouse only lists adding a rel=”noopener” to the jobs link in the footer. There is a reason to do this. And it’s a pretty easy fix.
I will give the team kudos in their use of a very well optimized background video, weighing only ~31 KB. Not sure what socialist voodoo they did to pull that off.
SEO: 100 out of 100
I Googled Bernie, I got Bernie. Nothing more to say about that.
Network
- HTTPS: yes
- 47 Requests
- 1.6 MB resources
- Largest asset is the aforementioned actionkit.js, 82.2 KB.
Platform
- WordPress, custom theme.