Three Steps to Build A High-Performance Website
The Solid Digital blog already has a Tactical Guide To Improving Website Performance which describes how to improve an existing site. The guide you’re reading now will describe how to build a high-performing website from the get-go. It’s often much easier to do something right in the first place than to have to go back and fix things later. I hope the tips below will help you start off on the right foot.
While we, at Solid Digital, build and maintain many different types of WordPress sites, this guide will be geared toward sites built using Elementor. Elementor is part of our preferred workflow, and Elementor is also a super popular choice across the world. Many of the tips below are general guidelines that work for any website. For example, our first suggestion is generally good advice for all websites:
1. Keep your pages simple
As a general rule, the fewer elements on a page, the more performant it is. The fewer widgets you use, the faster your page will load. If you’ve ever built a giant mega menu, you’ll notice that your page can really slow down. You can mitigate things by caching, but a page with a big menu is never going to load as quickly as a simple page with only a few menu options. You could load the menu via AJAX, but that would increase the chances that your visitor will be waiting for your menu to load, which is not a fun experience. Additionally, decision fatigue is real. Don’t put the burden on your end users, you know what the few most important items are for your users to look at, so only consider those options in your mega menu strategy.
You might be wondering what exactly “simple” means. Complexity is the enemy of simplicity. JavaScript adds complexity. An increased number of elements adds complexity. Each additional font file adds complexity and reduces performance. In short, simple means less.
There are many little things you can do to increase simplicity. Use fewer carousels, since carousels rely on JavaScript. Make sure that the few carousels you do use really enhance the end-user experience. Consider each script tag or pixel you add to the site. It is much harder to properly delay scripts than to just not use them at all. Prefer smaller pages over bigger ones. Keep your menus simple. As you build pages, reduce the amount of nesting as much as possible.
Let’s continue with the theme of simplicity.
2. Use fewer plugins
Code slows things down. The more code, the slower the page. The more plugins the more code. You should use the fewest plugins possible. Of course, plugins add functionality, but weigh carefully the value this functionality brings versus the performance and complexity a plugin adds.
You should pay special attention to the number of Elementor helper plugins. For example, we’ve noticed that if you have more than about three or four JetEngine plugins, your site is going to be bogged down. Plugins are tricky to remove from an existing site. If you want to remove JetTricks from a site, you’re going to have to first track down all the places it was used, and that can be tricky and time-consuming. Make it easy on yourself and start with fewer plugins.
Using fewer plugins ties in with the general tip of keeping your site and pages as simple as possible.
3. Set up your caching and performance plugins right away
We tend to use Perfmatters and WP Rocket, but there are many other good performance and caching plugins. Whatever you use, activate the plugins right away. There’s nothing more frustrating than building a site, turning on your caching plugin, and realizing that a page doesn’t function as expected due to caching. We used to run into issues like this with almost every page build until we came to the simple realization that we had to turn on caching and Perfmatters at the beginning of the build. There is the added overhead of having to clear the cache when testing and tweaking Perfmatters every now and then, but overall it’s much easier to handle caching issues as they come up than to be surprised at the tail end of the project when you are low on time.
A List of Mini-Recipes
Entrance animations look flashy. Elementor makes it really easy to leverage them. Don’t do it, or you’ll take a sizable performance hit. If you don’t believe me, run some pages through PageSpeed Insights with and without entrance animations to see how big an impact they have. Conceptually, it makes sense to skip entrance animations, after all, animations are just an artificial pause your visitors must endure before getting to see what they came for. Not using entrance animations is part of the bigger theme of keeping pages simple.
Sometimes required or desired functionality comes with JavaScript. In these cases try to delay the JavaScript. It’s easier to set up a JavaScript delay immediately for each script than it is to go back to a site, find each JavaScript and test whether you can add delay to it or not.
Use the YouTube preview thumbnails feature in Perfmatters when adding YouTube videos. This feature delays loading the video until the user interacts with the thumbnail. By the way, you should be using Perfmatters if you have a WordPress site and care about performance.
Lazy load images, and do it right away. Don’t wait until you go live to lazy load images. Spend some time deciding how you’ll lazy load your images and do it in one consistent manner. For example, Elementer, Perfmatters, and Shortpixel AI can all lazy load images. Pick one and stick with it through your build.
However, don’t get carried away lazy loading images. You do want to make sure that above-the-fold images are not lazy loaded. Do this during the initial page build. It’ll be much easier to ensure images are properly excluded from lazy loading on a page-by-page basis as you go than to have to review the entire site for properly lazy-loaded images at the end.
Consider how easy the specific font you pick is to work with. For example, can you cache the font file locally?
Develop a good image workflow. Export images as WebP directly from Photoshop. Doing so will give you better quality and greater control than relying on a plugin for WebP conversion.
Get it right from the start
I hope the above helps you to build pages correctly from the start. You’ll thank yourself if you do. Doing things right is almost always easier than doing them quickly and having to circle back to clean up.
