Wednesday, November 02, 2016

The Only 4 Points, I Keep in Mind While Designing to Get a Lightning Template!
The Only 4 Points, I Keep in Mind While Designing to Get a Lightning Template!

I hope you've liked the template I am using right now on blogger guider.

It's not a template that I have bought from somewhere. It's a custom template, created by me.

It opens quickly. No?

To let you show this template is "lightning fast", I should attach the following image:

Designing to Get a Lightning Template

So, in this post, I thought, we need a "really" working post about how to design/make your blogger template load faster.

Yes, of course, there are already thousands of posts available about this issue, but, here, you'll get better and more practical tips with elaborated info. :)

So for what you're waiting for? Scroll down!

P.S. To find all the methods for reducing blogger's template that I ever found, just head towards the second last section of the post. :)

1. I Use Fewer Fonts - Even Less Than Required!

Okay, go on the Developer tools, and you'll find that we have used total - 3 fonts.

First, Oswald; Second, Product Sans; Third, Century Gothic.

Listen, let's say I had used seven fonts because browser loads Product Sans:400, Product Sans:600, Oswald, Century Gothic:400, Century Gothic:400i, Century Gothic:600, Century Gothic:600i separately.

When I was creating this template, I had almost added a big bunch of fonts (more than twelve fonts).

Then, when I finished creating the template, I removed some fonts and considered using System fonts like Open Sans (you can see it in some elements of the template).

This reduced the overall page loading speed.

Then, what I did further with fonts is, the trick to reduce HTTP requests.

For example, I had used three fonts in the template and those were fetched using the following codes:
<link href='https://fonts.googleapis.com/css?family=Product+Sans:400,600' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Century+Gothic:400,400i,600,600i' rel='stylesheet'/>
So see, we just made three HTTP requests. What can we do now? Let's see:
<link href='https://fonts.googleapis.com/css?family=Product+Sans:400,600|Oswald|Century+Gothic:400,400i,600,600i' rel='stylesheet'/>
Now see. The browser will still load all of the fonts but, without making three HTTP requests seperately for all the three fonts. This greatly reduces the page load time!

Enjoying this post? You might also enjoy: Why The Hell People Are Not Reading Your Blog? — Top 6 Reasons Revealed

2. I Use Fewer Image - And Do Not, Without Compressing!

Yeah, you're blogging.

But doing a thing that doesn't need many efforts, I mean, just a minute can bite you? No!

I am just advising you compress your images well before adding them to your blog. The images you make, I mean save to your hard drive, contain more pixels, than your visitor needs to get attracted towards that picture.

So, there's no harm in reducing those pixels that what we call "Compressing Images".

You can do so easily be just following these steps:
  • Go to Optimizilla.com
  • Upload the images that you want to compress (there's a dark green button)
  • Now Optimizilla will compress your image, and you're good to download them, upload at your default image uploading service, i.e., Blogspot Uploading Service!
P.S. Compressing images also helps in increase Pagespeed score.

One more thing you can follow to reduce your loading time further is- reduce the number of the posts that are to be showed on the homepage. This decreases the number of thumbnails (or you can even disable posts thumbnails, but that won't be good for your blog's design).

Would like to read more? 6 Killer Ways to Get Maximum Shares in Your Blog Posts!

3. I Keep the JavaScripts at the Bottom

I can bet you. Go to any Blogger templates online store, download any free template, you'll find JavaScripts.

It's so common in Blogger template nowadays.

But, should it ruin your visitors' experience? No, not at all!

That's why I would recommend moving all the JavaScripts that your blog's template contain before </body> tag.

The most important thing in your blog is, its posts, you know. So, your posts' text must load instantly and then after it; other JavaScripts should load in the background and keeping all the JavaScripts at the bottom will do the same task.

Now, the time for the pro tip. For externally hosted javascript, use async="" attribute as follows:
<script type='text/JavaScript' src='http://abc.com/def.js' async=""/>
Got it? It'll help you a lot in reducing the load time of your blog because it asynchronously loads the JavaScript files!

4. I Never Use Useless Plugins

I'm giving you some work. Please? Will you do it?

Scroll this page up and down and count the total number of share buttons across the page. You'll say 11. Five floating, and six below the posts.

Any other plugin? Oh! There are. One, auto read more; and second, related posts widget.

End.

So there are three plugins that we're using.

What about you?

When I start using templates, I remind that "I have to use a related posts widget, an auto read more widget and a sharing widget either of AddThis or GetSiteControl."

And so, I never use widgets except these. Yes, I sometimes use some others but for 1-2 days or for sometimes, one week.

But I've seen people using 20-30 sharing buttons on a page. Some below the posts, some floating, some pops-up after you scroll a little and then when you scroll some more, a full-screen pop-up appears, asking if you would like to share this post.

I've seen people, and I am pretty sure you're not one of them. 

But, if I am wrong, then please, do not use plugin excessively. Use them just as an "option" for visitors; not as "tools to force readers".

Read other related posts:

We've got some other blog posts which would help you to further decrease your blog's loading time:

Final Words

I hope you've liked this post.I've written a post, really, after a very long time. And by the way, Happy Diwali to all of you! I hope your Diwali went well and you're all safe and enjoyed well. Now, I want a Diwali gift from you. You know, that's just your Share! Thanks!