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.
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.
AJAX Page Routing