safari performance api

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Top 5 Web APIs for performance-based analysis (and how to use them)

Introduction

There are many tools available for analyzing your application’s performance. In this article, we will explore the Performance API, which is built into all modern browsers. Browser support for these APIs is very good, even going back as far as Internet Explorer 9.

During the lifetime of a page, the browser is busy collecting performance timing data in the background. It knows how long each step of the navigation process takes, and tracks the connection and download time of any external resources (static assets, API requests, etc.).

We’ll start by looking at the brains of this feature — the Performance interface — and look at how it calculates timestamps and durations. Next, we will look at some of the different entry types, and how we can create our own custom timings to analyze performance of any arbitrary code.

Jump ahead:

The Performance interface and High Resolution Time

Performanceentry, finding entries from the timeline, the resource timing api, the navigation timing api, creating marks, creating measures, watching for new performance entries with performanceobserver.

• Browser support for the Performance APIs

Reporting the data

Aggregating the data, data is not persisted, limitations.

The inbuilt performance monitoring APIs are all part of the Performance interface, exposed through the window.performance object. It captures many performance timings, including:

• Page load and navigation
• Loading of resources
• User-defined performance counters

Using Date.now() to create timestamps is not ideal when trying to capture precise performance timings. A system’s clock may be slightly slower or faster at keeping track of the time. This is known as clock drift and it affects all computers to some degree.

This can result in inaccurate timings, especially when synchronization with a Network Time Protocol (NTP) server creates adjustments to the system time. This can skew comparisons with any previous timestamps.

For this reason, performance timings instead use a DOMHighResTimeStamp . The main differences with this type of timestamp are:

• The timestamps are given in milliseconds, but include a fractional portion that is accurate down to the microsecond level (typically accurate to five microseconds)
• Instead of comparing with a previously taken system time, the timestamp represents the time elapsed since the time origin , which starts at zero when the page loads

The Performance Timeline API

Starting from when the page first loads (more accurately, when the browser context is created), the window.performance object maintains a buffer of performance events. This is a live data structure and additional actions (such as asynchronous requests and custom user timings) will add new entries to this timeline.

The timeline is made up of objects implementing the PerformanceEntry interface. There are different types of performance entries, which are provided by subtypes from different APIs, but they are all collected together here in a single timeline.

The properties in an entry vary depending on the subtype, but they generally all have these in common:

• name : An identifier for the entry. The value used for the name depends on the entry type; many entry types use a URL here
• entryType : Specifies the type of performance entry. Each PerformanceEntry subtype specifies its own entryType ; for example, a PerformanceNavigationTiming entry has an entryType of navigation
• startTime : A high-res timestamp, relative to the time origin (usually 0 , representing the moment when the context was created)
• duration : Another high-res timestamp that defines the duration of the event

The Performance object has three methods for finding performance entries. Each method returns an array of PerformanceEntry objects:

• getEntries : Returns all entries in the timeline
• getEntriesByName : Returns all entries with a given name. A given entry type can also be given to filter the results
• getEntriesByType : Returns all entries of a given type

You can also listen for new entries to be added at runtime by creating a PerformanceObserver . This is given a callback function that handle new entries, and provides the criteria that entry types listen for. Any future entries that match the criteria will be passed to the callback.

The Resource Timing API provides PerformanceResourceTiming entries for each network request made by the browser. This includes asynchronous XMLHttpRequest or fetch requests, JavaScript and CSS files (along with referenced resources such as images), and the document itself.

The timings mostly relate to network events such as DNS lookup, establishing a connection, following redirects, and receiving the response. A full list can be seen in the PerformanceResourceTiming documentation .

The name property of these entries will refer to the URL of the resource that was downloaded. Entries also include an initiatorType property that denotes the type of request. Common initiator types are css , script , fetch , link , and other .

In addition to timing information, each entry also includes the response body size.

Below is a sample entry from the LogRocket website , loading the Avenir Heavy font file referenced from a link tag:

The very first entry in the performance buffer is a PerformanceNavigationTiming entry with an entryType of navigation . There is only one navigation entry, and its startTime will be 0 , as it represents the start of the timeline. It contains timings for various events that occur as part of the navigating to, and loading of, the current page.

PerformanceNavigationTiming extends from PerformanceResourceTiming and inherits all of its network properties. It also includes timings related to loading DOM content, and firing the load event.

Over 200k developers use LogRocket to create better digital experiences

Here is a PerformanceNavigationTiming entry, again using the LogRocket website:

Creating your own timings with the User Timing API

Sometimes there may be operations other than resource and page loading that you want to measure. Maybe you want to see how well a piece of JavaScript performs, or measure the time between two events. The User Timing API allows us to create “marks” (points in time) and “measures” (measuring the time between two marks).

These functions create new entries in the performance timeline: PerformanceMark and PerformanceMeasure .

A performance mark is a named moment during the application runtime. It is used to capture a timestamp of an important event to be monitored. A mark is created by calling performance.mark with a name.

Suppose we want to calculate how long it takes to render a UI component. We can capture two marks: one just before the render begins, and another when it completes:

This will add two performance entries to the timeline, both of which have an entry type mark .

We can verify this by fetching all performance entries of type mark :

The returned array of entries will include our render-start and render-end marks. Each mark specifies the starting time as a high-res timestamp.

To calculate the time elapsed between these tests, we can call performance.measure . This function takes three arguments:

• A unique name for the measure
• The name of the starting mark
• The name of the ending mark

performance.measure calculates the time between the two named marks. The time measure will be captured in a new performance entry, with an entryType of measure , in the performance timeline.

The demo below shows marks and measures in action.

See the Pen Performance Marks and Measures by Joe Attardi ( @thinksInCode ) on CodePen .

So far, we’ve seen how we can call getEntries and getEntriesByType to retrieve performance entries on demand. With the PerformanceObserver API, we can instead listen for new performance entries. We can set criteria to define the types of events we are interested in, and provide functions to call whenever matching entries are created.

This callback is passed to the PerformanceObserver constructor. When new entries are received, this function is called with a PerformanceObserverEntryList , which is an iterable data structure that contains all of the newly created entries. The observer itself is also passed as a second argument to the callback.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Once we have defined the callback and created a PerformanceObserver , it will not take effect until the observer’s observe method is called.

Below is an example of listening for all resource performance entries:

Here’s a demo of listening for resource entries and sending HTTP requests:

See the Pen PerformanceObserver Demo by Joe Attardi ( @thinksInCode ) on CodePen .

Browser support for the Performance Timing APIs

The Performance Timing APIs have very good browser support. According to data from caniuse.com , support for the core performance APIs goes back several years and versions:

• Even Internet Explorer supports these APIs back to IE9!

Pros and cons of using the Performance API

Like any tool, there are advantages and disadvantages of using these APIs.

The strongest advantage of using the Performance Timing APIs to analyze your app’s performance is that they require no external libraries or services to capture their data. They are well integrated with the browser, especially for navigation and resource timing purposes. Detailed information is provided for these performance entries. The timings have very fine precision, and are not affected by clock drift.

The navigation timings start collecting the instant the context is created, so no data is missed as may happen using an external tool.

The downside of these tools are that they are usually not enough for a true solution on their own. Though they capture a lot of useful data about the browser session, there remain several gaps that you’ll likely need external libraries or services to fill.

We need a way to get the data off of the user’s computer and, likely, into an analytics tool in order for it to be of any use. This is not very difficult to solve from the client side; we just need to package up the data we have and send it off somewhere.

The Beacon API may be a good solution for this. It’s a lightweight “one-way” HTTP request that is particularly well-suited for sending analytics data. There are a few differences between a beacon and traditional asynchronous requests using XMLHttpRequest or fetch :

• The data is guaranteed to be sent : If we initiate a fetch request and the user navigates away from our app before the request is sent, the data is lost. Once initiated, a beacon will be transmitted even if we navigate away or close the tab
• The request is “fire and forget” : Once the beacon is sent, the browser does not await a response. The request is one-way in that any response that comes back is discarded and cannot be acted upon
• Limited to POST requests : A beacon can’t send a request with other methods such as PUT or PATCH

Note that beacons are not supported on any version of Internet Explorer.

The data from the performance timeline is mostly raw timings. There is no metadata, such as the operating system or browser version. This data will have to be obtained separately and sufficiently anonymized in order to be sent along with the performance timings.

All of the performance entries in the buffer are specific to the current page. This is not an issue for single-page applications , but for multi-page apps, all previous performance data is lost when navigating away.

This can be solved fairly easily by sending a beacon when leaving the page, or using some intermediary persistent storage ( web storage , IndexedDB, etc.).

The purpose of the Performance API is strictly to capture performance timings. It does not provide any other types of data. If you need to monitor user behavior or other metrics, you will need to reach for another tool.

The Performance APIs may be just one piece of an overall analytics solution, but they are an invaluable source of performance timing information that would otherwise be difficult to capture accurately. Even better is that we get it for free without needing to load any additional JavaScript or manually trigger any data collection!

We do have some extra work to do packaging the data and sending it to be aggregated, but it’s a very powerful tool built into today’s browsers. It also is well-supported on mobile device browsers.

LogRocket : Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #vanilla javascript

Stop guessing about your digital experience with LogRocket

Recent posts:.

Understanding the CSS revert-layer keyword

In this article, we’ll explore CSS cascade layers — and, specifically, the revert-layer keyword — to help you refine your styling strategy.

Exploring Nushell, a Rust-powered, cross-platform shell

Nushell is a modern, performant, extensible shell built with Rust. Explore its pros, cons, and how to install and get started with it.

Exploring Zed, an open source code editor written in Rust

The Zed code editor sets itself apart with its lightning-fast performance and cutting-edge collaborative features.

Implementing infinite scroll in Next.js with Server Actions

Infinite scrolling in Next.js no longer requires external libraries — Server Actions let us fetch initial data directly on the server.

Leave a Reply Cancel reply

How to Make Your Site Faster with the Performance API

Share this article

An Introduction to the Performance API

• Isn’t Date() Good Enough?

Recording Performance Metrics

Page navigation timing, page resource timing, browser paint timing, user timing, self-profiling api, tuning application performance, frequently asked questions (faqs) about performance api.

This tutorial explains how to use the Performance API to record DevTool-like statistics from real users accessing your application.

Assessing web application performance using browser DevTools is useful, but it’s not easy to replicate real-world usage. People in different locations using different devices, browsers, and networks will all have differing experiences.

The Performance API uses a buffer to record DevTool-like metrics in object properties at certain points in the lifetime of your web page. Those points include:

• Page navigation : record page load redirects, connections, handshakes, DOM events, and more.
• Resource loading : record asset loading such as images, CSS, scripts, and Ajax calls.
• Paint metrics : record browser rendering information.
• Custom performance : record arbitrary application processing times to find slow functions.

All the APIs are available in client-side JavaScript, including Web Workers . You can detect API support using:

Note: be aware that Safari doesn’t support all methods, despite implementing most of the API.

The custom (user) performance APIs are also replicated in:

• the Node.js built-in performance_hook module , and
• the Deno performance API (scripts using it must be run with the --allow-hrtime permission).

Isn’t Date() Good Enough?

You may have seen examples using the Date() function to record elapsed times. For example:

However, Date() calculations are limited to the closest millisecond and based on the system time, which can be updated by the OS at any point.

The Performance API uses a separate, higher-resolution timer that can record in fractions of a millisecond. It also offers metrics that would be impossible to record otherwise, such as redirect and DNS lookup timings.

Calculating performance metrics in client-side code is useful if you can record it somewhere. You can send statistics to your server for analysis using Ajax Fetch / XMLHttpRequest requests or the Beacon API .

Alternatively, most analytic systems offer custom event-like APIs to record timings. For example, the Google Analytics User Timings API can record the time to DOMContentLoaded by passing a category ( 'pageload' ), variable name ( "DOMready" ), and a value:

This example uses the Page Navigation Timing API. so let’s start there …

Testing your site on a fast connection is unlikely to be indicative of user experience. The browser DevTools Network tab allows you to throttle speeds, but it can’t emulate poor or intermittent 3G signals.

The Navigation Timing API pushes a single PerformanceNavigationTiming object to the performance buffer. It contains information about redirects, load times, file sizes, DOM events, and so on, observed by a real user.

Access the object by running:

Or access it by passing the page URL ( window.location ) to the getEntriesByName() method :

Both return an array with a single element containing an object with read-only properties. For example:

The object includes resource identification properties :

Note: performanceServerTiming name , description , and duration metrics are written to the HTTP Server-Timing header by the server response.

The object includes resource timing properties in milliseconds relative to the start of the page load. Timings would normally be expected in this order:

The object includes download size properties in bytes:

Finally, the object includes further navigation and DOM event properties (not available in Safari):

Example to record page loading metrics after the page has fully loaded:

The Resource Timing API pushes a PerformanceResourceTiming object to the performance buffer whenever an asset such as an image, font, CSS file, JavaScript file, or any other item is loaded by the page. Run:

This returns an array of resource timing objects. These have the same properties as the page timing shown above , but without the navigation and DOM event information.

Here’s an example result:

A single resource can be examined by passing its URL to the .getEntriesByName() method :

This returns an array with a single element:

You could use the API to report the load time and decompressed size of each CSS file:

The css array now contains an object for each CSS file. For example:

Note: a load and size of zero indicates the asset was already cached.

At least 150 resource metric objects will be recorded to the performance buffer. You can define a specific number with the .setResourceTimingBufferSize(N) method . For example:

Existing metrics can be cleared with the .clearResourceTimings() method .

First Contentful Paint (FCP) measures how long it takes to render content after the user navigates to your page. The Performance section of Chrome’s DevTool Lighthouse panel shows the metric. Google considers FCP times of less than two seconds to be good and your page will appear faster than 75% of the Web.

The Paint Timing API pushes two records two PerformancePaintTiming objects to the performance buffer when:

• first-paint occurs: the browser paints the first pixel, and
• first-contentful-paint occurs: the browser paints the first item of DOM content

Both objects are returned in an array when running:

Example result:

The startTime is relative to the initial page load.

The Performance API can be used to time your own application functions. All user timing methods are available in client-side JavaScript, Web Workers, Deno, and Node.js.

Note that Node.js scripts must load the Performance hooks ( perf_hooks ) module .

CommonJS require syntax:

Or ES module import syntax:

The easiest option is performance.now() , which returns a high-resolution timestamp from the beginning of the process’s lifetime.

You can use performance.now() for simple timers. For example:

Note: a non-standard timeOrigin property returns a timestamp in Unix time. It can be used in Node.js and browser JavaScript, but not in IE and Safari.

performance.now() quickly becomes impractical when managing multiple timers. The .mark() method adds a named PerformanceMark object object to the performance buffer. For example:

The following code returns an array of mark objects:

with entryType , name , and startTime properties:

The elapsed time between two marks can be calculated using the .measure() method . It’s passed a measure name, the start mark name (or null to use zero), and the end mark name (or null to use the current time):

Each call pushes a PerformanceMeasure object with a calculated duration to the performance buffer. An array of measures can be accessed by running:

Mark or measure objects can be retrieved by name using the .getEntriesByName() method :

Other methods:

• .getEntries() : returns an array of all performance entries.
• .clearMarks( [name] ) : clear a named mark (run without a name to clear all marks)
• .clearMeasures( [name] ) : clear a named measure (run without a name to clear all measures)

A PerformanceObserver can watch for changes to the buffer and run a function when specific objects appear. An observer function is defined with two parameters:

• list : the observer entries
• observer (optional): the observer object

This function is passed to a new PerformanceObserver object. The .observe() method then sets observable entryTypes (generally "mark" , "measure" , and/or "resource" ):

The performanceHandler() function will run whenever a new mark or measure object is pushed to the performance buffer.

The Self-profiling API is related to the Performance API and can help find inefficient or unnecessary background functions without having to manually set marks and measures.

Example code:

The trace returns data about what script, function, and line number was executing at every sampled interval. Repeated references to the same code could indicate that further optimization may be possible.

The API is currently under development (see Chrome Status ) and subject to change.

The Performance API offers a way to measure website and application speed on actual devices used by real people in different locations on a range of connections. It makes it easy to collate DevTool-like metrics for everyone and identify potential bottlenecks.

Solving those performance problems is another matter, but the SitePoint Jump Start Web Performance book will help. It provides a range of quick snacks, simple recipes, and life-changing diets to make your site faster and more responsive.

What is the Performance API and why is it important?

The Performance API is a powerful tool that allows developers to measure the performance of their websites and applications. It provides data about the time it takes for various parts of a web page or application to load and execute. This information is crucial for optimizing performance and improving user experience. By identifying bottlenecks and areas of slow performance, developers can make necessary adjustments to enhance speed and efficiency.

How does the Performance API work?

The Performance API works by providing a series of interfaces and methods that developers can use to collect performance data. These include the Performance interface, which provides access to performance-related information, and the PerformanceEntry interface, which represents a single performance metric. The API also includes methods for starting and stopping the measurement of performance metrics, and for retrieving the collected data.

What are some common uses of the Performance API?

The Performance API is commonly used to measure the load time of web pages and applications, the time it takes for scripts to execute, and the time it takes for resources to be fetched and loaded. It can also be used to measure the performance of specific parts of a web page or application, such as the rendering of images or the execution of JavaScript functions.

How can I start using the Performance API?

To start using the Performance API, you first need to access the Performance interface, which is typically available through the window.performance property. From there, you can use the various methods provided by the API to start and stop the measurement of performance metrics, and to retrieve the collected data.

What are the key differences between the Performance API and other performance measurement tools?

The Performance API provides a more detailed and accurate measurement of performance metrics than traditional tools such as timers or counters. It also allows for the measurement of performance metrics at a granular level, such as the time it takes for a specific part of a web page or application to load or execute.

Can the Performance API be used with other APIs?

Yes, the Performance API can be used in conjunction with other APIs to provide a more comprehensive view of performance. For example, it can be used with the Navigation Timing API to measure the time it takes for a web page to load, or with the Resource Timing API to measure the time it takes for resources to be fetched and loaded.

What are some limitations of the Performance API?

While the Performance API provides a powerful tool for measuring performance, it does have some limitations. For example, it cannot measure the performance of server-side operations, and it may not provide accurate measurements for operations that are performed in parallel.

How can I interpret the data provided by the Performance API?

The data provided by the Performance API can be interpreted in a number of ways, depending on the specific performance metrics you are interested in. For example, a high load time may indicate a bottleneck in your web page or application, while a high execution time may indicate a problem with your scripts.

Can the Performance API impact the performance of my website or application?

The Performance API is designed to have a minimal impact on the performance of your website or application. However, like any API, it does consume some resources, so it’s important to use it judiciously and to monitor its impact on performance.

What are some best practices for using the Performance API?

Some best practices for using the Performance API include starting and stopping the measurement of performance metrics at the appropriate times, using the API in conjunction with other APIs to provide a comprehensive view of performance, and interpreting the data provided by the API in the context of your specific performance goals.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

• Geoff Graham
• Feb 27, 2024

Reporting Core Web Vitals With The Performance API

• 13 min read
• Performance , API , Optimization , Core Web Vitals
• Share on Twitter ,  LinkedIn

About The Author

Geoff is a technical editor and writer at Smashing Magazine. On top of that, he’s an independent contractor who teaches front-end design and development classes … More about Geoff ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

This article has been kindly supported by our dear friends at DebugBear , who help optimize web performance to improve user experience. Thank you!

There’s quite a buzz in the performance community with the Interaction to Next Paint (INP) metric becoming an official Core Web Vitals (CWV) metric in a few short weeks. If you haven’t heard, INP is replacing the First Input Delay (FID) metric, something you can read all about here on Smashing Magazine as a guide to prepare for the change.

But that’s not what I really want to talk about. With performance at the forefront of my mind, I decided to head over to MDN for a fresh look at the Performance API . We can use it to report the load time of elements on the page, even going so far as to report on Core Web Vitals metrics in real time. Let’s look at a few ways we can use the API to report some CWV metrics.

Browser Support Warning

Before we get started, a quick word about browser support. The Performance API is huge in that it contains a lot of different interfaces, properties, and methods. While the majority of it is supported by all major browsers, Chromium-based browsers are the only ones that support all of the CWV properties. The only other is Firefox, which supports the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) API properties.

So, we’re looking at a feature of features, as it were, where some are well-established, and others are still in the experimental phase. But as far as Core Web Vitals go, we’re going to want to work in Chrome for the most part as we go along.

First, We Need Data Access

There are two main ways to retrieve the performance metrics we care about:

• Using the performance.getEntries() method, or
• Using a PerformanceObserver instance.

Using a PerformanceObserver instance offers a few important advantages:

• PerformanceObserver observes performance metrics and dispatches them over time. Instead, using performance.getEntries() will always return the entire list of entries since the performance metrics started being recorded.
• PerformanceObserver dispatches the metrics asynchronously, which means they don’t have to block what the browser is doing.
• The element performance metric type doesn’t work with the performance.getEntries() method anyway.

That all said, let’s create a PerformanceObserver :

For now, we’re passing an empty callback function to the PerformanceObserver constructor. Later on, we’ll change it so that it actually does something with the observed performance metrics. For now, let’s start observing:

The first very important thing in that snippet is the buffered: true property. Setting this to true means that we not only get to observe performance metrics being dispatched after we start observing, but we also want to get the performance metrics that were queued by the browser before we started observing.

The second very important thing to note is that we’re working with the largest-contentful-paint property. That’s what’s cool about the Performance API: it can be used to measure very specific things but also supports properties that are mapped directly to CWV metrics. We’ll start with the LCP metric before looking at other CWV metrics.

Reporting The Largest Contentful Paint

The largest-contentful-paint property looks at everything on the page, identifying the biggest piece of content on the initial view and how long it takes to load. In other words, we’re observing the full page load and getting stats on the largest piece of content rendered in view.

We already have our Performance Observer and callback:

Let’s fill in that empty callback so that it returns a list of entries once performance measurement starts:

Next, we want to know which element is pegged as the LCP. It’s worth noting that the element representing the LCP is always the last element in the ordered list of entries . So, we can look at the list of returned entries and return the last one:

The last thing is to display the results! We could create some sort of dashboard UI that consumes all the data and renders it in an aesthetically pleasing way. Let’s simply log the results to the console rather than switch gears.

There we go!

It’s certainly nice knowing which element is the largest. But I’d like to know more about it, say, how long it took for the LCP to render:

Reporting First Contentful Paint

This is all about the time it takes for the very first piece of DOM to get painted on the screen. Faster is better, of course, but the way Lighthouse reports it, a “passing” score comes in between 0 and 1.8 seconds.

Just like we set the type property to largest-contentful-paint to fetch performance data in the last section, we’re going to set a different type this time around: paint .

When we call paint, we tap into the PerformancePaintTiming interface that opens up reporting on first paint and first contentful paint .

Notice how paint spits out two results: one for the first-paint and the other for the first-contenful-paint . I know that a lot happens between the time a user navigates to a page and stuff starts painting, but I didn’t know there was a difference between these two metrics.

Here’s how the spec explains it:

“The primary difference between the two metrics is that [First Paint] marks the first time the browser renders anything for a given document. By contrast, [First Contentful Paint] marks the time when the browser renders the first bit of image or text content from the DOM.”

As it turns out, the first paint and FCP data I got back in that last example are identical. Since first paint can be anything that prevents a blank screen , e.g., a background color, I think that the identical results mean that whatever content is first painted to the screen just so happens to also be the first contentful paint.

But there’s apparently a lot more nuance to it, as Chrome measures FCP differently based on what version of the browser is in use. Google keeps a full record of the changelog for reference, so that’s something to keep in mind when evaluating results, especially if you find yourself with different results from others on your team.

Reporting Cumulative Layout Shift

How much does the page shift around as elements are painted to it? Of course, we can get that from the Performance API! Instead of largest-contentful-paint or paint , now we’re turning to the layout-shift type.

This is where browser support is dicier than other performance metrics. The LayoutShift interface is still in “experimental” status at this time, with Chromium browsers being the sole group of supporters .

As it currently stands, LayoutShift opens up several pieces of information, including a value representing the amount of shifting, as well as the sources causing it to happen. More than that, we can tell if any user interactions took place that would affect the CLS value, such as zooming, changing browser size, or actions like keydown , pointerdown , and mousedown . This is the lastInputTime property , and there’s an accompanying hasRecentInput boolean that returns true if the lastInputTime is less than 500ms .

Got all that? We can use this to both see how much shifting takes place during page load and identify the culprits while excluding any shifts that are the result of user interactions.

Given the experimental nature of this one, here’s what an entry object looks like when we query it:

Pretty handy, right? Not only are we able to see how much shifting takes place ( 0.128 ) and which element is moving around ( article.a.main ), but we have the exact coordinates of the element’s box from where it starts to where it ends.

Reporting Interaction To Next Paint

This is the new kid on the block that got my mind wondering about the Performance API in the first place. It’s been possible for some time now to measure INP as it transitions to replace First Input Delay as a Core Web Vitals metric in March 2024. When we’re talking about INP, we’re talking about measuring the time between a user interacting with the page and the page responding to that interaction.

We need to hook into the PerformanceEventTiming class for this one. And there’s so much we can dig into when it comes to user interactions. Think about it! There’s what type of event happened ( entryType and name ), when it happened ( startTime ), what element triggered the interaction ( interactionId , experimental), and when processing the interaction starts ( processingStart ) and ends ( processingEnd ). There’s also a way to exclude interactions that can be canceled by the user ( cancelable ).

Reporting Long Animation Frames (LoAFs)

Let’s build off that last one. We can now track INP scores on our website and break them down into specific components. But what code is actually running and causing those delays?

The Long Animation Frames API was developed to help answer that question. It won’t land in Chrome stable until mid-March 2024, but you can already use it in Chrome Canary.

A long-animation-frame entry is reported every time the browser couldn’t render page content immediately as it was busy with other processing tasks. We get an overall duration for the long frame but also a duration for different scripts involved in the processing.

When an INP interaction takes place, we can find the closest long animation frame and investigate what processing delayed the page response.

There’s A Package For This

The Performance API is so big and so powerful. We could easily spend an entire bootcamp learning all of the interfaces and what they provide. There’s network timing, navigation timing, resource timing, and plenty of custom reporting features available on top of the Core Web Vitals we’ve looked at.

If CWVs are what you’re really after, then you might consider looking into the web-vitals library to wrap around the browser Performance APIs.

Need a CWV metric? All it takes is a single function.

Boom! That reportAllChanges property? That’s a way of saying we only want to report data every time the metric changes instead of only when the metric reaches its final value. For example, as long as the page is open, there’s always a chance that the user will encounter an even slower interaction than the current INP interaction. So, without reportAllChanges , we’d only see the INP reported when the page is closed (or when it’s hidden, e.g., if the user switches to a different browser tab).

We can also report purely on the difference between the preliminary results and the resulting changes. From the web-vitals docs :

Measuring Is Fun, But Monitoring Is Better

All we’ve done here is scratch the surface of the Performance API as far as programmatically reporting Core Web Vitals metrics. It’s fun to play with things like this. There’s even a slight feeling of power in being able to tap into this information on demand.

At the end of the day, though, you’re probably just as interested in monitoring performance as you are in measuring it . We could do a deep dive and detail what a performance dashboard powered by the Performance API is like, complete with historical records that indicate changes over time. That’s ultimately the sort of thing we can build on this — we can build our own real user monitoring (RUM) tool or perhaps compare Performance API values against historical data from the Chrome User Experience Report (CrUX) .

Or perhaps you want a solution right now without stitching things together. That’s what you’ll get from a paid commercial service like DebugBear . All of this is already baked right in with all the metrics, historical data, and charts you need to gain insights into the overall performance of a site over time… and in real-time, monitoring real users .

DebugBear can help you identify why users are having slow experiences on any given page. If there is slow INP, what page elements are these users interacting with? What elements often shift around on the page and cause high CLS? Is the LCP typically an image, a heading, or something else? And does the type of LCP element impact the LCP score?

To help explain INP scores, DebugBear also supports the upcoming Long Animation Frames API we looked at, allowing you to see what code is responsible for interaction delays.

The Performance API can also report a list of all resource requests on a page. DebugBear uses this information to show a request waterfall chart that tells you not just when different resources are loaded but also whether the resources were render-blocking, loaded from the cache or whether an image resource is used for the LCP element.

In this screenshot, the blue line shows the FCP, and the red line shows the LCP. We can see that the LCP happens right after the LCP image request, marked by the blue “LCP” badge, has finished.

DebugBear offers a 14-day free trial . See how fast your website is, what’s slowing it down, and how you can improve your Core Web Vitals. You’ll also get monitoring alerts, so if there’s a web vitals regression, you’ll find out before it starts impacting Google search results.

10 Safari Mac Browser Tips to Boost Speed and Performance

If Safari is running slow, try these top tips to get your Mac browser blazing fast again.

Safari generally provides the fastest and most efficient browsing experience for Mac users. Apple puts a lot of work into optimizing the browser's performance and energy consumption specifically for Apple hardware.

Unfortunately, this doesn't always hold up over time. Safari can become slow, bloated, and unresponsive like any other browser. Let's take a look at how to speed up Safari on your Mac in case this happens to you.

1. Update and Restart Your Mac

Restarting your computer fixes many of life's problems, including a slow browser. It should always be your first troubleshooting step for such issues. Open the Apple menu and select Restart to do so.

Once your Mac boots up, it's also worth installing any outstanding app updates , which you can find by going to App Store > Updates .

2. Close Unneeded Tabs

How many tabs do you have open right now? And how many of those tabs do you really need? Safari keeps many of your tabs active in the background, even if you're not using them. One of the easiest ways to speed up Safari on your Mac is by simply closing tabs.

If you're particularly protective of your browser session, try an extension like Tab Suspender . This allows you to suspend your open tabs to save processing power.

3. Clear the Cache and Temporary Files

Like almost all browsers, Safari keeps a cache of data from all the websites you visit. This takes up disk space, which can contribute to performance problems. It's always a good idea to blow away Safari's cobwebs once in a while by emptying the cache, particularly if you need to improve the browser's performance.

To clear your Safari cache:

• Launch Safari and click Safari > Preferences in the menu bar at the top of the screen.
• Click on the Advanced tab, then check Show Develop menu in menu bar at the bottom of the window.
• Close the Preferences window and click Develop > Empty Caches in the menu bar at the top of the screen.

4. Disable Thirsty Extensions

Safari has some excellent extensions available to install, but sometimes they do more harm than good by slowing everything down. This is particularly true for extensions that directly affect the browsing experience. A good example is TamperMonkey ($1.99), which changes how websites appear and behave with user scripts.

To isolate extension-related slowdown, try disabling all your extensions under Safari > Preferences > Extensions . To disable an extension, uncheck the box next to its name.

You can then try re-enabling extensions one by one to find the culprit.

Disabling extensions in this manner doesn't remove them. You'll need to click the Uninstall button in each entry on the Extensions tab to completely remove Safari extensions .

5. Restrict Plug-Ins and Website Access

Apple has been working to eliminate plug-ins from Safari, but they might still cause your browser to slow down on rare occasions. This is most likely if you're running an older version of Safari.

It's best to ensure plug-ins ask you before Safari starts running them. The same goes for allowing access to your Mac's camera, microphone, screen sharing, and other security settings.

Go to Safari > Preferences > Websites to see which websites have requested access to your Mac. Work through each item in the sidebar and disable access for any websites that don't need it. We particularly recommend disabling auto-play.

In older versions of Safari, you should also go to Safari > Preferences > Security > Plug-In Settings . Make sure plug-ins are set to Ask before they start running. Disable any you don't need by unchecking them. These settings aren't available in newer versions of Safari.

6. Upgrade macOS

Yearly macOS upgrades include new versions of Safari. If you don't install the latest version of macOS, you won't have the latest version of Safari. New versions of Safari mean better compatibility with the latest web technologies.

Apple's tweaking under the hood often results in faster rendering times and a speedier browser experience overall.

There's also something to be said for upgrading your operating system since many underlying issues with your Mac get patched up along the way.

To update macOS, open the Apple menu and go to System Preferences > Software Update .

7. Identify Dodgy Websites and Crashed Tabs

Safari can slow to a crawl as a result of a single problematic website. Websites can crash for all sorts of reasons, including too many scripts, auto-playing advertisements, rogue extensions, and malfunctioning embeds. Occasionally, this can bring your whole Mac to a grinding halt.

Sometimes these pages consume more than their fair share of resources; other times they crash entirely and leave you with the spinning pinwheel of death. To rectify the situation:

• Launch Activity Monitor under Applications > Utilities .
• On the CPU tab, click on the Process Name column to arrange processes by name and find Safari .
• Now look at the % CPU column and systematically close your Safari tabs to see which ones have the biggest impact on your CPU usage.

8. Make Sure You Have Enough Free Space

A lack of free space on your disk can have devastating consequences for your Mac's overall performance. A Mac with limited free space is more likely to freeze, stutter, and crash. This can cause your whole system to run slowly, but Safari is often one of the first apps to buckle as individual resource-intensive tabs become unresponsive.

For best results, maintain a healthy buffer of 10GB or more of free space. Follow our tips for freeing up space on your Mac if you run out of options.

9. Fix Other macOS Performance Problems

Boosting overall system performance also speeds up Safari on your Mac. This is because there are fewer resources tied up in non-critical tasks, so more of them are available for Safari.

Take a look at these common mistakes that might slow down your Mac . They include having too many apps running in the background or starting up at login, which you can change by going to System Preferences > Users > Login Items .

10. Check for Network Connection Problems

If your internet connection is slow, Safari will also feel slow. To isolate connection problems, find out how to test your internet connection speed to see if that's to blame.

You might need to change your DNS settings to fix it, which you can do by going to System Preferences > Network > Advanced > DNS . Use Google's Namebench to find the fastest DNS settings for your network.

Keep a Backup Browser Installed Just in Case

Although you can follow all the tips above to speed up Safari on your Mac, it's also worth keeping a backup browser installed as well. These are useful to have for stubborn websites that aren't optimized for Safari or in case you need to use a browser extension that's only available on one browser.

使用 Performance API 获取页面性能

1. 什么是 performance.

首先 Performance 是一个标准，用于解决开发者在浏览器中获取性能数据的问题。其次， Performance 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据。它包含一组高精度时间定义，以及配套的相关方法。

2. 新的 Performance 标准

新的 Performance 标准包含了许多 API，它们各自针对性能监控的某个方面。但是目前 Performance 部分标准处于实验阶段，并未稳定发布，且已发布的标准，各浏览器支持度差异较大。

3. 旧的 Performance 标准

PerformanceTiming 接口是为了向下兼容而存在的接口。它包含了全部的 Navigation Timing 以及部分 Resource Timing 的数据。 PerformanceTiming 对象的兼容性是最好的，通过这个接口可以获取到页面从点击链接到页面渲染完毕的各个关键时间节点。

4. 如何获取 Performance

通过 window.performance 来获取 Performance 对象。

PerformanceEntry 接口可以分类获取 performance 运行时的实例数据，例如手动创建的 mark 标记产生的性能数据，或者是在异步资源加载时（css，script，ajax，等）被动创建的资源标记

二 PerformanceTiming

PerformanceTiming 接口提供了在页面加载和使用时的各种性能计时信息。通过 window.performance.timing 获得一个实例对象。

PerformanceTiming 接口的所有属性都是只读的，且没有任何继承属性，由于所有属性均是某个时间点，因此值类型都是 无符号 long long 类型（double）

(1) PerformanceTiming.navigationStart

PerformanceTiming.navigationStart 表示同一个浏览器上下文中，上一个文档卸载结束的 UNIX 时间戳。如果没有上一个文档，这个值与 PerformanceTiming.fetchStart 相同。

(2) PerformanceTiming.unloadEventStart

PerformanceTiming.unloadEventStart 表示 unload 事件抛出时的 UNIX 时间戳。如果没有上一个文档，或者重定向中的一个与当前文档不同源，该值为 0 。

(3) PerformanceTiming.unloadEventEnd

PerformanceTiming.unloadEventEnd 表示 unload 事件处理完成时的 UNIX 时间戳。如果没有上一个文档，或者重定向中的一个与当前文档不同源，该值为 0 。

(4) PerformanceTiming.redirectStart

PerformanceTiming.redirectStart 表示第一个 HTTP 重定向开始时的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，该值为 0 。

(5) PerformanceTiming.redirectEnd

PerformanceTiming.redirectEnd 表示最后一个 HTTP 重定向完成时（即最后一个 HTTP 响应的最后一个比特被接收到的时间）的 UNIT 时间戳。如果额米有重定向，或者重定向中的一个不同源，该值为 0 。

(6) PerformanceTiming.fetchStart

PerformanceTiming.fetchStart 表示浏览器准备好用 HTTP 请求来获取文档的 UNIX 时间戳。这个时间早于检查应用缓存。

(7) PerformanceTiming.domainLookupStart

PerformanceTiming.domainLookupStart 表示域名查询开始的 UNIX 时间戳。如果使用了持续连接，或者这个信息被存储到了缓存或本地资源，那么该值与 PerformanceTiming.fetchStart 相同。

(8) PerformanceTiming.domainLookupEnd

PerformanceTiming.domainLookupEnd 表示域名查询结束的 UNIX 时间戳。如果使用了持续连接，或者这个信息被存储到了缓存或本地资源，那么该值与 PerformanceTiming.fetchStart 相同。

(9) PerformanceTiming.connectStart

PerformanceTiming.connectStart 表示 HTTP 请求开始向服务器发送时的 UNIX 时间戳。如果使用持久连接，则该值与 PerformanceTiming.fetchStart 相同。

(10) PerformanceTiming.connectEnd

PerformanceTiming.connectEnd 表示浏览器与服务器之间的连接建立（即握手与认证等过程全部结束）的 UNIX 时间戳。如果使用持久连接，则该值与 PerformanceTiming.fetchStart 相同。

(11) PerformanceTiming.secureConnectionStart

PerformanceTiming.secureConnectionStart 表示浏览器与服务器开始安全链接的握手时的 UNIX 时间戳。如果当前网页不要求安全链接，该值为 0 。

(12) PerformanceTiming.requestStart

PerformanceTiming.requestStart 表示浏览器向服务器发送 HTTP 请求时的 UNIX 时间戳。

(13) PerformanceTiming.responseStart

PerformanceTiming.responseStart 表示浏览器从服务器收到（或从本地缓存读取）第一个字节时的 UNIX 时间戳。如果传输层从开始请求后失败并连接被重开，该值会被重置为新的请求的相应的时间。

(14) PerformanceTiming.responseEnd

PerformanceTiming.responseEnd 表示浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭的时间）的 UNIX 时间戳。

(15) PerformanceTiming.domLoading

Performance.domLoading 表示当前网页 DOM 结构开始解析时（即 Document.readyState 属性变为 loading ，相应的 readystatechange 事件触发时）的 UNIX 时间戳。

(16) PerformanceTiming.domInteractive

Performance.domInteractive 表示当前网页 DOM 结构解析结束，开始加载内嵌资源时（即 Document.readyState 的属性为 interactive ，相应的 readystatechange 事件触发时）的 UNIX 时间戳。

(17) PerformanceTiming.domContentLoadedEventStart

PerformanceTiming.domContentLoadedEventStart 表示解析器触发 DomContentLoaded 事件，即所有需要被执行的脚本已经被解析时的 UNIX 时间戳。

(18) PerformanceTiming.domContentLoadedEventEnd

PerformanceTiming.domContentLoadedEventEnd 表示所有需要被执行的脚本均已被执行完成时的 UNIX 时间戳。

(19) PerformanceTiming.domComplete

PerformanceTiming.domComplete 表示文档解析完成，即 Document.readyState 变为 complete 且相应的 readystatechange 事件被触发时的 UNIX 时间戳。

(20) PerformanceTiming.loadEventStart

PerformanceTiming.loadEventStart 表示该文档下， load 事件被触发的 UNIX 时间戳。如果还未发送，值为 0 。

(21) PerformanceTiming.loadEventEnd

PerformanceTiming.loadEventEnd 表示该文档下， load 事件结束，即加载事件完成时的 UNIX 时间戳，如果事件未触发或未完成，值为 0 。

3. 各个性能时间节点

先看一张社区流传甚广的图片：

这张图描述了从用户开始路由到这个页面，到这个页面完全加载完成，总过经历的所有过程，根据图片，我们可以划分出各个有意义的考察性能的时间节点：

三 PerformanceEntry

PerformanceTiming 是向下兼容的旧接口，且只能保存页面打开过程（从路由到该地址，到当前页面load事件触发完成）中的性能数据，如果需要在页面运行过程中持续获取性能数据，需要使用 PerformanceEntry 实例。

1. Performance.getEntries

Performance.getEntries([filterOption]) 方法用于获取 PerformanceEntry 实例数组，它接受一个可选的参数，如果不传则获取全部的 entry 数据。该参数对象可以包含以下，属性：

• name : performance entry 的名字
• entryType : entry 类型，合法的 entry 值可以从 PerformanceEntry.entryType
• initiatorType : 初始化资源的类型，取值由 PerformanceResourceTiming.initiatorType 接口定义

该方法返回 entries 数组，包含了所有符合筛选条件的 entry 。

2. Performance.getEntriesByName

Performance.getEntriesByName(name [, type]) 方法接受两个参数：

• name : 必选，这个 entry 的名称
• type : 可选，想要过滤的 entry 类型

返回符合条件的 entries 数组。

3. Performance.getEntriesByType

Performance.getEntriesByType(type) 方法接受一个 entryType ，返回符合类型的 PerformanceEntry 列表。

4. PerformanceEntry 属性

PerformanceEntry 的所有属性都是只读的

(1) PerformanceEntry.entryType，PerformanceEntry.name

PerformanceEntry.entryType 是一个 performance entry 的类型，值为 DOMString 。用于区分不同类型的 performance 数据。 PerformanceEntry.name 标识当前性能数据块的名称，它允许的值和类型随着 entryType 不同而不同

(2) PeformanceEntry.startTime

performanceEntry.startTime 表示这个 performance 数据被创建时的时间戳。根据不同的 entryType 值， startTime 取值的含义有些不同：

• frame : 指定的帧（ frame ）开始渲染时的时间
• mark : 该 mark 标记被创建时的时间戳（ performance.mark() 调用时的时间）
• measure : 该 measure 被创建时的时间戳（ performance.measure() 方法调用时的时间）
• navigation : 值为 0
• resource : 浏览器发起该资源请求时的时间戳

(3) PerformanceEntry.duration

performanceEntry.duration 表示这个 performance 数据标识的持续时间。根据不同的 entryType 值， duration 取值的含义有些不同：

• frame : 两个连续的帧开始渲染的时间之差
• mark : 值为 0， mark 标记没有持续时间
• measure : 要测量的 measure 的持续时间
• navigation : performanceEntry.startTime 和 performanceNavigationTiming.loadEventEnd 的差值
• resource : 该资源加载的耗时，即 performanceEntry.startTime 和 performanceResourseTiming.responseEnd 的差值

Performance 接口除了测量资源加载性能（PerformanceResourceTiming），渲染帧性能（PerformanceFrameTiming），页面初始化性能（PerformanceNavigationTiming）等等以外，还允许手动创建标记，让开发者在代码中测量程序执行的性能。

1. Performance.mark

performance.mark(name) 方法接受一个字符串，用于创建一个标记（mark），字符串即为这个标记的名称，这个标记会固定下创建时的时间戳。后续开发者可以通过不同标记的 startTime 值相减来获取一段代码的执行耗时，也可以通过 performance.measure 来计算耗时。该方法返回一个 mark 类型的 PerformanceEntry 实例。

一个标记（mark）具有以下属性值：

• entryType : 固定为 mark
• name : 创建标记时通过参数指定的标记名
• startTime : 创建 mark 时的时间戳
• duration : 0， mark 没有持续时间

mark 的 name 不要求唯一

2. Performance.measure

performance.measure(name [, startMarkName [, endMarkName]]) 方法创建一个 entryType 类型为 measure 的 PerformanceEntry 对象，用于计算两个标志位之间的间隔时间。它接受三个参数：

• name : 创建 measure 时指定的名称
• startMarkName : 可选，指定作为开始时间点的 mark 的名称
• endMarkName : 可选，指定作为结束时间点的 mark 的名称

该方法返回一个 measure 类型的 PerformanceEntry ，它具有以下属性

• entryType : 值为 measure
• name : 创建 measure 时的名称
• startTime : 这一段测量的开始时间，如果传了第二个参数，那就是该 mark 的标记时间
• duration : 这一段测量持续的时间

综上， duration 取值有三种情况

• 调用 performance.measure 创建 measure 时，三个参数都传递了，即 name, startMark, endMark 同时存在，那么 duration = startMark.startTime - endMark.startTime （注意，并不是 endMark - startMark），duration 此时可能是负值
• 创建 measure 只传了两个参数，即 endMark 不存在，那么该 measure 计算的是从 startMark.startTime 到创建 measure 时的时间间隔
• 创建 measure 只提供了一个参数，即 startMark, endMark 都不存在，那么该 measure 计算的是从页面打开到创建 measure 时的时间间隔

3. 清理 mark，measure

• Performance.clearMark([name]) 方法用于清理指定的 mark ，如果不提供参数，则所有 entryType 为 mark 的 PerformanceEntry 全部被清理。
• Performance.clearMeasure([name]) 方法用于清理指定的 measure ，如果不提供参数，则所有 entryType 为 measure 的 PerformanceEntry 全部被清理。

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 193 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

I'm always curious about these Safari Tech Preview posts. Are they just a quick way to add another headline? I suspect so, as I don't see many people trusting these builds as their daily driver. I've tried that in the past, but it never stuck.

Popular Stories

Apple Announces 'Let Loose' Event on May 7 Amid Rumors of New iPads

Apple Cuts Vision Pro Shipments as Demand Falls 'Sharply Beyond Expectations'

Apple Finally Plans to Release a Calculator App for iPad Later This Year

iOS 17.5 Will Add These New Features to Your iPhone

Apple Releases Open Source AI Models That Run On-Device

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

13 hours ago by Joe Rossignol

2 days ago by Tim Hardwick

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

PerformanceNavigationTiming

The PerformanceNavigationTiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.

Only the current document is included in the performance timeline, so there is only one PerformanceNavigationTiming object in the performance timeline. It inherits all of the properties and methods of PerformanceResourceTiming and PerformanceEntry .

The following diagram shows all of the timestamp properties defined in PerformanceNavigationTiming .

Instance properties

This interface extends the following PerformanceEntry properties by qualifying and constraining them as follows:

Returns "navigation" .

Returns the document's URL .

Returns a DOMHighResTimeStamp with a value of " 0 ".

Returns a timestamp that is the difference between the PerformanceNavigationTiming.loadEventEnd and PerformanceEntry.startTime properties.

This interface also extends the following PerformanceResourceTiming properties by qualifying and constraining them as follows:

The interface also supports the following properties:

A DOMHighResTimeStamp representing the time between when a document starts prerendering and when it is activated.

A DOMHighResTimeStamp representing the time at which the connection restart occurred due to Critical-CH HTTP response header mismatch.

A DOMHighResTimeStamp representing the time immediately before the user agent sets the document's readyState to "complete" .

A DOMHighResTimeStamp representing the time immediately after the current document's DOMContentLoaded event handler completes.

A DOMHighResTimeStamp representing the time immediately before the current document's DOMContentLoaded event handler starts.

A DOMHighResTimeStamp representing the time immediately before the user agent sets the document's readyState to "interactive" .

A DOMHighResTimeStamp representing the time immediately after the current document's load event handler completes.

A DOMHighResTimeStamp representing the time immediately before the current document's load event handler starts.

A NotRestoredReasons object providing report data on reasons why the current document was blocked from using the back/forward cache ( bfcache ) on navigation.

A number representing the number of redirects since the last non-redirect navigation in the current browsing context.

A string representing the navigation type. Either "navigate" , "reload" , "back_forward" or "prerender" .

A DOMHighResTimeStamp representing the time immediately after the current document's unload event handler completes.

A DOMHighResTimeStamp representing the time immediately before the current document's unload event handler starts.

Instance methods

Returns a JSON representation of the PerformanceNavigationTiming object.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Performance.navigation
• PerformanceNavigation

Release Notes for Safari Technology Preview 193

Apr 24, 2024

by Jon Davis

Safari Technology Preview Release 193 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 276610@main…277149@main .

Accessibility

Resolved issues.

• Fixed hidden elements targeted by aria-labelledby to expose their entire subtree text, not just their direct child text. ( 276864@main ) (125634439)
• Fixed accessible name computation for elements with visibility: visible inside a container with visibility: hidden . ( 277004@main ) (125738704)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. ( 276633@main ) (124713418)
• Fixed the style adjuster for @starting-style incorrectly invoking with a null element. ( 276993@main ) (125837628)
• Fixed the value attribute not getting displayed in an input element with type="email" and the multiple attribute. ( 276895@main ) (125221858)
• Fixed inconsistent output of Function.prototype.toString for accessor properties. ( 276904@main ) (125739577)
• Fixed intrinsic inline size calculators to account for whitespace before an empty child with nonzero margins. ( 276875@main ) (122586712)
• Fixed overlapping elements with flex box when height: 100% is applied on nested content. ( 276880@main ) (125572851)
• Fixed block containers that are scroll containers to default to unsafe alignment. ( 276929@main ) (125742095)

New Features

• Added support for PopStateEvent’s hasUAVisualTransition . ( 277001@main ) (125849073)
• Fixed cloning of ShadowRoot nodes following a DOM Standard clarification. ( 277066@main ) (125917138)

Web Inspector

• Fixed Console and code editor completion not auto-scrolling the suggestion into view. ( 277034@main ) (124979790)
• Fixed search in the DOM tree view unexpectedly chaning the text display. ( 277073@main ) (125797803)