5 Basic Web Designing Tips to Speed Up a Blog

The speed of your blog is critical to your blog’s success, and here are some tips to speed up a blog. No visitor of yours is going to wait for 5 minutes when your blog loads. In today’s world everything is changing and speeding up. And you and your blog should speed up as well. The search engines crawl blogs more effectively which has more speed. The crawlers work on a budget. If it spends too much time on your large files then it wouldn’t tips to speed up bloghave time to crawl the rest of the content of your blog. The search results are also effected by your blog speed. If you have a slow blog, chances are that you wouldn’t rank among the top results. So, you should be proactive when it comes to your blog’s speed. Here I’m just going to discuss some very basic web designing tips to speed up a blog which includes CSS and Javascript modifications and how to make them load faster.

1. Combining your Javascript Files

This is one of the most easiest way to decrease the loading of your javascript files. The disadvantage of that having multiple javascript files is that if you have ten of them and each of them makes a separate request to the server, then it increases the blog’s load time.

For example, if you have 3 javascript files that sends request like this.

<script src=’http://bloggersmakemoney.com/wp-content/test1.js”></script>
<script src=’http://bloggersmakemoney.com/wp-content/test2.js”></script>
<script src=’http://bloggersmakemoney.com/wp-content/test3.js”></script>

You should consider combining them into a single file say test4.js and then requesting it like the above. It saves time because now instead of three only one request is being sent to the server. Combining them simply means that you should copy and paste them in a single file.

Javascript files are small. When I combined ten of my syntax highlighter files with two additional ones then it only turned out to be 56KB. So whatever time is spent in loading the javascript is in the requests.

2. Scaling Down your Images

Scaling down images is very important because images take the most time to load. Most of the bloggers usually make the mistake of uploading a large image file and then display it in their post in a miniaturized from. What they don’t understand is, it is only being shown in a small form but actually the time taken to load is the same as that of the original size and it also eats up your bandwidth.

So, when uploading your images, you should either crop it and keep only the important part or you can shrink the whole image by reducing it’s dimensions.

3. Create CSS Sprites of your Images

CSS sprites reduce the load of the images considerably. When there are multiple requests for images, CSS sprites should be created. It involves combining all of the images into a single image and then displaying only that part of the image which is required.

For example, if you have ten images being served from the same server but with separate requests, this approach would be appropriate because instead of ten, you then would only have one request.

You could try the Spritepad to create CSS sprites online. It’s very easy. You just have to drag and drop your images. They will even provide you with the CSS code which you can use on your blog to display the image.

4. Minifying CSS and Javascript

Minifying CSS and Javascripts have the same effect of reducing your load time and latency thus, enabling faster browser loading and execution.

There are lots of tools on the internet which can help minify your CSS and Javascript codes. But the two tools that Google recommends are YUI Compressor and CSSMin.

5. Use HTML Hexadecimal Colors instead of Images

tips to speed up blog This is my personal favorite and I use many such colors on my blog. I haven’t seen anyone    recommend this on the internet. But I have found this very useful.

In many blogs, I have seen that designers use images as background for navigation menu  and other plugins. I used to do it too. But, instead use hexadecimal colors which might not have the exact same effect (could be created using CSS effects) which saves a lot of requests and time.

W3schools have an extremely useful hexadecimal color mixer which is my favorite. It basically lets you mix two colors and they will also provide the code which you can use easily. If you want to create the same effect you could easily use CSS codes to create shadow and other effects. This will increase the overall efficiency of your blog and you will also get to learn something useful.

Well, that’s about it. There are many other ways to speed up your blog. But these ones have the highest priority and everyone should follow these simple tips.

Do you have any other tips in mind ? Don’t hesitate to share your views with us in the comment section.

Lahaul Seth is an engineering student who loves surfing the internet and loves writing articles on blogging tips , widgets and social media. He is also a programmer and a web designer. He mostly writes on his blog – Blog Tips Codes. He has recently launched a new WordPress blog – Lion Blogger

Facebook Twitter LinkedIn Google+ 

Google+ Comments

Comments

  1. This is realy one of a good tips I am waitng for. I hope this will increase the effectiveness of my blog especially in loading. It is true that it is boring to wait for any blog loading. In fact most visitors dislike this slow loading. Consequently we must make up our blogs faster when they are loading otherwise the visitors will leave our blogs. Thank you Lahaul…

  2. Google Page Speed helps me to speed up all landing pages. Besides online version there is a one available for download. Well, it’s actually not a stand-alone plug-in but a part of “Firebug”.

  3. Glad you found this post helpful, Heru. These are some of the basic steps. I hop you can speed up your blog with these steps.

  4. I recommend to use Less CSS and also minimize image size.
    Also use JavaScript in separate files, it would be great help for blog speed.

    Thanks

  5. Great tips, but dont forget about things like caching and PHPaccelerators for that extra kick!

    • Yeah, caching is a good idea too. There is also defer parsing of javascript. I didn’t mention the point because I haven’t used it myself.
      Thanks for the comment, Rand.

  6. I have wanted to create sprite image for my website for some time now, but I am unsure of how to do it. Thanks for letting us know about Spritepad, it looks like I might be able to create a sprite image using the Spritepad service. I am going to give it a try.

  7. Hey,
    The more plugins you have, the closer your blog to being slow. Most plugins have their JavaScript scripts files and that makes it difficult to combine these into 1 as you pointed out above.

    Nice tips however ;)

  8. You can minimize the Javascript used in your web pages. If it is affordable, use CDN for faster caching. Don’t ever use flash scripts inside your pages.

    • Minimizing javascript is effective but compressing it is not always a good idea. I recently tried to compress some javascript file after combining them. Some were working and some were not working at all. If someone doesn’t want to spend money on a CDN, there is the Cloudflare CDN which is pretty good I must say. I have been using it for a couple of weeks now.
      Thanks for commenting, BTW. Keep visiting.

  9. Nice list of very specific design tips, many WordPress blogs that are very plugin heavy like my own are stuck with each plugin loading it’s own javascripts, 30+ plugins is 30 separate script and there is no easy way to combine them, so for those who have performance issues know that the # of plugins you have greatly impacts the performance of your pageload times.

  10. Speed is something many web designers seem to ignore when they design a website. Caching page has helped me a lot with website speeds. Also, I liked your tip about using hex code for images, however, it is mostly a challenge to replace hex code with real images. Not sure how to do that.

    • Hi Jenni,
      Some images which uses a single color with some effects over it like shadow or something like that can be done using hex code colors with CSS. It will load much faster. And if you’re using images with pictures and stuff you could always creates sprites. That way, it will be more efficient.

  11. Awesome post Lahaul, javascript is usually the culprit when we talk about slow load times, thanks for all of the helpful tips you provided in this post, its appreciated!

  12. Spot on, I know I have to address these things asap! Thanks for the reminder.

  13. Really a very helpful post. I was already using smaller sized images, and was combining javascripts, but did not know that there can be so many things.

    Now, after reading your article, it seems that there are a lot of things that are yet to be done. Thanks! :D

  14. On optimizing images — the plugin WP-Smush it can help you with this. It runs as you upload images so there is a slight delay.

    Also take a look at the GTMetrix tool. After it runs it provides recommendations that can speed up your site.