Performance and Accessibility Review of the Eric Swalwell for President Website

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.

Homepage for ericswalwell.com

ericswalwell.com

Google Lighthouse

Lighthouse scores for ericswalwell.com

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

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.

Performance and Accessibility Review of the Michael Bennet for President Website

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.

Homepage of michaelbennet.com

michaelbennet.com

Google Lighthouse

Lighthouse scores for michaelbennet.com

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

Notes

It’s fine, there’s just absolutely nothing about this website that stands out from the crowd. Image alt: a cat nods off, closing its eyes and head falling to the side.

Performance and Accessibility Review of the Steve Bullock for President Website

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.

Homepage of stevebullock.com

stevebullock.com

Google Lighthouse

Lighthouse scores for stevebullock.com

Performance: 65 out of 100

Yawn. Plenty of images that would be better served with other formats and optimizations.

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 text.

Best Practices: 71 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, Steve? 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
  • 32 Requests
  • 3.1 MB resources
  • Largest asset is a 747 KB jpg image used in the footer.

Platform

Notes

One of the only candidates to have a link to his Snapchat account.

Performance and Accessibility Review of the Tim Ryan 2020 Website

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.

Homepage of timryanforamerica.com
The background is a video, so my screenshot only captured this farm and not the candidate.

timryanforamerica.com

Google Lighthouse

Lighthouse scores for timryanforamerica.com

Performance: 22 out of 100

YIKES! 5.2 seconds until the first meaningful paint of content.

There are very heavy images that haven’t been properly optimized and FIVE videos being loaded on the page at one time.

Hundreds of KB in unused CSS and javascript are present on the page, spread across multiple files that block rendering until they’ve been fully downloaded and parsed.

Modernizr classes are present for every test ever, including borderradius. Scoff! Seriously, make your own bundle for only the tests you need! I can’t remember the last year I had to prefix my border-radius CSS.

Accessibility: 55 out of 100

  • Color contrast issues.
  • Social links using only an icon and no discernible text.
  • Images with alt attributes.
  • User scaling is disallowed.

Best Practices: 79 out of 100

The usual suspects of target=”_blank” links not having a rel=”noopener” attribute present. This is a persistent issue with the ActBlue donation forms present on almost every candidate website so far.

jQuery and jQuery UI version vulnerabilities are present. Someone is still using jQuery UI?!

SEO: 100 out of 100

No glaring issues.

Network

  • HTTPS: yes
  • 191 Requests
  • 20.3 MB resources
  • Largest asset is the 9.8 MB TimRyan_WebsiteSplash_FineCut_01_LOOP_20180705-1.mp4 used in the background of the home page. The fact that these files are being served from a dev subdomain is probably not helping matters.

Platform

Notes

The chosen theme relies heavily on plugins for much of its functionality, bloating the overall experience.

Performance and Accessibility Review of the John Delaney 2020 Website

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.

Homepage of johndelaney.com

johndelaney.com

Google Lighthouse

Lighthouse scores for johndelaney.com

Performance: 31 out of 100

17.4 seconds Time to interactive, there are a lot of large images offscreen where loading could be deferred.

The main javascript bundle is over 1 MB. I’ve built fully reactive front-ends built on top of the WordPress API at half that download budget, so I can’t imagine what they are doing here.

Accessibility: 61 out of 100

  • Contrast issues
  • Links that use only images without any alt text present (boooooo!)

Best Practices: 79 out of 100

The usual suspects of target=”_blank” links not having a rel=”noopener” attribute present. This is a persistent issue with the ActBlue donation forms present on almost every candidate website so far.

SEO: 92 out of 100

Quite a few links that have duplicate “Learn More” text.

Network

  • HTTPS: yes
  • 63 Requests
  • 8.2 MB resources
  • Largest asset is the 1.1 MB main.min.js bundle

Platform

  • WordPress, custom theme.

Notes

I appreciate the GO JOHN GO ASCII art hidden in the source code, along with a website contact email address.

Update 6-2-2019

Seems there is one pro-Delaney bot out there responding to any and all mentions of John Delaney with support. Good luck with that.