Why should you give up WordPress? Reason no. 1: Performance
The most significant advantage of websites built according to the Jamstack approach is their loading speed. No other technology will be faster than static HTML pages.
Why should you even care about your website's loading speed?
First, website speed has a significant impact on the user experience. Second, user experience is a ranking factor in Google's organic search results. Conclusion – if you take care of the website's performance, the chances of getting the first position in the search results may increase.
There are several tools for measuring website performance, but I will focus on that provided by Google, i.e. Lighthouse. This tool is available from the Chrome browser in the DevTools panel. You can get to it by right-clicking on any page, selecting Inspect, and then going to the Lighthouse tab. In addition to performance, Lighthouse also examines the website's code compliance with accessibility policies, good coding practices, and search engine optimisation advice.
Several measures contribute to the overall performance of a website:
I will deal with a detailed description of these factors in the following articles while building a new personal branding website.
Comparison of the performance of WordPress and the Jamstack website
Take a look at the screenshot below. On the left, you can see the performance rating for my current website (see reference no. 2), built on WP. On the right, you can see a rating for a Jamstack page with similar functionalities that I am currently building for one of my clients.
Both sites are simple, static blogs with the company's offerings. They are not updated too often, they do not have an e-commerce module, nor are they connected to an external API.
As you can see, the performance differences are significant. You may find that I am a poor WP developer, and WordPress results can still be improved. You are probably right, but one thing is for sure -?it's much easier to build a quick website based on Jamstack than WP. Even the worst Jamstack webpage will be much faster than the best WP website. Read on to find out why I think so.
Why will Jamstack always be faster than WordPress?
Way of rendering HTML code
In the previous article, I described the fundamental differences between the Jamstack and WordPress architecture (see reference no. 3). The most important of these is the moment of generating the final HTML code of the website, which is then displayed by the browser.
In the Jamstack approach, all webpage code and content are pre-built on the local machine before loading onto the server. In WordPress, the final code is generated after each user request. Some static resources can be loaded from the cache, but you will never avoid getting the main content from the database.
领英推荐
Redundant HTML / CSS / JS code
If you want to build a website for WP that will be more than just a blog, you probably need to use a ready-made commercial theme. The best of them have become very complex page builders over time. On the one hand, it's good because a designer can create an attractive website full of various features in one afternoon. On the other hand, you will probably never use most of these features, and the builder will include their code in the final HTML files anyway.
See the snippet below responsible for displaying the H2 header.
<div class="fusion-fullwidth fullwidth-box fusion-builder-row-4 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;border-width: 0px 0px 0px 0px;border-color:#eae9e9;border-style:solid;" >
<div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start" style="max-width:calc( 1200px + 1rem );margin-left: calc(-1rem / 2 );margin-right: calc(-1rem / 2 );">
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-10 fusion_builder_column_1_1 1_1 fusion-flex-column">
<div class="fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column" style="background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;">
<style type="text/css">@media only screen and (max-width:1024px) {.fusion-title.fusion-title-6{margin-top:!important; margin-right:0px!important;margin-bottom:1em!important;margin-left:0px!important;}}@media only screen and (max-width:640px) {.fusion-title.fusion-title-6{margin-top:!important; margin-right:0px!important;margin-bottom:1em!important; margin-left:0px!important;}}</style>
<div class="fusion-title title fusion-title-6 fusion-sep-none fusion-title-text fusion-title-size-two" style="margin-right:0px;margin-bottom:1em;margin-left:0px;">
<h2 class="title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:24;line-height:1.5;">TITLE HERE</h2>
</div>
[...]
One of the most popular WordPress page builders generated this code. Now, look at a similar piece of code written by hand from scratch.
<div class="container wide padding-left padding-right">
<h2>TITLE HERE</h2>
[...]
As you can see, the difference is significant, and I've only shown one headline from the entire page. In the Jamstack approach, the developer has complete control over the code. He/she only adds new features when you need them. Of course, it makes the design process longer, but the effect of having a fast webpage is worth it.
Summary
If you care about the maximum performance of your website, the Jamstack approach will be a better choice than popular CMS such as WordPress. Building a website from scratch on a pure HTML level is likely longer (and more expensive), but the page loading speed will be unbeatable.
---
In the following article, I will describe some WP security and reliability issues and how we can avoid them with the Jamstack approach. If you do not want to miss its release, I encourage you to subscribe to my newsletter.
References:
[2022-10-14 10:30]