Yellowberri 3.0: Our Fastest Website Ever

Speed is in the Style

When making a website optimized for speed, one must be prepared to adjust their design sensibilities accordingly. While images and large photographs can be loaded quickly or asynchronously, you can get more art per KB with vector images via SVG. Most professional designers and agencies are more than proficient in these workflows. However, the clean, flatter look is not easy to get away with for every client. Being in complete control of our own website, we committed to a minimal, fast-loading art style.

However, with being the luxury of a design-focused creative studio, we can make the most of the modern and minimal style that vector SVG lends itself to. With the visual design now inline with our technical goals, we can make the fastest website possible.

Reducing Time-To-First-Byte (TTFB)

At Yellowberri, we build mostly WordPress websites. It’s a great tool for quick construction with extensive support, documentation, and a robust economy. It can handle anything from the smallest landing page to a fully-featured eCommerce solution. However, such flexibility and customization come with a cost. Processing requests can take a long time. In our testing, server response time was up to 60% of our load time.

WordPress websites are dynamic; they can serve any data or templates based upon the visitors’ request. The problem lies in the time between making the request and receiving the dynamic response. While WordPress responds and pieces together a page, this period is the Time-To-First-Byte (TTFB), so how do we reduce this time?

To Cache or Compile

Early versions used wget to create a static copy of the site. However, we decided that an extra build step for content updates would be too cumbersome. Instead, we utilize WordPress with a great caching solution, allowing us to have faster than normal page loads while maintaining a CMS-powered site’s dynamic nature.

Further Optimization

Striping Extra Code

Most WordPress websites contain a fair bit of boilerplate markup of varying usefulness. In our case, we stripped out as much as possible so that what we send to the user is only what’s pertinent to their browsing experience.

Ditching jQuery

jQuery is a great tool, and nothing will remind you of that quicker than not using it. However, as the largest part of our new site’s download size, it had to be addressed. Newer Javascript features make AJAX loading and selection much more manageable. However, there is browser support to consider. When these features are not present, the website still works as intended.

AJAX Page Routing

Another notable feature of the site is the snappy loads and page wipes. These SVG animations mask a simple content replacement powered by Javascript. While not a headless WordPress setup, AJAX replacement allows us more control over the user experience.