How To Optimize And Speed Up Your Blog

The content alone does not guarantee success of your blog. Fast browsing experience always plays a major role in retaining the visitors and giving them a reason to come back. Today a significant part of traffic comes from social media sites. These visitors generally exhibit high bounce rate. If our blog is sluggish, they are not going to give us a second chance. Let's see how to improve the load time and speed up our blog.


Optimize and Speed Up Blog


Optimize images


Pictures are an essential part of any blog. When we talk about image optimization, we generally aim for two things. 1. Reduction in size 2. Preserving the quality.

Reduce the size - by using Photoshop's 'Save for Web...' option. If your image is rich in color having various effects, use the .jpg format, else you can use the .gif format to reduce the size. Guilherme Z├╝hlke O'Connor (Web Design Specialist) shows how we can optimize images for web.

Specify image size in code - to prevent server using extra CPU cycles to know the size of image. Here's an example.


<img src="URL of image" width="100" height="100" alt="Image Description"/>

Specifying image size significantly improves the load time of the web page.

Optimize CSS


Since the emergence of cascading style sheets (CSS), they have become the cornerstone of web development process. Today, almost every CMS use CSS for robust, clean and high performing web site. However, sometimes we may introduce latency in page load time by inadvertently introducing unnecessary or redundant code in CSS files.

Remove white space/compress CSS - to reduce the size of CSS files. You can use various CSS compressing services to strip off all white space and hidden junk characters from the file. Use Clean CSS, which not only remove white space from CSS, but also optimize it by removing unnecessary or redundant code.

Use shorthand CSS - to further reduce the size of your CSS file. The code shown below introduces redundant code.


.section {
width: 160px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 15px;
}

Same code can be re-written as:


.section {width:160px; margin: 10px 5px 5px 15px;}

Before you compress your CSS files, keep a backup copy of original file. You may need this more reader-friendly version in future to add/modify the code.

Use External File For Scripts And CSS


Do not fill your HTML files with inline CSS and scripts. Group all scripts/CSS in separate files and include/call them from header as shown below.


<head>
<link rel="stylesheet" href="/theme/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/scripts/effects.js"></script>
</head>

This will reduce the file size and redundancy in code speeding up overall load time.

Compress JavaScript - to reduce the size and to optimize the JavaScript code. JavaScript Compressor is an excellent service for compressing your JS scripts.

Append Forward Slash ('/') In Permalinks


While specifying the default permalink structure in your WordPress dashboard, make sure you append forward slash '/' in the end as shown below.


/%postname%/
/%category%/%postname%/
/%year%/%monthnum%/%postname%/

Appending the forward slash at the end of URL clearly indicates the server that it is a directory page and no further look-ups are required.

Minimize Database Queries


There are some URL's and fields that rarely or never change during the lifetime of a blog. Instead of fetching them again and again from database, hard code them directly into your theme to speed up the download process. An example is shown below.


/* --- Original Coding --- */
<title><?php bloginfo(’name’); ?><?php bloginfo('description'); ?></title>
/* --- Replaced by static HTML --- */
<title>MintBlogger - Blogging Tips And Social Media</title>

Similarly, you can hard code all references to blog title, blog description, theme's CSS file path, comment RSS links and post RSS links. This will ensure reduction in database queries and load on server.

Minimize Requests To External Elements


Try to avoid flooding your sidebars with 3rd party flashy widgets. This will only increase the load time testing the patience of the visitor. Similarly, avoid hosting all your images, scripts and other components on any external web server to reduce the HTTP requests and load time.

Use Speed-Up Plugins


Use Wp Super Cache and PHP Speedy plugins to make your WordPress install respond quickly even during heavy traffic load. Both plugins are well known to speed up serving of web pages by caching web pages and by reducing the number of HTTP requests.

Analyze And Optimize


Use Pingdom full-page test to analyze the page loading action.

Pingdom Full Page Test

This test mimics page loading in browser and calculates the time taken by each component (including their total size) during the load process. Pingdom test helps in identifying the key elements responsible for slow loading of a web page.

YSlow is another excellent Firefox add-on tightly integrated with Firebug web development tool to analyze the elements of a web page.

YSlow Firefox Add-On

Combined with the power of Firebug, YSlow provides vital information about web page components and the reasons why the page is slow. This helps you in identifying the problematic elements.

Have Your Say


What other optimization techniques do you use to speed up your blog? What was your post-optimization experience in terms of traffic behavior and conversion?

Related Reading:

1. 5 Best SEO Tips For Bloggers

Image Credit: Eole

If you enjoyed this article, get email updates (it's free).

blog comments powered by Disqus

NEXT POST: Newer Post PREVIOUS POST: Older Post Home
 

About Rajeev Edmonds

MintBlogger author - Rajeev EdmondsRajeev Edmonds has been blogging since 2006 about digital marketing, social media and of course about problogging. He specializes in WordPress installation and Thesis theme customization. He is the founder and editor of MintBlogger where he blogs about new media strategies.

Since April, 2012, he's making his living entirely from his blogging efforts. He holds a post graduate degree in computer applications and loves to dig in CSS/HTML code. Read more →

Get Custom Design For Your Blog

Website showcase Nothing converts better then a unique blog design with a branded look n' feel.

Get a unique design for your blog that brings more leads and prospects for your business. Give a new skin to your existing theme to stand out in the crowd. Change theme and see the difference!

Request a Free Quote NOW!

Start Your WordPress Blog

WordPress logo Are you planning to start your own self-hosted WordPress blog? You can get one today!

This is right time to get started. Claim complete control over your WordPress blog hosted on a reliable and powerful web server. Be the owner of your WordPress blog without any restrictions.

Claim Your Free Blog Setup NOW!