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.
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.
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?
0 comments:
Post a Comment