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.

Performance and Accessibility Review of the Andrew Yang 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 yang2020.com

yang2020.com

Google Lighthouse

Lighthouse score for yang2020.com

Performance: 21 out of 100

I came in to this review with the assumption that the darling of the Silicon Valley crowd would have quite the website. Either it would be extremely well optimized or run like shit, and here we are. 34.7 seconds Time to interactive. A double digit megabyte front-end. Woof! But it does come with this cheesy bouncing Yang fundraising counter:

An illustrated Andrew Yang with a fundraising total bar chart.

Accessibility: 63 out of 100

  • No labels for form inputs
  • Text contrast issues
  • No alt attributes on images
  • Links with no discernible name, using only an image with no alt text.
  • The :focus styling uses a custom 1 pixel outline, so someone was obviously paying attention to the design details but didn’t even try to take care of these glaring accessibility issues.

Best Practices: 79 out of 100

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

Images are much larger than they need to be. For example, the logo at the top of the page is a 1,775 x 433 pixel png, but displayed at 271 x 66. Just running this single image through an optimizer such as ImageOptim would save 50% of the file size. Better yet, they could use an svg.

SEO: 92 out of 100

Links without descriptive text that simply say “Learn More”

Network

  • HTTPS: yes
  • 108 Requests
  • 16.6 MB resources
  • Largest asset is a nearly 2.3 MB png which has no transparency. A high quality jpg replacement would save so much of the user’s bandwidth. for the page background.

Platform

  • WordPress, Aspire Pro (paid) theme.

Notes

So far this is the most sizable candidate website I’ve reviewed. Little effort has been made to optimize the images for a speedy download. Does Yang’s proposed universal basic income cover expensive mobile data plans?

Accessibility and Performance Review of the Kirsten Gillibrand for President 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 kirstengillibrand.com

kirstengillibrand.com

Google Lighthouse

Lighthouse scores for kirstengillibrand.com

Performance: 79 out of 100

Time to interactive is 5.3 seconds. I believe this is due to a cookied donation modal check that runs before the rest of the page is rendered. The page is pretty heavy with images that could be optimized further.

Accessibility: 95 out of 100

  • No contrast issues found with any text and tabbing via keyboard displays focus rings on interactive elements.
  • User scaling is disabled. This prevents a user from zooming in on a page if they have difficulty reading text. Apple’s iOS and Safari no longer support this attribute anyways since it is considered harmful to a user, and it should be removed from the code.

Best Practices: 86 out of 100

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

SEO: 100 out of 100

No issues found.

Network

  • HTTPS: yes
  • 51 Requests
  • 4.5 MB resources
  • Largest asset is a 905 KB jpg used for the page background. That many

Platform

  • WordPress, custom theme.

Notes

The theme has dropped support for older versions of Internet Explorer, removing the outdated lt-ie7, lt-ie8, etc. classes found in old versions of HTML5 bootstrap. I still see plenty of sites use this code but I would put good money on no one is browsing your site on those old browsers anymore.