5 Clever Ways to Improve Your Blog’s Loading Speed

September 13, 2013 by Daniel Sharkov|

There is a wide variety of elements that determine how fast or how slow your blog will load. Some of the ones that you have a more direct control over include the blogging platform that you are using, your hosting provider and how well-optimized your theme is.

For instance back when my blog ran on the Blogger platform and its self-hosting,
I experienced a loading time that was a lot faster than after I moved to WordPress. As we all know however WordPress is the more flexible of the two, so sacrificing those few seconds of loading is worth it.

The problem is that loading time has a big impact on user-experience and lately on SEO as well…

In fact a study conducted by KISSmetricsrevealed that for every second of delayed loading a company that is earning $100,000 per day can lose
as much as $2,5 million per year due to decreased conversion rates (7% less).

Basically it turns out that if your blog takes four seconds to load,
you have already lost 25% of your visitors. That number increases to around 35% for a blog that takes ten seconds to display:

This means one thing – every single second is precious, so you constantly need to look for ways to make your blog display a little faster. With that idea in mind in the below paragraphs I talk about six not-so common ways to improve your blog’s loading speed and thus keep more of your visitors engaged.

1. Limit Sharing Buttons on Home Page

After doing some testing on my blog’s loading (using a tool called Pingdom), it turned out that most of the loading was due to the sharing buttons I had.

Even though having a Facebook, Twitter, Google Plus and Buffer buttons is important if you want to maximize the chances of your content being shared on the social networks,
that will certainly cost you increased loading.

Of course totally removing the buttons is out of the question. What you can do however is include only one or two of them on the homepage and reveal the rest on the blog post page itself. After all chances are people won’t share a post directly from the home page as they would first want to read a few lines at least.

So how do you do it?

There are a couple of ways to approach the problem.

First if you are using a WordPress plugin like “ Really simple Facebook Twitter share buttons“, you could activate all buttons you would like to see display on an article page. Then using CSS you can target the home and category pages with a few lines of code and remove some of the buttons from displaying there. Here is an example code:

.home .really_simple_share_buffer,.home .really_simple_share_google1,.category .really_simple_share_buffer,.category .really_simple_share_google1{display:none}

The problem here is that the buttons’ Javascript will still be loaded.

So you won’t really reduce loading time,
however you will make the page display faster , since those elements won’t be visualized. That way the page will look to the visitor as it has taken less time to load. You probably know that people tend to wait for all elements that look glitchy due to the loading to display properly until they scroll down.

NOTE:
The same approach can be applied for other plugins that add sharing buttons. You only need to identify the CSS classes for the different buttons.

Second approach is if you have the Genesis Framework.

First task is to remove all sharing plugins that you might have. Second is to install the Genesis Simple Hooksplugin. That will give you easy access to pretty much all parts of your theme. In our case we will add sharing buttons above the post headline section and below the post content:

To do that go to your WP Dashboard, Genesis and click on Simple Hooks. Now using CTRL+F look up genesis_after_post_title and paste the following code in the field:

&via=DanielSharkov&text= ” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

&via=DanielSharkov&text= ” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

&via=DanielSharkov&text= ” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

ID)); ?>&layout=button_count&show_faces=false&
width=450&action=like&colorscheme=light” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

Now look for genesis_after_post_content and paste the following lines there:

&via=DanielSharkov&text= ” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

ID)); ?>&layout=button_count&show_faces=false&
width=450&action=like&colorscheme=light” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

NOTE:
Make sure to find via=DanielSharkov and replace that with your own Twitter handle. Also make sure to tick Execute Shortcodes on this hook and Execute PHP on this hook

Now it’s time to add a bit of styling to those elements. Go to your stylesheet and apply the following CSS:

.social-button{
position:relative;
z-index:999;
height:32px;
margin:0 8px 20px 0;
padding: 12px 4px 0 0
}
.home .single-share,.category .single-share{float:none}
.single-share{
background:#f2f2f2;
border:1px solid #ccc;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:21px
}
.social-button#twitter{width:105px}
.social-button#facebook{width:89px}
.social-button#googleplus{width:89px}
.social-button#buffer{width:103px}
.social-bottom{margin:0 0 41px}

This second approach is better since  this time
the buttons are not loaded at all. That way you effectively make loading faster unlike the first approach where you only make it LOOK faster. With a bit of tweaking the above code can be used on other WordPress themes.

2. Use Iframe Versions of Share Buttons

Did you notice the code I used for the share buttons above?

Well lately I’ve been having a lot of trouble with the loading of my sharing buttons. They were just making the whole page freeze for 5-6 seconds, which really is unacceptable. And the problem proceeded notwithstanding that I had both a caching plugin and CloudFlareenabled (a free content delivery network you should sign-up for if you haven’t).

So I started looking for a solution.

You see, normally when you go to Twitter to get the code for the button, that code uses Javascript. It’s the same for Facebook. I however did a bit of research and found iFrame versions of those same buttons.

The difference?

iFrame loads almost instantaneously unlike Javascript, HTML 5 or XBFML.

So to add those buttons to your WordPress blog, you can follow this great tutorial by Kristi Hines, except that for the Twitter button you use the following code:

&via=DanielSharkov&text= ” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”>

Unfortunately I could not discover any other social sharing buttons that also have an iFrame version, so you will have to stick with only these two. You will still see a good loading speed improvement nonetheless.

NOTE:
If you still prefer using a plugin to display the buttons, I’d suggest you try Flare– a plugin that loads the share buttons only when needed.

3. Optimize Your Plugins’ CSS

Make sure to backup the files before applying this approach. Another problem is that you will have to do it every time a widget has been updated, since the old files are being deleted and replaced with new ones.

By optimizing I’m referring to nothing more than going through some of your plugins’ CSS and removing things like comments and line breaks.

Plugins worth editing are only the ones that add functionality directly to your blog and not your WordPress dashboard. For instance that includes a plugin displaying popular posts, a contact form plugin or a plugin that adds sharing buttons.

So here’s the step-by-step process you need to follow:

Once on the plugins page, select the plugin you will optimize and click on “Edit” Now look for the stylesheet. It will be a file that ends with .css Backup the stylesheet in case something goes wrong Copy the code and paste it to CleanCSS Apply the same options as in the screenshots Click “Process CSS”, copy the optimized version Replace the original CSS with the optimized one Save the stylesheet and you are done

The approach will make the CSS of the widgets smaller thus making the page execute the code faster. You shouldn’t expect miracles though. The savings won’t be huge, but they add up.

4. Work on Optimizing Your Main Stylesheet

Now it’s time to look at your main stylesheet – the one that determines how your whole blog is going to look like. Again make sure to create a backup before you do anything!

First off we start with investigating for unused properties. Those can be classes or IDs that you need for specific widgets or it might be code that you’ve added yourself but no longer need.

To discover which CSS properties are used and which aren’t, you first need to have Firebuginstalled on your Firefox browser. Once you have that you need to install the CSS UsageFirebug extension.

CSS Usage will add an additional tab to your Firebug console (click F12 go pop it up). To analyze what is used and what not, you need to go to your blog’s main page, open the console, click on that CSS Usage tab and then on Scan. The result will be something like the one below, with green indicating the property is used and red that it isn’t:

You will need to repeat the scan while on the
homepage of your blog, on a
category page , on a
static page and on an
article page , because some properties only apply to specific pages. So, analyze which properties are always red, go to your stylesheet, find them and delete them. If you are unsure about some, leave them.

Now with those unused lines out of the way it is time to shrink your CSS as we did with the plugins in the previous paragraph. Follow the same steps, described in the graphic above
again using the service CleanCSS.

The third step of the whole optimization process comes down to removing some fancy CSS properties like border-radius and box-shadow , which have no other than aesthetic purpose.

Just search for those properties in your main CSS. Discover which classes or IDs they belong to. Now using Firebug’s search function, look them up and see which elements of your blog they actually impact. identifying the different classes or IDs that have them by using the search function. Once you find them, you can disable the properties to see how the elements look with and without them so you can better decide what to delete and what not to:

NOTE:
Disabling properties via Firebug works only for you to see how removing elements would impact your blog’s design. Those changes will be reverted once the page is loaded again or refreshed. For this to work, you need to go to your main stylesheet, find those properties, delete them and click “Save”.

6. Use RIOT to Optimize Your Images

Last but not least you should care to optimize your images properly before uploading them to your articles. And although a lot of your would probably point me to Smush.itas a way to reduce image size, I believe this approach isn’t optimal.

Instead I prefer using a program called RIOT. Riot allows for a lot more image adjustments that can help you get the smallest size and keep the highest quality possible.

The tool allows you to simply choose a filesize that you want to achieve. Based on that filesize the tool will apply the most optimal options to reach it. There is also the option to resize your images and to save them in different formats, where for each format (e.g. JPG, PNG, GIF) there are different compression methods and options that you can utilize.

NOTE:
I’d suggest you to resize images before you upload them (with RIOT), rather than using WordPress’ function of making the image smaller. What that does is it just makes the original image smaller, but that original image is still loaded. The generated thumbnail will cost you precious milliseconds of loading time.

In Conclusion

That’s pretty much it, I really hope you found the tips at least a little helpful! And although you won’t see huge differences in loading times, keep in mind that if visitors wait just a second less, you have a higher chance of getting them to take action and that is what really matters!

Now on to you!

What are your ways to improve your blog’s loading speed? Have you tried some of the tips I’ve shared in the post?

Please take a moment to leave a comment!

Share on Google Plus

About Unknown