18
How to optimize your WordPress and blogs for speed - Pt 1
Category: Blogging, WordPressHave you ever visited a site or blog and waited, and waited, and waited for the page to load. It is one of the most annoying aspects of surfing the blog world (I would appreciate some feedback on my page load speed). The question is, how do I speed up the loading of my page? Over the next few days I will publish a series of articles on how to speed up your blog along with hints and tips to improve its look and feel.
Tip 1:
Images (photos, icons, images): Think! How important is the image you are using. Do you need a full size image or can you use one that has been reduced. The answer of course depends on your article. In a lot of cases a smaller image would be sufficient provided there was the option to a view the image full size. You don’t need to play with images, reduce their size or do anything fancy with the image itself. A simple change in the tags will reduce the size of the image. The addition of another tag will provide the reader with the opportunity to view it in full.
To reduce the size of a graphic you simply need to include a width command within the <img src> tag. For example, your tag may read <img src=”image.path”>. If you alter this tag to read <img src=”image.path” width=”100″>, the image will be reduced to 100 pixels wide - the height is auto adjusted. To include the option to open in another window, the following tag needs to be included before the <img src> tag. <a href=”image.path” target=”_blank”>. You also need to close the tag with the </a> after the image tag. The target = blank opens the image in a new window/tab. The full code then would read:
<a href=”image.path” target=”_blank”><img src=”image.path” width=”100″></a>
You can also add other options such as align=”left or right”, border=”#”, hspace=”#” and vspace=”#” inside the <img src> tag. These options allow you to define where the image is placed (left, right with text wrap), the thickness of the border (0 for none) and the amount of white space around the image (hspace and vspace where # = the number of pixels - typically 10). The smaller the image the faster your page will load.
Tip 2:
Page length. Some blog pages are simply too long. I must admit that mine is longer than I like. There are several options to reducing the length of your blogs front page.
The first option is to just reduce the number of posts. I have mine set to 15 - why? I don’t know. It was the default value and I left it that way. I will be reducing it 10. Thats 5 less articles or 1/3. If those articles have any images then then there may be a decent increase in load speed. In WordPress goto admin, options, reading and change the value.
The second option is a little more time consuming but works wonders on several levels. Reduce the length of the article. No, don’t cut the article back. If you use WordPress or similar then you can generally incorporate a <more> tag (read more) which only displays the article up to the more tag. I like to keep the full version of my top three or four articles and insert the more tag into the older ones.
If you have ten or so articles and use the more tag on the oldest six, you could reduce the front page length by up to 50%. A word of warning - make sure the articles have a great titles and the opening paragraph is a killer and really gets the reader to click on the read more tag. Some bloggers use the more tag from day one on all their articles. There are pluses and minuses. If your blog is popular or you are able to write great titles then this option could be for you. You can see that all my older posts have been trimmed using the more tag.
Tomorrow I will introduce more tips on getting more speed out of your blogs front page.
Hi! Just thanking you for your great advise. I also like the new design of your site. Although I have a blogger blog, I still think the advise will come in handy.
You know, I learn new things everyday no matter how long I’ve been doing this.
I never knew that the height would auto adjust if I only put the width in the image tag.
I’ve always put in both to resize images. Thanks for the great tip.
really helpful tutorials thank you
If you’re optimizing images on your site to improve speed, then your use of height and width is incorrect. The image is still downloaded at its normal size but you’ve now asked the browser to take another step by resizing it smaller than original. In effect, you’ve introduced additional work - not less.
See Size Images with Width and Height Attributes.
That said, there is a real benefit to setting the height and width tags. By doing so, the browser doesn’t have to wait for the image to download in order to continue rendering the page which is great for your readers.
Thanks for the additional comments on that and for the link
#robert
thanks for the information and link - it is very helpful and I appreciate any input - if I am misleading in my articles then it is always helpful to have some elses input to correct the error
have a great Christmas to all
NameCritic and les: I’m glad to be able to contribute to the conversation. Good bits of advice throughout the series, btw.
thats how we learn!
Trent, honey. You’re droning a experimental dream.
Excelent posts and comments. I wish good luck from Kredit