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 blog 5 Basic Web Designing Tips to Speed Up a 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=’https://healthntechinfo.tk/content/test1.js”></script>
<script src=’https://healthntechinfo.tk/content/test2.js”></script>
<script src=’https://healthntechinfo.tk/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  

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.