STORM+SHELTER are a film and video production company. We knew their new site had to contain a lot of videos, animations and page transitions. Our focus was to make it as performant as possible.
Videos
Our first step in performance is to make sure videos don’t affect the load time. To do this we make sure each video only loads when it needs to.
All videos on the site are hosted on Vimeo. Using the Plyr library and the Intersection Observer API we are able to check whether the video is in the user’s viewport before loading it. Using the same API, we are also able to make sure all videos are paused when they are off screen, which saves more memory. By doing this we don’t load any videos unnecessarily and keep the initial LCP low.
The Plyr Library also allows us to attach custom posters to each video, which means less requests to Vimeo to request the default poster image.
Animation
Animation is a key part of the brand design. We created custom CSS and Javascript (JS) animations to extend this to the website.
We chose the AnimeJS library for its timeline functionality. This means we can synchronise and chain multiple animations together.
Using ViteJS we are able to check whether or not the animation should run on the current page. Vite serves the code using native JS modules (ESM) which means the JS is only loaded when the browser requests it. This stops any unnecessary JS from clogging up the page load.
Page Transitions
Alongside the in page animations, we also introduced page transitions using Barba JS. We chose Barba for its lightweight size and simple API. We can control our transitions using CSS rather than relying on any heavy JS animations.
Using the barbaCss plugin we are able to control how the page transitions flow when moving between pages. This is done by adding a namespace to the website container and then adding the necessary CSS to fade the page content in and out.
By using CSS, we are able to make sure the JS is kept small and doesn’t affect the page speed as much. We also find leveraging CSS also makes it much easier to make changes and tweaks as required.
Eager Loading
Craft CMS has a built-in method to eager load content, which can help speed up load time. This means the website makes less requests to get the information you need to display.
This is done using a with criteria which tells Craft which elements we’re going to need in advance so it can fetch those up front.
When a browser requests a page from the CMS it can kick off a chain of other requests. For example, the page requires a template, the template requires a component, that component then needs to fetch a related image and so on… Eager loading allows us to tell Craft up-front that we not only need the initial page, but also need the related image and anything else too. This makes the request more efficient and reduces the number of separate queries we need to make.
Due to each video having a poster image and keeping the number of requests to a minimum, this made sure the performance of the website didn’t suffer with the amount of imagery available.
Blitz
Traditionally, Craft CMS (like lots of server based CMSs) works by having templates which dynamically request content from the database when a browser requests a page. This means that it has to put together the pages on the fly, which can be a bit of an issue if it needs lots of content from multiple places.
Blitz, a Craft CMS plugin, caches all the site’s pages as static HTML files. This means that the page is already built when the browser requests it, providing another level of caching and reducing the server time to an absolute minimum.
Why performance matters
User experience is key to any website’s success, so making sure STORM+SHELTER’s new website was quick and efficient was a huge focus point.
Sites which load quickly are more likely to receive more traffic and conversions than a slow website, which is vital for any business.
Performance also affects the website’s SEO ranking. Google announced in 2010 that they consider fast load speed as a positive ranking factor, so we make sure each of our sites are optimised for speed.
Google Lighthouse score
Find out more about the project in our case study, and take a deeper look behind the brand.
