While looking at the PageSpeed Insights for my blog I noticed that the Twitter widgets I was using to display a twitter follow button and a tweet / share button were causing some page speed issues. Specifically the TBT (Total Blocking Time), LCB (Largest Contentful Paint) saw an impact. Overall it was taking about 151 KiB and blocking the main thread for 56ms.
Here's an example of what I was using:
<a href="https://twitter.com/pfreitag" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @pfreitag</a>
<script async src="https://platform.twitter.com/widgets.js"></script>
That loads the following button:
Note this doesn't show up on dev.to, but you can see it if you go to my blog directly.
Taking a look at this script, it replaces the button with an iframe, it's just quite simply overkill for what it does.
Replacing the Twitter button with pure CSS
It should be easy enough to replace this button with a pure css implementation. First, we should replace https://twitter.com/pfreitag with a twitter intent to follow url, for example: https://twitter.com/intent/follow?screen_name=pfreitag. We can also get rid of data-show-count="true" data-size="large" in the link. One thing our new solution won't have is that nice follower count, but I can live without it. It would be possible to add that back in again, perhaps using a hard coded count to keep it efficient.
Finally here's the css we are using to make the button look similar to the twitter follow button:
.twitter-follow-button, .twitter-follow-button:visited {
background-color: #1b95e0;
color: #fff;
border-radius: 4px;
height: 28px;
font-weight: 500;
font-size: 13px;
line-height: 26px;
padding: 8px 8px 8px 30px;
text-decoration: none;
background-image: url('/images/twitter.png');
background-repeat: no-repeat;
background-size: 16px 13px;
background-position: 8px 10px;
}
.twitter-follow-button:hover {
background-color: #0c7abf;
}
One thing you'll note is that we are using an image for the twitter logo, but you don't have to do that. If you have an icon pack like font-awesome you may have a twitter logo you can use, or you can even create the twitter logo in pure css.
If you want to make the button even more efficient to load just omit the button and use something like this:
.twitter-follow-button, .twitter-follow-button:visited {
background-color: #1b95e0;
color: #fff;
border-radius: 4px;
height: 28px;
font-weight: 500;
font-size: 13px;
line-height: 26px;
padding: 8px;
text-decoration: none;
}
.twitter-follow-button:hover {
background-color: #0c7abf;
}
Another good reason to remove the twitter JavaScript is that it also makes the Content-Security-Policy for twitter buttons much easier to implement.
To see an example of the pure CSS button take a look below the end of this entry (go to my blog directly).
Top comments (2)
If you want access to more social media services & CSS styles, here's a generator that can save up to 26 HTTP requests (based on if you used all of the services.)
sharingbuttons.io/
We started using CSS to emulate the look-and-feel of social media, search & pay widgets in the early 2000's as a way to improve both webperf and privacy.
CSP-wise, we approached this feature by creating a CFML CFC to perform post-page transformations to parse the output buffer using jsoup only if it hadn't flushed yet. It automatically output valid HTML, optimizes the head/body sections (defer, relocate JS to head/footer, modernize for HTML, etc), adds unique a11y hints & attributes where needed and identifies whitelisted social media hosts to automatically inject inline nonces & CSP headers into the HTTP response. (We also set up our own Taffy endpoint for collecting CSP errors.)
To further improve performance an inline SVG will save a network request for each icon and it will be much smaller.