Recently, we discussed various methods for improving the WordPress theme performance and print styling. In this article, we discuss a few techniques for improving image performance.
Optimal Use of Web Optimized Images
When you have images to be embedded in a post, make sure that you resize it to fit your requirements. Sometimes you may just need to include a logo of the product you are writing about, or just a thumbnail size of a screen shot. You can align the image to the left or right of the text to make it fit to the content.
In some other cases, you will need to include a bigger image such as a graph or screen shot of the application being discussed. You can include the image and align it to the top or bottom of the content.
It is advised to optimize the image for web use. You can use tools such as Photoshop or GIMP, and export / save for web. Another option is to sue online tools such as smushit.com. I found smushit.com very useful.
Use Height and Width Image Properties
After downloading the HTML and stylesheet, the web browser try to render the page. If there are any images in the HTML, the rendering engine will need to know the size of it. So it is always better to specify the HEIGHT and WIDTH of the images. This helps the rendering engine display the content even before the images are downloaded. You could either specify the height and width using the HTML properties of the image or use stylesheet. (This is my understanding, correct me if I am wrong.)
[advt]
Host Images in a Subdomain
The HTTP/1.1 standard recommends that a browser session can open only 2 concurrent persistent connections per hostname to fetch the components of a page including the HTML, images, CSS, JavaScript, flash, etc..
Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion. [HTTP RFC]
Users can increase this number by editing browser setting in Windows registry for Internet explorer, or about: page in Firefox, or using similar methods in other browsers. As a web developer, we do not have control over increasing the number of allowed concurrent connections in the client computer.
Another solution is to have the webpage components hosted in different hostnames. For example, you can host your post / article images in img.yourdomain.com, theme images in themeimg.yourdomain.com, sponsor ads images at ads.yourdomain.com, videos in video.yourdomain.com, etc.. So a browser can make two connection each to each of the hostnames and the main domain.
At TECK.IN, I use teck.in/images to host all the images used in posts and sposnor ads. I created the subdomain teck.in/images pointing to the images or wp-upload folder of my WordPress installation. Then I ran an SQL script in MySQL to update all reference to https://teck.in/images/ into https://teck.in/images/ and clear the wp_cahche. Thats all I had to do. The pages are downloaded and rendered faster than before.
UPDATE ‘wp_posts’ SET ‘post_content’ = REPLACE(‘post_content’,”https://teck.in/images/”,”https://teck.in/images/”)
I added a redirection in .htaccess file to avoid any duplicate image problem in search engines. The following will redirect an request to the old location teck.in/images to teck.in/images.
RedirectMatch 301 ^/images/(.*)$ https://teck.in/images/$1
This method assumes that your hosting server has enough bandwith and bandwidth throttling. I think this is the case with most of the shared hosting servers like powweb, dreamhost and bluehost.
You could as well upload your images to image hosting services like flickr, imageshack, picasa, etc.. In such cases, you do not save the images in your server along with other content. That could be a drawback.
If you have a huge website and needs more image processing and image caching, you can look at using Amazon S3 to host your images, or try out Akamai services. I am not going into that topic, which is irrelevant to our reader community.
Be the first to comment