Unused CSS?

  • Resolved twgerber

    (@twgerber)


    6 years, 11 months ago

    I am using Google Pagespeed and it shows that 99.2% of the Font Awesome CSS is unused.

    Is there a config change I can make to eliminate/minimize the unused CSS?

    I do use paid WP Rocket for optimization and I have Minify and Optimize checked.

    Some of the unused CSS is pasted below from Dev Tools -> Coverage.
    /*!
    * Font Awesome Free 5.8.1 by @fontawesome – https://fontawesome.com
    * License – https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
    */

    .fa-lg {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em
    }

    .fa-xs {
    font-size: .75em
    }

    .fa-sm {
    font-size: .875em
    }

    .fa-1x {
    font-size: 1em
    }

    .fa-2x {
    font-size: 2em
    }

    .fa-3x {
    font-size: 3em
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author mlwilkerson

    (@mlwilkerson)

    6 years, 11 months ago

    All true. In fact, there’s even more inefficiency if you look at the web font files that this CSS causes to be loaded in.

    As a developer myself, it would bother me to be that inefficient. However, our usage statistics show that the vast majority of the time, people just reach for all.css when installing Font Awesome 5. Probably because it’s easy.

    So the initial release of this WordPress plugin is focused on the easy scenario that is already what the vast majority of users seem to care most about.

    However, if efficiency is more important to you (as it would be to me), then you can definitely tune how Font Awesome is loaded and get it to be much more efficient.

    For example, you could use our SVG with JavaScript framework, which leverages tree shaking to eliminate from the bundled assets all but the icons actually used. In fact, the front end of this plugin’s admin UI is a React app that uses our react-fontawesome component to do just that.

    If you want to stick with our Webfont with CSS technology instead, then you could consider–instead of using this plugin–add your own code (to your functions.php for example) to enqueue just the Solid style or just the Light style instead of all.css, if you use only icons from one style. That would dramatically reduce the amount of unused CSS and webfont files that are loaded, but it wouldn’t be as precise a subset as the tree-shaken JS approach.

    If you want to be more precise with subsetting and Webfont with CSS, then you should check out our recently released Kits in Font Awesome Pro. You’d need to enqueue your own kit script (again, probably from your functions.php), instead of using this plugin. And you’d therefore also have to handle any loading conflicts on your own. But what you get is auto subsetting, where your site will load much more focused chunks of webfont files that correspond to the icons your site actually uses. And again, if you use the JS/SVG version of Pro Kits, it’s an even more precise subset (down to each and every icon, loaded only if and when your site uses them).

    (You can also get kits in the new Font Awesome Free, but they do have this auto-subsetting feature.)

    Thread Starter twgerber

    (@twgerber)

    6 years, 11 months ago

    This is a new area for me so not completely following.

    Questions

    1) for the free plugin should I change method from webfont to svg for an improvement?
    2) Change v4 compatibility to something else from required?

    Or are you saying purchase Pro?

    Plugin Author mlwilkerson

    (@mlwilkerson)

    6 years, 11 months ago

    Whoops, sorry. I made some invalid assumptions. Let me back up and provide a little more context.

    There are lots of different ways to set up and use Font Awesome. Not just in WordPress, but in all kinds of environments (desktop, mobile, web). Each approach has various advantages and disadvantages.

    One way to setup Font Awesome on the web is to use our Free or Pro CDN and simply load everything. We have two different technologies for delivering icons: Webfont with CSS, and SVG with JavaScript.

    So, loading from our Free or Pro CDN amounts to adding a <link> tag to the <head> of your page template, if you want to use the Webfont with CSS technology, or a <script> tag if you want to use the SVG with JS technology.

    All of that is true whether you’re building your web site with WordPress or by any other means.

    At the core, what this WordPress plugin does is simply to add that <link> or <script> tag to the <head> of your page template for you. For now, for ease, it only supports loading all.css or all.js (the entire set). So, no subsetting. Easy, but not as efficient as it might be.

    (This plugin also does some conflict detection and resolution, which are often important in the WordPress ecosystem where it’s common for various themes and plugins to load their own versions of Font Awesome. For many WordPress users, that’s the feature that actually provides the most advantage to using this plugin, because detecting and resolving those conflicts can be very cumbersome.)

    So if you want to use this WordPress plugin to load Font Awesome, then you’re committing to loading all.css or all.js from our Free or Pro CDN.

    If you need to achieve more efficient subsetting, then you’ll need to do some custom work in your WordPress theme (usually in functions.php) to load Font Awesome in your own custom way, instead of using this WordPress plugin. It is much less easy, but you have the possibility of achieving a far more efficient load result, if that’s what you prefer.

    (Bear in mind that using our CDN, whatever is loaded, is loaded very efficiently. Whereas, if you were to create your own subset and self-host it from your WordPress site, then even though the payload might be smaller, it may actually load more slowly, unless you figure out how to doing your self-hosting through your own CDN. So again, trade-offs.)

    Now, here’s where Kits fits into the picture. A kit is a little piece of JavaScript that loads Font Awesome according to some customization settings that you configure in your fontawesome.com account. It also leverages some web magic that allows for some kinds of optimization that are not available with the earlier versions of our Free and Pro CDNs that this WordPress plugin still uses.

    Pro Kits, and especially with the SVG and JavaScript technology, are super-magical and super-efficient. They both use a CDN, and load subsetted Font Awesome assets.

    However, this plugin does not yet support Kits (working on it…) So if you want to use Kits in your WordPress site, then, instead of using this WordPress plugin at all, you’ll need to do you own custom work, such as in your functions.php.

    Summary: there are lots of ways to set up and use Font Awesome, some are far more efficient than others, in terms of loading only what your site actually uses. However, this WordPress plugin–for now–only supports loading Font Awesome as all.css (Webfont with CSS) or all.js (SVG with JS) from our Free or Pro CDNs. So if you need to reach for one of those more efficient ways of subsetting Font Awesome, then you’ll need to take a custom approach (writing PHP/WordPress code, probably in your functions.php) instead of using this WordPress plugin. Trade-offs.

    Does that help to clarify?

    Thread Starter twgerber

    (@twgerber)

    6 years, 11 months ago

    Thanks that helps

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Unused CSS?’ is closed to new replies.