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.
Remember, you can always use free tools like Google PageSpeed Insights or Pingdom to test your web pages load speed. They will also give you insights on how to improve your site.
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!
Hi, Erik.
I’m not very techie and most of this post was lost on me. However, I DO optimize my images!
Being a blogger is tough, and there is always so much to learn… even if you’ve been blogging for over five years (like I have).
To optimize my images, I first re-size them using pixlrexpress, then I use a plugin on my blog to compress them even further. 🙂
At least I’m doing something right. 😉
Have a great day, and thanks for this neat tutorial on improving website loading speed. It’s an issue I always seem to struggle with.
Hi Erik,
I am not a techie person, so the method list above is difficult for me to implement. I would be great if you can recommend few plugins using which I can increase my site speed.
Thanks for the wordpress speed optimization guide. I used it on my own blog and it all turned out very well. The best is to use Cloudflare to do the caching instead of installing cache plugin which in the end will be slowing the speed down somehow
thanx.. Page loading really depends upon how much google is gonna rank your website. A faster page loading gives more ranking in google obvously
Hello,
This is nice post for improve blog loading speeds and having right to see you here . Thanks a lot for sharing
I have read about Web Hosting and Loading Speed and image optimization on the internet but did not know we can have an improvement updating the plugin’s CSS using CleanCSS. That’s a good tip. Also the Optimizing Your Main Stylesheet was a good part. Enjoyed reading it 🙂
Hi Erik, indeed needed for bloggers. A Blog should load fast to get better rankings and to please the audience as well. You’ve explained all the basic stuff in a precise manner, and The user will leave your site if it takes more than 3 seconds to load. Google also love sites that have good loading speed. Choosing a good web hosting company is very necessary to build up a fast loading blog. Using too many plugins and javascript can definitely slow down your website performance. and nice tips to improve site performance and decrease download time, I will try it and thanks for sharing this information.
Jeevan Shetty
Hello, Erik!
Wonderful post, buddy! 🙂
I am on the DigitalOcean and really enjoying the super-fast speed I’m getting!
Also, I do try my best to keep the plugin size to the minimum so that I’m using the most-needed plugins up on my blog.
Also, I am not techie enough to deal with the technical side of the WordPress but the tips like yours are just helping me to the greater extent.
So, thanks so much for that! 🙂
~ Adeel
Actually, Google for the sake of its own reputation gives importance to its users or readers. So, Google has set a list of 200 factors that affect the ranking of one’s blog among which are a “loading speed” of blog page. It is also our own experience that if a page is taking more seconds to load, we click back button and search for another more fast loading page.
Above mentioned points are very important and demand serious attention in order to acheive fast loading speed either in desktop and mobile searched.
Image alt attributes and image size are key points that are ignored in routine. Also in order to increase loading speed, we may load first text and images in last. Also plugins installed should be minimum in case of wordpress so that calls to plugins at the time of a user visit may be minimized. Thanks
of course, page loading matters a lot in terms of SEO and it really depends on website rank performance. Fast page loading will give you more clicks and ranks on google for sure.
Nice post you have prepared it. Thanks for sharing it.
Thanks for sharing it, using SSD hosting along with CND connection is so much beneficial for website loading speed improvement
Site’s speed is important today. A secured site with SSL will be slower than an equally well optimized (speed-wise) non-secured site. CDN is the best to solve all speed related issues. It doesn’t mean that you don’t need to do all rest of the things, but CDN and GZip compression are the two best techniques for speed optimization.
Hey Erik, these are great tips to improve page speed. A slow loading page is definitely a big turn off for visitors. I would definitely follow this checklist to optimize my website pages. Thanks for the info.. 🙂
Nice post Eric!
I had a Pagespeed insights score of 82, but after using the clean CSS plugin it went to 100 for the desktop. Really found it helpful!