Flash of unstyled text

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

hope this helps,
frank

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?

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){};

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

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

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? ??

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.

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.

• This reply was modified 7 years, 9 months ago by Frank Goossens.

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.