Add CWV on iOS workshop

Author: csswizardry

_includes/footer.html

@@ -12,6 +12,7 @@ <h4 class=band__title>Learn:</h4>
       <li><a href="/2024/12/a-layered-approach-to-speculation-rules/">Push Speculation Rules to the Max</a>
       <li><a href="/2021/02/measuring-network-performance-in-mobile-safari/">Improve Web Performance on iOS</a>
       <li><a href="/max-age/"><code>max-age</code> calculator</a>
+      <li><a href="/workshops/core-web-vitals-on-ios/">Core Web Vitals on iOS</a>
       <li><a href="/2024/09/optimising-for-high-latency-environments/">Design for High Latency</a>
       <li><a href="/2022/03/optimising-largest-contentful-paint/">Optimise Largest Contentful Paint</a>
       <li><a href="/2020/05/the-fastest-google-fonts/">Speed Up Google Fonts</a>

core-web-vitals-on-ios.md

@@ -0,0 +1,129 @@
+---
+layout: page
+title: Core Web Vitals on iOS
+page-class: page--services page--workshops
+meta: "Join the one-day workshop and get hands-on with Core Web Vitals in Safari"
+permalink: /workshops/core-web-vitals-on-ios/
+---
+
+**Safari’s getting Core Web Vitals in 2025. Are you ready?**
+
+<a href="/contact/" class="btn  btn--primary">Get Prepared</a>
+
+When [Google announced Core Web Vitals were coming to Chrome in
+2020](https://web.dev/articles/vitals#core-web-vitals), the web performance
+industry was a frenzy! Everyone wanted to get their sites in shape, and it was
+a great time for web performance.
+
+Five years on, Core Web Vitals have worked! The web as an ecosystem has gotten
+steadily faster across the board:
+
+<figure>
+<img src="/img/content/core-web-vitals-ios/origins-with-good-scores.png" alt="Chart showing an increasing trend in the number of origins passing all three Core Web Vitals" width="1200" height="1200">
+<figcaption>From the <a href="https://httparchive.org/reports/techreport/tech?tech=ALL#good-cwvs">HTTP Archive Technology Report</a></figcaption>
+</figure>
+
+**Or has it?**
+
+<a href="/contact/" class="btn  btn--primary">Get Ahead of the Curve</a>
+
+## Core Web Vitals on (Mobile) Safari
+
+It’s important to view Core Web Vitals through two distinct lenses:
+
+<img src="/img/content/core-web-vitals-ios/firefox-logo.png" alt="Firefox logo" width="128" height="128"
+     style="float: right;
+            margin-left: 24px;
+            shape-outside: url(/img/content/core-web-vitals-ios/firefox-logo.png);" />
+
+1. **[Core Web Vitals, the metrics](https://web.dev/articles/vitals):** Largest
+   Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift.
+   These metrics are platform agnostic and defined in a spec that any other
+   browser is free to implement. [Firefox already
+   has!](https://bugzilla.mozilla.org/show_bug.cgi?id=1722322)
+2. **[The Chrome User eXperience Report
+   (CrUX)](https://developer.chrome.com/docs/crux):** The public dataset used by
+   Google as a ranking signal for SEO. This is specific only to Chrome, so any
+   other browser—including Chrome on iOS!—is a blind spot.
+
+These two points yield two corresponding problems…
+
+1. Apple haven’t implemented any of the Core Web Vitals in their own browser,
+   Safari, and;
+2. Apple, until [iOS
+   17.4](https://developer.apple.com/support/alternative-browser-engines/),
+   hasn’t allowed any non-WebKit browser engine on the iOS platform.
+
+This means that we’ve had zero visibility of the Core Web Vitals metrics on iOS
+or any flavour of Safari at all. If you’re based in [North
+America](https://gs.statcounter.com/browser-market-share/mobile/united-states-of-america)
+or northwestern Europe, that may mean **the majority of your audience is
+completely unaccounted for**.
+
+However, things are about to change.
+
+<a href="/contact/" class="btn  btn--primary">Beat the Competition</a>
+
+<img src="/img/content/core-web-vitals-ios/safari-logo.png" alt="Safari logo" width="128" height="128"
+     style="float: left;
+            margin-right: 24px;
+            shape-outside: url(/img/content/core-web-vitals-ios/safari-logo.png);" />
+
+## Core Web Vitals Come to Safari
+
+Apple announced that Largest Contentful Paint and Interaction to Next Paint
+would be coming to Safari as part of [the Interop 2025
+project](https://webkit.org/blog/16458/announcing-interop-2025/)! This means
+that we can begin tracking and instrumenting two of the three Core Web Vitals
+before the end of the year!
+
+## Are You Prepared?
+
+If you’ve been focusing on Core Web Vitals for your Chrome visitors already,
+you’re well poised. But are you prepared for what it might mean for the
+business? Are your developers prepared for the different rendering engine? Do
+you know how to track site-speed in Safari if the data doesn’t go into CrUX?
+
+## Get the Workshop
+
+To help prepare clients—both new and old—I’ve designed a one-day workshop
+covering, but not limited to:
+
+* **Apple, Safari, and Core Web Vitals**
+  * Why can’t we get Core Web Vitals on iPhones?
+  * Why can’t we get Core Web Vitals in Safari?
+  * What even is Chrome on iOS?
+* **Key events**
+  * LCP is coming to Safari in 2025!
+  * Blink can run on iOS as of 17.4 (but it still doesn’t)
+* **What does Safari mean to you?**
+  * Based on your own audience, how much does it matter to you?
+  * Can we infer anything from existing Core Web Vitals data?
+* **How does Safari differ from Chrome?**
+  * WebKit vs. Blink
+  * JavaScriptCore vs. V8
+  * Performance API availability
+  * Interop 2025
+* **How do we measure Safari in the wild?**
+  * If it’s not in CrUX, where is it?
+  * Real user monitoring
+  * Which metrics can we capture
+* **Safari on localhost**
+  * Safari-specific devtools
+  * Tips, tricks, and workflows
+  * Testing real devices
+
+The goal is to leave the team aware of the upcoming changes, arm them with tools
+and knowledge to optimise for the different engines, and ensure that your Safari
+users aren’t being overlooked.
+
+### Remote or In-Person
+
+I much, much prefer in person workshops—it means we can hang out and probably
+head for drinks after! But as it’s only a single day, running the workshop
+remotely works pretty naturally. Remote workshops will be recorded for you to
+keep.
+
+Ready? [Let’s get it booked in!](/contact/)
+
+<a href="/contact/" class="btn  btn--primary">Arrange the Workshop</a>

img/content/core-web-vitals-ios/firefox-logo.png

@@ -50,6 +50,13 @@ it all, you end up with an up-skilled team and a faster website. It’s a win-wi
 
 <a href="/contact/" class="btn  btn--full">Organise a Workshop</a>
 
+## Core Web Vitals on iOS
+
+Core Web Vitals are coming to Safari! But it won’t be all plain sailing. Get
+yourselves prepared before the end of the year—we don’t have long!
+
+<a href="/workshops/core-web-vitals-on-ios/" class="btn  btn--full">Get ready for iOS</a>
+
 ## Lockdown Learning
 
 Missing conferences? Wanting to keep your team sharp during times of no travel?