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.

Performance and Accessibility Review of the Jay Inslee for America 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 jayinslee.com

jayinslee.com

Google Lighthouse

Lighthouse scores for jayinslee.com

Performance: 78 out of 100

Decent scores, but cache times for many items are set to a measly 5 minutes. As these assets tend not to be changed often or ever, a longer cache time would improve subsequent page loads and navigation.

Accessibility: 76 out of 100

  • This score obscures some major issues. Their are no visual :focus indicators for tabbing through the site.
  • Main navigation is hidden behind an inaccessible hamburger menu.
  • While tabbing brings you to interactive elements, the visibility of those elements is controlling by scrolling the screen, leaving you with empty white space and no content.

Best Practices: 93 out of 100

Loading both mobile and desktop sized portraits when only one is needed.

SEO: 100 out of 100

No issues.

Network

  • HTTPS: yes
  • 66 Requests
  • 3.9 MB resources
  • Largest asset is a 427 KB mp4, optimized for playback.

Platform

  • No clue! Let’s say… uh… windmills.

Notes

There’s a major fundraising deadline looming, don’t leave the page or DOOOOOM!

Thanks, I hate it.

Performance and Accessibility Review of the Tulsi Gabbard 2020 Campaign 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 tulsi2020.com

tulsi2020.com

Google Lighthouse

Lighthouse scores for tulsi2020.com

Performance: 40 out of 100

11.2 seconds Time to interactive is a very slow response. The largest performance impact comes form the sheer number of trackers and analytic tags loaded synchronously in the head of the document.

Accessibility: 83 out of 100

  • The visual tabindex order is a little different than left to right, top to bottom, but everything has a :focus state and wayfinding via tab is pretty easy.
  • [accesskey] values are not unique
  • Contrast issues for users with color vision deficiencies.

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: 100 out of 100

I was only able to find this website through this banner on her congressional focused votetulsi.com domain.

Network

  • HTTPS: yes
  • 87 Requests
  • 4.1 MB resources
  • Largest asset is the 374 KB base.js used by the youtube video player embeds.

Platform

  • Drupal, custom theme.

Notes

This is the first candidate site running on Drupal I’ve come across, and the first with a primarily red color theme. Make of that what you will.

Found a simple message buried in the view source for researchers like me:

<!--
  Aloha, internet friend, from all of us @ TULSI2020.com.
-->

Performance and Accessibility Review of the John Hickenlooper 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 hickenlooper.com

hickenlooper.com

Google Lighthouse

Lighthouse scores for hickenlooper.com

Performance: 56 out of 100

This is a very image-heavy page with jpgs and pngs that are sized larger than they are displayed and not optimized for download.

A 157 KB CSS file for some sort of language switcher which is loaded and entirely unused. My guess is it includes images for country flags, but the site doesn’t use this feature and only includes translations for español.

Accessibility: 70 out of 100

  • Some :focus states are present for wayfinding via keyboard tabbing, although the main navigation has none.
  • Unhelpful image alternative text such as “logo” and “white logo”.
  • Contrast issues for users with color vision deficiencies.

Best Practices: 79 out of 100

I’m starting to sound like a broken record. These tend to be the exact same issues across all of these sites I’ve reviewed.

External links that open in a new window without the rel=”noopener” attribute present.

Images are much larger than they are displayed at. 3-4× larger.

SEO: 92 out of 100

A link without descriptive text that simply says “Learn More”

Network

  • HTTPS: yes
  • 52 Requests
  • 4.2 MB resources
  • Largest asset is a 624 png used in the donation modal that pops up on first visit.

Platform

  • WordPress, Astra (paid) theme.

Notes

There is a caching plugin in use but however it works is actually dinging the Lighthouse scores in performance and delaying the rendering of the page.