Our 5 rules for developing high performing WordPress websites
We’ve built and launched dozens of websites over the years and thought we would outline here the steps we always take to ensure the sites run smoothly and no surprises can come our way
1. Don’t use a page builder
Whereas other agencies might opt to go with a visual page builder solution such as Elementor or Beaver Builder, we typically don’t do this and use Gutenberg Blocks or templates to structure layouts. We can probably dedicate a separate post to explain the reasons, but the main ones are:
- Cost: the free version of these builders are usually too limited and thus we would need to go with the premium version, which is billed yearly. We would either need to absorb this as an agency or bill back to the client, which is not ideal.
- Vendor lock-in: Once you’ve built your site with a particular builder, changing this would mean rebuilding the entire site!
- Control: Since we’ve been hired to design and build a site, we would like to retain some form of control over how a site looks. By providing the client with a page builder we’re essentially giving out the keys to change everything.
- Added bloat: Most modern page builders are put together quite well, but regardless we’re introducing more assets and overhead to our site.
2. Use JS / React where possible
We’re big fans of React and other modern JS frameworks. WordPress is a PHP based CMS and this provides a bit of a dichotomy. In recent years however WordPress has made great progress in their REST API, which is now bundled with the core code. Also, the Gutenberg editor is made in React, which is good to see.
When building a typically WordPress site, if any part of the site has a finder or filter functionality we typically would use React here to render the content, for an improvement in speed and UX.
Also sometimes we would build an entire site in React and leverage the WordPress API (this is called Headless). An example of an exciting technology that accomplishes this is Gatsby JS. This site is an example of this.
To provide the wider WordPress community with an easy way to build React sites in WordPress, we’re currently working on a plugin called PWApress.
3. Prepare the site for caching
This comes back to the second point; if any content is pulling in dynamic content (e.g. search results) and this content needs to be up to date, it might be best to use JS here, otherwise this content will be cached. We always develop with this in mind when starting a project.
4. Match any installed plugin as closely as possible with the intended purpose
One of the best things about WordPress is the large availability of plugins. However, this is also one of its potential drawbacks, as plugins can be a cause of issues and tend to add bloat to the database. We tend to look at a plugin if it can solve the issue at hand more easily than we can create it ourselves and if more than 75% of the functionality of the plugin is useful for the site we’re building.
5. Always look for new opportunities to push the boundaries
The worst thing as an agency or developer is to become stagnant and only develop with technologies that you know. With every project, we like to assess the things we have used in the past and if this would still be a right fit for this new project. Recently we decided to switch over from Bootstrap to Tailwind for CSS framework. It’s important to keep innovating!