as mentioned in my previous post, i used lighthouse to create reports to show the status of four important stats: performance, accessibility, best practices, and seo
here was the initial report created on launch day
“all green” (90-100 scores) was the initial goal
the SEO score was super easy to fix. the hit was that i didn’t have a meta description for my site.
my solution was to add the hugely popular plugin, Yoast SEO, then fill in the proper info — easy 100% in that category
side note: i’m not a big off-the-shelf wordpress plugin person, but i make exceptions for a few, yoast being one of them
<meta name="description" content="My personal website full of recipes and web dev tips & tricks" />
sorry, jumping around here because i’m noting the process i took
so one major reason why i probably won’t get 100% in performance is the site’s usage of jQuery. foundation relies heavily on jQuery for all of its various features.
i totally forgot that i don’t have a proper build process set up so i wasn’t using production ready assets. an easy
foundation build command in my pattern library resolves this
in addition to those huge updates, lighthouse complained that my use of fontello was failing this audit: “All text remains visible during webfont loads”
simply adding a
font-display: swap; to the
@font-face declaration resolves this
connected to fontello was this audit request: “Preload key requests.” i’ve added google fonts already, but added the specific hosted font as well
the a11y score should be taken with a grain of salt since automated tools only can detect approx 30% of issues. still, it’s badass to see it so high!
Links have a discernible name
my issue here actually helped me find a bug!
since i use lazyload my images in, i had to make something a little custom instead of using
get_the_post_thumbnail(). here’s the snippet with the problem:
<?php $img = get_the_post_thumbnail_url(get_the_ID(), 'main-thumb'); $img_alt = get_post_meta(get_the_ID(), '_wp_attachment_image_alt', 1); ?> <img class="lozad blog-entry_thumbnail" data-src="<?php echo $img; ?>" alt="<?php echo $img_alt; ?>">
do you see it? the
$img_alt was coming up empty because i was using
get_the_ID() to try to find the
i fixed this like so:
$img_alt = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', 1);
Background and foreground colors have a sufficient contrast ratio
lighthouse didn’t like the colors i chose for the date timestamp
so technically, this was okay for wcag AA conformance, but i really wanted that 100% so i updated it to the purple you see now.
google chrome devtools makes it ridiculously easy to test this. simply inspect the element and click the color square to open this popup menu
a little spoiler alert for best practices…
Displays images with appropriate size
this was kind of strange — i had a crop of 340×260 pixels for the thumbnail image, but lighthouse wanted something way bigger. i’m guessing it’s because on small to medium screensizes, the image doesn’t flow in the container?
the solution was to make the thumbnail column smaller (
small-8) and increasing the size of the image to 430px wide (height auto, no crop).
conclusion, as you saw above: 100%
One more thing
i totally forgot to add my google analytics script to the site. BLAST, a third party resource was definitely going to mess up my score in some way.
found the embed code to add analytics.js using an async tag. this allows modern browsers to preload the script.
i also added a preconnect for the google-analytics domain, but it’s actually added below the script so that’s something i need to look into. after this update, it didn’t hurt that much
so a 1 point drop after adding analytics code, which i’m okay with — but still will look into performance opportunities there.
overall, yea — i’m pretty stoked about this. definitely check out lighthouse through web.dev to help you make your site better overall!