Introduction
At SitePen, web application development is the core of what we do. We pride ourselves on our reputation for creating rich web apps that are highly responsive and reliable. The first chance that we have to demonstrate our skills is through our company website. Its design, reliability, and performance give visitors their first taste of what we can do for them. Unfortunately, our previous site had not aged well, and it had become sluggish with long load times. Not only did this look bad to our visitors, but it was also affecting our rankings with popular search engines such as Google. Faced with the double threat of being challenging to find due to low search rankings and delivering a sluggish experience when a visitor came to it, we decided to refresh sitepen.com to reflect the type of experience that we give our clients.
To accomplish this, we started by answering three questions:
What are our goals?
While this one may seem obvious, it was essential for us to define what we were trying to accomplish. We decided that we wanted to deliver a highly performant site that was easy to maintain, delivered an exceptional experience to our visitors, and was easy for search engines to index.
How should we build the new site?
There were many excellent candidates for our new site’s tech stack, but, in the end, we chose to use the Dojo open-source framework as our primary platform. We have extensive experience with this framework and knew that it had the right features to allow us to create the new site quickly and efficiently.
How do we measure success?
Our primary goal was to improve the site’s performance. Unfortunately, so many elements contribute to this metric that it can be difficult to ensure that each is sufficiently optimized. We decided to use the Web Vitals project to guide our optimization efforts. This project has widely become viewed as an excellent tool to benchmark a website’s load time and other performance metrics.
Web Vitals
The most important aspect of a website’s performance is its users’ perception of it. However, for public-facing websites, it is impossible to quantify every possible user experience. Instead, various benchmarking tools have been developed to analyze a site and provide feedback regarding how it should perform for most users. For the sitepen.com rewrite, we chose the popular web vitals project to quantify where our current site was performing and guide us as we developed the new one.
Three metrics form the core web vitals statistics – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
The largest contentful paint (LCP) is a metric that attempts to quantify when enough of the page has been displayed to allow the user to start reading it. It is determined by measuring how long it takes to render the largest image or text block within the current viewport, relative to when the page started loading. A good score for a site’s LCP is generally considered to be 2 seconds or less.
First input delay (FID) is used to quantify when a page is ready for the user to interact with it. It is measured by calculating the amount of time between when the page starts loading till the page’s event handlers begin to be processed. A site should have an FID of 100 ms or less to deliver a good user experience.
The final core web vital metric is cumulative layout shift (CLS). This metric evaluates the page’s layout stability by measuring how often content on the page shifts unexpectedly. This can be caused by numerous factors, such as an image being loaded that forces other content to move out of its way. The cumulative layout shift is the sum of each individual layout shift throughout the life of the page. Each layout shift is given a score based on how much content is shifted and by how far it moves.
Benchmarking the Original Site
The previous incarnation of sitepen.com was created with WordPress. This popular tool allowed us to get our website up and running quickly and made it easy to add new content without extensive involvement from our engineering team. However, as time went on, we started to need features that were not directly provided by the WordPress platform. Eventually, we ended up with a complicated system of processes, plugins, and outright hacks. These modifications degraded the site’s performance while simultaneously making it more difficult to maintain. The old site did, however, have some meaningful information to give us. We knew that it was slow, but we needed an objective way to quantify what, exactly, “slow” meant. Therefore, we used the open-source Lighthouse tool to gather the web vitals metrics for the site.
As you can see from the Lighthouse report, several metrics were unacceptably slow. This information confirmed our suspicions that we had a lot of work to do. We had already decided not to try to improve the current WordPress site. While WordPress is an excellent tool for starting a new site, we had developed a clear set of requirements for what we wanted sitepen.com to be able to do. Our specialized needs led us to choose a homegrown solution that would support our current business while also allowing us to add new features in the future.
New Site Architecture
With the requirements for the new sitepen.com in mind, it was time to decide how to build it. SitePen’s primary skill set is creating complex web-based business applications with an extensive amount of front-end JavaScript powering the user experience. Therefore, we gravitated towards a JavaScript-based solution. We selected the Dojo framework as our primary technology since we are heavily invested in its development and know how to get the most out of it.
At first glance, a JavaScript-based site appears to ignore several of our requirements. We wanted the site to be fast and easily indexed by search engines. Historically, the large amount of code that these kinds of sites require leads to slow load times, compromising site performance. Additionally, the fact that the content is only loaded when the JavaScript code is executed made it difficult for search engines to index them properly. Modern Dojo overcomes these challenges by utilizing a technique called Build Time Rendering (BTR). BTR is a process through which the application’s pages are rendered to HTML during the build process. Since the JavaScript/TypeScript is evaluated at build time, many of the site’s pages don’t execute any JavaScript at all when a visitor browses to them. This allows developers to write the application in a familiar way (i.e., as a web application), but the result is essentially a static website.
Dojo, when augmented by BTR, addressed almost all of our requirements. There was only one problem – maintenance. While Dojo made the site easy to maintain from an engineering perspective, it did not lend itself to the creation of blog posts. If we had stopped here, every new or updated blog post would require engineering involvement to create the new content. This promised to be inefficient and frustrating, so we needed a solution that didn’t involve direct engineering support. Our solution was to use Dojo Blocks. Blocks are part of the BTR system. Each block consists of JavaScript code that is executed by Node.js during the build process. The results of the code can then be used to populate the contents of the site’s pages. We used blocks to extract our blog posts (hosted in an unpublished WordPress site) via the WordPress API and used that content to create Dojo-based pages. This solution allowed us to continue to take advantage of WordPress’s blog editing capabilities without paying a performance penalty on the production site.
Results
The new sitepen.com represents the type of solution that we like to present to our clients – it is fast, reliable, extendable, and maintainable. Dojo, including its sophisticated build-time rendering features, allowed our engineering team to create a web application, complete with extensive test coverage and reusable components. That web application is transformed at build-time into a static website with exceptional load times.
These numbers speak for themselves. Every metric that the Lighthouse report measures is now green, and the overall performance score went from 52 on the original site to a perfect 100. These results make us confident that the new sitepen.com will be among the fastest sites on the internet.
The Lighthouse report tells us that we achieved our performance targets and, by extension, helps to ensure that visitors don’t have to endure excessive load times. However, the success of the new site goes beyond mere performance. We now have an application that allows blog writers to continue to use the editing capabilities of WordPress, our engineering team can enhance the site using technologies that they are most familiar with, and the site’s static nature makes our content more discoverable since search engines can easily index its pages.