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.

hickenlooper.com

Google Lighthouse

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.

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.

yang2020.com

Google Lighthouse

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:

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?

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.

kirstengillibrand.com

Google Lighthouse

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.

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.

julianforthefuture.com

Google Lighthouse

Performance: 94 out of 100

Super nice! There are opportunities to use next-gen formats for the images and lazy load offscreen images and iframes until they are visible, but otherwise this is the best performance score I’ve seen to date.

Accessibility: 93 out of 100

• Several links on the page use generic “Read More” labels and could be more descriptive.
• The white text on the Castro blue background fails to meet the WCAG AA contrast ratio standard, but it is ever so close.
• Navigating via keyboard gives both :focus styles on interactive elements that match the :hover design, and a focus ring outline. Using both is very useful for visual wayfinding.

Best Practices: 93 out of 100

Just one warning for the use of an old jQuery version, commonly found in this type of WordPress install.

SEO: 100 out of 100

No issues found.

Network

• HTTPS: yes
• 20 Requests
• 974 KB resources
• Largest asset is a 190 KB jpg.

Platform

• WordPress, custom CFTF theme.

Notes

Quite a well developed site. Seeing any homepage that weighs in under a megabyte feels like seeing a unicorn these days. The little touches of motion design make the theme feel bespoke to the candidate. Noteworthy that this is one of the first homepages of a candidate that doesn’t immediately pop up an inaccessible modal asking for donations or your contact information.

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.

amyklobuchar.com

Google Lighthouse

Performance: 87 out of 100

2 seconds to content paint isn’t bad at all. There is one png that could be optimized with a better format like webp.

Accessibility: 47 out of 100

There are quite a few problems that should be addressed.

• The green text on blue background doesn’t provide enough contrast.
• Several images contain no alt attribute to describe them.
• Labels for form inputs contain nothing but an icon, so they remain unusable by people who use assistive technology.
• Social links contain no descriptive text.
• Tabbing through the page reveals there are very subtle, if any, :focus styles on interactive elements.

Best Practices: 79 out of 100

Like other candidate’s sites, this one suffers from the common problem of not using rel=”noopener” on links that may open in a new tab or window, which can be a security risk.

Quite an old version of jQuery is being served: 1.9.1

SEO: 100 out of 100

No issues.

Network

• HTTPS: yes
• 40 Requests
• 3.2 MB resources
• Largest asset is a 597 KB png.

Platform

• WordPress, Scotchpress theme.

Notes

Scotch Digital, the company behind the theme, puts this ridiculously long comment in the head of the document. This is the first bit of ASCII art or easter egg I’ve come across when viewing the code of a site. While they can be fun, I really don’t see the point of this massive amount of pointless HTML being served up, with no message whatsoever. Maybe it’s a code I’m just not smart enough to get. 🙄 That’s one problem with using an off the shelf design, you inherit all the bad code choices someone else made.

<!--
     😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::;tttt;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::L@@@@L::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    ::::::::::::::::::t8@@@@8t::::::::::::::::::::::::::;::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::i0@@@@@@81:::::::::itLCCCCCCL::ifCG00GCt;::;tCG00GCt;:::1LCCCCCCCCLt1:;tLCCCCCf;::::::
    ::::::::::::::::;C1C@@@@@@G;::::::::::;G@@@@@0iLGCG8@@@@@GifGCG0@@@@@0i:::;C@@@@@@8i:::::iG@@0t;:::::::
    ::::::::::::::::Lt:;0@@@@@@C:::::::::::L@@@@@8Ct;::18@@@@@Gt;::i0@@@@@L:::::L@@@@@8t::::::t@C;:::::::::
    :::::::::::::::tf:::i8@@@@@@f::::::::::L@@@@@81::::;0@@@@@L:::::G@@@@@C:::::;C@@@@@8t:::::fL:::::::::::
    ::::::::::::::1L;::::t8@@@@@81:::::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C::::::;C@@@@@8t:::if::::::::::::
    :::::::::::::iG1;;;;;;L@@@@@@0i::::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C:::::::;C@@@@@8t:iL;::::::::::::
    ::::::::::::10C11111111C@@@@@@C;:::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C::::::::;C@@@@@8fLi:::::::::::::
    :::::::::::f8@f::::::::;0@@@@@@L:::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C:::::::::;C@@@@@0i::::::::::::::
    ::::::::;tG@@@01;:::::::L@@@@@@@Li::::;G@@@@@0;::::i8@@@@@L::::;0@@@@@0i:::::::::;C@@@8t:::::::::::::::
    ::::::;tLCGGGGGCLt1;:itfCGGGGGGGGCf11tLGGGGGGGf1::1fGGGGGGCti:1fCGGGGGGLti:;1fLf::;C@@f::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::iG8@@C:::;GL:::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::for AMERICA!::::::::::::::::::::::::t@@@@G;::if;:::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;fG088Ctt1;::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;;;;;:::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎

    Site made with love by Scotch Digital.
    -->