In this tutorial we are going to cover what changes help change your website from being a slow low ranking site to a race horse. Lately Google has been making many changes to make the web better, one of the main updates is the * Google Panda* updates which stops against duplicate content. But the update we are looking at today is speed, Google takes speed into account when ranking you in the search results and visitors tend to leave you site if they have to wait more than a couple of seconds. For both these reasons you can see how important page loading speed is to the success of your website. This website uses Wordpress as the CMS so we are going to use this as an example to see how you can speed your site.
Before Making Changes
Before we started making any changes it's good to find out what your starting speed is, below is a screenshot from pingdom which says Paulund took 5.80 seconds to load and needs to download 219kb of data.
1. Picking A WordPress Theme
Picking the right Wordpress theme can make a huge difference in the speed you see from your site. You need to make sure that the CSS, JS and images on the theme are optimised for the web. If you purchase a premium theme then you would hope that this is all taken care of, but even premium themes won't be as quick as custom made themes. You need to look at the purpose of your site and choose the right theme for what you are trying to delivery. For example if you are a photographer then you will want to display your images on your website, so you need to make sure that these images are optimised for your website. One way to making sure that your images are optimised is to reduce the size of the image in Photoshop or use an image service like JPEGmini. For your CSS and JS there are multiple ways to optimise these:
- Combine all CSS into one file.
- Combine all JS into one file.
- Remove all comments and line breaks in your CSS and JS file.
2. Changing Your Wordpress Theme
Looking into my last theme I really liked the theme it looked modern and was good for the niche of my website. But the problem was that this site is all about the content. When a site is all about the content then it is very important that the website loads quickly and the content can easily be seen. The change to the new theme needed to have a larger content area, with larger font, less images with a clean, quick design. Making these changes made a huge difference to the speed of the site. It went from 9 seconds to load the page to 5 seconds, this is a massive improvement but still 5 seconds for a website to load is not good enough for a content site where the visitors want the content quickly.
3. Why Is Page Speed Important?
Some will concentrate on the design of the website even if the page speed is affected but I feel that the speed of the site is so important. The main reason why the page loading speed is so important is because it creates a better user experience for the visitors of your site. The search engines also understand that page speed is vital attribute to a successful website, your visitors won't stick around on your site if it takes 10 seconds to load a page. This is why search engines will now use page speed as part of algorithm which decides where your site rank in the search engine, so all you have to do is speed up your site which creates a better experience to your visitors and improves your position in the search results. Use this tools to see how your sites speed shapes up.
- Page Speed, an open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement.
- YSlow, a free tool from Yahoo! that suggests ways to improve website speed.
- WebPagetest shows a waterfall view of your pages' load performance plus an optimization checklist.
- In Webmaster Tools, Labs > Site Performance shows the speed of your website as experienced by users around the world as in the chart below.
4. Speeding Up Your Wordpress Site
Wordpress sites are very popular with lots of information on them and they are all fighting to be top of the search engines so why not give your site a boost by speeding it up. Here we are going to go through some of the things you can do to speed up your Wordpress site. - Remove Unwanted Plugins
- Optimize the Wordpress database
- Add the right Wordpress plugins
- Using Cloudflare
- Install A CDN
5. Remove Unwanted Third Party Wordpress Plugins
Wordpress plugins allow you to add extra functionality to your Wordpress site, but adding extra functionality will slow your site down. It adds more code to run before the server can display your pages, more code equals longer loading times so try to remove some plugins. Make sure your only left with plugins that you actually need for your site to function. If you have to use additional Wordpress code to perform different my advice is to create your own then you know exactly what code is running, below are Wordpress snippets you can use either add to your functions.php file or try them into WordPress plugin.
Add Google Analytics
Some people will use a plugin to add Google Analytics code to your site, but you don't need a third party plugin to do this it can be done with the following snippet, just simply create your own WordPress plugin with the following.
add_action('wp_footer', 'add_googleanalytics');
function add_googleanalytics() {
// Paste your Full Google Analytics Javascript here within a php echo
}
There is a Wordpress plugin just to redirect all your feed URLs to your feedburner URL, use the following snippet to redirect to your feedburner URL with htaccess.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC]
RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds2.feedburner.com/Paulundcouk [R=302,NC,L]
</IfModule>
Automatically Add Google+ Button After Post
You might want to add a Google plus button to the bottom of your content.
add_filter('the_content', 'google_plus');
function google_plus($content) {
$content = $content.'<g:plusone size="tall" href="'.get_permalink().'"></g:plusone>';
return $content;
}
add_action ('wp_enqueue_scripts','google_plus_script');
function google_plus_script() {
wp_enqueue_script('google-plus', 'https://apis.google.com/js/plusone.js', array(), null);
}
Get Related Posts For Wordpress Post
Most blogs display all the related posts after the current content. Most people would use a plugin to automatically add this for you or use the following snippet.
<?php
//for use in the loop, list 5 post titles related to first tag on
//current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo 'Related Posts';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="
<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></p>
<?php
endwhile;
}
}
?>
Display Breadcrumbs On Wordpress Post
Breadcrumbs helps your visitors navigate to related areas of the current page. Use the following snippet to add breadcrumbs without a plugin.
function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> » ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}
Add Popular Posts In Wordpress
Display your popular posts to your visitors with this following snippet.
<ul class="popular_posts">
<?php $pc = new WP_Query('orderby=comment_count&posts_per_page=10');
while ($pc->have_posts()) : $pc->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<p>Posted by <strong><?php the_author() ?></strong> with <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></p></li>
<?php endwhile; ?>
</ul>
6. Optimize Database
Optimizing your MySQL database can make a huge difference in the speed of the queries in your MySQL database. There are two ways of optimizing your Wordpress database, you can either do it manually by logging into your phpMyAdmin screen or you can add a plugin to do this for you.
To do this manually in phpMyAdmin, login to your database, select all the Wordpress tables, select optimize from the drop down and optimize all the tables in your database. If you would prefer a plugin to do this there is a good plugin from Joost De Valk from Yoast called Optimize DB. Optimize DB
7. Reduce Calls To Wordpress Database
As Wordpress is a CMS all the text and content on the page should come from the database, this is so the content editors can easily change any part of the page. The problem with this is that to create the page and populate it with content it will need to make a number of different queries on the database. There is lots of different information that Wordpress uses to create the page, some of this information can be hardcoded as it is unlikely to change. This is why custom Wordpress theme are still better than using premium themes, custom themes means you can hardcode content on the page as it is only used on your site. Lets look at the header.php to see what data we can hardcode. It's common to have meta tags in the head to tell the browser how to render the page.
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
This can be changed by removing the calls to bloginfo function and just hardcode the values you want.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
The title tag is somewhere that you would normally display the name of your Website, in Wordpress it will again use the bloginfo function to get the name of the blog. Most of the time this is never going to change so you can remove the function and hardcode your blog name.
< title ><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></ title >
This can be changed to
< title > <?php wp_title('|', true, 'right'); ?>Paulund</ title >
Another common function to run is the bloginfo('stylesheet_url') which is used to get the stylesheet for the blog, but if this never changes it can be hardcoded as well. ## 8. Reduce Wordpress Image Sizes With WP Smush.it
Wp Smush.it is a Wordpress plugin that will run when you upload a new image to your media library. - Stripping meta data from JPEGs
- Optimizing JPEG compression
- Converting certain GIFs to indexed PNGs
- Stripping the un-used colours from indexed images
Smush.it offers an API that performs these optimizations (except for stripping JPEG meta data) automatically, and this plugin seamlessly integrates Smush.it with WordPress. Every image you add to a page or post will be automatically run through Smush.it behind the scenes. You don’t have to do anything different. Download WP Smush.it
9. Install A Cache Plugin
Installing a Wordpress cache plugin will allow you to cache all sorts of things, from output HTML, database, CSS, JS and will increase your page speed. I recommend using W3 Total Cache, which you can get from the Wordpress.org site. W3 Total Cache W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.
Benefits Of W3 Total Cache
- At least 10x improvement in overall site performance (Grade A in YSlow or significant Google Page Speed improvements) when fully configured
- Improved conversion rates and "site performance" which affect your site's rank on Google.com
- "Instant" subsequent page views: browser caching
- Optimized progressive render: pages start rendering quickly
- Reduced page load time: increased visitor time on site; visitors view more pages
- Improved web server performance; sustain high traffic periods
- Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and feeds
10. Use Cloudflare
The next service to setup is a Free CDN called Cloudflare. Cloudflare works by you changing your domain nameservers to point at it, now all your traffic will run through cloudflare. Now they are able to help protect and optimize your website. Your visitors are routed through there global network of servers to delivery the content at the highest performance. CloudFlare's system gets faster and smarter as the community of websites grows larger. They have designed the system to scale with their goal in mind: helping power and protect the entire Internet. Have a look at the full features list that Cloudflare have to offer. Cloudflare Features## 11. Install A CDN
CDN stands for a content delivery network or content distribution network. These are a series of computer servers containing the same data but are stored in various places of a network. Content Delivery Networks increases performance by being able to cache data and distribute it from various locations of a network, therefore reducing bandwidth and increasing performance. In terms of the web, if a website uses a Content Delivery Network it would have multiple servers located around the world which can be used to distribute the content of the website. When a visitor navigates to the website the Content Delivery Network will find the nearest server and distribute the content from here. My web hosting company is located in America, so without a Content Delivery Network all of the content on my site will come from servers located in America. If a visitors navigates to my site from outside of America it will take a longer time for the content to be delivered than if your ISP was located in America. A Content Delivery Network will make this redundant…where ever you user navigates from they will be getting local content and therefore decreasing page loading times. It is known that a Content Delivery Network can increase website performance by up to 10x times. You can see how important having a Content Delivery Network can be to your website. For Paulund I use the CDN service MaxCDN. MaxCDN