[NSFW] assets/css/base/icons.css is render blocking

  • Resolved mesmer7

    (@mesmer7)


    4 years, 6 months ago

    I’m using storefront as a parent theme with my own custom child theme. I’m also using litespeed cache. Litespeed says they don’t cache fonts. But because of the way storefront loads font awesome it is both cached and render blocking.

    litespeed is caching this file: wp-content/themes/storefront/assets/css/base/icons.css, which loads all the font awesome fonts. I probably only use 4, maybe 5 of these icons.

    How can I either reduce the number of icons being loaded or defer loading it?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Brad P. a11n

    (@snaacks)

    4 years, 6 months ago

    Hi @mesmer7

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the following places for more development-oriented questions:

    Thread Starter mesmer7

    (@mesmer7)

    4 years, 4 months ago

    Still no reply. Maybe if I ask the question differently?

    Google’s Page Insights says this file is both render blocking and contains a lot of unnecessary CSS.

    /wp-content/themes/storefront/assets/css/base/icons.css

    How do I eliminate the unnecessary CSS from this file?

    con

    (@conschneider)

    Engineer

    4 years, 4 months ago

    Hi there,

    /wp-content/themes/storefront/assets/css/base/icons.css
    How do I eliminate the unnecessary CSS from this file?

    I would do this manually. Edit the CSS file with a code editor and remove all unused icons.

    You could also try and defer loading using: https://ww.wp.xz.cn/plugins/plugin-organizer/

    Kind regards,

    Thread Starter mesmer7

    (@mesmer7)

    4 years, 4 months ago

    Okay, I manually edited one of the files, reduced it’s size by 30%. Unfortunately, it had no effect on my site’s performance.

    I’m already using asset cleanup, so Plugin Organizer would cause conflicts. I tried to defer the offending css files with the following code: 

    
function ct_style_loader_tag($html, $handle) {
    $async_loading = array( 'storefront-woocommerce-style', 'storefront-icons', 'wpdreams-asl-basic' );
    if( in_array($handle, $async_loading) ) {
        $async_html = str_replace("rel='stylesheet'", "rel='preload' as='style'", $html);
        $async_html .= str_replace( 'media=\'all\'', 'media="print" onload="this.media=\'all\'"', $html );
        return $async_html;
    }
    return $html;
}
add_filter('style_loader_tag', 'ct_style_loader_tag', 10, 2);

    `

    but it made my web site’s performance much worse.

    • This reply was modified 4 years, 4 months ago by mesmer7.
    Ryan Ray, a11n

    (@ryanr14)

    4 years, 4 months ago

    Hi @mesmer7,

    Sorry to see this hasn’t worked out yet for you. As @snaacks mentioned, I’d also ask over in the Facebook or Slack communities. They’ll be best suited to help here with some custom code assistance.

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

The topic ‘[NSFW] assets/css/base/icons.css is render blocking’ is closed to new replies.