WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 4 months ago

#41071 new defect (bug)

Twenty Seventeen: Font Creates a Single Point of Failure

Reported by: jhabdas Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: ui, accessibility, performance Cc:

Description

In attempting to develop locally using the Twenty Seventeen theme I have noticed the round trip to Google to pull down a Web Font creates a single point of failure. Steve Souders did quite a bit of work in this area several years ago:

https://www.afasterweb.com/2015/08/15/avoiding-a-single-point-of-failure/

For Web Fonts the problem is quite bad because they cannot be deferred like scripts without creating a FOUT/FOUC. So I'm curious, why not simply host the Web Fonts locally? Why create a SPOF by relying on an external stylesheet to load the Web Font?

Change History (7)

#1 in reply to: ↑ description @jhabdas
6 months ago

I seem to be unable to edit my ticket. So here's a link directly to Steve's work, which is linked from the provided resource: http://www.stevesouders.com/blog/2010/06/01/frontend-spof/. Cheers.

#2 @SergeyBiryukov
6 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty Seventeen Theme Font Creates a Single Point of Failure to Twenty Seventeen: Font Creates a Single Point of Failure

#3 @jhabdas
6 months ago

I noticed the VIP Scanner plugin, a UI wrapped around the scanner library, errors WP.org theme review checks if it detects font files within a theme, which seems not right as it encourages individuals to use Web Fonts causing SPOF.

https://user-images.githubusercontent.com/440298/27259358-e10c35ac-5443-11e7-9365-5c6432f86ec6.png

Last edited 6 months ago by jhabdas (previous) (diff)

#4 @jhabdas
6 months ago

This image captures the 17 seconds I spent waiting for WordPress page content to appear a result of a Web Font SPOF:

https://user-images.githubusercontent.com/440298/27284820-ddbd2192-552c-11e7-9078-daf8899ae64e.png

This is of course not the Twenty Seventeen theme. But the effect is the same.

And though a DNS prefetch may help reduce the DNS lookup time it does not remove the SPOF introduced. Upon a cursory check it appears Twenty Seventeen does not currently perform DNS prefetching.

Last edited 6 months ago by jhabdas (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

#6 @afercia
6 months ago

  • Focuses accessibility removed

Removing the accessibility focus as not strictly related to universal access for everyone.

#7 @jhabdas
4 months ago

  • Focuses accessibility added

I'm in Indonesia (population 25M in capital only) and Google Fonts seem to be working but the WOFF and WOFF2 files become unexpectedly canceled in Yandex Browser. This causes all of the text on some of my pages to load using system fonts when fonts could be removed from Google to reduce the SPOF and prevent these kinds of edge cases worldwide.

https://i.supload.com/B1awx6KPW.png

Restored accessibility tag given "universal access" is a concern here, as SPOF causes an entire page to become unusable and certain portions of the world are more greatly affected than others as I've exemplified above.

Last edited 4 months ago by jhabdas (previous) (diff)
Note: See TracTickets for help on using tickets.