Improving the loading time of a videography website by over 750%

Leomik is a digital video advertising agency focused on providing a smart and easy videography service. Managing Director, Joe Hammond and Creative Director, Mikey Lamb formed the business in 2018 which has allowed them to follow their passion in creative videos, marketing and strategy.

They taking pride in creating eye-catching visual content for brands and businesses wanting to engage in their market, keeping it fresh and staying relevant by enhancing their social media presence.

As the business has grown, the Leomik team have found problems with DIY website builders like ‘Squarespace’ where they have limited creative control and slow load times for their portfolio. They’ve experienced first-hand how slow their site is when asking prospective clients to navigate to their site and having to wait up to half a minute for content to load.

Improving the loading time of a videography website by over 750%
View The Leomik Website

Defining The Project

The Leomik team reached out to me as they were in search for a high-performant website that loads as quick as possible for their project leads. It has been shown that site speed directly correlates with customer conversion with 57% of users leaving a site that takes over 3 seconds to load.

With a focus on video content, they knew they would need a website specialist that could optimise their site, as well as design a visually fitting website that was beautiful and impressed their customers.

In the initial meetings, we started with optimising their current Squarespace website and after seeing the benefits of optimising one page it was safe to say Leomik were impressed. Later they decided that they wanted a complete website re-design and development in place of their old site.

Delivering The Solution

The final solution embraces the latest in front-end technologies with a static website generated with React and Gatsby, removing the need for server queries and delivering webpages at incredible speeds.

All of the content on the website is managed using a ‘headless’ WordPress content management system. At any time, Leomik can add and remove portfolio case studies, update page content and write new blogs that will reflect on their live website.

The training was provided to the team to show them how to optimise their content for SEO and to give full insight into how to have complete ownership of their website and its content.

User Interface Designs

As a creative agency, Leomik needed a fitting front-end interface for their target customers to explore the beautiful content that Leomik is known for producing.

Before any designs were mocked up in Figma and the Adobe Creative Cloud suite, a meeting was held to discuss the inspiration for the website, including colour palettes choices, fonts, imagery, and videos.

Once a creative direction had been agreed upon, I set out creating mobile and desktop designs that would give an accurate representation of what the final website solution would look like.

Front-end Development

The front-end development tech stack includes React, Gatsby, Styled Components, SCSS, HTML and JavaScript, taking advantage of all possible front-end capabilities the stack offers, including –

  • Blazing-fast Page Load Speeds
  • Lean Code Splitting
  • Content Transitions
  • Scroll Animations
  • Lazy-loading Content

WordPress CMS

It’s important for any team running a business to have complete control over their marketing material. What their content says is a reflection of their message, values and influences the perception of themselves to their customers.

Using WordPress to manage content for their website, Leomik is able to update any part of their website’s text, imagery, as well as build and edit new pages without the need to contact a developer.

This is done by using WordPress as a ‘headless’ content management system (CMS), meaning that WordPress is in charge of handling any content for the website, which the front-end will use to generate the static site pages.

The WordPress system itself is again bespoke and the editing experience is tailored specifically to Leomik’s needs, Using the new Gutenberg editor, managers of the site can add custom ‘blocks’ that I have created which allow for consistent designs with flexibility over the content rendered in the final application.

Site Optimization and Support

When a website is launched, that is only the beginning of any businesses new journey, and more often than not that means they’ll need ongoing support and optimizations to their product in the future.

Before launching, we reviewed how well the website performed with web analyses tools such as network request waterfall models, SEO auditing and user focus group testing with real customers to get first-hand feedback on their understanding of the product.

The website includes bug monitoring software to manage any exceptions the system comes across, flagging cross-browser bugs. This level of insight allows for any development updates to target these issues and improve the experience of any future users.

Joe Hammond

Joe Hammond

Managing Director

"Jack's customer service and skills provided a delight of professionalism to us every step of the way. Answering all of our questions and asking us meaningful questions to clearly understand what we really wanted. Jack presented pure excellence with his web design/development and holds an immense level for detail and creativity. We would highly recommend Jack. Get in touch today because you won't be disappointed."

Continue Viewing My Case Studies 📚