WordPress performance: WPRacoon case study

Who hasn’t talked about WordPress performance yet? Everyone within the WordPress space brags about it on every corner.

WordPress themes and plugins fight with each other. Hostings do the same. WordPress is up against Wix. The performance team was made for WordPress core.

And, Google Lighthouse came out to lighten things up. Now everyone wants to be green (no matter what it means or takes). 💚

I decided that I should be no different.

Am I a WordPress performance expert? No, I am not.

Nevertheless, I managed to get high scores for WPRacoon on Google Lighthouse. Today, I want to share how you can too.

The core concept of performance

There is no magic pill that will make your site skyrocket in Google Core Web Vitals.

Building a site is more than picking a theme and plugins. You have to choose the right infrastructure. Select a proper mix of a theme and plugins. And most importantly, know how to use it all to your advantage.

Just like knowing Adobe Photoshop won't make you Vincent van Gogh, having plugins doesn't guarantee the speed and high SEO ranking.

Disclaimer: In the article, I refer to specific WordPress products that I used for WPRacoon. You can use the same or rely on your own. It is a matter of your expertise - just make sure you know their advantages.

WordPress performance tech stack

Ok, now let's start with the easiest part.

Yes, I call tech stack the easiest part since it is pretty basic. I try to avoid using many different tools and plugins. In performance, less ir more.

WordPress hosting

I host WPRacoon on Indystack - a managed WordPress hosting. The sweet spot is that it takes away the hassle to set up, configure, and manage server and WordPress which is something I would like to avoid.

The price is reasonable with my invoice never exceeding $15 a month. Too much? Yes, shared hosting fans will be shocked but I don't want to compromise on speed or security.

Talking about speed and security - Indystack has everything preconfigured. Redis layer, OpenLiteSpeed cache, SSL, auto malware scanning - this all comes out of the box and you don't have to worry about it.

In general, hosting is something I don't want to think about and Indystack helps me there.

WordPress theme

I don't like relying on theme capabilities that much so I tend to choose very clean and basic themes.

For WPRacoon, I am using a free version of the Starter theme which is clean and simple. Since I don't rely on theme layouts there is not much to say.

What I like about the Start theme is an easy way to configure your typography in Theme Customizer. As an ex-designer, I find typography very important when it comes to web design.

Needless to say, I am using the child theme.

WordPress plugins

I have already mentioned Bot Protection and Breeze that came as a present from Cloudways.

The rest of the plugin stack is pretty short:

• Visual Composer Website Builder: the most important plugin on my list. I know it from A to z and can create literally anything with it. Despite the biased opinion, it is completely rewritten and based on ReactJS. No shortcodes, no performance issues. The code is clean and follows best SEO practices. The structure of HTML and CSS is accessibility-friendly. And the price is as low as $49/yr or $149 for the lifetime license.
• Yoast SEO: my second favorite WordPress plugin. Yoast SEO helps me monitor the quality of my content from the SEO perspective and style social previews. For a non-profit project, the free version is enough, although I would recommend checking out the premium as well.
• wpDataTables: to manage tables. A lot of my plugin price reports require displaying content in a table format. I find the wpDataTables free version powerful enough to style tables to my liking and even take care of responsiveness. Plus, it does not create an additional load on performance.
• AddToAny Share Buttons: for social interaction. The ability to share content is important when it comes to blogs like WPRacoon. AddToAny Share Buttons plugin is easy to install and having an element in Visual Composer makes it easy to use within the frontend editor.

In addition, I have Advanced Custom Fields installed which is recommended by the Starter theme. Nevertheless, I don't really use it for this specific project.

The last plugin which is not on the list yet is Real Media Library. It allows you to categorize your media into folders which is very handy once your media library grows in size. I decided to include it since it will make it to the WPRacoon at some point and can save you tons of time.

And that's it for the tech stack. Let's proceed with the process. 🚧

WordPress performance tips

When I started to write an article I thought about how to describe the process.

All pages are different which means a linear process won't fit.

This is why I decided to go with the tips instead. The good thing about the tips is that you can use them as a reference when creating a site and apply them during different stages.

• Clean structure
• Optimized images
• Content description (for SEO)
• Feedback
• Color schema
• Custom CSS optimization
• Continuous optimization
• Readable content
• Reusable content

Clean structure

It is easy to mess things up when using drag and drop builders. And once you do, you start to complain that page builders are bloated and lower the performance. My answer is simple - learn how to use them the right way.

With Visual Composer, I stick to the simple layout structure by using rows and columns and avoiding nested rows. All my content is organized in sections and I tried not to oversaturate pages with useless elements.

The more content you add, the slower the page gets. It doesn't matter if you are using visual builders or creating everything in the Classic editor.

Optimize images

Your media is the heaviest thing you will load on your website. Make sure it is properly optimized.

With optimization, I mean both - dimensions and file sizes.

As a web creator, you will know the dimensions of your images in advance. Make sure to resize your images to those dimensions before uploading them to your Media Library. I use Sketch for it, but you can use any other graphic editor.

The next big thing is your file size. Before you upload any image to your site, make sure to reduce the file size. For that, you can use the free Kraken tool which allows reducing any image. You will be surprised, but some images become up to 93% smaller when optimized.

Smaller images require less time to load and it is clearly something that Google Core Web Vitals love.

Describe your content for SEO

Make sure to have meaningful image file names - it is good for SEO. File names like 'gxd02.png' don't make much sense, right? Instead, use something like 'wordpress-blog.png' which is more descriptive.

Another important part is the image title, alt, and description. Whenever I upload images to WPRacoon, I always add meaningful image titles, alt, and descriptions. This has a direct impact on SEO and accessibility.

Feedback

Does your audience enjoy your website? For me it is important to know what my readers and community members think about WPRacoon.

You need to collect feedback constantly to improve your website and repeat. Being lazy and busy with other things, I am automating the process of collecting feedback. I found that Omnisome, customer satisfaction and feedback survey, helps me receive feedback from the readers while also calculating their satisfaction. Plus, I can judge my content quality by looking at the trend of my satisfaction score.

Actually, some of the latest improvements where implemented based on your feedback.

Colors schema

Google Core Web Vitals are getting pickier and pickier when it comes to usability.

Make sure that your colors have enough contrast, otherwise you will get penalized for that.

A cool feature of Visual Composer that helps me with that is Insights. Insights instantly check your page content for meeting WCAG 2.0 accessibility standards and inform you if there is something wrong.

In fact, you will find more useful checks in Visual Composer Insights that will help you build fast sites and rank higher.

Custom CSS

Think of how you use custom CSS. I like to add an additional CSS to style some parts of the layout. Whenever I do so, I always consider if the CSS should be page or site-wide.

Google Core Web Vitals hate unused CSS and so should you.

If you know that this CSS will be used only on a certain page or a few pages, make sure to add it as a local CSS.

Moreover, think about using inline CSS, since it was much more favorable by the Core Web Vitals.

Optimization never stops

Optimizing your site is an ongoing process. It does not stop once you launch.

With WPRacoon, I constantly check Google Core Web Vitals reports and think about how can I improve.

Always keep your theme and plugins up to date. There are updates for a reason. Plugins are getting better and new options for performance and SEO may be added. Updates may be a quick and easy way to improve your site.

Content is for people

Don't stuff your content with keywords for Google. Google is not that stupid anymore.

Instead, write your copies for people who will read them. People will spend more time on your page and you will get rewarded for that.

A simple thing like lowering the bounce rate has a positive impact on your sites' SEO.

Reuse content

Not related to Core Web Vitals or performance, but I wanted to include it here for you.

At WPRacoon, I use global templates for the content parts that are similar across several pages.

The global template is a free addon available for Visual Composer premium users that allows updating page content from one place. I use it to display headers, footers, and related articles. Once I need to adjust my list of related articles, I simply update the template and all the copies get updated automatically.

Trust me, this will save you tons of time.

Conclusions

As I said before, I don't claim to be a performance expert or anything. I'm just a guy who knows how to use certain technologies and understands the principles of building sites.

I've managed to build a fast-performing WordPress site that follows Google Core Web Vitals practices. And I believe that you can do the same.

If you have questions or anything to add to the story, join our Facebook group of WordPress experts.