Skip to content
WorkED logo

Building a highly scalable headless Jamstack site for WorkED

Industry: Education

Visit: worked.com

~0.35s page loading time

On average the pages are fully displayed in only 0.3 to 0.4 seconds.

99/100 mobile performance score

The page continously achieves a 99 mobile Lighthouse performance score.

100% control over content

Content editors have full control of the site without requiring developer's help.

The project

WorkED creates externships for students so they can have real work simulations in teams along with professionals from growing industries. They required a brand new marketing site with focus on page speed, SEO, ease of editing the content and ability to scale the site. We decided to use Gatsby as the foundation for the site, Storyblok as the headless CMS and Netlify as the static site hosting service.

Logos of Gatsby, Storyblok and Netlify.

The results

Page is fully displayed in only 0.35 seconds.

Have you heard about the page loading rule where users start abandoning the site if the loading takes longer than 3 seconds? Yeah, that won’t happen for WorkED.

On our GTmetrix tests, the page is constantly fully displayed in between 0.3 and 0.4 seconds. That’s less than half of a second, that is the true speed of Gatsby with proper understanding of the best practices in static site development.

* All tests are done on homepage before any 3rd party scripts are added on the site (such as analytics)

** This was true at the time of testing, your results might wary due to things out of our control, such as the performance of the CDN at the time when testing

Screenshot of GTmetrix showing onload time was 292ms and largest contentful paint 303ms. The page is fully displayed after those two.

The content writer’s dream: a live preview

Even though Gatsby provides static sites, it is possible to utilise a live preview editor by using React’s client side rendering to update the content in real time. This is exactly what happens on WorkED’s live editor view on Storyblok.

A Gatsby build is triggered only when the page is published. If the content writer only saves the content, they can continue previewing the edited page later again without having to wait for any queries or builds.

Full control over the pages

The content editors can create pages completely on their own without any developer help. They can freely choose the page’s URL structure and create nested folders in the URL structure. Every component is available on every page in any order, and the contents of the components can be saved as a presets to be quickly added on more than one page with just one click.

Any of the pages can even have their own unique headers and footers, which is an useful feature for landing pages.

Screenshot from Storyblok that shows content editor creating a page, blog post, case study. header, footer or a program

Extremely customizable components

The components on the page are extremely customizable. The background colours can be changed with just a click, every text area can be populated with text, images and buttons, and text can be modified with custom classes that change the font size, colours and alignment.

Along with very customizable components, every page type accepts the same components and they can be copied from one page to another with just a click.

All of this results in a very enjoyable content editing experience, which results in higher quality content.

Quote icon

Vaihe Media has been a joy to work with on our projects. We wanted clean, high performance code that fits within a scalable and secure architecture and were struggling to find a development company that shared our vision, until we started working with Vaihe. Their methology is brilliant and we trust them to work autonomously on our projects. We truly appreciate their ability to grasp our business problems and work on solutions.

WorkED logo– Jesse Aujla, CEO