skip to Main Content

https://caniuse.com/?search=prefetch describes placing the following in the section of an HTML page:

<link rel="prefetch" href="(url)">

Do the majority of web based HTML email clients respect prefetch?

E.g., Gmail

2

Answers


  1. Chosen as BEST ANSWER

    If the prefetch tag is in the body instead of the head section maybe Gmail and others may not strip it out:

    https://html.spec.whatwg.org/multipage/links.html#body-ok


  2. The way email works is that the email server like Gmail will take your code, securitise it according to a rigid whitelist, run a number of things such as image caching, and then stick your code on their page that you login to. So they are doing the majority of the performance work. This means we would not expect prefetching to be supported in general in email.

    Second, prefetching is said to be a hint to the browser that you might use the resource – like in Single Page Applications (SPA) where you don’t load everything straight up. Email is not a SPA, and instead always loads everything straight up.

    The majority of email clients don’t even support <link> (https://www.caniemail.com/features/html-link/) let alone JavaScript! So what exactly are you going to prefetch!?

    I’m not a regular user of prefetch but I note some implementations may require JavaScript, or work better with JS, so it may be irrelevant entirely for email (not sure): https://www.digitalocean.com/community/tutorials/html-preload-prefetch.

    I have seen one use case for an external CSS file, and that is with Apple Mail which does support <link>, where that CSS file is just interactive styling and so doesn’t need to load on other email clients that are more restrictive.

    Perhaps fonts? Again, the only possible place you can have fonts is macOS and a couple of others: https://www.caniemail.com/features/css-at-font-face/. Gmail only supports two fonts (Roboto and Google Sans) which are pre-cached in their systems anyway. I tried stress testing loading in tons of Google fonts in Apple Mail, and if I changed their test code from rel="stylesheet" on the <link> tag, the fonts didn’t load. If I removed their code <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> it made no difference – all the fonts loaded performantly.

    Perhaps images? The major email clients such as Gmail and Yahoo Mail pre-cache your images anyway.

    So in conclusion it’s neither necessary nor is there any evidence that it works to any noticeable effect even in Apple Mail (roughly the only one that may have effect on).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search