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 WordPress 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.
We analyzed our website’s speed by using Google’s PageSpeed Insights Tool.
(There are some other great tools out there which I mention in this blog post.)
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.
As mentioned in the beginning, WordPress is your friend. And WordPress is definitely your friend when it comes to search engine optimization.
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, you might find some WordPress problems, and 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.
Eliminate JavaScript files in above-the-fold content
JavaScript enables developers to do amazing things on websites and it is also heavily used by WordPress websites.
Using a lot of JavaScript files in the above-the-fold content influences the speed of your site. Therefore, Google recommends to eliminate all (render-blocking) JavaScript in above-the-fold content.
Removing the JavaScript below-the-fold works pretty straight-forward and speed ups your WordPress site massively.
As you can see in the screenshot above, I took a closer look at Buffer’s blog where Google suggests to remove the render-blocking JavaScript.
Be aware, that using 3rd party services (like sharing buttons, comment system, etc.) might make moving the JavaScript below the fold a bit of a challenge.
Furthermore, there might be some good reasons why certain JavaScript files are render-blocking. Make sure to investigate on every JavaScript file in order to decide if it can be moved below the fold or not.
In our case there was one JavaScript file which couldn’t be moved below-the-fold. Luckily, we could delete the entire file as it wasn’t used any longer.
CSS clean-up
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
Bad:
/************************************/
/* Content Page */
/************************************/
Good:
/* 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.
The outcome.
The JavaScript & CSS cleanup, the plugin reduction, and image optimization took us about two hours.
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.
Capture user feedback easily. Get more insights and make confident product decisions.
Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.
And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
