Support » Plugin: Autoptimize » Flash of unstyled text

  • Resolved outpost33

    (@outpost33)


    Hi,

    I just installed Autoptimize on a site I’m developing. I’m relatively familiar with the plugin, but by no means a power user.

    Since intalling, I have enabled:

    • Optimise HTML Code
    • Optimise JavaScript Code
    • Also aggregate inline JS
    • Optimise CSS Code
    • Also aggregate inline CSS
    • Save aggregated script/CSS as static files

    I am now getting a flash of unstyled text from further down the page, just before the Revolution Slider header loads. I am using both Adobe Typekit and Google Fonts – the unstyled text is the Typekit font.

    http://www.wiperstimesplay.co.uk

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Frank Goossens

    (@futtta)

    you’ll have to exclude the typekit JS from optimization @outpost33

    hope this helps,
    frank

    Thread Starter outpost33

    (@outpost33)

    Hi,

    Ok, just added jgz5qnl.js to the relevant field in AO with no change. However, looking at the source, it seems that script (the script for the typekit font kit) was not included to begin with.

    Perhaps I’m barking up the wrong tree? Pretty sure that is the typekit JS, but if not maybe you could point me in the right direction?

    Another idea – I’m using the X Theme, which comes with its own Typekit plugin add-on. Could this be causing the issue?

    Plugin Author Frank Goossens

    (@futtta)

    that’s the typekit JS-file allright and that will indeed never be aggregated, but there’s inline typekit JS as well which you’ll have to exclude 🙂

    
    (function(d){var config={kitId:'jgz5qnl',scriptTimeout:3000,async:true},h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)})(document);;try{Typekit.load({async:true});}catch(e){};
    Thread Starter outpost33

    (@outpost33)

    Apologies for my ignorance – what would I do with that long line of code you just copied?

    Thread Starter outpost33

    (@outpost33)

    Are you suggesting I should add all that code to the “Exclude scripts from Autoptimize” field?

    Plugin Author Frank Goossens

    (@futtta)

    that’s the inline JS you’ll have to exclude from optimization by choosing one (semi-)unique keyword from it (e.g. jgz5qnl or use.typekit.net or …) and adding that to the comma-separated list of JS optimization exclusions? 🙂

    Thread Starter outpost33

    (@outpost33)

    Aha yes – that did prevent the FOUT, thanks!

    However, now Revolution Slider has a delay in loading, so you see the item below the header for a second just before the slide loads.

    Plugin Author Frank Goossens

    (@futtta)

    However, now Revolution Slider has a delay in loading, so you see the item below the header for a second just before the slide loads.

    similar problem; autoptimized JS will load as late as possible to avoid it is render blocking. either exclude all revslider JS (inline & files) from optimization OR add some CSS to reserve (blank, although you might even load a temp image there somehow) room for the slider to load in so there’s no jumping around.

    Thread Starter outpost33

    (@outpost33)

    Adding some blank space in CSS seems like a good idea. I’ll see if I can figure out how to do that.

    Many thanks for your help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Flash of unstyled text’ is closed to new replies.