But while I was working on the bug, I realized that Flash is not supported by Apple’s iOS which means my Hana Flv Player would not run the videos under Apple devices. That would be really terrible for the WP users who are using my plugin since the Apple devices are really popular these days.

So I started to check the latest technology and found that iOS Safari browser is capable of handling HTML5 <video> tag. Then I checked what HTML5 <video> tag’s capabilities are. Basically it allows browsers to show the video without Flash. Great! And there are already many GPL HTML5 players out there, so I decided to include one of them to provide my plugin users an option to support all the browsers out there.

I have checked out various HTML5 players , but at last, I choose MediaElement.js as the solution because

1. It successfully supports video to run under all the browsers including Firefox, Chrome, Safari, Internet Explore, iPod, iPhone, iPad, and Android (phone and tablets).
2. Seems to be actively maintained in github https://github.com/johndyer/mediaelement
3. Flash player as fall back for non HTML5 video supporting browsers. What I really liked about this is that it was developed as part of the project, has no watermark whatsoever, and the flash players controls are not part of the flash but all CSS and Javascript controlled, so the same design look can be maintained throughout all the browsers whether it support HTML5 or not. (Other HTML5 players were packaged with 3rd party Flash Player which is not GPL licensed or with the company’s unremovable watermark. )
4. According to the MediaElement.js homepage, they say if video is encoded with H.264 (mp4 container) , all browsers are supported. Then there is no need to encode the same file to several different encoded files to support native HTML5 function and browsers playing capabilities.

Okay, I was naive thinking simply implementing the MediaElement.js according to the instruction would complete it. I didn’t fully tested the functions such as “AUTOPLAY” and under Android devices. ( Unfortunately, I do not have any Apple devices , so I couldn’t test it anyway) But apparently there were minor issues with MediaElement.js.

First, ‘autoplay’ attribute of video tag was not acting correctly just with three major browsers (IE, Firefox, Chrome) . It appears that this was caused by the browser issue. After several trial and errors , I was able to fix this.

Second, ‘autoplay’ attribute is not working under iPhone, iPad , and Android OS. According to the Internet search, the autoplay feature are intentionally blocked for Android and iOS to prevent any unwanted high data bandwidth usage charge. But the problem was that the video itself was not responding at all.  So I have added a javascript routine to activate autoplay attribute only if the client browser is a non mobile version.

Third, I had added a feature (using ‘more_5’ attribute to the hana-flv-player tag) to define additional options for MediaElement.js player. ( See “Player Options” of MediaElement.js website for available options) For example, you can add or remove parts of the video control buttons by assigning options in ‘more_5’ attribute. Below example shows only play and pause control button and set the volume 20% of the max sound volume.

[hana-flv-player 
    video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
    description="Hana is having fun while sleding"
    width='500' height='autow'
    player="5"
    more_5="features: ['playpause'],startVolume: 0.2" 
 /]

Fourth, Google Analytics event tracking feature is enabled for MediaElement.js. It was previously available only for FlowPlayer v3. By using Event Tracking, you are able to track how many times the video is watched and when it was paused. For more information about event tracking setup and usage, check this forum article.

Finally, I tested with my Android 2.2 phone and Android 3.1 Honeycomb. Note that the video does play inline (in browser webpage) with Android 3.1 but it plays in a separate popup video player when runs with Android 2.2 phone. Also I found that all of my H.264 encoded videos didn’t play in Android 2.2 phone. So I had to check out the Internet for the right solutions.

Android 2.x is very sensitive about the video encoding and only processes video files with video encoding of H.264 Baseline protocol (avc1)  and audio encoding of AAC. I further searched the resources how to generate such video files with the free and popular FFmpeg video command line tool. Using FFmpeg is not an easy task with such many available arguments. It is really hard to find the correct arguments. Note that you also need to run qt-faststart to move video metadata into the first section of the video, so the player can show them right away without full downloading the movie. Also there is a free version of Any Video Convert commercial software which automatically use these encodings when converted to MP4 movie. (See more information about this in forum post) 

And here is the answer that I found for generating video files for Android 2.x (Video:H.264 Baseline , Audio: AAC). input.flv is the original video file that is used as input file of ffmpeg. The output file is output.mp4. However, since you still need to run the qt-faststart, the output-final.mp4 is the actual final mp4 file.

ffmpeg  -i  input.flv -vcodec libx264 -vprofile baseline -threads 0 -acodec aac -sameq -preset fast -strict -2 output.mp4
 
qt-faststart output.mp4 output-final.mp4

So to summarize , you must set below options to serve video under all browsers and platforms when using Hana Flv Player.

1. Use Hana Flv Player player 5 ? MediaElement.js
2. All videos must be encoded with Video:H.264 Baseline and Audio: AAC

I am still feeling the testing is incomplete that I couldn’t test with iPhone and/or iPad, but you can test and let me know if you find any issues. And maybe I will get iPhone after my current wireless phone plan expires.

Please leave comment if you have any questions. Here are some of the references that helped me while I worked on this implementation.

Thank you for using my WordPress Plugin and reading my blog article.

Other HTML5 video player reference and video players

• HTML5 Video Player comparison chart
• PROJECKKTOR
• VideoJS

Android 2.x + compatible video creation open source software download Links

• FFmpeg (http://ffmpeg.org) Windows compiled virsion that I used : http://ffmpeg.zeranoe.com/builds/win32/static/ffmpeg-20120421-git-9849515-win32-static.7z
• Windows compiled version of qt-faststart ( http://multimedia.cx/eggs/improving-qt-faststart/) http://notboring.org/downloads/video/qt-faststart.zip

Android 2.x + compatible video encoding references

• http://alien.slackbook.org/blog/re-encoding-video-for-android/
• http://ffmpeg.org/trac/ffmpeg/ticket/387?cversion=1&cnum_hist=6
• http://diveintohtml5.info/video.html (Using Handbrake to create Mobile friendly h264 video)

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

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!

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.

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.

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.

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?

Let me talk about what you can do first with the Baby croc shared hosting account.

• Unlimited disk space : my current disk space usage is about 8 GB
• Unlimite email account : I do not have many email accounts, because it’s headache to maintain multiples email accounts. I would rather recommand to use Google App service
• Unlimited bandwith : Current monthly transfer records shows that I used over 16GB
• You can add unlimited addon domains meaning that you can add additional domain with wordpress to the same account without extra charges.
• You can maintain DNS services for your domain.
• CPanel, SSH access

It’s so attractive with unlimited disk space, bandwidth, addon domains, and it’s so cheap! It’s only about 7 dollars per month. What more anybody would want form a hosting service?

The baby croc or shared hostings is basically that you are sharing the server with other people. It is not clear how many people are sharing the server together, but it is clear that there are some limitations on what you can do.

Here are some of the limitations

1. The maximum PHP memory size is 64 M per execution.
64MB memory is still amazing, but you can not allow more than that. When you enable ‘php.ini quick config’ in the CPanel, the PHP will read in the php.ini file in your home directory. You can actually edit the file and set ‘memory_limit’ to more than 64M, but in fact memory limit error will occur if more than 64M is used.

2. The maximum number of simultaneous processes are 25.
This is the biggest problem that I am experiencing. If the simultaneous process goes over 25, the web request will result 500 Internal Server Error. If you’re WordPress site is slow and have many simultaneous visitors, many of them will see the 500 Internal server error. I am having problems with one of my WordPress site which has some plugins utilizing curl functions. When the remote site is unreachable, the curl function is basically waiting for the reply and does not timeout automatically. So this process will idle and eats up available processes slots. And eventually my visitors will soon see 500 error pages when maximum available processes are all used up. You have to login to your CPanel and manually kill the idling processes.

One way to solve is to define the Conneciton timeout setting for curl function.

curl_setopt($session, CURLOPT_CONNECTTIMEOUT, 10); //10 seconds time out

3. Does APC work with Shared Hosting?
For security reason, the suPHP is used. And that is fine, but the real problem is that any kind of PHP opcode cache solution will not work including APC. I have searched everywhere to find the solution to implement APC or any similar solution to speed up the PHP processing, but I found that it is not possible under suPHP. APC or opcode cache solution stores binary opcode data in the memory space to speed up the next processing of the PHP resource. However, under suPHP this is meaningless , because each PHP processes are separate processes and won’t be recognized.

By default the php.ini does not come with apc.so file , but I was actually able to install apc.so file and I succeeded to show APC in the phpinfo() result page. And ran some benchmarking software to compare the speed with and without apc.so library enabled. But basically there was no difference in the processing speed. (If you are interested in trying this yourself, let me know)

4. FastCGI can be activated easily.
FastCGI is well known for enhancing PHP processing speeds by running number of persistent processes to handle the requests all the time. You can activate FastCGI by adding below line into your .htaccess file in the document root directory.

AddHandler fcgid-script .php

However, I do not recommend you to activate this unless you are on the VPS or dedicated server. On the shared hosting account, you can have only upto maximum 25 processes. With FastCGI enabled, those FastCGI php processes will take available slots and you have much less simultaneous process slots. Also your website eventually becomes unstable and you would soon see 500 Internal Server Error message.

So I have spent some time to find a way to speed up my WordPress sites , but all the well known methods were all failed.

However, the best method for me was to use ‘W3 Total Cache’ plugin . It is little bit confusing when you first try to set the settings with all the options. But I only recommend to use Page Cache. Database cache will create so may files in the disk which will increase the number of inodes. (There is limit on the number of inodes you can create under Hostgator Shared account) But the result is amazing!

If you know a good tip on speeding up PHP process under Shared hosting account, let me know!

Thank you for visiting wpmarking.org.