There are many useful tips on the web on how to optimize your WordPress blog. Some of them are good but they are hard to implement by the average user. From my blogging experience I want to share with you the tips that can make your site faster. I will start with optimizing the template file because this is the first important step in speeding your WordPress blog. So we will have a pre WordPress optimization (XHTML/CSS) and the WordPress optimization section.
For this purpose, a standard web designer/developer should have on his/her working machine Firebug and Web Developer Toolbar – two of the most important web development and debugging tools ever. Also keep in mind that this post is dedicated to those with no possibility of configuring PHP or MySql due to the hosting provider constraints. And here we … go
1. Optimize your HTML code inside your template
This is a step that is not considered important, when in fact this should be on top of your list. It is very important that your HTML code is close to compliant, and that you don’t have redundant code. Take your time and make sure your theme is written with minimal amount of code. Don’t overuse tags like div or span.
2. Compress your CSS
I will continue with the template construction but on the styling side. That means the CSS code. In order for your site to be faster there are several tricks that you can apply on CSS:
– write CSS shorthand code. For margin, padding, background, border, font and list-style try to use the shorthand version if it helps you.
– use small names in classes and ids. Every tiny letter counts for the time response. So it is helpful for the size of the CSS to have simple and short names as classes and ids instead of long descriptive names.
– avoid complex selectors. Try and target your tags and elements in the most simple manner in order to stylize them.
– compress your production CSS file. After your CSS file is finished, you can gain additional speed by compressing the file using online compressors. At the same time, keep a backup file that is easy to read and to maintain.
3. Use CSS Sprites
Instead of using multiple graphic files for your blog, try and assemble as many as you can into one single image. Then, using CSS’ background-positioning you can display the elements that you want. In the case of CSS Sprites, the file-size for one image is a little bit smaller and also the number of the HTTP requests is reduced.
4. Avoid 404 errors
This means that in your WordPress blog you should have everything in its place. For this you will have to start with a favicon, because browsers are always looking for a favicon. Keep your broken links at 0. So whatever you do, keep your 404’s away from your site.
5. Make fewer HTTP requests
6. Avoid loading external elements
7. Front Page size must be under 150KB
In order to perform this task choose Information from the Web Developer toolbar and select “View Document Size”. This will show you the size of your page and the elements that are part of it like CSS files, images, scripts etc. Try and keep all o these components to a maximum value of 150KB.
8. Display summary instead of full article
Another way of optimizing your front page is to show only a portion of your article. In this way you can show only a few hundreds characters and your site’s loading time will decrease.
9. Reduce the number of installed plugins
Most plugins have their own css file or even images. So it is better to keep the number of installed plugins down. In this way you will reduce the number of HTTP requests.
10. Display 20 images maximum on first page
This goes also with the HTTP request rule. The thing is that images can extend the loading time and it is suitable for you not to use more than 15-20 images. Regarding a single article, the maximum number of images should be 5. In this way you can obtain cleaner posts and a faster WordPress blog.
11. Clean your sidebar
Things like calendar or blogroll are not suitable for every Worpress blog. And these components can decrease the speed of your blog as well. You can disable them by removing the code from your WordPress template. So, the main idea is to clean up your sidebar.
12. Harcode some of the template tags
When you know the paths for certain elements, you can hardcode instead of using the WordPress template tags. In this way you can reduce the loading time of your site. For example, instead of using the stylesheet template tag
< ?php bloginfo('stylesheet_url'); ?>, you can place the hardcoded path: http://www.yoursite.com/wp-content/themes/YourThemeFolder/style.css
< ?php bloginfo('name'); ?>
< ?php wp_title(); ?>
< ?php bloginfo('stylesheet_url'); ?>
< ?php bloginfo('pingback_url'); ?>
< ?php bloginfo('template_url'); ?>
< ?php bloginfo('version'); ?>
< ?php bloginfo('atom_url'); ?>
< ?php bloginfo('rss2_url'); ?>
< ?php bloginfo('url'); ?>
< ?php bloginfo('name'); ?>
< ?php bloginfo('html_type'); ?>
< ?php bloginfo('charset'); ?>
13. Boost your WordPress with .htaccess
This is another way that you can add speed to your WordPress blog. Based on your website settings and workflow, you can customize your .htaccess using this information: Ultimate .htaccess Tutorial. There you can find information regarding caching, headers, gzip compression etc.
The reason for this post was the amount of WordPress blogs that are available on the Internet. Their number is increasing and most of those blogs are using entry level hosting with monthly fees of up to 10$. Those kind of hosting services are not fast, but with a little help inside HTML, CSS and WordPress, the speed of WordPress blogs will increase. Hopefully this article will help many bloggers in speeding their blogs.