Eliminate render-blocking resources?

  • Resolved devrekli

    (@devrekli)


    6 years, 7 months ago

    Hello. I’m checking the site. And I couldn’t solve that problem.

    Eliminate render-blocking resources

    /css?family=…(fonts.googleapis.com)
    …css/font-awesome.min.css
    …item/style-v1.0.5-d834f97….css
    …item/media-v1.0.5-05374a9….css
    …jquery/jquery.js

    my setting:

    CSS Files Minification Ok
    Inline CSS Files: Ok
    Defer CSS Loaded in the : Yes, for any stylesheet LINK tags moved from HEAD to BODY via Asset CleanUp Pro * default
    JavaScript Files Minification: Ok
    Combine loaded JS (JavaScript) into fewer files: Ok
    cache css and js: ok

    how can I solve this problem? thanks

    • This topic was modified 6 years, 7 months ago by devrekli.
    • This topic was modified 6 years, 7 months ago by devrekli.
Viewing 1 replies (of 1 total)
  • Plugin Author Gabe Livan

    (@gabelivan)

    6 years, 7 months ago

    @devrekli To make the Google Fonts load asynchronously, you can go to “Settings” -> “Google Fonts”, enable “Combine Multiple Requests Into Fewer Ones”, then choose “Asynchronous by preloading the CSS stylesheet” or “Asynchronous via Web Font Loader (webfont.js)” (check what works best for you).

    As for the other items that you have there including Font Awesome and jQuery, you can either unload whatever you need (e.g. see if “style-v1.0.5-d834f97…” or “media-v1.0.5-05374a9…” is needed on all pages), or preload them with async. You’ll need the Pro version to do that.

    Sometimes, it’s better to have render-blocking resources for maximum compatibility with other plugins. They are render-blocking for a reason. If you believe there’s no problem in terms of user experience to move them from HEAD to BODY, you can also try “Move All SCRIPT tags From HEAD to BODY” (in “Optimize JavaScript” vertical tab) feature which is also a Pro one.

    Note that it’s not a big issue if you have render-blocking CSS/JS files and they are smaller in size. For instance, if you use Font-Awesome and it’s render-blocking, by making it load asynchronously, you might experience for a split second or two some unstyled icons (e.g. empty squares) until the right icons show up.

Viewing 1 replies (of 1 total)

The topic ‘Eliminate render-blocking resources?’ is closed to new replies.

Tags