Early Hints and Mirage Affecting iOS Mobile Performance

Good Day!

After numerous tests, we have concluded that Early Hints and Mirage – both Beta features – are impacting our website’s performance when viewed on Apple (iOS) mobile devices. Details:

(1) Early Hints: Website is slower to load and some pages – depending on content – do not load uniformly.

(2) Mirage: Our above-the-fold images are being “forced” to lazy load and/or appear after the rest of our page images are loaded. This happens even after generating our website’s Critical CSS and excluding our above-the-fold images from lazy loading.

Once we turn off the above features, our website loads normally. Is anyone experiencing the same or similar issues? What is your experience? We have concluded the above features do not offer any true benefits.

Final Comment: Mirage has been in a “Beta” status for years. What is Cloudflare waiting for to update this feature? (i.e., remove it completely or change its status)

Thank you!


Our Environment:

Host: SiteGround
PHP: 7.4.27
CMS: WordPress 5.8.2
Theme: Avada 7.6
Cache Plugin: SG Optimizer
Performance Plugin: Perfmatters

Can you please provide some more info about this? Which content types are behaving how?
Since I do not use any iOS device, I can not help here, but others would pretty sure find this info useful.

Early hints must be supported by the Browser, depending on which iOS (and therefore Safari) version you are running this may vary.

I sadly must agree, but since I am a strong believer in native optimization, this should not be shocking. I think, a lot of Cloudflares feature/products are “just products” not solutions. They do not solve problems, specially not scalable, but they are very good in making bad pages not as bad as before. If you know what to do you are always:

  • better of
  • more independed
  • more flexible
  • cheaper

by solving problems by yourself and natively, where they occur.

Since you have not provided any domain, I can not inspect your domain any give any advices here.

2 Likes

Hi @M4rt1n,

Thank you for your kind and thorough reply. In response:

(1) Early Hints: When turned on, pages do not load uniformly. Meaning, some pages experience FOUC whiles others don’t. When we turn off EH, the issue goes away. Other minor, random issues are experienced as well.

(2) Mirage: When turned on and viewing our website using an iPhone and iPad (old and new models and iOS versions), our above-the-fold website’s logo and icons lazy load even though we have set them to preload and not to lazy load. That is, Mirage seems to override our backend, related settings.

Above is not a big issue, but does impact UX. You’re welcome to explore our website and provide feedback.

Concerning your input about scalability, I agree. CF provides tools and functionalities that may not work for all websites. So it’s up to the developers to test and use what works best for them and their customers.

Again, thank you for your input and assistance.

Thanks for the followup.

Early Hints ATM should not impact your site at all. Since I see you are have not even implemented it at your server. I don’t see any “link” header. Means Early Hints should not change anything. But I have to admit, that Cloudflare is actually very sloppy in specifying what to do to make it work. Basically the topic I complained about here: #LINK1

I actually just implemented it link I would HTTP/2 Push as it is meant as its successor. For me, it works. link-headers are getting threaten properly.

I see your preload tag and your data-perfmatters-preload="1" attribute at the pictures you are preloading. But the best way of preloading is getting done over the link-header. Don’t know if Avada supports this.

If you look at the data-perfmatters-preload="1" attr, you see it’s not a default tag. This is not respected by the browser by default, but actually just works with JS. This means, whatever this triggers, must be executed by

Therefore: please do not rely on any of these functions. They are just there to conceal the problem with JS, which to a certain point will help, until the JS part gets so heavy that it will not show any benefit.

How to do it:

  1. To implement preloads correct you need to set them in the link-header to signal the viewer’s browser, what he needs, BEFORE he even gets the content of the page.
  2. if you can not set any headers, please use the HTML preload tag in the head. But please notice that this tag is not as good as the header.
    You actually have set this tag:
<link rel='preload' href='https://www.omniaaerospace.com/wp-content/uploads/2015/02/omnia-home.jpg' as='image'>

You forgot to set the “type” attribute, which is recommended.
A proper preload tag looks like this:

<link rel=preload type=image/jpeg as=image href=/imagefolder/image.jpg>

It is not required but recommended. The issue here is Cloudflare can change the type to WebP if you have activated Polish, then it would mismatch. I am not using any of these features, as they do not change/alter everything needed, too.

Mirage is there to alter and change the loading order, if you do not prefer the loading order from Mirage, just disable it. Like I said, I am not a fan of these concealing products which are not solving any problem natively by its core.

ANYWAY:

  1. your preload setting is working on Desktop (not on mobile, as Mirage seems to interfere here)
  2. disable Mirage, and set the optimal loading order manually, with preloading and regular loading order.
  3. optimize your CSS on a per site base, since you can save 138,9 KiB of your total 149,0 KiB CSS file (~93%)
  4. remove ALL icon fonts and replace them with inline SVGs
    4.1. fa-solid-900.woff2
    4.2. awb-icons.woff (convert them into WOFF2)
  5. don’t use any “background-image”, always use overloaded image tags. See #LINK2, #LINK3
  6. Cache statically. Since your page does not include any dynamic content, there is no reason not to cache statically.
  7. restructure your siteground-optimizer-combined-css-{HASH}.css
    7.1. to not include any unnecessary render blocking.
    7.2. to not contain any unused CSS which is unused on ALL of your pages
    7.3. to load its parts in the optimal order (fonts, structure CSS, main CSS, other)
  8. if possible don’t use rasterized images for logo and “simple graphics” but instead use SVG.
  9. combine ALL JS and CSS which are combinable (some JS are not included in the combined JS)

And then remove Mirage, but let Early Hints activated. I don’t see any reason why Early Hints should cause problems, until the root cause of this problem is within Safari or somewhere else.

Hope that helps. Some of these tips require a template restructure. Therefore, some of it will be hard to implement, but since you are using Wordpress with a “universal theme” you have to realize that something that is focused on serving all use cases most probably is not focused on doing it very well for all and is more focused on flexibility than on performance.

I would never choose Wordpress for such a simple site. But that’s obviously personal preference.

3 Likes

Hi @M4rt1n,

Wow! Thank you so much for your input and tips.

Interesting enough, we are aware of most of your findings and recommendations. Unfortunately, we are restricted on implementing most of them due to the reasons you provided (i.e., WordPress, Theme, Cache Plugin limitations).

Concerning your CSS comments (Item 7), we are limited by the the capabilities of SG Optimizer (plugin), but do expect SiteGround to improve it over time to avoid or eliminate the issues you mentioned. Also, Avada (our theme) has a few bugs that need to be fixed. So, in short, our hands are tied for now without spending too much money to incorporate the changes your mentioned.

If you don’t mind, would love to see some of your websites and “learn” from them. Can you share a few?

Again, thank you. We have homework to do.

Happy New Year!

my own website you can find in my profile description. Howevery I created it 6 or 7 years ago (under a different domain) and moved it to my main domain some years ago. So the optimization-status is 6-7 years old.
Anyway my page ranked (at least in the section “performance”) more then 100/100 when I optimized it. now its about:

99-100/100 which shows how long such optimizations last.

Here the testresults to my website

www.hotmann.de

#ID TEST LINK RESULT
1. GPSI: GPSI Benchmark (99 / 100)
2. Web.dev: Web.Dev Benchmark (100 / 98 / 93 / 98)
3. GTmetrix: GTmetrix Benchmark (100% / 100% / 259ms / 0ms / 0)

Howevery here a webpage I currently create for a friend of mine, which should perform really good.
You can find the results to all the tests in the imprint (in german), but for simplicity reasons also here:

www.heldmayer.com

#ID TEST LINK RESULT
1. GPSI: GPSI Benchmark (100 / 100)
2. Web.dev: Web.Dev Benchmark (100 / 100 / 100 / 100 & ‘easteregg’)
3. WebPage: WebPageTest Benchmark (A+ / A / A / A / A / A / 1)
4. GTmetrix: GTmetrix Benchmark (100% / 100% / 135ms / 0ms / 0)
5. Pingdom: Pingdom Benchmark (99 / 54,8Kb / 130ms / 4)

(note that some subpages on this page are still missing since he did not provide me with the content yet)

Have fun.

P.S.: for none of these pages any paid Cloudflare feature was used. Polish etc are all disabled. All optimizations has been implemented natively and automized.
Key to optimization is simplicity & minimalism (specially when it comes to JS)
TBH: both are on paid (BIZ & ENT) plans, but no seperate features activated.

2 Likes

Hi @M4rt1n,

First, Happy New Year!

Wow, your websites are awesome. Simple, fast, and attractive. That’s that we way we like ours.

And yes, we agree with you 100% concerning all the Cloudflare features. Most of them are not needed. We recently performed additional testing of Cloudflare’s features (ON and OFF) and were quite surprised at the results. We concluded that turning OFF most of them actually made our website faster.

In short, here’s what we did:

All features OFF, except: TLS 1.3, Authenticated Origin Pulls, WAF (using default rules), Browser Integrity Check, Brotli, Enhanced HTTP/2 Prioritization, Workers, Normalize Incoming URLs, Normalize URLs to Origin, HTTP/2, IP Geolocation, and Hotlink Protection.

Also, SiteGround confirmed that Cloudflare works best when used purely as a CDN (with the above features ON). Nothing else.

PS: We’d like to reach out to you offline. Can you share your contact info (e.g., email address)?

Thank you!

Happy new year to you, too!

And 100% safe against any attack, since 0% dynamic and no server behind is needed and super cheap to host :slight_smile:

Thats sadly often the case when pages are already optimized, since Cloudflare by applying its optimization adds “weight” to the page in form of additional requests like “RockedLoader.js” or something like this.

Yes, exactly, use everything that does not work on JS base. Since otherwise it will just add renderblocking and slow down your page.

I personally am not a fan of SiteGround at all, but in this case they are right.

Yes, of course. I will drop you a PM since I dont want to post my EMail public because of crawlers that will catch it and send me more spam :slight_smile:

You are welcome!

1 Like

@M4rt1n,

Thank you. I’ll reach out to you offline.

Cheers!

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.