Here’s another liveblog which I’m mainly writing to remind myself how I (hopefully) fixed this. But, it may come in handy. Many online tutorials provide in-depth, step-by-step instructions before going full, ‘Draw the rest of the owl’ when it gets to the part about ‘simply’ adding the fonts into CSS and integrating them into your site.
Problem: A major issue with Google SEO is your website loading slowly.
Detail: Downloading fonts – including Google fonts – is a major cause of this.
Potential Fixes: Hosting the fonts locally instead of getting them to download from another site – including Google’s own CDN (FFS) – is faster (and apparently fixes privacy issues). There are loads of plugins to host Google Fonts. Perfmatters and Siteground’s plugin does it too. There’s lots of counter intuitive advice.
Table of Contents
Discover: Which fonts does your website use?
The Firefox browser works best
- Load your web page
- Click Burger Menu
- Select More Tools
- Choose Web Developer Tools
- Choose Inspector
- Choose Fonts
- Mouseover the different fonts shown and they will highlight on the page
There’s also this which showed up when I tried to search for various fonts in the Inspector window:
It’s useful as it shows where the fonts are loading from. While OptinMonster isn’t showing up here (it only does once every 30 days). It shows that the only remote call is FontAwesome.
How to reduce the fonts used on my website
From doing this I discovered that Arial was being used in my Tag Cloud plugin. Also, that Optin Monster was using additional fonts. If text doesn’t highlight when you mouseover, just right-click on it and choose Inspect. I’ll see if I can switch both to Raleway Thin to match the site…
On Optin Monster I can choose Raleway but there’s no Thin option. Google seems to suggest than Raleway Thin equates to a weighting on 100. So, I’ll go with that. The Button Text needs to be changed in the Advanced section of the sidebar where it says Font Settings. Looks weird, but I’m all about speed right now.
That said, it does look really weird. Making the text Bold changes it to a 400 weight which is Ralway Normal. I can do that.
The Submit Button has it’s own section to change the font beneath the main text when setting the form font. In fact, there are loads of subsections that all need changing.
This has taken way too long. But all done. Final save and… apparently there’s suddenly an error. Go through it again, it looks like it’s a random error. Not everything saves correctly. Just rinse and repeat until it’s all done. This has all done my head in and won’t affect page load speed at all, probably. Anyhow. A useful exercise, maybe.
As for Tag Cloud, it doesn’t let me specify Ralway – I only get a selection of font families. I don’t know how Raleway fits into this. Will give up on for this all for now. Head caved in and hours wasted learning what not to do. Ho hum.
Font Swapping versus not Font Swapping – Loads of places say to use font swapping for speed but here it says it causes CLS (Cumulative Layout Shift) which needs to be avoided. Brilliant. Will have to test this. More info here.
Siteground’s Speed Optimizer plugin has a couple of settings in its Frontend > General section. These let you “Preload” fonts but doesn’t directly say if that’s locally or remotely. Will try this out.
The broad fix to loading FontAwesome (unoptimised)
Here is what MyThemeShop did to fix the FontAwesome icons in my menus
Added the code here: Appearance > Theme Options > General Settings > Header Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />This points to a massive FontAwesome external stylesheet which points to additional font and file downloads.
Surely, I don’t need all that. I wonder if I can just point the links to somewhere on my FTP server?
Looks like these are the direct links to the fonts:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0There’s also a link to this… (NFI idea what it is).
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregularI think it’s safe to say that the MTS fix is the simplest but most unoptimised way of dealing with the issue.
I was tempted just to add a hacked versioon of the stylsheet to the site, but it looks like there’s a million things that could go wrong.
This is the FontAwesome font that Firefox is downloading:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0Underneath that, though, it lists this…
@font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-style: normal; font-weight: normal; }
Is it the same as the (top of) the .css stylsheet? >>>
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;Looks like a yes. So, maybe I do only need to hack this code to point at locally hosted fonts?! My head is caved but this is promising. I’d only need the WOFF2 file, right? Right??? Somewhere, there’s the one webdev reading this shaking their head at how unfathomably simple it is to fix this issue. But, if you find something easy, it means you’re good at it.
Progress Report
I’ve tried hacking the file and hosting it locally. Computer says no. Am asking the BigSEO reddit community. Might try a plugin in the meantime.
I was going to add an AI-generated image of someone punching a font or a CSS sheet to this article – especially as Photoshop keeps telling me it’s possible to do that. But Adobe’s instructions are as unfathomably stupid as Google’s. It’s also downloading several Photoshop updates automatically. Maybe one of them will work? FFS.
Update: Well, bugger me, Adobe updated four times and then the generative AI started working. There’s a guy punching a CSS font file. In Iceland.
Update 2: This plugin should work. Custom Fonts – Host Your Fonts Locally. However, you need a full understanding of how to do it manually in order to make it work. Hmm.
Update 3: Trying this. Brain is f*cked at this point. Wordpress wouldn’t let me update the functions.php file citing some colon error in the URL.
Update 4: Trying this which looks way too simple. Will try it using the Version 5 fonts I’ve already uploaded.
Might be close to working:
<link rel="stylesheet" href="https://smbtech.au/wp-content/uploads/font-awesome/css/all.css">This added a new style of scroll up arrow but buggered the menu system. Maybe adding version 5 files was bad? Switching to version 4.
OMG, did that just work? Trying on another site. Then seeing if it’s actually helped speed in any meaningful way. Header code is simply:
<link rel="stylesheet" href="https://smbtech.au/wp-content/uploads/font-awesome/css/font-awesome.min.css">It seems to work. Now for performance testing.
Firefox seems to think it’s local:
Go home Google, you’re drunk
I’ll be doing a series on Google’s SEO recomendations. Running Page Speed Tests is bringing up almost random speeds. Some are faster but some are slower. Generally, it looks like on Desktop it’s fixed a problem. But on Mobile, mayby not. Just WTF, Google?
Before Optimisation:
After Optimisation:
Performance Result of locally hosted font = worse
So, serving the fonts locally has made the mobile page slower and turned a 10ms problem into a 250ms problem. Thanks Google! A whole day wasted on this crap.
Preloading after all
Google’s own advice onto fixing the problem that Google created is to preload fonts after all. Let’s try that? It’s late, I could have been creating content all day, but no, I’m dealing with more of this shit from Google. FFS.
It looks like PerfMatters can help – I’ll use this instead of SiteGround’s plugin.
I might do this for a bunch of logos and adds as the Preload Critical Images feature doesn’t seem to have ever worked.
Result
Did this work or did the test break? Thank you Google. FFS.
Going to keep adding ads and fonts and stuff to Perfmatters Preload and Priority to see if it keeps helping.
Sh*t’s f*cked. Page Speed Insights is such a mess. You do what it says and it’s suddenly slower. The page appears quicker, but it’s actually slower. Fonts at the bottom of the screen are inconveniencing readers are they? Really? FFS. Every test pumps out a random number. FFS. And yes, I’ve refreshed the pages numerous times in various ways to get them cached by the web host.
Final update for now
After running numerous Speed Tests, it’s settled on 93 for Mobile and 97 for Desktop using the above PerfMatters settings (except that Preload Critical Images is set to 2). I’m leaving it there and backing away for now. Oh and the 200×250 banner is set to All Devices, not mobile.
