Safari for iOS 16 Wishlist

With WWDC 2022 now just a couple of weeks away here is my Web Developers wish list for Safari on iOS 16.

Native iframe Lazy Loading

Native lazy loading of iframes with loading='lazy' has shipped in Chrome and Edge already. This feature is available in Safari via Advanced Settings > Experimental Features so hopefully we’ll see this enabled by default in iOS 16. I’d find it useful to lazy load YouTube iframe embeds so they don’t load automatically until a user scrolls near them.

I requested this feature via Feedback Assistant - you can too .

Low-data Mode JavaScript API

A ‘Low Data Mode’ has been available in iOS Network Settings for a few years now. Setting this will disable automatic app updates, background iCloud syncing and lower the video/audio streaming quality in some apps. It’d be great if this setting was available to web developers via a JavaScript API.

I requested this feature via Feedback Assistant - you can too .

View Source Mode / Safari Web Inspector

There are a few simple ‘view source’ third-party apps in the App Store for this, but it’d be really nice to see a more feature-rich native option for debugging sites with iPadOS. Ideally it should have a JavaScript console, network page resources and element inspector tabs.

Web Inspector App for iPad

HTTP/3

The next version of the HTTP networking protocol, previously known as HTTP-over-QUIC is already enabled in Firefox, Chrome and Edge so it’d be great to see this enabled in Safari too.

Support for the prefers-reduced-data Media Query

The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content uses less data.

This would be very useful to use smaller file-size or no background images, or default to fallback fonts instead of downloading heavy custom fonts.

SVG Favicons

Safari is the only modern browser which doesn’t support SVG favicons . It’d be nice to see support added because SVG favicons can support media queries.

Experimental Features Menu Improvements

In the Experimental WebKit Features menu only the title is displayed, and that is often truncated and unavailable to view in full making it impossible to know what some features are.

See the screenshot on right for some examples.

• What is ‘Allow per media element speak…’?
• What does the ‘Aspect ratio of <img> from wid…’ do?
• What does ‘block top-level redirects by thir…’ mean?

I’d like there to be an info link to learn more about a particular feature to see the W3C spec / API details or a link to the relevant WebKit issue.

If a Safari Web Inspector feature was added then it could make sense to move these options to a tab there instead of hidden away many levels deep in System Settings.