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.

wayneforusa.com

Google Lighthouse

Performance: 57 out of 100

There are a bunch of render blocking CSS files in the head of the document, but they are minified and cached, so that’s a performance win.

There isn’t much interaction or scripting being executed so the Time to Interactive is 6+ seconds. Not great by any means but compared to the competition it’s quite lean.

Accessibility: 82 out of 100

• Default :focus outlines on interactive elements.
• Low contrast issues with text.
• Social links don’t have any link text. Over and over I’ve seen this and it is such an easy fix.

Best Practices: 57 out of 100

24 requests are not served via HTTP/2.

Scrolling event listeners are not passive.

The links to cross-origin destinations are unsafe. Witnessed this in every single site reviewed.

SEO: 83 out of 100

His homepage wasn’t in the top 3 pages of results for my first “Wayne Messam” Google search so I wasn’t expecting great things here. Maybe I’m the first website to link back to him? At least waynemessam.com redirected appropriately.

The Google Tag Manager script is 404’d, that’s probably not a good sign.

Network

• HTTPS: yes
• 33 Requests
• 2.3 MB resources
• Largest asset is a 184 KB icon font. Yet I count only 6 icons in use across the entire site. This is a significant waste of space and the font could be subset or dropped in favor of a few svg files.

Platform

• WordPress, built with https://wpbakery.com/ and Norebro (paid) theme.

Notes

The site is so basic and yet performs so poorly across all categories. There is a contact form in the footer that is fixed in place and revealed on scroll, yet no consideration was given to reserve enough space so that elements weren’t cut off.

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.

sethmoulton.com

The timing.js console log statements in devtools quickly tipped me off that Seth’s site is running the on the same platform as another I’ve already reviewed. Nice, that saves me some writing.

Google Lighthouse

Performance: 42 out of 100

15 seconds Time to interactive is 4 seconds worse than the same platform running Tulsi Gabbard’s site, yet he gets 2 more points in this performance score.

Despite the many images loaded, a spot check of the largest among them at least shows that they’ve been run through a lossless image optimizer.

Accessibility: 62 out of 100

• The gravity forms plugin in use on the site adds tabindex values greater than 0. Generally there is no reason to do this, defining an order different than what it would normally be just based on the source order of elements.
• There is no visual indicator that any of the interactive elements (save for Twitter’s embedded tweets) are focused.
• Credit where credit is due, although it is visually inaccessible and doesn’t display a focus state, the Issues accordion found in the middle of the page actually does respond to keyboard clicks.
• 17 empty links with no discernible text.

Best Practices: 79 out of 100

Lo-Dash@2.4.1 contains vulnerabilities.

timing.js is logging errors to the console:

timing.js:38 Timer 'Form' does not exist
timing.js:38 Timer 'Downloading' does not exist

SEO: 92 out of 100

1 link without descriptive text, simply “here”.

Network

• HTTPS: yes
• 163 Requests
• 7.9 MB resources
• Largest asset is the 1 MB banner jpg. A prime candidate for using webp, supported in 3 of the 4 major browsers.

Platform

• Drupal, custom theme.

Notes

It looks like he hired a Massachusetts shop to design and dev the site, so props for supporting his local economy.

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.

billdeblasio.com

Google Lighthouse

Performance: ? out of 100

Unfortunately, a fresh page load of the homepage here redirects to an offsite ActBlue donation page. It’s therefore impossible to measure the performance in the same way I’ve done for all the other candidates to date.

I’ll have to throw this out and measure the other scores based on a re-run of the test.

Accessibility: 84 out of 100

• There is a skip to content link present, but it’s broken! The id it is supposed to link to isn’t present anywhere on the page.
• Color contrast issues. If background images are not present, links and text are white on a white background.
• User is unable to scale.

Best Practices: 93 out of 100

The homepage hero is twice the displayed resolution. A <picture> element to serve correctly sized images would be preferable here.

SEO: 100 out of 100

No issues found.

Network

• HTTPS: yes
• 28 Requests
• 1.4 MB resources
• Largest asset is a 604 KB homepage hero jpg.

Platform

• WordPress, a “wp-frns-pac” theme, custom build I believe.

Notes

The redirection on the homepage is both super annoying and problematic for these comparisons. As a visitor this is worse to me than embedding the form directly on the homepage or placing in a popup.

I can’t help but critique the design in parts. The use of color is all over the place. Green and blue logo. Yellow text and buttons. A red favicon. It all seems hastily put together, and as a result there really isn’t much going on in the code to critique or review.

The yellow text over hero image is especially hard to read and these icons straight up suck.

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.

ericswalwell.com

Google Lighthouse

Performance: 19 out of 100

The biggest impact on this score is the javascript running on the browser’s main thread, 16.7 seconds spent parsing and executing these scripts. This brings the Time to Interactive to a ghastly 18 seconds.

The loading of large offscreen images should be deferred until they would be in view.

Accessibility: 57 out of 100

• Buttons without a text label, only an inaccessible icon.
• [aria-*] attributes don’t have valid values.
• Inputs without labels, only placeholders.
• Links without discernible names.
• Visual way-finding via tabbing is mostly fine.

Best Practices: 64 out of 100

Scrolling event listeners are not passive.

Vulnerabilities detected in jQuery and LoDash libraries used. (maybe don’t load the whole library!)

A crap ton of links to new window that don’t use rel=”noopener”. Many of these come from the Twitter embeds on the page, another performance bottleneck.

Network errors are being logged to the console. This is the browser just screaming “Hey, fix this thing!”

SEO: 99 out of 100

The tap targets in the aforementioned embedded tweets are too small.

Network

• HTTPS: yes
• 92 Requests
• 13 MB resources
• Largest asset is a 8 MB video.

Platform

• WordPress, Scotchpress theme yet again.

Notes

At this point in all the reviews I’ve noticed the trends that a) the Scotchpress theme has some serious issues, and b) the actionkit.js and actiontag.js libraries are the biggest performance hogs.

I understand that these off the shelf toolkits help spin up a new candidate quickly and get the crucial fundraising step started, but from this web developer’s perspective they would greatly benefit from their developers showing any interest in performance and accessibility, or their clients demanding it.

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.

michaelbennet.com

Google Lighthouse

Performance: 83 out of 100

A 4.4 seconds Time to Interactive score places this performance score in some of the highest of all candidates. The theme is yet another Scotchpress variation which show that same code bases can have wildly different scores that depend heavily on the media assets chosen.

There are images present that should be efficiently encoded to remove meta data. Doing this for all the images on the page would save hundreds of kilobytes.

Accessibility: 57 out of 100

• IDs used are not unique. Many of these are in SVGs that should be optimized.
• User scaling is disallowed.
• Links without discernible names.
• Form inputs without labels.
• Visual way-finding via tabbing is mostly fine.

Best Practices: 79 out of 100

This has been present in other sites but I haven’t called it out until now. So how many users are still using Internet Explorer 6 on your site, Michael? Do you really need these lines anymore:

<!--[if lt IE 7 ]>
<html itemscope 
      itemtype="http://schema.org/Organization" 
      id="ie6" 
      class="ie ie-old" 
      lang="en-US">
<![endif]-->

Spoiler! You don’t!

SEO: 100 out of 100

No issues.

Network

• HTTPS: yes
• 39 Requests
• 2.7 MB resources
• Largest asset is a 752 KB jpg family image. This is probably twice the necessary dimensions it is typically displayed at.

Platform

• WordPress, Scothpress (paid) theme. Interestingly enough, this is the same theme as Amy Klobuchar used.

Notes