I am currently working on the Tools section of my site. While implementing it, I had to reconfigure Tailwind to include CSS classes for additional colors.
Since these used to work, I started investigating.
The first step was to check the Twitter card validator.
Nothing made sense, though, as the problems described in these resources did not affect my site.
This tool was better than Twitter's one and showed me more information:
- and other properties:
At this point, I had a WTF moment since, as you can see below, my site included valid meta tags...
One thing jumped at me - the HTTP response code was
206. This was unexpected, but in retrospect, quite logical. Twitter and Facebook deal with a large majority of the open web. Allowing their crawlers to process an unlimited input size means opening them up to abuse. Status code 206 means Partial Content, a.k.a that the requested data range was received (but not all the page's content).
Immediately, I looked at where the meta tags were placed on my site's HTML and discovered that the global CSS preceded my meta tags... all 2 MB of it!
My next thought was to configure where
react-helmet places its tags, but no luck 😔.
Gatsby would surely have this feature, but no go either!
I did, however, find the gatsby-plugin-split-css plugin that brought down the CSS to 600K, which is low enough that I no longer run into this issue.
Long term, I want to try a few things:
- get rid of global CSS styles, or at least find a way to include them as a separate file
- reorder the head tags
- move Tailwind's
<style>at the very end of
But for now, this will have to do.
Until next time!