From d3e7ffa7f548801d4a5784d314aabdafe9186af7 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Fri, 19 Feb 2021 17:54:41 -0800 Subject: [PATCH 1/2] Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load. --- src/doc/rust.css | 6 ++++++ src/librustdoc/html/layout.rs | 4 ++-- src/librustdoc/html/static/rustdoc.css | 8 ++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/doc/rust.css b/src/doc/rust.css index a92d4ff54db83..ff18e1a8f51cc 100644 --- a/src/doc/rust.css +++ b/src/doc/rust.css @@ -3,30 +3,35 @@ font-style: normal; font-weight: 400; src: local('Fira Sans'), url("FiraSans-Regular.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), url("FiraSans-Medium.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Serif Pro'; font-style: normal; font-weight: 400; src: local('Source Serif Pro'), url("SourceSerifPro-Regular.ttf.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Serif Pro'; font-style: italic; font-weight: 400; src: url("SourceSerifPro-It.ttf.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Serif Pro'; font-style: normal; font-weight: 700; src: local('Source Serif Pro Bold'), url("SourceSerifPro-Bold.ttf.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Code Pro'; @@ -35,6 +40,7 @@ /* Avoid using locally installed font because bad versions are in circulation: * see https://github.com/rust-lang/rust/issues/24355 */ src: url("SourceCodePro-Regular.woff") format('woff'); + font-display: swap; } *:not(body) { diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index e5a686bd07d07..64b209a46c01d 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -82,7 +82,7 @@ crate fn render(
\ \
\ @@ -102,7 +102,7 @@ crate fn render( \ \"Change\ \
\ diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index e3d63fa2308e2..7da18409d5e0e 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -6,6 +6,7 @@ src: local('Fira Sans'), url("FiraSans-Regular.woff2") format("woff2"), url("FiraSans-Regular.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Fira Sans'; @@ -14,6 +15,7 @@ src: local('Fira Sans Medium'), url("FiraSans-Medium.woff2") format("woff2"), url("FiraSans-Medium.woff") format('woff'); + font-display: swap; } /* See SourceSerifPro-LICENSE.txt for the Source Serif Pro license. */ @@ -22,18 +24,21 @@ font-style: normal; font-weight: 400; src: local('Source Serif Pro'), url("SourceSerifPro-Regular.ttf.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Serif Pro'; font-style: italic; font-weight: 400; src: local('Source Serif Pro Italic'), url("SourceSerifPro-It.ttf.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Serif Pro'; font-style: normal; font-weight: 700; src: local('Source Serif Pro Bold'), url("SourceSerifPro-Bold.ttf.woff") format('woff'); + font-display: swap; } /* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */ @@ -44,12 +49,14 @@ /* Avoid using locally installed font because bad versions are in circulation: * see https://github.com/rust-lang/rust/issues/24355 */ src: url("SourceCodePro-Regular.woff") format('woff'); + font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 600; src: url("SourceCodePro-Semibold.woff") format('woff'); + font-display: swap; } * { @@ -684,6 +691,7 @@ a { width: calc(100% - 63px); } #crate-search { + min-width: 115px; margin-top: 5px; padding: 6px; padding-right: 19px; From f9cfe1583b18052bc5f42d92e8973e18ba404b19 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 2 Mar 2021 18:27:34 -0800 Subject: [PATCH 2/2] Use Arial as fallback font instead of sans-serif. On most platforms and browsers, `sans-serif` is equivalent to Arial. However, on Firefox on Ubuntu (and possibly other Linuxes), `sans-serif` is DejaVu Sans, a much wider font. This creates a larger shift in text when the custom fonts finally load. Arial is a web-safe font, and specifying it explicitly gives us more cross-platform consistency, as well as reducing the layout shift that happens when fonts load. --- src/librustdoc/html/static/rustdoc.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 7da18409d5e0e..94c231cb33a8b 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -136,7 +136,7 @@ h1, h2, h3, h4, #source-sidebar, #sidebar-toggle, /* This selector is for the items listed in the "all items" page. */ #main > ul.docblock > li > a { - font-family: "Fira Sans", sans-serif; + font-family: "Fira Sans", Arial; } .content ul.crate a.crate { @@ -482,7 +482,7 @@ h4 > code, h3 > code, .invisible > code { } #main > .since { top: inherit; - font-family: "Fira Sans", sans-serif; + font-family: "Fira Sans", Arial; } .content table:not(.table-display) { @@ -1301,7 +1301,7 @@ h4 > .notable-traits { .help-button { right: 30px; - font-family: "Fira Sans",sans-serif; + font-family: "Fira Sans", Arial; text-align: center; font-size: 17px; }