Hana FLV player – Using the first frame of video as the splash image without full buffering

Posted in Wordpress, Wordpress Plugins on February 20th, 2012 by HanaDaddy – Be the first to comment

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

How to reduce WordPress CPU usage using Cache and P3 plugin

Posted in Wordpress on February 18th, 2012 by HanaDaddy – Be the first to comment

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.

image

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.

image

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.

image

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!

What to do when Hostgator disables your shared hosting account

Posted in Wordpress on February 17th, 2012 by HanaDaddy – Be the first to comment

I got a phone call early in the morning around 4 AM. I could hear the answering machine running and machine voice from Hostgator leaving a message that my shared hosting account is blocked for access due to high CPU usage.

I woke up and checked my email account and found that I also received an email from Hostgator.

Hello,
I apologize, but I was forced to suspend the directory /home/…/public_html as multiple scripts inside were causing high loading issues on the server. Due to it affecting all of the other accounts on the system, we had to take immediate action for the health of the server.
Please be aware, we do not normally disable directories except in rare cases where multiple scripts are causing issues. We believe this is the only way to prevent a server crash and potential loss of data.

In general, introducing new indexes, cleaning databases, optimizing existing code, upgrading to the latest versions and adding some sort of caching mechanism, where the script does not need to generate a new page with every request, helps to lower the over load that a script will cause. Likely the original author or support group of the software that you are using will be able to help you to understand how to add something of this nature.

If you reply back to this with your IP address (http://www.hostgator.com/ip.shtml) we will be more than happy to go ahead enable HTTP access for you, so that you can safely work on the script without it causing further issues.
Please let us know how you would like to proceed.

 

I checked my domain names and all of my websites didn’t work. They were all blocked indeed. I was very upset and furious that Hostgator admin blocked without any warning before shutting down my websites. It’s like shutting down the business and you won’t have any sales at all until those websites are back on LIVE. I mean most of my sites are not doing well (in terms of Internet Marketing) these days but I was really upset and didn’t know what to do.

I tried to follow the procedures and got all the websites back on after 2 days. I had to work at night  and could not sleep enough since I go to work during the day time. Here is the general steps that I took. I hope this will help someone to resolve similar problems too.

1. First  calm down and read the email carefully in detail. Usually the main reason of high CPU usage is because of WordPress with lots of plug-ins but without any Cache plug-in. If you are receiving many visits, that will consume lots of CPU powers. 

2. They should send you the running process statistics output (ps command output) as the proof of the high CPU usage. Here is the one that I received

userid 25467 19.3 0.2 53528 31500 ? RN 03:42 0:00 | \_ /usr/bin/php /home/userid/public_html/site_androidtablet/index.php
userid 25651 38.0 0.2 54476 32332 ? SN 03:42 0:00 | \_ /usr/bin/php /home/userid/public_html/site_androidtablet/index.php
userid 25467 20.6 0.2 53528 31652 ? RN 03:42 0:00 | \_ /usr/bin/php /home/userid/public_html/site_androidtablet/index.php
userid 25651 42.0 0.2 54988 32844 ? RN 03:42 0:00 | \_ /usr/bin/php /home/userid/public_html/site_wpmarketing/index.php
userid 25651 50.0 0.2 54988 33104 ? RN 03:42 0:00 | \_ /usr/bin/php /home/userid/public_html/site_wpmarketing/index.php

 

First column is the userid, the second column is the process id, and the third column is the CPU usage %. I see they are really high ranging from 20 to 50. And the last column is the running script name. Of course , they were all WordPress scripts. Make a note of the websites since you would have to do some work on those sites. But just note that you will need to work all of your WordPress sites anyways . The system admin wants you to do so.

3. Now you will need to find out your desktop computer’s public IP address by visiting http://www.hostgator.com/ip.shtml and let the system admin know . So he will allow you to access to your websites and you can start working on it to speed up things.

image

You can just reply to the email with the IP address to update the ticket . If you want to expedite the process (of course you do) , you shouldn’t just wait. You can call them up or use live chat feature which is better.

image 

When you are connected to one of their tech support , just mention about the ticket number and ask to escalate it to the system admin.  Once escalated,  the system admin will review your ticket right away. By the way, the tech support might want to verify your identity with the last four digit of your credit card number or the Paypal transaction number that was used to pay the hosting .

4. I was able to access right away (that was really fast like within 5 minutes), then I started to review my WordPress websites . Actually I already installed W3 total cache plugins for all of my sites, but indeed, strangely , I see that some of the websites are using high CPU powers . It took me almost a day to figure out what cause the problem. It was because (1) I didn’t setup W3 total cache properly and (2) javascript and css files were dynamically created. I will explain about this in detail in my next post.

For now, let me quickly show you how to monitor the CPU usage. I mean how would you know if a website is optimized or not ? You should be able to monitor CPU usage in real time right?

To do this, you need the SSH access to your account. Check here on how to get the SSH shell access. You need a SSH client too. PuTTY is the popular FREE SSH client. Once you logged into your account. Run below command at the prompt.

[userid@gator1234~]$ top

 

‘top’ command will show complete system information at a glance.  It shows various information about processes , CPU usage, and memory usage. Also it refreshes the screen every defined period which 3 seconds by default. There is a column named %CPU which is the data that the sys admin monitors. So your target is to reduce this information to minimal level.

image

But 3 seconds refresh time is just too long. If you visit your website and try to see the process, it may not show. So what you need to do is change the refresh rate by typing ‘d’ on the keyboard. Then it will ask for the new refresh rate. You should try 1 second or 0.5 is a good choice too.

Also you want to see the full command information since ‘top’ shows does not show the complete command line that you don’t know which website’s PHP script is running. You can enable full command line show by typing ‘c’ on the keyboard.

Now you are ready to do some monitoring. Visit your website while you are checking the top output. If the %CPU shows something like 50 and above, you should do some serious WordPress optimization. I will get back on what i did for the optimization on the next post.

5. Finally, I was able to implement W3 total cache plug-in and caught the CPU leaking bug in the WordPress theme. I was able to confirm that the CPU usage is down in great percentage and the page loading was really fast that the process was not even showing in the ‘top’ command output even with 0.5 refresh time. 

So I wrote another email back to the original ticket. I described what I did in detail and asked the system admin to enable my account. After I sent my email , I contacted the tech support using the live chat again and asked to escalate my ticket again, so the system admin can check it right away. After that I just went to sleep . I have done everything that I could do.

Next morning, I checked my email the first thing in the morning and Bravo! The admin accepted my adjustment and enabled all of my websites.

The whole process took me about 3 days with only few hours of sleep. I am happy because I learned many valuable lessons on how to optimize the WordPress and it is very important to do the optimization all the time especially you are expecting large volume of visitors. You wouldn’t want to miss them do you?