Aggregate Difference
- Mobile: 6 points (7.93% slower)
- Desktop: 2 points (2% slower)
Test Method
Results are cumulated and averaged over the time period between the first tested and last tested dates. I send automated daily* requests to the PSI API for both mobile and desktop strategies, add the latest result for each strategy to its corresponding existing tally, then divide the tally by the number of times the test was performed, and round it to the nearest integer.
Formula: result ≈ Σ[day results] / times tested to date where ‘≈’ means rounded to nearest integer
* Additional tests are occasionally performed between the scheduled daily runs, so the times tested to date rubric will most likely not correspond to the number of days between first tested and last tested.
Embed Code Used
As provided by Adobe Fonts, IDs blotted out:
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">Potential Solutions
Load the font locally instead of remotely; strip unwanted characters to further reduce filesize
I don’t know the Adobe Fonts policy on this, but it’s possible to convert Adobe fonts to a webfont set and load them directly from your own server instead of from Adobe.
Keep in Mind
If you’re going to move your fonts from Adobe’s decent CDN, you should make sure your hosting is good enough to preserve the speed gains you’ll get from making local instead of remote calls. It doesn’t have to be better than Adobe’s, but it has to be good enough to not cancel out any potential gains.
Steps
- Activate your Adobe Fonts
- Find instructions on how to locate the OTF versions of the desired fonts on your local machine (example for macos)
- Convert them to webfont sets for use with
@font-facehere, here, or here- select only the language subset you want; this can drastically reduce the filesize of your webfont files by leaving out characters specific to languages you won’t need (in the case of English, the weight loss for most fonts I tested is over 60%)
- mind your leading; test the line-height of your converted fonts in an actual layout, as it may change during the conversion. This would be mostly visible in elements like buttons and form fields, where you might suddenly see uneven vertical gutters. If this happens, reconvert with different settings; find an online convertor that preserves the original leading (line-height) or gives you the option to control it
- Store the webfonts on your server and serve them locally in the usual way
- ensure you truly need all the font families and variants you include (example case: if your site only uses italics in one sentence in a secondary layout, probably not worth it to include the italic variants)
- Check your before and after speed scores multiple times
More from the Your Site On… Series
Your Site On: Standard YouTube Embed
A side-by-side comparison between a blank page and an otherwise identical page containing a standard YouTube embed.
Your Site On: HubSpot Form Embed
A side-by-side comparison between a blank page and a blank page containing a HubSpot form embed.
Your Site On: Adobe Fonts Embed (1 Font Family)
A side-by-side comparison between a blank page and an otherwise identical page containing one embedded Adobe Fonts font family.
Your Site On: Google Analytics
A side-by-side comparison between a blank page and an otherwise identical page containing a standard Google Analytics embed.