Category: Performance

Adding videos to your website can sometimes be a double-edged sword. Web users love high-resolution videos, but if your website isn’t optimized to handle them, such content can cause performance problems.

When it comes to optimizing background videos for fast loading, there are several steps you can take.

Measuring the success of a website project can be done through various metrics, depending on the goals and objectives of the project. Here are some common metrics used to measure the success of a website project:

Custom fonts impact performance through delayed text rendering and layout shifts. This is because they have to be downloaded and the layout must be repainted again. When a visible element on your website changes size or location, it might have an impact on the position of the content surrounding it. This is known as a layout shift.

Note that if a web font has not loaded, browsers typically delay text rendering.

Lazy loading is a strategy for identifying non-blocking (non-critical) resources and loading them only when needed. Typically happens in some user interactions such as scrolling or navigation. However, one scenario hasn’t been covered by the native loading="lazy" feature: the ability to control fetching delay. Let’s dive into it.

Optimizing images is always a good idea. It reduces the total amount of data being transferred over the network and memory consumption. What, if we could compress the image using JavaScript before uploading it to the server? It is possible. Let’s dive into that.

Reducing memory and CPU consumption by the Google Chrome browser has always been a challenge. Especially when you have a lot of tabs open. However, with the latest release the browser got 2 features: Memory Saver and Energy Saver.

Performance and accessibility are two important aspects of web development. Since they are related, optimising one might result in improvements in the other.

Web performance is all about making websites fast: loading, rendering, and interacting.

When pages load slowly or have a lot of content to load, the experience can be very clunky and unpleasant for all users. More resources to download also mean more data that needs to be transferred through the network and processed. Let’s explore the user and business impact and how this could be improved.

Accessibility focuses primarily on making websites usable for people with disabilities. However, many accessibility requirements also improve usability for everyone. For example, good color contrast means all users can see your content no matter what device they’re using or the lighting in their surroundings.

The browser viewport is the screen that actually shows the webpage. Determining its size might be handy when we want to provide some specific features for the viewport size. Here we want to utilize CSS media query and a little JavaScript to get the viewport size.

Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Lazy loading of images improves performance by reducing initial page load time, initial page weight, initial page rendering, and system resource usage.

1. Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
2. Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
3. Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
4. System resource usage – this refers to less resource usage like CPU, network, etc.

Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.