Speed of the START online cinema web client

When START online cinema was initially launched, it had limited content and functionality. There was no personalized experience, everything was stored in caches, given to all equally. The download speed was mainly affected by the size and quality of images and posters. Low-quality posters were unappealing, and high-quality posters had a noticeable impact on the download speed due to their weight.

As our content expanded and new features related to user behavior and preferences were added (such as personalized lines or story viewing functionality so that users didn’t have to see the stories they’d already watched), our client architecture had to evolve. For a significant period of time, the frontend team was focused on completing the architecture and components, while also optimizing the web client for user comfort. We aimed to ensure that our service worked as quickly and efficiently as possible. Let us tell you how we’ve achieved this goal.

Spoiler alert: literally at the expense of everything else.

Firstly, it is important to have a clear understanding of what constitutes a “quality website”. According to Google, a site’s quality is determined by four main factors:

• special features,
• recommendations,
• search engine optimization,
• performance

Let’s delve a bit deeper into each of these factors.

1. The “special features” parameter is connected with the challenges that may arise for people with disabilities. Basically, this parameter can be divided into four main categories: vision, hearing, motor skills, and cognitive abilities. It’s important to note that these categories can also include non-physical challenges, such as using a website in bright sunlight or using a smartphone with only one free hand on public transportation:

a. Vision⁣ — For visually impaired users, screen magnification can be helpful if the text is too small or difficult to read due to the color of the background;

b. Hearing — Hearing impaired users may benefit from subtitles or transcripts as an alternative to audio;

c. Motor skills⁣ — Motor skills disorders can impact the ability to use a computer mouse, touch screen, trackpad, or other devices;

d. Cognitive impairment covers a wide range of disorders, such as ADHD, dyslexia, and autism. Features for such users can vary but typically aim to minimize distractions such as blinking or heavy animation. Custom colors and styles may also be offered to improve readability and prevent headaches.

2. Recommendations — this parameter shows errors, such as incorrect aspect ratio for images, bugs in the browser console, semantic violations in HTML markup, issues with cross-platform requests, and constant requests for static resources that can be cached.

3. Search Engine Optimization, or SEO, refers to how search engines interpret our content, for instance, where links do not have clear content (e.g., it just says “here” or “click”) or where a document does not have a meta description, and so on.

4. Our main priority is performance, which consists of several points:

First Contentful Paint is the time it takes for the user to see some content on the web page, such as text or an image.

Speed index is the average time it takes to load and display visible parts of the page.

Largest Contentful Paint is the load time of the largest visual element on the page.

Total Blocking Time is the amount of time between the first rendering of content and the ability to interact with the page, during which the site is unresponsive.

Cumulative Layout Shift is a metric that shows how much the site’s grid changes during loading and its overall visual stability.

Essentially, each of these characteristics is self-explanatory — the higher the performance, the faster and better the site will be.

But I want to elaborate a little more on Largest Contentful Paint, since this metric often receives the lowest scores. This metric indicates the loading time of the largest visual element, which is typically an image or video. Video is usually loaded after the user’s actions. In most cases, the largest visual element is an image. To better understand how the browser handles images, let’s delve into how images are drawn by the browser and what optimization techniques are available.

1. Image rendering

Loading the image. The browser starts loading the image when the user requests a web page. In this process, it is important to have optimized images that are both high-quality and small in size.

Building the DOM and CSSOM. Once the image is loaded, the browser builds a Document Object Model (DOM) and CSS Object Model (CSSOM) by using the HTML code. These models define the structure and styles of the web page. Optimizing and minimizing the HTML and CSS code helps to reduce the time required to build the DOM and CSSOM, which speeds up the rendering process.

Calculations and positioning. The browser uses CSS properties and page layout to calculate the size and position of images. To speed up this process, it’s best to use the right units of measure, for example, relative units instead of fixed values, simplify calculations, and optimize CSS.

Loading and displaying the image. After determining the size and position, the browser loads the images.

Image display. Once the image is fully loaded, the browser renders it on the screen.

2. Optimization

Using the webP format. This image format is modern and efficient, it provides good image quality while reducing file size, resulting in faster loading times. webP is supported by most contemporary browsers.

Correct image sizes. The images should be sized to fit on the web page, as using images that are larger than necessary requires more time to load.

Using the Content Delivery Network (CDN). A CDN is a network of servers distributed over an area that allows content to be delivered to users from the server closest to them. Using a CDN to deliver images can significantly reduce download times, especially for users who are far away from the physical location of your server.

LazyLoad of images. LazyLoad only loads images when they become visible in the user’s viewport.

Let’s get to the specifics and figures.

To access the PageSpeed Insights tool in Google Chrome, simply go to the developer panel and select the Lighthouse tab. From there, you can select the type of report and device to be tested, along with the parameters that we discussed above. It’s best to run reports in incognito mode to ensure accurate results — this way browser caches won’t influence the testing. Click “analyze” to start the testing, which will show how the site performs on a default Moto G4 phone. After the test, you’ll receive a detailed report with recommendations for improving your scores.

We have already covered all the metrics, so let’s move on to the recommendations. They are quite straightforward and clear. For example, enable text compression, remove unused scripts or delay their loading if they are not used immediately when the site loads. Moreover, you can use images in webP format, specify their preliminary size to reserve space for rendering, and only load visible content on the device. This is especially crucial as it affects all parameters, including the loading of the largest content, total blocking time, and pre-loaded DOM tree size. Lastly, minify all scripts, styles, and so on. You can find a detailed list of other points in the report section.

How we optimized our work.

When we first launched our service, download speed wasn’t a major concern since we had limited content, so everything was working fine as it was. However, we continued to develop rather quickly — the amount of content was growing steadily, all the components were adding functionality and new ones were being added all the time, the experiments were showing great results. At some point, we realized that there was a lot of functionality, but pages loaded very slowly, and we had to do something about it. Then we used Lighthouse and

• stopped downloading all the content we had. We started using pagination wherever it was appropriate. For instance, in the main slider, we only load the slide that the user can see;
• We converted all the images to webP format;
• We added a scroll-loading of the home page bars;
• We postponed the loading of the scripts that are unnecessary at the time of the initial page display;
• We already had asynchronous requests from the beginning, since it makes no sense to block the total load time with a chain of requests and wait for their execution with the current technology;
• We moved everything we could to the server;
• We optimized the scripts.

As for the architecture, our website uses next.js, which is built on React and allows for Server Side Render (SSR). For us it is very convenient for many reasons, one of which is just the SSR. It also provides many useful tools for navigating between pages, handling urls, etc. One particularly interesting for us and useful for accelerating the site has been an Image component, which provides very rich functionality that is needed to optimize the images OBB. With a loading placeholder and LazyLoad it makes you add alt attributes (important for SEO), width and height attributes (important for total content shift metrics) and also gives the opportunity to immediately process source, etc. This has resulted in an 8-point increase in our performance score, which we are thrilled about.

We were able to half the load speed of our home page:

After implementing these recommendations, we also got faster loading times for other pages, such as a product or categories page, as they were applied at once for most components.

Conclusions from all of the above may seem a bit paradoxical — to achieve maximum effectiveness of the site, one should give the minimum, while displaying maximum content. This is the universal formula for faster load time.