What if I could preload mobile fonts only?! Okay, this is just an experiment, but it seemed to work? When you add something to WP Rocket’s preload, it will always preload it, regardless of the device. This makes sense, but there are some things —
like maybe a toggle button I am using from a special font, that doesn’t appear on desktop and has no reason to be preloaded (or even loaded).
So I am attempted to optimize my site more by making a code snippet that preloads if mobile
add_action('wp_head', 'preload_mobile_font');
function preload_mobile_font(){
if ( wp_is_mobile() ) {
?><link rel="preload" as="font" href="https://ganstapenguin.com/wp-content/themes/ganstapenguin2021/fonts/fontello.woff" type="font/woff2" crossorigin>
<?php
}}Threw that bad boy in my functions.php without testing like a fucking boss. I’m no genius, and I wasn’t sure of a way to check the source code of a mobile device, so I did what geniuses do (fake it ’til you die and don’t have to fake it anymore) —
I googled
This site says it will check and compare the mobile and desktop source code for me… nice! It also has marketing in its name, bummer. Let’s see if we can preload mobile.
Well, Let’s Try It
It At least Appears We Preload Mobile Only
It looks like:
- The website is reliable, maybe they are marketing ninjas, goddamn
- it shows red with a line through it code that is on mobile but not desktop
It looks like it works. I mean, I will test it later, and I’m not recommending anyone to do this but it’s a cool concept if it does offer any benefit.