Tagged: javascript, performance, webfonts
-
AuthorPosts
-
October 4, 2014 at 9:34 pm #330300
We are generally happy and impressed with Enfold — and also happy every time problems are fixed and the theme improves. So please take this question in that spirit.
We are about to launch a site that includes a high-quality webfont, loaded through a paid subscription with one of the largest and most capable webfont providers, fonts.com.
The site has a “flash of unstyled text” (FOUT) issue at times, and we implemented fonts.com’s solution — a tiny JavaScript that loads just before the custom font. The script makes sure the custom font loads before text in that font displays.
The results are not acceptable, and they have analyzed the site and provided this response, which suggests Enfold should handle scripts more efficiently.
Could you please comment on this. Thanks. (A private link to the pre-launch site is below.)
Looking at the page source, there is a lot of potential general optimization for the structure and order of the resources linked in the HEAD section. A general rule of thumb for a good ordering of resources is to ensure that all non-JavaScript resources in the HEAD section are included before all JavaScript resources.
Keeping with this rule, to make effective use of FOUT mitigation techniques, the Fonts.com script must be loaded as soon as possible by the browser so it can do its job. As such, it would be best to make sure that the first two scripts included in the HEAD section are the configuration script and publish code SCRIPT tag.
Kind Regards,
Customer Support, Fonts.comOctober 5, 2014 at 4:46 am #330368Hi Ben!
The theme loads all scripts through WordPress via wp_enqueue_script. That means WordPress handles the loading of scripts in and gives each script the priority it needs.
This insures that all plugins that also correctly load in scripts for your site can work in the same way: letting WordPress handle it.
We did not load in your custom font choice and so we have no control over where you loaded it into the header. If you look at your own head in the source of your site you can see that the advice they are giving is already being followed by the theme except where performance can better be served by loading js files at the end of the document (not relevant but I wont leave it out of this description).
If you want the script to prevent flickering to load before everything else the solutions is to move it in your header.php file to before the wp_head content gets output.
Cheers!
Devin -
AuthorPosts
- You must be logged in to reply to this topic.