Autoptimize is a great Wordpress plugin that will combine all of your JavaScript calls into one minified script and defer them to after page load. We recommend having a developer install this for you. 

IMPORTANT. Word of warning:

If you have inline JavaScript that changes from page to page, Autoptimize's cache will get very large and could eventually crash your host. You should work to remove any plugins that use inline JavaScript. If you're not comfortable knowing what this means, you likely should not be installing this plugin yourself.

1. Install Autoptimize!

2. Activate Autoptimize

3. Click on Settings under Autoptimize 

4. Click “Show Advanced settings”

5. Enable “Optimize JavaScript Code?”

6. Disable “Force JavaScript in ?”

7. Enable “Also aggregate inline JS?”

8. Enable  “Optimize CSS Code?”

9. Add your Mediavine Script Wrapper to the list of Exclude scripts from Autoptimize. These are comma separated so add a comma after the last one in the last and put in the name of your script. 

If you're running the latest version of the script wrapper (located in your dashboard) or using the Mediavine Control Panel to insert your script wrapper, you can skip this step.

Otherwise, you can get your script name by viewing your source (View > Developer > View Source) and searching for mediavine. Your script should end in something with your site name, like “bluebonnet-baker.js”. That’s the name of your script. 

Add it (Add yours, NOT Amber’s. Do it without the quotes). Like this:

10. Optional. If you don’t know what a CDN is, hand this off to your tech person!

If you run a CDN for your images such as Cloudflare, you can now easily serve your JavaScript and stylesheets from it using Autoptimize. 

Just check one of your images and see if its subdomain is something like cf. or images. and different from your site’s regular subdomain (such as www or just your plain old domain, e.g. http://bluebonnetbaker.com). 

If it’s different, such as: http://cf.bluebonnetbaker.com/wp-content/uploads/2015/12/Maple-Peanut-Butter-Cookies-Photo-300x200.jpg, that means your images are being served via a CDN. You should configure Autoptimize to match this. If this was too confusing for you, skip it, because incorrectly configuring this would cause your site not to work. Here you can see us matching it to the http://cf.bluebonnetbaker.com from the example.

11. Save Changes and Empty Cache

12. Empty the cache in any site caching plugins (Super Cache, W3 Total Cache, WP Rocket, Cloudflare, etc) you have.

13. Visit your site and make sure everything works! Check things like your dropdown menus, sliders, responsive menu bars, subscribe boxes, etc.

14. If you’re adventurous, you can turn on the more aggressive CSS filters. You're going to need to get your Above the Fold CSS from a third party such as criticalcss.com

 

Enable both “Also aggregate inline CSS?” and “Inline and Defer CSS?” options. You'll need to paste the CSS that criticalcss.com or another third party site gives you.

Did this answer your question?