Closed Bug 1150118 Opened 10 years ago Closed 8 years ago

Lazyload tabzilla.css and MDN fonts

Categories

(developer.mozilla.org Graveyard :: Performance, enhancement)

Product:
developer.mozilla.org Graveyard
Component:
Performance
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: shobson, Unassigned)

Details

Lazy load tabzilla.css and the MDN fonts. Requirements for font lazy loading: - prefer if fallback displays on first visit and web font displays on second (no FOUT, all UT and then no UT.) - create very close fallback fonts so that difference is not immediately evident.
I remember lazyloading the CSS a while back but it did a wicked, wicked repaint or something else weird. I don't know that this is an option without changes to Tabzilla.
I think we'll have to copy a few lines of their CSS into our CSS, but I'm okay with that.
Severity: normal → enhancement
OS: Mac OS X → All
Hardware: x86 → All
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/b13892846fe678243299b5a2f84144e9e7893ba3 Bug 1150118 - Lazy load fonts Some clean up in anticipation of changes to font stuff: - Use variable to set font family - Use mixin to set font size - Added Arial to fallback list (more size appropriate than Helvetia which is Mac sans-serif default) - Line-height and letter-spacing should be relative to font-size not pixels https://github.com/mozilla/kuma/commit/0b0eeedd723e05d72afb5d108a4dce69c679ea67 Merge pull request #3168 from stephaniehobson/BUG-1150118-lazyload-fonts Bug 1150118 - Lazy load fonts
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/94b3ddb43bf54a3048ff113b4dedb53a48451a6e Bug 1150118: Lazyload Tabzilla Added necessary CSS to MDN sheets to prevent repaints as tabzilla js and css load. https://github.com/mozilla/kuma/commit/e999b23294f4d8392461ac9ebf2f6a90da2614d9 bug 1150118 - Ensure tabzilla link does not display until after load
:gerv I could use a 3rd opinion on the inclusion of the Font Face Observer library in the MDN. The original repo is here: https://github.com/bramstein/fontfaceobserver I copied only fontfaceobserver-standalone.js from the repo but the file did not include the license so I added the license into the file. I need to double check that 1) the license is compatible with MDN and 2) I am adhering to it. PR with details and links here: https://github.com/mozilla/kuma/pull/3192#discussion_r28984443 Thanks!
Flags: needinfo?(gerv)
shobson: the file you copied is minified. It seems to me that we should take the unminified file into the tree as well, even if we don't link to it anywhere. Adding the license to the top of the file(s) makes good sense, unless you create a subdir and put the files in it along with a LICENSE file. However, you seem to have added the copyright line, not the license text itself. You either need to add the contents of this: https://github.com/bramstein/fontfaceobserver/blob/master/LICENSE in a comment at the top (which doesn't fit well with minification), or do the subdirectory thing and add something like: BSD License - see LICENSE file to the minified file. Hope that helps, Gerv
Flags: needinfo?(gerv)
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/d32979b8b74e452cc03ec448ba694707c177285b Bug 1150118 - Lazy load fonts Added FontFaceObserver library. Added python to check for cookie to speed up loading fonts. Hand crafted fallback font declarations for several font declarations. Removed MozTT declarations from opensans.styl file. ToDo: - get Y/N go ahead - waffle - find solution for javascript disabled - check licence on FFO https://github.com/mozilla/kuma/commit/2de7605125b7f6ac160e8c03e788f5c393cae41d Merge pull request #3192 from stephaniehobson/BUG-1150118-lazyload-fonts Bug 1150118 - lazyload fonts
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/c77f6da3037287c3e41ae91ac0ea95329ff323b6 Bug 1150118: Dropping time out to 2 seconds Let's experiment with this for a week. It's not quite the "Can we just not swap out the fonts on first load" some people are asking for but it decreases how far someone can get before the swap happens, if it happens at all. https://github.com/mozilla/kuma/commit/3c293f921bdbad4d70833bf8c67c5c791625cf44 Merge pull request #3224 from stephaniehobson/BUG-1150118-lazyload-fonts Bug 1150118: Dropping time out to 2 seconds
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/397b78815150ab642f60d1262fb649a7805991d0 bug 1150118 - JavaScript code quality updates https://github.com/mozilla/kuma/commit/8f3241ddf5563d235f319fda51701825ab977f1e Merge pull request #3225 from darkwing/1150118-fonts bug 1150118 - JavaScript code quality updates
We've got a technique for this decided and working for open sans and open sans light :) Still to do: - Open Sans Extra Bold - remove code relating to waffling the behaviour.
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/9e44bc7562b99d5deafd47cd6563e962d99b27de Bug 1150118 - fixing munged variable name https://github.com/mozilla/kuma/commit/6d90a1204a3d5d7645f355c71f8e2c6fd52772cd Merge pull request #3275 from stephaniehobson/bug-1150118-lazyload-fonts Bug 1150118 - fixing munged variable name
The new redesign removes Open Sans Extra Bold from the site and the new zilla font is lazy loaded.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/4aed0cd374de8da4d7617ed6d2dfe7c878201cfa Bug 1150118: Fix lazy loading fonts (#4482) - repair zilla fallback font declaration - switch to mixin for all font-family declarations
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.