WP Marketing

Flowplayer is the definitely popular free open source Flash player. And I have received a question if it’s possible to use the first frame of the video as the splash image but without loading the full movie.

I tried to search the solution myself when I first developed Hana FLV player. I remember that all the players had the capability to display the first frame of video , but the problem was that they were downloading the complete movie even if the video is not set to be played automatically. So the file was silently downloaded in the background even when the user was not watching the video. And that could be a big bandwidth waste if the video file is big in size. So at that time, I was trying to solve this problem by implementing an option to define a splash image file. But it was another manual job that everybody hated including me.

Now, I did spend quite time researching on this issue. I had some hints from the Flowplayer forum, and here is the long waited solution!

This only works with Flowplayer v3 (player=”4″). Once it initiates the download , it will stop buffering after 1 second. If you want to increase the 1 second delay, change ’1000′ to something else. It’s in miliseconds. So you should multiply the delay seconds by 1000. For example, 5 seconds would be 5000. It means, the video data will be downloaded for 5 seconds.

Copy below tag into your post and do some testing . Let me know if you have any questions.

[hana-flv-player
video="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
player="4"
autoload="true" autoplay="false"
more_4="onStart: function() { 
   if (!this.bufferingStopped){
      if (!playersArray) var playersArray=new Array();
      playersArray.push(this.id());
      setTimeout( function() { name=playersArray.shift(); $f(name).stopBuffering(); },  1000 );
      this.bufferingStopped = true; 
   }  	
}" /]

Here are the Flowplayer forum links that I used as references.

http://flowplayer.org/forum/2/10163

http://flowplayer.org/demos/plugins/streaming/first-frame.html

Now my websites were blocked by system admin due to high CPU usage, and I panicked , not sure what to do! I had to search various websites to find the solution to reduce the CPU usage. Some are already mentioned by others but some are not. Here they are.

1. Update WordPress and the plugins to the latest version.

Of course , to avoid any bugs and security issues, you should upgrade WordPress to the latest version. But remember to make a backup, both WordPress files and the database . I saw some people got into trouble because they upgraded without backing up and the WordPress failed to work.

2. Install WordPress cache plugin.

What is a cache plugin? WordPress itself was created and highly optimized by many great developers. However, if you have large number of postings and comments with many plugins, your WordPress website will consume lots of CPU and MEMORY powers and will be slow. WordPress is based on PHP scripting language and when the PHP is running , it will consume system resources. Caching is a way of creating static copy of the webpages. When someone visits your website, the static pages are sent instead of running PHP scripts to generate page output. So the server’s resources will be saved greatly, and the page loading speed would be much faster.

But there is a problem is that the the cached static pages won’t be showing dynamically data until the cache period times out. Usually after the defined cache expiration time, the pages will be recreated by running PHP scripts. So you have to give some thoughts on what cache expiration time to use for the best result. By default 3600 seconds (1 hour) are used often.

There are three popular cache plugins. I tried all of them to see which one is best for me.

WP Super Cache: This is the oldest plugin. The result is pretty the same as the W3 Total Cache. But WP Super Cache consume more system resources (slow) than W3 Total Cache according to the P3 profiler (explained below)

W3 Total Cache: The most popular choice. It has lots of options including Page cache, Minify (for javascript CSS minimization), Database cache, Object cache, and Browser cache. I tested various options, but it appears only using Page cache (or maybe Minify) shows the best results under Hostgator shared account. Just to remember , after installing the plugin , make sure to click ‘Enable’ button under “Performance->General Settings” menu to enable the caching.

Quick Cache: Relatively new. Easy to setup , but the caching doesn’t seem to work well unlike the other two competitors.

I did the result comparison monitoring by using ‘top’ command. Check my previous post on Hostgator disabling my websites for more information on how to use ‘top’.

3. Disable unnecessary plugins except the absolutely needed ones such as Akismet (spam control) , Adsense (AD) , and SEO related plugins.

Turn off Related Post Plugins such as “Yet Another Related Posts” plugin and “IGIT Related Post With Thumb” plugin. They eat up rather large portion of CPU power. Also I have deactivated other plugins that I could live without. Such as “Sociable, Star Rating for Reviews, and Top 10.

Also make sure to check out “P3 plugin performance profiler”.  P3 is every WordPress owner’s dream come true. It helps to see which how much time each plugins takes when loading a page. After the setup , go to “Tools-> P3 Plugin Profiler” , and run SCAN by clicking on the “Start Scan” Button. After serious of webpage loading, P3 will show you the result report.

The report shows the total number of plugins, Total plugin loading time, Plugin impact of page loading time, number of SQL queries , and various charts to see each plugin’s execution time and its percentage compared to the total. This is especially useful in detecting which one is the most lagging plugin and usually you can effectively cut down the page loading time by disabling it. For my case, TOP 10 was taking up a large portion of the loading time. The result may vary each time you run the report, so make sure run several time before making any decision.

Another thing to note is the total number of SQL. Usually more SQL means more CPU usage. You can check the total number of SQL queries easily too. Disabling plugins will definitely reduce the total number of SQL queries.

4. Use simple theme

Under the P3 report, if you click on the “Detailed break down” tab, you will be able to see the bar chart of total page loading time and each plugin’s execution times and also with “WP core time” and “Theme”. “WP core time” refers to the loading time of WordPress itself. And “Theme” is the loading time that your current theme used. If you see my latest report below, “Theme” takes large amount of time compared to the other plugins.

So, what’s up with the theme? I though only plugins are eating up the loading time, but I found that highly customized theme also takes time to load since it usually contains additional PHP functions and database SQL queries So my suggestion is to use simple basic theme usually freely available at the WordPress themes website.

But I had a highly customized theme that I didn’t want to work on another theme since it will take forever to modify according to my need. The website’s theme is an older version of “Mystique” which is a beautiful them with fully customizable template that you can define various CSS settings through the its own interface meaning it is using database access to store such settings. Even though I enabled the W3 cache plugin , this particular website with Mystique still consumed high CPU % every time I loaded the webpages unlike my other websites.

I did check the page source carefully and found the cause of the problem. The problem was that the Mystique was calling a dynamic script to load CSS and javascripts. So everytime I load the webpage, my browser tried to get the CSS  and javascript which were in fact PHP scripts. And they were not cached as static files by default. There is a way to cache them with W3 Total Cache plugin too. But I just replaced those CSS and javascript with static files and the case was resolved.

By the way, current version  of Mystique at WordPress theme site is not customizable and is really fast when used with cache. So, you can safely use it.

So that was my advice on reducing CPU usage. There must be more ways to optimize the WordPress, and I will update the post when I learn more. Thank you for reading my  post!