In this guide you will find information about:
When doing these changes, remember to make sure, that you are not logged into your site (you can use incognito, private or guest browser window) and to check your browser console for errors when playing videos in FV Player. Here’s a handy guide on how to check your browser console: Using Your Browser to Diagnose JavaScript Errors on WordPress.org
Once you have the minify plugin enabled, load up the page with your video and play it to see, if anything comes up and if your videos still play.
Also note that these optimizations apply to any plugin, not just to FV Player. In some cases a single bad actor can break your whole site optimization. So make sure to check your browser console carefully.
Minification
Minification is the process in which the JavaScript and CSS files are compressed and bundled together to make sure your website loads faster.
While compression reduces size of your files, thus makes them faster to download, combining all the JS files and all the CSS files together means they can’t download in parallel and it might not actually improve your page speed at all.
Nonetheless, it’s still a great first step in optimizing your site. You can take a look at our list of recommended minify plugins and pick your favorite. But make sure that you check your website in Google PageSpeed Insights tool before and after these changes, to see, if it improved your site’s performance. You should be able to improve your score and tick off the following optimizations:
- Minify CSS
- Minify JavaScript
Asynchronous JavaScript and CSS
To optimize your site further make sure to use:
- critical CSS with rest of the CSS files loading asynchronously
- deferred JS load
That way, the page can start drawing without having to rely on additional files, which is something the Google PageSpeed values the most. However, it changes its scoring mechanism over time, so this is a moving target.
Without these optimizations, Google PageSpeed Insights tool will keep reporting “Eliminate render-blocking JavaScript and CSS in above-the-fold content” error for your website.
Update: PageSpeed scoring has been adjusted and the scripts in footer are no longer reported as render-blocking. Since FV Player already puts its scripts into footer, it makes your site optimization easier.
What to use
Autoptimize
This is our recommended plugin for CSS and JS minify/combine. Since it packs all the JS files together and puts them at the very bottom of site HTML, it might already be enough to prevent JS from blocking your page rendering. That way you won’t see any of FV Player JS in the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” PageSpeed Insights recommendation.
If you use it, you have to make sure, that these options in Settings -> Autoptimize are set as following:
- Force JavaScript in – off
- Also aggregate inline JS – off
- We recommend adding jquery.js into “Exclude scripts from Autoptimize”
- Do not use “Remove query strings from static resources”, here’s why: How to use WordPress with CDN
It also comes with a “Autoptimize criticalcss.com power-up” addon for critical CSS and they recommend the “Async JavaScript” plugin to defer the JavaScript loading. We tested that one briefly and it appears it has to be set to “Defer” mode in order to keep FV Player working.
Flying Scripts
This plugin can delay the JavaScript execution. FV Player already loads the scripts only when the user interacts with the page (wp-admin -> FV Player -> Settings -> Integrations/Compatibility -> Optimize FV Flowplayer JS loading).
Flying Scripts also uses lazy loading for the inline scripts created using wp_localize_script(). It’s the core WordPress APIs to configure various scripts. Including FV Player in that optimization breaks its functioning. We also don’t see what’s the point of such optimization as it’s not saving much on the total size of the page and it’s not lowering the amount of the requests either.
Google PageSpeed Module
This is not a WordPress plugins, but a web server module, so you might need your own server or a VPS to use it. It did not cause any issues with FV Player in our test.
Yet, we strongly recommend not using it together with one of the WordPress minify plugins, as it can yield unexpected results and JavaScript errors.
SiteGround Optimizer
This plugin does not process the scripts added after the HTML head has been outputted. FV Player loads the scripts in footer and only if they were actually needed on the page.
Because of that SiteGround Optimizer’s “Defer Render-blocking JavaScript” does not defer FV Player. But it defers jQuery.
Since FV Player depends on jQuery, it excludes jQuery from “Defer Render-blocking JavaScript” automatically. Unfortunately SiteGroud programmers were not interested in our suggested fix for their plugin: Support thead: FV Player only works correctly when logged in as WP Admin
There are no issues when using SiteGround Optimizer’s “Combine JavaScript Files” setting – with or without “Defer Render-blocking JavaScript”.
WP Fastest Cache
FV Player works fine with this plugin, however, to really optimize it you need the Premium version.
That way you can enable “Combine Js Plus” (to combine JS files in footer) and “Render Blocking Js” (to defer the JS loading). We haven’t got the chance to test the Premium version though.
It also caches your page HTML code, so your website can sustain peak traffic without taking your server down.
WP Rocket
This is a paid caching plugin which does a lot of things well. It works with FV Player perfectly.
Thanks to the “Optimize CSS delivery” and “Load JavaScript deferred” options you can really optimize your website with FV Player to obtain the 98 score from Google PageSpeed.
WP Rocket is primarily a cache plugins, It speeds up your website to sustain peak traffic without the need to take your server down.
If you are using WP Rocket’s new Remove Unused CSS feature, these FV Player items will be automatically added to the CSS Safelist in WP Rocket-> Settings -> File Optimization -> CSS Files to ensure full compatibility:
/wp-content/fv-flowplayer-custom/style-*
/wp-content/plugins/fv-wordpress-flowplayer*
/wp-content/plugins/fv-player-*However, these items will not be visible in the Safelist.
If you use the “Delay JavaScript execution” setting of WP Rocket, the “Optimize FV Flowplayer JS loading” setting of FV Player is no longer available as they both serve the same purpose.
W3 Total Cache
We don’t recommend this plugin, as it is too much work. Check our post in support forums for details.
