Preload Inter font to avoid FOIT on slow connections by germain-gg · Pull Request #17039 · element-hq/element-web

germain-gg · 2021-04-22T11:18:27Z

This pull requests adds <link rel="preload" /> to avoid FOIT (Flash Of Invisible Text) on slow connections.

html-webpack-plugin has been upgraded to v4.5.2. The previous version v3.2.0 was marked as deprecated and not compatible with a lot of newer webpack plugins. You can check the 4.0.0 release blog post for a summary of the breaking changes
Introducing html-webpack-inject-preload which is a recommended plugin from the html-webpack-plugin README

Because the HtmlWebpackPlugin is instanciated with inject: false we have to manually iterate through the entries and add the link tags.

I decided to only preload the Inter font on index.html as the other pages will likely not suffer the same issue

jryans

Looks reasonable overall, thanks for the update as well. 😄

jryans · 2021-04-22T12:52:10Z

            }),

+            new HtmlWebpackInjectPreload({
+                files: [{ match: /.*\.(woff2?|ttf|eot)$/ }],


Hmm, perhaps you could add Inter to the match expression as well, and then skip the conditional in the template? Right now we seem to have half the path in one place, and half in another.

No doubt that the logic is a bit scattered currently.
However even if I was to change the files that HtmlWebpackInjectPreload matches I would still have to do some filtering.

HtmlWebpackPlugin is designed at first to create a bunch of tags to inject in the <head> of right before the </body>.

However if we look at the plugin definition for src/vector/index.html we can read

{ // ... // we inject the links ourselves via the template, because // HtmlWebpackPlugin will screw up our formatting like the names // of the themes and which chunks we actually care about. inject: false }

Changing how the entry point is fundamentally generated seems out of scope for this task but I agree with you, would probably need some attention in the future

Changes in [1.7.29](https://github.com/vector-im/element-web/releases/tag/v1.7.29) (2021-05-24) =============================================================================================== [Full Changelog](element-hq/element-web@v1.7.29-rc.1...v1.7.29) ## Security notice Element Web 1.7.29 fixes (by upgrading to olm 3.2.3) an issue in code used for decrypting server-side stored secrets. The issue could potentially allow a malicious homeserver to cause a stack buffer overflow in the affected function and to control that function's local variables. ## All changes * Upgrade to React SDK 3.22.0 and JS SDK 11.1.0 * [Release] Bump libolm dependency, and update package name [\#17456](element-hq/element-web#17456) Changes in [1.7.29-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.7.29-rc.1) (2021-05-19) ========================================================================================================= [Full Changelog](element-hq/element-web@v1.7.28...v1.7.29-rc.1) * Upgrade to React SDK 3.22.0-rc.1 and JS SDK 11.1.0-rc.1 * Translations update from Weblate [\#17384](element-hq/element-web#17384) * Prevent minification of `.html` files [\#17349](element-hq/element-web#17349) * Update matrix-widget-api/react-sdk dependency reference [\#17346](element-hq/element-web#17346) * Add `yarn start:https` [\#16989](element-hq/element-web#16989) * Translations update from Weblate [\#17239](element-hq/element-web#17239) * Remove "in development" flag from voice messages labs documentation [\#17204](element-hq/element-web#17204) * Add required webpack+jest config to load Safari support modules [\#17193](element-hq/element-web#17193) Changes in [1.7.28](https://github.com/vector-im/element-web/releases/tag/v1.7.28) (2021-05-17) =============================================================================================== [Full Changelog](element-hq/element-web@v1.7.28-rc.1...v1.7.28) ## Security notice Element Web 1.7.28 fixes (by upgrading to matrix-react-sdk 3.21.0) a low severity issue (GHSA-8796-gc9j-63rv) related to file upload. When uploading a file, the local file preview can lead to execution of scripts embedded in the uploaded file, but only after several user interactions to open the preview in a separate tab. This only impacts the local user while in the process of uploading. It cannot be exploited remotely or by other users. Thanks to [Muhammad Zaid Ghifari](https://github.com/MR-ZHEEV) for responsibly disclosing this via Matrix's Security Disclosure Policy. ## All changes * Upgrade to React SDK 3.21.0 and JS SDK 11.0.0 Changes in [1.7.28-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.7.28-rc.1) (2021-05-11) ========================================================================================================= [Full Changelog](element-hq/element-web@v1.7.27...v1.7.28-rc.1) * Upgrade to React SDK 3.21.0-rc.1 and JS SDK 11.0.0-rc.1 * Switch back to release version of `sanitize-html` [\#17231](element-hq/element-web#17231) * Bump url-parse from 1.4.7 to 1.5.1 [\#17199](element-hq/element-web#17199) * Bump lodash from 4.17.20 to 4.17.21 [\#17205](element-hq/element-web#17205) * Bump hosted-git-info from 2.8.8 to 2.8.9 [\#17219](element-hq/element-web#17219) * Disable host checking on the webpack dev server [\#17194](element-hq/element-web#17194) * Bump ua-parser-js from 0.7.23 to 0.7.24 [\#17190](element-hq/element-web#17190) Changes in [1.7.27](https://github.com/vector-im/element-web/releases/tag/v1.7.27) (2021-05-10) =============================================================================================== [Full Changelog](element-hq/element-web@v1.7.27-rc.1...v1.7.27) * Upgrade to React SDK 3.20.0 and JS SDK 10.1.0 Changes in [1.7.27-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.7.27-rc.1) (2021-05-04) ========================================================================================================= [Full Changelog](element-hq/element-web@v1.7.26...v1.7.27-rc.1) * Upgrade to React SDK 3.20.0-rc.1 and JS SDK 10.1.0-rc.1 * Translations update from Weblate [\#17160](element-hq/element-web#17160) * Document option for obeying asserted identity [\#17008](element-hq/element-web#17008) * Implement IPC call to Electron to set language [\#17052](element-hq/element-web#17052) * Convert Vector skin react components to Typescript [\#17061](element-hq/element-web#17061) * Add code quality review policy [\#16980](element-hq/element-web#16980) * Register RecorderWorklet from react-sdk [\#17013](element-hq/element-web#17013) * Preload Inter font to avoid FOIT on slow connections [\#17039](element-hq/element-web#17039) * Disable `postcss-calc`'s noisy `warnWhenCannotResolve` option [\#17041](element-hq/element-web#17041)

germain-gg added 2 commits April 22, 2021 10:22

Upgrade html-webpack-plugin to v4.5.2

708f6a2

Preload Inter font to avoid FOIT on slow connections

417835f

germain-gg requested a review from a team April 22, 2021 11:18

Remove overzealous linter fixes

87806b8

jryans requested changes Apr 22, 2021

View reviewed changes

jryans mentioned this pull request Apr 22, 2021

Register RecorderWorklet from react-sdk #17013

Merged

Only inject Inter fonts to HtmlWebpackPlugin

8abc7cd

germain-gg requested a review from jryans April 22, 2021 13:31

jryans approved these changes Apr 22, 2021

View reviewed changes

Comment thread yarn.lock Outdated

Remove deprecated velocity-animate dependency from lock file

83359af

germain-gg merged commit 8692d6f into develop Apr 22, 2021

germain-gg deleted the gsouquet-preload-fonts branch April 22, 2021 16:15

Navigation Menu

Uh oh!

Uh oh!

Preload Inter font to avoid FOIT on slow connections - #17039

Preload Inter font to avoid FOIT on slow connections#17039
germain-gg merged 5 commits into
developfrom
gsouquet-preload-fonts

germain-gg commented Apr 22, 2021

Uh oh!

jryans left a comment

Uh oh!

Uh oh!

jryans Apr 22, 2021

Uh oh!

germain-gg Apr 22, 2021

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

germain-gg commented Apr 22, 2021

Uh oh!

jryans left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jryans Apr 22, 2021

Choose a reason for hiding this comment

Uh oh!

germain-gg Apr 22, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants