When developing a new website, chances are high that you end up using WordPress. And that’s a great thing.
About 50% of all website are built with WordPress. And when using WordPress you’re on a good way when it comes to your website speed.
However, there might be some problems, caused by your WordPress template (and other plugins) which are slowing your website down.
Today, I’d like to share the journey we undertook in order to speed up our WordPress site. And the great news is: You can do it too! Pretty much without a lot of coding skills needed.
How fast is your WordPress site today?
In order to optimize your WordPress site speed, you need to know where you’re currently standing at. Anaylzing the current situation of your WordPress site speed is an absolute must-have.
Enter a URL of one of your articles or important pages of your website and Google will tell you how good (or bad) your website’s performance currently is.
Have a plan.
We analyzed our own page exactly a week ago and realized that our blog could need some improvements.
And to be totally honest here, we thought that those performance improvements would take us days or even weeks to conduct.
However, to all our surprise this wasn’t the case. It was way faster. We put our heads together and got started.
After about two hours we were done. Yep – we were done.
So, I’d like to give you some insights on what we exactly did in order to speed up our WordPress blog. And what you can do as well.
WordPress is your SEO friend.
WordPress comes with a lot of built-in SEO requirements and enables you to easily add further plugins to make your website faster.
Pre-conditions for optimizing your website speed
I do not want to go into too much detail here, but optimizing your WordPress site speed, requires some essential preconditions which must be met.
Be sure to:
- Have a caching strategy in place
- Make use of a CDN
- Have the SEO Yoast plugin installed
- Have Google Webmaster Tools installed
- Make sure to have the latest WordPress installed
So here we go. In less than two hours, we conducted the following optimizations in order to speed up our WordPress site.
Some key facts:
- Optimize our blogs usersnap.com/blog (English blog) and usersnap.com/de/blog (german blog)
- Optimization goal: Get a grading higher than 85 on mobile & desktop
And most importantly: We didn’t want to spend days and nights optimizing our blog.
Clean up your plugins
If you have your WordPress site running for a while, I’m sure you’ll have some old and deactivated plugins in place.
So, before digging into the real work make sure to delete all unnecessary plugins. If you’re not using a plugin, not only deactivate it, but delete it.
When working on a new website, most people focus primarily on the design and UI of a site. It’s just the natural way on how we look and perceive our visual world.
However, the hyper-complex, image-heavy interfaces require us to use a lot of CSS.
And here comes the big drawback: CSS files which must be loaded (for displaying your extravagant web design) add to the loading time of your website.
In order to speed up your WordPress site you need to get clean up your CSS file(s).
Things you can and should do when cleaning up your CSS:
- The fewer lines of code you use, the better (reduce the number of line breaks, use simple comments e.g.)
- The smaller the CSS file size is, the better. Try to minimize your CSS file to less than 10 bytes.
- The probably most important thing: insert your CSS inline
I know that most style sheets are inserted as an external style sheet. Though it makes sense to insert the most important styles inline for ensuring super-fast loading times.
However, you need to make sure to minimize your CSS file, because it doesn’t do any good if you inline a CSS file larger than 20kb.
If you can’t insert the entire CSS inline, make sure to insert the most important CSS inline.
Example: Comments in CSS
/************************************/ /* Content Page */ /************************************/
/* content page */
PS: I don’t think that I have to say that the more complex your CSS file structure is, the worse it is for your website performance.
PPS: I’m fully aware of the conflict of design vs. speed. Everyone has to find the right balance here.
Optimize your images.
Images are beautiful to look at. Especially on websites.
But here’s the thing: Images add to the size of your page, and therefore influences your loading time. So what should you do?
The answer can be found in the image optimization process.
- Format selection: PNG images work best for logos, illustrations and text. In every other case, simply use jpeg.
- File size: I guess there’s nothing more to say than: the smaller the better.
- Image compression: You have to strike a balance between the quality and the size of an image.
So what did we do in order to speed up our WordPress site?
First of all, we installed the Compress JPEG & PNG images plugin. This plugin allows you to optimize and compress all your image material.
Every image uploaded to WordPress will be first analyzed, then optimized and finally saved as a smaller version. It claims that on average JPEG images are compressed by 40-60% and PNG images by 50-80% without visible loss in quality.
After installing the plugin, we compressed all our blog post images – a total of 4.113 images. All in all this optimization took us 10 minutes and cost us $32.
Other content optimization
If you’re using other content formats – such as videos and gifs – I’d recommend embedding those visuals via 3rd party services.
In order to make use of GIFs we uploaded all our gifs to giphy.com and embedded the gif with a little code snippet. The same can be applied to all our video material which is uploaded and embedded via Youtube.
In the end, we made in the green zone on the Page Insights test, though there’s still some room for improvement:
And most importantly, we felt some relief and happiness after seeing how these speed improvements affected our organic traffic growth.
A continuous approach.
Let’s face it. Optimizing your website performance by conducting the mentioned speed improvements can be a quick and easy win.
Nevertheless, we need to be aware that our website performance is a continuous, ongoing project. It doesn’t stop with single improvements.
What’s your experience with WordPress speed optimization? Do you know any additional trick? Let us know in the comment section below!
Quick update: If you’re looking for a user feedback tool for your WordPress website, I’d love to recommend Usersnap, used by software companies like Facebook or Google. Feel free to give it a try. It’s free for 15 days.
How to improve loading times of your website
Developing a great website requires a lot of work. Besides the development process itself, there are a lot of things to consider. Think about SEO, content, optimizing every single page with a clear call-to-action, and so on. We’ve built dozens of websites ourselves. Usersnap actually evolved from our work in building websites & web applications for…
We benchmarked 11 major web development blogs and analyzed their website performance.
In mid-2015 we conducted a lot of performance improvements for our website and blog. And we continuously did our homework. Just last week we did a major website speed upgrade for our blog. So, we thought it would be fun to benchmark our web development blog with some other major web development & design blogs.…
How to create an excellent web design for your blog
“It is not what you say that matters but the manner in which you say it.” This famous quote by William Carlos William is as relevant for blogging as it is for real life. Although whether the “what” is important or not (especially in educational blogs) is debatable, the “how” is definitely a factor you…
The most annoying issues that will kill your website performance
The performance of websites has always been critical. A well-performing website improves the user experience a lot. This translates into your audience coming back, staying longer and converting a whole lot better. A better performing site usually also appears higher in the search results because the indexer is having less problems with it. Also, mobile…
11 productivity boosts for remote web development teams
This article is brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Working in a remote web development team can be a lot of fun. Besides the fact of working in your pajamas in your home office, there are some greater benefits for employees and enterprises as well. On…
Mobile first: How to approach mobile website testing?
Smartphones seem to have taken over desktop computers in terms of usage. The number of smartphone users has increased tremendously in the last few years and by 2016, there will be more than 2 billion smartphone users. In addition, half of the internet’s usage comes from mobile devices. This development affects also web design for…