Responsive Theme Vs PWAjet: Speed Test Results

A traditional store uses theme components to define the look and feel of the front-end store. PWA introduces a unique approach for creating a custom front-end experience. This topic compares the standard theme development approach with a more modern approach to the storefront display using PWA technology.

Fundamentals 

Standard theme

A CS-Cart theme is a form of component that defines how a store looks. It is deeply integrated with the CS-Cart application and depends on the core code for functionality.

A CS-Cart theme is always built on top of an existing parent theme. In CS-Cart 4.4.x the Bright theme is enabled by default, but it has Responsive as its parent theme. Developers extend or customize it to build custom storefronts.

All CS-Cart themes inherit from a parent theme. At the top of the inheritance chain is the Basic or a Responsive theme, which provides the base files for a theme. Every other theme builds on, overrides, or customizes these files.

PWAjet

PWAjet is nothing but a mobile theme combining all the advantages of the progressive web (PWA) and single-page applications (SPA). 

PWA is built using the Application Shell, a bare static skeleton of a webpage. The app shell loads first all the basic information making PWA super lightweight. The same data is not loaded twice: SPA technology helps it to fetch all the content once and then addresses it when needed. As a result, your store gets an increased speed and better usage of resources. Web App Manifest of PWA defines the name, the logo, and the view of the app for a browser. It allows adding PWA to the home screen as a standalone app finding a shorter way to your customers’ hearts.

Read more about what PWAjet is made of…

Differences 

Both the CS-Cart theme and PWAjet are built from components, but each approach uses a different definition of this term.

In a CS-Cart theme, components refer to UI Components. These components are standard UI elements, such as buttons, dialogs, and tables, that CS-Cart provides to make theme customization easier.

Unlike a CS-Cart theme, the PWAjet application does not inherit from a parent theme. Instead, the application used React modules that provide different pieces of functionality. React components are modular pieces that allow restructuring of the app. This is how customization of PWAjet can be done to fit the particular needs of eCommerce entrepreneurs. Customizability is the next step of PWAjet development. We plan to add this option in the next releases of PWAjet.  In our future posts, we’ll tell you more about this topic.

Customization or stability?

Since CS-Cart themes inherit from a parent theme, the effort needed to create a custom storefront is dependent on the additional customizations needed on top of a base theme. Some themes build off the default or other existing theme and apply minimal customizations, such as logo and color changes, to create a unique look for a store. Other themes use it as the base and require more customization work.

This inheritance approach tightly couples a CS-Cart theme with the themes sitting above its inheritance chain. As a result, parent theme updates can lead to unexpected side effects for its dependent child themes.

PWAjet applied a modular approach for creating a storefront. Instead of starting with a base theme and customizing the pieces, we put together a storefront from scratch. This approach provided us with greater flexibility and control during the PWAjet creation process.

Since each component is independent and modular, side effects from updating them are minimal. Non-breaking updates keep your PWA store stable.

Will my theme be kept in PWAjet?

A theme won’t be available on the PWAjet site version as PWAjet is a kind of theme. However, style editor will be available, so you will be able to change the colors, for example. Refer to the document for instructions.

Will my customizations be saved in PWAjet?

All admin panel customizations and all customizations related to data changes on the backend (for example, changing the product title, price, etc.) will be saved. Customization of the theme, blocks, and other frontend elements will not be available, as they were made for the responsive theme (or themes that inherit it), and not for PWAjet. Find more information here.

Will you customize my PWA store?

Think about PWAjet as a technology of the future. It is the long run. Not in the context of gaining profits from it, but in the context of growing it, adding new features, and unlocking new capabilities. Customizability is the next step of PWAjet development. We plan to add this option in the next releases of PWAjet.

What is better a Responsive theme or PWAjet?

A responsive CS-Cart theme adjusts its layout based on the screen size and resolution. Responsive themes offer better readability and usability on smaller screens such as smartphones as compared to a non-responsive theme. It also prevents you from creating a device-specific mobile version. However, a theme can distort images in case of their improper setup and optimization.

PWA doesn’t do this. In fact, it is the same webpage plus the best practices of website development. 

PWAjet is a standalone application that applies PWA and SPA technologies to look like a native mobile app, load faster and render seamlessly independently of the type of mobile device. It doesn’t load data twice and make your page lightweight due to the App Shell technology.

Our QA department tested the PWAjet app to see the differences in performance with several popular responsive CS-Cart themes.

This table shows an average time and average data amount loaded during a user journey from the first touch point to the checkout page:

The speed test shows that PWAjet requires less traffic to load data. This results in a more speedy loading of a webpage as it is loaded once when a user opens your PWA store, without the need of reloading and re-rendering the same page. 

Look at the homepage upload figures. In PWA it loads a bit longer than for an average responsive theme. However, every further page loading by PWAjet eats less traffic and runs faster. 

Summarizing the above table, we can see that PWAjet needs 5 times less traffic and loads up to 3-4 times faster. If the user journey takes more pages, PWAjet will be lighter and faster than an average responsive theme after every next page loading!

Closing

Although themes and PWAjet are different by nature and area of use and don’t hinder each other, one should understand that both theme and PWA approaches are useful. Themes allow for more styles and have the strong dependencies with the desktop version of the site. PWAjet doesn’t actually enable eCommerce brand owners to bring all the desktop theme customizations. Instead, PWAjet offers a new lightweight version of your webpage which is a nice compliment to your existing shopping platform and / or marketplace. Mobile users will see your store from a new angle, not repeating the existing view. They will be able to add your page to their home screens and interact with you even when the connection is down.

Why not use the power of both approaches to have an app-like PWA technology in your reserve and a responsive CS-Cart theme with all the accumulated changes and modifications?