Many people use Google Analytics to track their WordPress traffic stats and that is excellent.  But in order to use Google Analytics, you have to sign up with Google.  However, if you are building a WordPress site for a client who do not use Analytics, you would want a WordPress plugin that show traffic stats in the WordPress Dashboard instead of having to log into Google Analytics.

“WordPress.com Stats” is one such plugin that is created by Automattic, the makers of WordPress themselves.   You can install it on self-hosted WordPress sites. However, it requires you to sign up to WordPress.com and get an API key.   Although free, it sometimes can be difficult to get clients to do that.

So that best WordPress dashboard plugin that I found that monitor stats (and in real-time too) is WP SlimStat.  It has good traffic chart and world traffic map and many of the usual analytic stats similar to Google Analytics.

Alternatively, you can try Track That Stat which is similar to WP SlimStat.

To check on the performance issues, you can see the page load  time and its various components by using FireBug’s net tab.  Slow performance can be due to large image sizes, blocking scripts, content management systems, slow database, and slow web host.

1. Large image sizes can cause pages to be slow.

Before putting any images on the webpage, you need to optimize the size and quality of the image for the web.   What you want is to make the image have the smallest filesize as possible — less than 50KB is ideal.

This means using Photoshop or Firework to size the image down to the size that it is actually needed.   If you only need a 200 pixel wide image on your page, do not use an 2000 wide image (which is often the size that comes out of your camera) and just let the image tag width attribute resize the image.

Second, you want to decrease the quality slightly to reduce filesize.  It is often a trade-off between quality and filesize.  Image for the web does not need to be as high quality as images for print.  Again do this in Photoshop and Firework, and they will often indicate the estimated filesize per quality adjustment.

However, if your page has a lot of images, then even well optimized images can add up.  In that case, you can use advance techniques such as image sprites.  This technique lumps many images into one image in order to decrease number of server requests for images.

Although Flash content are not really images, you also want to check the filesize of your Flash swf files if you have any.   Sometimes Flash filesizes can be reduced by reducing the image sizes that the Flash is using.

2.  Blocking Scripts

When your site has a lot of scripts needed to do a lot of fancy things, it can add to the page load time.

Take a look at the types of scripts that are being loaded by each page.  Scripts can be calls to JQuery, Javascripts, YUI, mootools, etc.

Try putting the scripts at the bottom of the page instead of in the head if possible.  That way the page loads before loading the scripts.

If you are using JQuery script library, experiment with calling the JQuery library that is directly on Google’s free CDN (content developer network) instead of hosting the JQuery library on your own shared webhost server.    Sometimes Google’s CDN may be faster than your own webhost server, sometimes not.   It depends; so you have to experiment.

3.  Content Management Systems

If you are running a content management system such as WordPress, Joomla, Drupal, ExpressionEngine, and the like, they run an interpreted language called PHP.  The server has to parse and run PHP code.  This put additional overhead in page load times.

4. Slow Databases

Further, content management systems will be using a database on your server.  In fact, nearly each page load will be making one (and on occasions multiple) queries of the database.

If your database is on a shared web host where it services hundreds of websites, then the database can be overloaded.

5.  Slow Web Hosts

Shared web hosts are the least expensive category of webhost and they are entry-level web hosts.  They are the most common and most popular.   However there are some disadvantages of shared web hosts.  It is due to the fact that one server supports multiple websites — sometimes hundreds of sites. If the hosting company puts too many websites on one server, the performance of that server can degrade, causing your websites to load slowly.  If any website on that server experiences a huge traffic spike, it will affect performance for all the websites on that server, including yours.

Possible Remedies

If your own site is the one experiencing large traffic increases causing performance problems, it may be outgrowing the shared web host.  In that case, it may be time to upgrade to an higher category webhost.  The next step up is VPS, virtual private servers.   And the next step higher is dedicated servers.  However, there are advantages and disadvantages of upgrading to VPS as mentioned here.

It is an important decision and there is work involved in upgrading.  Before upgraded from a shared web host, you might want to try using caching technology if you are running a content management system.

Server-side caching helps eliminate the overhead of running PHP and querying the database and slow web hosts.   Instead of interpreting PHP and querying the database on every page load, it will generate static saved snapshots of those pages.   This will work great if your site does not have a lot of dynamic content.

In Joomla, make sure you turn on caching.  In WordPress, try installing WordPress SuperCache plugin.

There are two constraints that can limit the file upload size: 1) the code in the web application, and 2) the web host server configuration. The actual limit would be the lower of the two.

Setting Media Upload File Size in Joomla

If the web application is a content management system such as Joomla, then the administrator may be able to set the upload file size in the administrator settings. For Joomla 1.5, it would be in “Site -> Global Configuration -> System -> Media Settings -> Maximum Size”.

PHP Upload File Size

Linux web host server that runs PHP, has a PHP.ini configuration file. Among its configuration parameters are upload_max_filesize and the post_max_size. These can limit the maximum file size that can be uploaded to the server via a webpage regardless of the code of the webpage. So try fiddling with these two parameters in the php.ini file.

Note that there can be multiple locations where the php.ini configuration file exists. You may have to change it in more than one place. You can determine the values of the configuration file that are in effect, by placing a PHP file that displays phpinfo() at the desired location that you want to check. The phpinfo() display can also tell you the php.ini file location. Remember to remove this after checking.

The upload_max_filesize specifies the maximum size of the uploaded file.

The post_max_size sets the maximum size of posted data which affect the file upload site.

Because uploading large files require execution time, max_execution_time and max_input_time can also affect the upload. As can memory_limit.

Another parameter that might affect the upload is file_uploads. Make sure that parameter is set to be “1″.

Alternatives if unable to adjust Max limit of Upload File Size

Depending on the web host, some may not let you adjust the php.ini file settings. You can zip up the file to be uploaded and hope that the compressed size is smaller than the limit. Alternatively you can manually upload the file to the server using an FTP client. See tutorial on how to use the free FTP client FileZilla.

Many people are switching to Google Chrome as the default browser. Because Google Chrome had been the number three browser in the past. But now recently as of December 2011, Google Chrome have surpassed Firefox to become the number two browser — second only to Microsoft Internet Explorer.[reference]

So if you want to switch to Google chrome, see tutorial how to make Google Chrome your default browser.

This is according to ExtremeTech.com where you can see a chart of the StatCounter Global Stats.

In Lynda.com FileMaker Pro 11 Essential Training course, the “Touring the interface” video is especially helpful as it provides an introduction to FileMaker Pro’s four mode: Browse Mode, Find Mode, Layout Mode, and Preview Mode.

If you are already familiar with FileMaker and want to just learn the new features of FileMaker 11, then there is the FileMaker Pro New Features course.

Some companies are still using older versions of FileMaker, for those videos there are …
FileMaker Pro 10 Essential Training

and

FileMaker Pro 9 Essential Training

Ryan explains in this video how to first install Expression Engine 2.0

horizontal CSS tabs

View live code here.

Graphics Used

The graphics looks like this …

Default gradient tab: default_tab.jpg

Highlighted tab…

But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown.

Combined tab: tabs.jpg

Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any “flicker” that may occur if we had to wait for the browser to load a separate image for the hover state.

Page Structure

First, we will start out with a page structure on to which we will place our tabs to be sitting right on top of the gold nav strip.

page structure for horizontal tabs

The code for this page looks like …

code for page structure of CSS tabs

Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory.

Coding the CSS Based Horizontal Tabs

1. Start by letting the tabs be links in an unordered list…

And we get this …

2. Because different browsers may have different default margins and paddings for ul‘s and li‘s, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li’s that it contains.

3.  In the CSS, we remove the bullets that normally appears in the unordered list.  And we remove the underlines that normally occurs in the links for li’s.

4. The main characteristic about horizontal css tabs is that they actually be horizontal.  We make the list items horizontal by floating the li’s.  When we float the li’s, we need to give it a width.  We set the li’s to 88px by 23px since that is the size of our graphic image for one tab.

Now the list items are horizontal …

5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable.  This is done with the following CSS …

display:block;

6.  We set the background image of link to be the tab graphic.  We center align the text.  Finally, we stylize the link with a color and font size that is suitable to match the tab graphics…

And we get…

7. Notice that the tabs are much shorter than we would like.  In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic.  Therefore, we remove the “height” attribute from the “li” to the “a” selector rule.

And we get …

8.  The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link.  But when we add padding to the link, remember to decrease the height by the same amount since “height” in CSS is defined as “content height” and does not include any padding.

9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px.  Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width.

We also altered the link color upon hover to better constrast with the highlighted tab.

And here is what it looks like if you hover over the home tab…

10.  If we want the home tab to stay highlighted because this is the “home” page, then we have to add a class to the “home” link to make it different from the rest of the links.  We’ll give it the arbitrary class called “selected” and add the CSS selector rule as shown…

11.  We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead.  No problem.  With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower.  We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs.

And now it looks like …

12.  Let’s space the horizontal tabs apart by adding 10px right margin to the li element.

And we got our final product that looks like …

horizontal CSS tabs

And there you have it.

In this tutorial, we will show you how to use FileZilla’s “Quick Connect” feature to transfer files to a web server.

Although this method is the simplest way to connect, it is not the best because it transmits passwords and data over the internet route via “clear text”. Once you have learned the basics of FTP, ideally you will want to use SFTP which is a secured transmission of data as described in our other tutorial.

FileZilla Quick Connect FTP

Step 1: First download and install FileZilla from FileZilla-Project.org. Click on the “Download FileZilla Client” button. It is free.

Step 2: In order to connect to the webserver, you need three pieces of information provided by your webserver administrator: 1) the host name, 2) the username, and 3) the password.

In this example tutorial, we use these three fake pieces of information…

server: example.com
username: someone@example.com
password: 123456

Note that depending on the webhost, the username can in the form of an email address (but it is not a real email address) as in the above or it can be a single word as in “someone“.

Step 3: After you run FileZilla, enter the server, username, password and click the “Quick Connect” button as shown.

Quick FTP connect with Filezilla

Step 4: The pane on the left shows your local disk. The pane on the right shows your webserver. In the left pane, navigate to the files you want to upload. Using the left pane and then drag those files from the left pane to the right pane.

Step 5: When done, disconnect the connection to the server by clicking the disconnect icon.

More info…

• Hostmonster’s Video Tutorial on downloading and using FileZilla
• FileZilla Documentation
• Using FileZilla Site Manager to remember connection info