Smart Slider – Optimize CSS Delivery – Google fonts issue

  • Resolved danishsq

    (@danishsq)


    7 years ago

    Hi,

    I am using smart slider for my website on the header slider static slide I have used google fonts for the slider which is creating issues in google page speed insights. I am getting the following error under Optimize CSS Delivery

    https://fonts.googleapis.com/css?family=Bree+Serif:300,400&subset=latin

    When I digged into this link I found this is getting created because of Smart Slider Plugin Header.

    Appreciate if you can provide insights as how can I optimize css delivery for above path.

    PS :- I am not a technical person and built all my website through watching youtube videos, any help in simple language will be much appreciated

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Ramona

    (@nextend_ramona)

    Hi @danishsq

    We’re loading the Google fonts dynamically via JavaScript. So basically here’s how the loading works:
    – The browser requests the page
    – the page requests the CSS and JavaScript files, including our file
    – our code in our JavaScript file calls this Google font

    I checked your page and I can see that you’re using Autoptimize which combined and all of the JavaScript files on your site into one file, so the request is entirely handled by this Autoptimize generated JavaScript file. So the https://fonts.googleapis.com/css?family=Bree+Serif:300,400&subset=latin link loads the way Autoptimize tells it to load.

    So the loading will work this way:
    – The browser requests the page
    – The page requests Autoptimize’s JS file (which contains all your site’s JS code including ours)
    – our code in Autoptimize’s file requests the Google font

    The best I can suggest is looking at Autoptimize’s settings and adjust the way it loads the JavaScript files.

    Thread Starter danishsq

    (@danishsq)

    I reached out to Autoptimize also but as the google font settings are inside the plugin Autoptimize is not able to optimize the css delivery of this google font. That is the reason why it is creating issues on google page insights

    You can also see that the critical css path is just breaking after the google fonts, thats why the site is not getting optimized fully.

    In Autoptimize I have already selected the option to remove google fonts, therefore all other fonts it is compressing and removing however as this is inside the plugin. Autoptimize is unable to read the font and compress it. Therefore the issues lies with font not autoptimize

    And as you correctly mentioned I am using Autoptimize to optimize my website through “Inline and Defer CSS” option by deferring the css files after the page load however because of google font that is not getting completed.

    Do you think using standard font like “Arial” will help in resolving this CSS issue ?

    Ramona

    (@nextend_ramona)

    Hi @danishsq

    The fonts are loaded via JavaScript so optimizing the CSS codes will do basically nothing – it’s the JavaScript optimization you should try tweaking.

    You could try disabling the “Let Autoptimize also extract JS from the HTML.” this way the Google font calling codes would be loaded on the page load, so maybe that would solve the problem.

    If you would need further help with this, please reach out directly: https://smartslider3.com/contact-us/ and refer to this topic.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Smart Slider – Optimize CSS Delivery – Google fonts issue’ is closed to new replies.