WordPress vs Gatsby Websites: A Side by Side Comparison

Choosing the right website builder to craft your online presence, in under 10 minutes.

The website builder you use to create your business’s online presence can have an impact on your site's performance. This article will compare two website builders, WordPress and Gatsby, and help you understand which type of development platform will best suit your business and its online needs. We will be taking a look at the benefits and drawbacks of each, from both a developer’s and end-user’s perspective.

What are Gatsby and WordPress?

Before we can make direct comparisons between the two, it is important to understand how each works, as they have fundamentally different operating principles. To aid our understanding, we can think of Gatsby as a fast-food restaurant, while WordPress can be thought of as a sit-down eatery. Both restaurants serve food (the website), although they do it in different ways.

In a fast-food restaurant, the food is mostly prepared before the user orders it so that by the time an order is placed, the food is ready to serve. In a sit-down restaurant, the menu has a lot more variety, so your meal is only prepared once the chef receives your specific order. Gatsby — a?static site generator?— prepares the website content (food) beforehand so that when a user (customer) visits the site, the content is delivered at lightning speed.

WordPress (.com not .org )on the other hand — a?dynamic site generator?— only builds the website as and when the user visits it. This leads to longer wait times as the server must first fetch the requested data before compilation (in the same way that orders must first be sent to the chef before meals are cooked). The advantage of dynamic site generators, however, is a more customisable experience.

How do Gatsby and WordPress work?

WordPress is the heart of most online sites and is one of the most popular, if not the most popular, web development platforms. As of the end of January 2021, approximately 60 million sites were built using WordPress, with the builder accounting for around 39% of the top 10 million sites.

“Wordpress allows the creation of websites without intensive knowledge of HTML/CSS code.“

It is a Content Management System (CMS) written in the Hypertext Preprocessor (PHP) programming language and paired with either a MySQL or a MariaDB database. This CMS has evolved into an innovative and user-friendly development tool. One of the main WordPress features is its use of themes: a template system used to quickly and easily build sites. This system allows users to create websites without intensive knowledge of HTML/CSS code. It also has a built-in plugin architecture that allows the look and feel of websites to be customised. Alternatively, customisation can also be achieved by direct editing PHP code.

WordPress is also a dynamic site generator, which is to say that the content shown depends on the visitor. This allows for a more customizable user experience. The website content is saved in a database which is retrieved and sent to users as and when they visit the site. This requires powerful PHP servers, particularly for data-rich sites. Websites can be self-hosted or hosted through an official hosting provider. The server analyses each request the user makes and decides how to respond. This can lead to longer waiting and loading times, however the content retrieved and displayed can then be customised for the user. WordPress is traditionally associated with blogging, but its use case has expanded to support media galleries, online stores and traditional mailing lists and online forums.

Gatsby is an open-source static site generator. It uses React for frontend development and Webpack and GraphQL for backend development. It is mainly used to build static sites with the functionality of the latest web standards. Gatsby websites are essentially single-page web applications. Each time a user clicks an internal link, new resources aren’t required to load the “new page”, saving HTTP requests and reducing wait times between internal links.

Gatsby sites are optimised for speed and security. Unlike WordPress, pages in a Gatsby site are pre-rendered and generated in a compilation stage before being put online. This eliminates the need for powerful PHP servers because user requests are preempted and don’t require a customised response. The generation stage involves compiling static pages (HTML, CSS, JS) which are then deployed in an online website package. These pages will look the same to every viewer visiting the site. New data does not need to be pulled from a database, making loading times significantly faster.

Development in Gatsby and WordPress?

The criteria for website development include how easy the website is to create, how secure it is, performance optimisation, and the time and cost of deployment.

Creation and Customisation

The platforms require different levels of skill for installation. WordPress is essentially plug and play, and can be accessed using only a web browser. Gatsby on the other hand requires additional tools (such as visual studio) to be installed before use. They both also have an extensive user base and communities with tons of open-source information and how-to’s to suit the type of application you want to achieve with your website. There is no shortage of information from either end of the spectrum. Technical skill and ability do however come into play for the actual development of the website.

Since WordPress is theme-based, much of the development process involves familiarisation with the software layout. The interface allows for visual design of the website. Elements can be arranged with a simple click-and-drag. WordPress is extremely user-friendly from a developer standpoint. Additionally, for those who are more technically inclined, the backend code can also be customised. WordPress allows good-looking websites to be whipped up relatively fast with little technical skill required.

Gatsby requires a good amount of technical knowledge and skill. This makes using Gatsby a bit more difficult when creating new sites. Developers require familiarity with Javascript and React. There are still many theme-based projects to work from however installing and switching themes between and during projects is not nearly as easy as with WordPress. On the plus side, Gatsby sites can be rendered offline and hosted locally with updates to the site appearing automatically. This can be achieved without needing to refresh the browser. This can save time on development.

Overall, WordPress is a far more user-friendly development platform which makes customising your site far easier than with Gatsby. While WordPress may lack functionality compared to Gatsby, development is far quicker and easier to perform in the hands of the layperson.

Performance Optimisation

When it comes to performance optimisation, developers must ensure websites run as efficiently as possible. This entails fast loading times and Search Engine Optimisation (SEO), which can be improved by optimising images and code and excluding unnecessary plugins.

For a WordPress site to be speed-optimised, certain “best practices” are required to limit the amount of data a PHP server needs to call upon each request. This problem is so prevalent, that a whole sub-industry of WordPress optimisation has been created to solve it. A few searches on Fiver yield a host of offers to optimise your WordPress site for as little as 5USD or as much as 100USD or more.

Since Gatsby is a static site generator there is very little wait time when loading internal links, making it much faster. The ability to directly edit and customise code in Gatsby is an additional advantage. This allows developers to directly see all HTML, CSS, Javascript, scripts, limiting the likelihood of duplication or unnecessary code. Overall, Gatsby allows for a website to be optimised to a far greater extent than WordPress. It is also faster in most use cases. When it comes to optimisation, Gatsby is the superior option.

Security

Security is one of the most important aspects of website design. It is crucial for preventing prying eyes from accessing your company’s sensitive data.

From a security perspective, WordPress plugins present vulnerabilities. The third-party plugins that WordPress utilises are not within your control, being code written by an external party. Should malicious players find some way to exploit these plugins, every WordPress site using them would be at risk. Exploiting third party plugins is a common tactic used by hackers to infiltrate and compromise websites. Each new plugin presents an extra layer of vulnerability. With Gatsby, however, there are no external files to break into, making these sites far more secure. As a Gatsby developer, you can track every line of code being used to create your website. Increased control of the development process makes it safer than using WordPress.

Cost

To set up, both options are relatively inexpensive. Both require the purchase of a custom domain — a painless process which, depending on a variety of factors, can cost as little as $10 annually. It is possible to obtain a free domain, however these limit the control you have over the domain name (YourWebsite.com is much better than YourWebsite.wordpress.com).

There is no initial setup cost associated with most WordPress editors, however free plugins come with very basic features and limit customisation. If you want certain premium features, such as unique animations, you will be required to purchase paid plugins which generally entail a fixed monthly cost. This can get costly the more customisation is required. If, for example, you utilise 10 plugins each requiring premium access, the cost of building and maintaining the site is proportionately increased.

In Gatsby, advanced functionality is in-built and incurs no ongoing costs. The only consideration would be the time and cost of training developers, but this is a one-off consideration unlike the recurring monthly costs of premium WordPress plugin features.

How Is User Experience (UX) affected across WordPress / Gatsby Websites?

User experience is arguably the most important aspect of your website, as it dictates how potential customers interact with your business online. It gives a strong impression of the quality of your business and sets a standard for visitors to hold you to.

The quality of your website is gauged by the overall design, look, and feel. Both Gatsby and WordPress have much to offer in terms of functionality and aesthetics. Both have a large community that is constantly developing new tools to improve your website. It is, however, much easier to customize templates or themes to make your website look good using WordPress. For the novice developer, WordPress will likely deliver a better-looking site with functionality and aesthetics that may be more difficult to obtain using Gatsby.

Site speed is one of the most important factors for an end-user. Most people browsing the internet don’t want to be held waiting while web pages load. Approximately 60% of all internet browsing happens on mobile devices, at slower internet speeds.

When it comes to site speed, Gatsby beats WordPress hands down. Even the most optimised WordPress sites will take longer to load than Gatsby sites due to the need for PHP servers. As more WordPress plugins are added to your site, the overall loading time increases and speed decreases. Speed is also an important factor when considering SEO. A faster website is more likely to achieve a better SEO score, which potentially increases traffic to your website.

Conclusion

From a developer’s perspective, the better choice mainly depends on your level of skill. For entry-level web designers, WordPress is the better option due to its user-friendly architecture and low code requirements. For the more experienced developer, Gatsby would be the more suitable option due to the level of control, optimisation and security it allows for. While WordPress is relatively cheap, Gatsby is entirely free.

From a UX point of view, Gatsby is the winner. This is because even though WordPress makes it easier to quickly build aesthetic sites, Gatsby has the same functionality while being better speed-optimised.

In summary, the website builder you choose largely depends on your level of skill and the time available to you for development. To build a relatively good site as quickly as possible and customised to the end-user, WordPress is the go-to. The trade-off is slower build times and site speed. For faster sites with little load times between internal links, Gatsby is the way to go.

If you still can’t decide which is better for you, it is possible to use both Gatsby and WordPress together. This is useful when certain pages within your site require different attributes from each framework.

We at Auxo Digital are passionate about developing exceptional websites. With experience in fields ranging from engineering to business consulting, our multidisciplinary team works with you to align your online presence to your business objectives. Feel free to get in touch with us at?auxo.digital.