Category: Performance

Render-blocking fonts refer to fonts that prevent a web page from rendering or displaying its content until the font has been loaded. This can cause a delay in the page loading, resulting in a slower user experience.

When a web page is loaded, the browser reads the HTML and CSS files to determine the layout and styling of the page. If a font is specified in the CSS, the browser will typically wait for the font to be loaded before rendering the page. This is known as a render-blocking font because it blocks the rendering of the page until the font is available.

Render-blocking fonts can be a problem because they can cause a delay in the page loading, especially if the font is large or takes a long time to load.

To avoid render-blocking fonts, let’s explore techniques to fix the issue.

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.

To get the viewport size using CSS in JavaScript, you can utilize the getComputedStyle method to access the content of a pseudo-element, such as ::before, which can be defined in your CSS media queries. This allows you to dynamically determine the viewport size category (e.g., small, medium, large) based on the current screen width, enhancing responsive design capabilities.

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.

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.