Skip to main content

16 posts tagged with "Browser APIs"

View All Tags

· Updated on · 6 min read

Page navigations in the browser can be categorized into different types, for example an initial navigation or a reload of an already open page.

This article looks at how different navigation types result in page load time differences and how you can detect the type of navigation in the browser.

· Updated on · 12 min read

Currently, there is no standardized way to measure Core Web Vitals and other web performance metrics inside single page applications (SPA) because they rely on soft navigations to respond to user actions, which are not as obvious to detect as hard navigations.

As of now, web performance monitoring tools can’t easily report web performance metrics for soft navigations. Instead, most metrics focus on the initial page load.

The main reason for this measurement gap is that we don’t yet have an agreed definition of what user actions qualify as soft navigations, which would allow developers of web performance tools and browser vendors to coherently detect and measure Web Vitals in single page applications.

However, there’s already some progress in the development of soft navigation reporting.

The Chrome developer team have started work on defining the heuristics and creating the APIs for reporting web performance metrics for soft navigations. The development is currently at an experimental stage, and the proposals are still not set in stone.

· Updated on · 25 min read

'Responsive images' is an umbrella term for a number of image optimization techniques that allow web designers and frontend developers to reduce page weight, improve site speed, and enhance user experience.

As image weight impacts your Largest Contentful Paint score, one of Google's Core Web Vitals metrics included in its search algorithm, you can also improve your SEO rankings by using responsive images.

Since images are a key aspect of web performance, in this article, we'll look into responsive images in detail, including their pros and cons, a handful of code examples, a couple of recommendations, and a bit of theory related to the subject.

· Updated on · 9 min read

Downloading or regenerating parts of a website can be slow, so caching is used to save resources for reuse later on. This can be done on the server backend or in the browser.

With server caching frequently requested data like fragments of HTML or database query results are saved. When a website visitor then requests these resources they can be served quickly. Server-side caching also reduces CPU load on the server.

Browser caching means storing downloaded resources locally on the user's device. For example, this can be done for images or CSS stylesheets. When a page is visited again the browser can reuse these resources instead of having to download them again. That way page content appears much more quickly.

· Updated on · 4 min read

To make your website load quickly you need the browser to prioritize loading the most important resources first. The new fetchpriority attribute for img, iframe, script, and link tags can help achieve this by marking the most important resources in the HTML.

· Updated on · 5 min read

Preload <link> tags are a type of browser resource hint. They tell the browser to start downloading a file before they would have been discovered otherwise.

You can use preload tags to make your site load faster, but when used incorrectly they can also slow it down. This article highlights common mistakes when using preload hints, and explains how to avoid them.

· Updated on · 3 min read

Browsers can set the Save-Data: on header to indicate that a user is on a connection that's slow or has high data costs. Websites can then adjust their responses to take that into account.

How many websites have added support for this header? We tested the homepages of 1092 sites and found 4 where the Save Data header had a noticeable impact (~0.4%).

· Updated on · 2 min read

Page speed testing tools collect a range of general-purpose performance metrics when loading a website. For example, they collect data on Core Web Vitals metrics like the Largest Contentful Paint or on the download size of the web page.

However, these metrics aren't tailored to the needs of your users. If you build a chat app the most important thing might be that messages are rendered quickly, even if the user can't send messages yet. For a game you might want to wait until all graphical assets are loaded, but not worry too much about the soundtrack being ready.