Performance and Accessibility Audit of the Elizabeth Warren 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.

Full disclosure: I have donated $50 to the Warren campaign to date.

Home page of elizabethwarren.com

elizabethwarren.com

Google Lighthouse

Lighthouse scores for elizabethwarren.com
Scores as of initial publish on May 16th, 2019
Update 6-26-2019

Performance: 20 out of 100

Yikes, this performance score is abysmal. I’d chalk this up to the the front-end being entirely built in a client-side javascript framework, but that’s not an excuse.

Webp images are used in many places which shows at least some thought was given to overall performance but there is still much that could be improved.

Warren is becoming famous for the campaign line “I have a plan for that!”, and I hope her team has a plan to fix these issues. Not so secretly, I’d like to help.

Accessibility: 80 out of 100

  • Skip to Content link is present (great!) UPDATE 6-26-2019: Oh no, it’s gone!
  • Main nav is hidden behind hamburger menu icon, with no visible focus state. (Boooo!)
  • Very disappointing that every interactive element save for one is revealed through hover alone. Wayfinding by tabbing is pretty difficult.

Best Practices: 71 out of 100

Loading of offscreen images should be deferred until they are visible.

Scrolling performance is sluggish due to the scrolling event listener used by the AB Tasty plugin to measure how much the page has been viewed. These event listeners should be passive.

SEO: 92 out of 100

One link on the page for /meet-elizabeth uses a generic “Learn More” label. This is a poor practice for accessibility as well.

Network

  • HTTPS: yes
  • 85 Requests
  • 5.1 MB resources
  • Largest asset app.bundle.css at 360 KB. That’s a LOT of CSS. After an inspection I believe the large size is due to including the Font Awesome icon fonts as data URIs. Essentially this is including the entire font in a file that blocks page rendering until it has fully downloaded. Breaking them out would improve her site’s performance.
  • UPDATE 6-26-2019:
    • 89 Requests
    • 7.9 MB resources
    • Largest asset is the hero video at 1.9 MB. It appears the dev team is now serving page specific CSS with a technique known as tree shaking. The homepage CSS bundle is down to only 35 KB.

Platform

  • WordPress, custom theme
  • UPDATE 6-26-2019: second review the site has moved to be a client side React app. No clue what is powering the back-end, there are no tell-tale WordPress signs.

Notes

First load of the site has an inaccessible donate form, with the Continue to elizabethwarren.com link an anchor tag with no href. Come on! 😩

Donate form on elizabethwarren.com