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.
The loading time of your website has a big impact on user-experience and on SEO as well (your search engine rankings).
In fact, a study conducted by KISSmetrics revealed 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 let’s talk about some of the strategies you can use to improve your blog’s loading speed and thus keep more of your visitors engaged.
Let’s get going with the tips.
1. Optimize Your Plugins’ CSS
Make sure to backup the files before applying this strategy. 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 them, 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
- 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.
Pro Tip: deactivate and delete any unnecessary plugins. Too many plugins dramatically slow down your site!
2. 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, let’s 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 Firebug installed on your Firefox browser. Once you have that you need to install the CSS Usage Firebug extension.
CSS Usage will add an additional tab to your Firebug console (press 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 (as shown in the below image).
The result will be something like the one below, with green indicating the property is used and red that it isn’t:
Then, you can click export cleaned CSS that exports the cleaned CSS in a new tab, copy it and edit it in your original stylesheet.
Paste it in your stylesheet and you will find “UNUSED” prefix to the selectors in your file, where you can delete those selectors according to your specification:
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.
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. 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”.
3. Optimize Your Images
Another step to speed up your website is by optimizing your images properly, before uploading them into your content.
Be sure to:
- name your images with a proper description in correct English;
- optimize your alt tags with your keywords;
- resize your image dimensions and angles, based on your website mission and strategy;
- reduce the file sizes of your images (e.g. compress them);
- understand which image file type to use for your site content (JPEG, GIF, and PNG);
- separate your thumbnails from main images;
- create image sitemaps;
- if you need further help, consult Google’s Webmaster Guidelines here.
In relation to point number 4, I suggest a tool called ShortPixel. It basically makes your website load faster by reducing the size of your images (helping achieve better rankings in search engines).
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.
4. Web Hosting and Loading Speed
This is, by far, the most important way to improve your website loading speed.
The choice of a reliable, fast web hosting will directly influence your blog rankings, pages loading time and probably its success.
While saving money can be your main concern, at first, I recommend looking at hosting as an investment in your business/website. Unless you are looking for a personal blog, you should skip the shared hosting solution and opt for a premium, managed or dedicated host. You will be much happier in the long run.
So, how do you choose web hosting package that will help you decrease the loading time of your site pages? Here are the most important factors to consider:
- dedicated resources. The first need is for dedicated resources option, as it will keep other websites from using your resources (e.g. processor and memory). Avoid a shared hosting plan, and opt for a VPS or a dedicated server;
- more resources. More available processing power and memory means your server can execute requests faster. (Upgrading from shared hosting to dedicated will normally offer way more available resources);
- faster hard drive. A solid state drive (SSD) loads files much faster than a standard hard drive, resulting in an excellent performance;
- local resources. Having your database and other resources directly on the web server can help improve performance versus the same resources being on another server as with some shared hosting packages.
What about my experience? I’m a satisfied Hostgator customer since 7 years. After 3, I’m on a dedicated server. And you know what? If you are obsessed with your SEO and want to fully maximize your site’s performance, get a dedicated server now. To help you with your choice process, be sure to read this complete HostGator review.
One Last Tip and Final Words
Caching in another strategy to improve your pages loading speed. Installing a proper plugin is an easy way to achieve it and this post tells you what you need to know about this matter.
That’s pretty much it, I really hope you found the tips at least a little helpful!
Even if 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!