Page Speed and Your WordPress Theme
With a new emphasis on your site’s page loading time, you may find that your WordPress theme does not meet the standard.
The time taken to load a page into a browser is page speed, and the page speed value can differ depending upon the browser and the service being used to connect to the web. As WordPress is being used by more businesses as a content management system (CMS), I thought that discovering a means to improve page speed in their themes without the knowledge of coding may be helpful.
What effects page speed in your theme?
You have a very clever dog named Fido, who will do anything he can to please you. You tell Fido “Go get my red bike over in that bush.” Fido runs to the bush, where he discovers Rover wagging his tail. Rover tells Fido “I am the guy, who gets everything out of this bush for you.” Fido tells him, and Rover starts bringing the bike to him in pieces. Fido returns those pieces one by one to you. Putting them together as he goes. Eventually, you have your bike, but each time, Fido had to run to Rover, who had to run through the bush to find the parts.
This is what is effecting your page speed. Fido is your browser. You type in the command to fetch a site. The browser connects with the server (bush) and finds your theme (Rover) dictating what makes up the parts, which your browser pieces together. To do this, WordPress themes come with a set of commands that search your database for the information via a PHP request. PHP is the coding language, which you may not have time to learn, and you want to be one up on your competitor now (small business competition is brutal at times).
Most of the commands that slow down the loading time are located in your header.php. When a browser comes to a page, WordPress might tell it to go to the index.php to set up the page in the browser. The index.php tells the browser to obtain the data from the header.php. In the header, you will find commands which link to features that tell the browser how to behave, like the stylesheet(s).
If you download a free theme from me or another site, you will be able to add your own title, slogan, and maybe some other features through the administration settings in WordPress. In fact, many custom themes will use the same code that tells the browser to check the database. This makes little customizations in WordPress easy, and why the CMS is popular with small businesses, but this process does hurt you in page speed.
How to improve page speed for the non-coder.
This is what I came up with for editing your code to improve page speed. Log into your admin panel, and then visit the actual site through the link on top. When on your site, go to the option to view the code being generated. For example, in Firefox, you could go to View on the toolbar, then to Page Source. This will bring up a window that will show you the generated code the browser is seeing. Minimize that window. In your browser go back to the admin panel. Under Appearance, you will find Editor. Open up this page. Look for the header.php, and open it up. Now you are staring at a bunch of lovely code. Which may look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<title><?php if (is_home () ) { bloginfo(‘name’); } elseif ( is_category() ) { single_cat_title(); echo ‘ – ‘ ; bloginfo(‘name’); }
elseif (is_single() ) { single_post_title(); }
elseif (is_page() ) { bloginfo(‘name’); echo ‘: ‘; single_post_title(); }
else { wp_title(”,true); } ?></title>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/script.js”></script>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<!–[if IE 6]><link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style.ie6.css” type=”text/css” media=”screen” /><![endif]–>
<link rel=”stylesheet” type=”text/css” media=”print” href=”<?php bloginfo(‘stylesheet_directory’); ?>/print.css” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php printf(__(‘%s RSS Feed’, ‘kubrick’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”<?php printf(__(‘%s Atom Feed’, ‘kubrick’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”/>
<?php wp_head(); ?>
</head>
You will notice that there are many commands that have <?php bloginfo…; ?>. These are commands that tell the page to send a request to the database to find out what you typed in the admin panel. The program will check the entire database until it finds the data required. If you compare this to your minimized source code, you will find that these request produce the results stored in your database. You can copy the line of information form the source code view over the areas that generate that information. For example,<?php bloginfo(‘stylesheet_url’); ?> will become http://mywebsite.com/wp-content/themes/themename/stylesheet.css. You have to be careful to copy the code correctly, so place the above inside the “quotation marks”. Update the file when you are done.
You will notice that there are several other pieces of code, which do not match up to your header.php. If you look carefully, you will see that these are coming from the plugins, and editing them is another matter. By making the replacements above, your browser does not need another program to find the data, so page speed is increased.
Are there drawbacks to editing this code?
If your goal is increasing page speed, you will be amazed at how quickly it will be improved; however, you do loose some functionality of your WordPress installation. You have hard coded details into your theme, so what is typed into the settings section about your site’s info does not matter. If you are changing the site name, you have to go in to the header.php to rewrite it.
Yesterday, I saw a manager at a small business pull out a mop bucket to clean up a spill. “Didn’t know that I was a manager, did you?” she smiled. I replied that I had to do the same. Small business owners have to put on many hats, and if the internet is part of your marketing scheme, you may benefit from learning a bit of code, so you do not have to pay someone else to handle this for you.
Tags:
Are you serious? Each bloginfo is definitely not an extta database query, besides, WordPress automatically fetches the most common options during init, each time it’s processing a query. So you’re not doing any good removing the bloginfo calls.
Rather than crack your head open editing theme files and dealing with code, why don’t you just use a caching plugin that will reduce page load times? W3 Total Cache is a good one.
~ @kovshenin
First: yes I am. After having tested this idea on several themes, and checking what the load times would be for a dial up modem, I found this method to work. That is why I decide to post this idea to help small business owners who are not coders.
However, you are correct on one point that I should have mentioned in this post, but was planning to add in another post: you have to do more than what I just mentioned. Using a plugin like Super Cache is good, but it will not resolve all page speed issues by itself. I was going to suggest that people go to this site: http://www.prelovac.com/vladimir/wordpress-optimization-guide Many of the suggestions help optimize page speed in WordPress.