Optimizing image delivery

How to minimize your assets

Performance is key for all sites. Not only does it improve SEO, but it increases sales and customer happiness. But companies must recognize the challenges that are involved. In this series, we’ll go through the main areas of site performance, how you can improve the performance of your site, and the trade-offs you’ll have to make when it comes to performance versus customer experience.

In this article of this series, we’ll look at minimizing your assets.

A bit of background

The point of a Progressive Web Application (PWA) is that the HTML is generated in the browser, based on the data retrieved from the server. As we discussed in our last post, Server Side Rendering (SSR) works around this problem. But only for the very first request. For every subsequent request, we need JavaScript in the browser to generate this HTML. Many JavaScript frameworks make creating this HTML easier, like ReactJS, AngularJS, or Vue.js. And frameworks that understand which parts of a website need updating and only change HTML in those sections have existed for a couple of years. And it’s this behavior that creates the app feeling users love about PWAs.

So what’s the problem?

The challenge is that you always need a framework like React. And depending on the complexity of your website, the code that creates the HTML needed to render your custom components from the server can be quite large — especially for browsers on slower devices, like old mobile phones. And because all this code must be decompressed and then executed, it can be very CPU intensive.

On top of this, all the JavaScript must be loaded from the server. You could think that JavaScript (and CSS) for every frontend component (like the navigation) is loaded separately based on which page you are on. But in reality, many separate connections to the server are a big performance problem. This is because every connection has to be established, the SSL handshake has to be executed, and then the data has to be transferred. And many components often share some code, for example, the base framework (React).

This isn’t a new problem, and many different tools already exist to bundle and minimize these JavaScript files into a single optimized file that’s then delivered to the browser. The most advanced and used bundler is webpack, which we also use at Frontastic. Configuring the bundling of the JavaScript files but also CSS and small images isn’t a trivial task. But as a Frontastic customer, we already do this for you.

What can you do?

To optimize for network transfer, Frontastic includes an optimized build process that only delivers optimized JavaScript. But as the complexity of your website increases, along with the number of components you use, the JavaScript size will increase with it.

For this, Frontastic lets developers configure components that aren’t used often, and especially those which aren’t used on pages where users enter your site, as “asynchronous components.” These components, for example, all checkout components, will then be put into their own JavaScript files and only loaded when they’re needed. Also, all specific dependencies of those components will end up in their own files. This keeps the size of the bundle, which is required when a user first accesses your commerce site, as small as possible.

To make sure your bundle size doesn’t increase too much, Frontastic also provides developers with the tools to analyze the bundle and actively reduce its size. We also make sure that our own code, the minimal Frontastic frontend framework, uses as few dependencies as possible to allow you to target even slow and old devices.

Do you want to learn more?

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related