Define basic page markup (head tags) about ubc-def

[richardtape]

I'm all for absolutely everything in your branch in the head tag. Like the comments, too. Considering when I read the title, I immediately went to html5 boilerplate, I think that sums that up.

I'm not sure if this is a relevant comment to this issue due to the parentheses in the title but I'd really, really, like to not have jQuery in our basic page by default. Maybe we can link to the docs about how to include it properly should people wish.

[occupant]

Wholeheartedly agree about jQuery. It was placed there as an example of how to load an external javascript library (with subresource integrity and fallback) rather than an endorsement of jQuery specifically.

[richardtape]

For sure, and it's an excellent example. I think I'd just prefer it if either it was commented out by default, or we simply linked to a post on how - generically - to include external JS (with SI and Fallback).

Ultimately I don't want people picking this up and "accidentally" getting jQuery on every page load without realizing it. If I'm being totally honest I'm not completely averse to making it a little trickier for people to get jQuery in here in the first place.

[hazuremon]

I agree that jQuery should be remove or disable by default, so that developers will only enable it if they need to.

For Google Font, since it won't load for traffic coming from China, should we provide some information on this? I wonder if Google Font should be enable/available by default.

[occupant]

That's a good point about the Google Fonts. We could look at changing the swap value to optional. You can find details on the font-display property here and here. IE 11 doesn't support it of course, but it gets us 90% of the way for now.

Basically, from what I understand, font-display: swap; allows FOUT - it shows text and continues to load the font, then updates the text when it's ready (if ever).

font-display: optional; waits 100ms and then renders text regardless of whether the font has loaded or not. Need to confirm that it kills the request successfully, but otherwise I think this is the option that would be best suited.

The other values are font-display: fallback; and font-display: block; but those strike me as not what we want.

In terms of support for font-display, IE is an issue (caniuse).

All of that presupposes that we use it at all :/

[hazuremon]

Feedback based on latest discussions with contributors

• Test preload with swap optional and see how it impacts in China.
• remove jquery and use sample.js as placeholder

[occupant]

Google Font Testing from China with display=optional

• Test page - http://ws-bronze.webi.it.ubc.ca/sandbox/def/beta/page.html
• Results - https://www.webpagetest.org/result/191113_ER_fbb329c4d99675511adede666f7f0cfc/

[richardtape]

a) I love the look of the page
b) Am I reading this right? 38 seconds?

[occupant]

Yes. The reload is super quick, so it's really a connectivity issue. Everything is slow to get there, executes really fast. Uncached time to page interactive is 15s. Gross.

That said, there's a few injected scripts I have no clue about and it's Firefox on 3G. Do you know of any other ways to test in China? I'm not sure this is ideal.

EDIT: I really just want to see how the display=optional functions

[richardtape]

The only other thing I've seen mentioned is http://www.webkaka.com/ which, err, isn't the easiest to use or understand when you speak precisely zero words of any Chinese language.

But I threw the URL into the box next to the button marked 'Check' (handy random English word!) and the table that came up on the following page seemed...better?

[hazuremon]

The only other thing I've seen mentioned is http://www.webkaka.com/ which, err, isn't the easiest to use or understand when you speak precisely zero words of any Chinese language.

But I threw the URL into the box next to the button marked 'Check' (handy random English word!) and the table that came up on the following page seemed...better?

I just test it, but it doesn't seem to provide much detail like webpagetest.

Another one is easier to understand, but also not enough detail provided.
https://www.chinafy.com/tools/global-speed-test

[occupant]

Chinafy results for the same page are way faster (included screencap) but, yeah, not much in the way of details.

Edit: I'd be so happy if I could trust those results :)

[richardtape]

I think my point was it clearly shows it doesn't take 38 seconds to load, so there's something not quite right with the WPT results.

[hazuremon]

Yes. The reload is super quick, so it's really a connectivity issue. Everything is slow to get there, executes really fast. Uncached time to page interactive is 15s. Gross.

That said, there's a few injected scripts I have no clue about and it's Firefox on 3G. Do you know of any other ways to test in China? I'm not sure this is ideal.

EDIT: I really just want to see how the display=optional functions

Both Chinafy and webkaka showed pretty responsive page load and first patime, but without much detail provided.

[richardtape]

In this case, is it not in our best interest to get some manual verification of this? Can we get someone to take a look and allow us to compare to the Chinafy results? If the manual tests match up with the Chinafy results then we can use Chinafy moving forward as a true indication as to what is happening. Or am I missing something?

[occupant]

That would be ideal. WPT seems like a very poor tool for testing this specific scenario.

Do we know anyone in a major Chinese center that can run a test and send us the results? Our current Web Services coop is headed back to China in a month, but maybe he has some friends. I'll ask.

[hazuremon]

@occupant , could you also test a page without display=optional and run it again on Chinafy and webkaka?

[hazuremon]

I just test UBC.ca on Chinafy, and it does have a much longer load time on China based servers. Once it's identify as "slow", it does provide more detail, waterfall chart, on which request is slow.

[occupant]

@hazuremon So display=swap (google's recommended implementation) or omitted altogether?

[hazuremon]

Maybe just swap to see if there is any major difference? Kind of assume omitting it will slow down quite a bit?

[occupant]

Turns out the waterfall on Chinafy is always there. It's just hidden until you mouse over the row - UX alert! heh

http://ws-bronze.webi.it.ubc.ca/sandbox/def/beta/page-swap.html

http://ws-bronze.webi.it.ubc.ca/sandbox/def/beta/page-no-fonts.html (google font requests all removed)

http://ws-bronze.webi.it.ubc.ca/sandbox/def/beta/pages.html (display=optional)

[richardtape]

I'm starting to get optimistic about this. What a strange sensation.

[occupant]

I didn't run it on webkaka because I really can't make heads or tails of it. Could be I was hypnotized by the page design.

[hazuremon]

So basically performance wise, swap or optional have minimal performance difference? For swap, can we tell how long before the font is swapped in the test? Wonder if Google font takes 20s to load, will the swap happen 20s later?

[occupant]

That's what it looks like to me. You can see we go from 9 resources to 5 with almost no discernable difference.

swap makes sure you're not render-blocking and will create a flash of unstyled text (assuming your font comes late to the party).

optional tries to prevent flash of unstyled text by giving it up to 100ms to load, then moving on with whatever is loaded at that point and not ever swapping afterward.

To me, optional sounds better, but I don't feel strongly either way.

Also, spoke to our coop and he has some friends who may be able to run a real-world test within China if we make it easy enough for them to do so :)

[occupant]

@hazuremon re: swap time. No, we can't see in the waterfall where it actually does the swap - we'd probably have to review a render movie capture (like on wpt). And you're right about swap - that's how it's designed to work. The swap takes place when the font is ready, which could be anytime. So it it takes a minute to download, it will swap at that point.

This delayed load is common on slow connections (mobile esp) and looks really bad, especially if there's a big shift due to line length, height, etc. All of a sudden the page shifts when you're reading it. On a phone, that can mean you even have to reorient to find the place you were. That's basically the reason I prefer optional. The text is hidden for 100ms, then whatever font is available is shown.

[occupant]

Have tested and confirmed that &display=optional argument doesn't stop / end the request, it simply ignores result of the request if received following the allowed 100ms period.

• Recommendation (James) - With the confirmation above, it seems as though the only advantage to using &display=optional is to prevent the reflow of text when a font only becomes available late in the response. Detailed description of the properties : https://font-display.glitch.me. Recommend using &display=optional or &display=fallback (which has a 3s permissible font swap period) over &display=swap to prevent late render font rerendering.
• Recommendation (James) - for sites with a lot of international traffic (including China), recommend using local versions of the fonts in place of the Google hosted fonts. This gets past two issues. 1. The font resources will not be blocked by firewalls. 2. We will eliminate at least two http requests, meaning it should load as fast or faster. Local Fonts should be an configurable option in the CMS Templates (Wordpress / Drupal).

[occupant]

Running a few tests on chinafy.com and noticing the site.webmanifest file is just being a boatanchor. No idea why, it's just json, ~500bytes, yet over a second in many cases to resolve.

To reproduce - https://www.chinafy.com/tools/global-speed-test?site=http://ws-bronze.webi.it.ubc.ca/sandbox/def/beta/page.html&network=Good3G

To be clear, this is in ALL results, regardless of region. Found this as well, so not sure if it's lighthouse specific (they could be using Lightouse to produce results on chinafy.com) or a real issue. GoogleChrome/lighthouse#9505.

[occupant]

Ok, just ran a test with manifest vs no manifest on Chinafy. The results are startling

Until we can get confirmation that the site.webmanifest isn't killing performance, I'd say it's best to exclude it.

[occupant]

Visual representation of display value differences (source):

[hazuremon]

Team has reviewed and discussed the following:

1. Web font display approach between Fallback and Optional
2. Drop of jQuery in the default setup
3. Index.html boilerplate

For web font, long discussion towards the pros and cons of display=optional over display=fallback. Decision is to pre-set to display=optional due to:

• People hate FOUT (Flash of Unwanted Text)
• Impact - potentially affected a small group of people and only their first visit with alternative page views and refresh will see the web font
• Not seeing web font is not the decision of the site visitors, while performance impact does

jQuery already decided earlier and will be drop
#41 (comment)

index.html - to start from html5boilerplate but to be customize for our use. Separate issue to follow on index.html based on decisions made.