Comments (9)
This is probably less valuable feature than I thought of it at first. The problem is that fonts are browser dependent. Inlining font preload strategy using ūsus is only going to benefit Google Chrome clients (and other browsers that support the same set of fonts).
from usus.
This goes for preloading (fonts) in general. Also: modern browsers are moving toward full .woff2
support and browsers that (will) support preloading will most probably also support .woff2
.
How about restricting this option to only (search-for-and-preload .woff2
?
from usus.
Does it have benefits over simply hardcoding pre-loading of the fonts into the HTML?
from usus.
"[…] hardcoding preloading in the HTML" — I'm not sure I follow?
The benefit of usus doing it is that it saves developer from thinking about it.
The benefit of browsers using preload hints is that browsers are very smart about preloading (as opposed to developer-JS-hacks-to-preload-stuff)
But I might not understand your Q?
from usus.
The benefit of usus doing it is that it saves developer from thinking about it.
Right. Lets add it. :-)
from usus.
Okay then. Learned the hard-way why inlining is not a smart idea.
uniform_bold-7cd51481fb1a3d9b6aaff18f58225d60.woff2
roboto_regular-080c52675a25ba31eae918c157be7a43.woff2
roboto_medium-434bb9e29238f527d00d3a94690c6d07.woff2
At least in my case, fonts (and other static assets) include hash as part of the name. Inlining that would require changing the server to able to access the asset names.
Working on this now.
from usus.
This is a bit more complicated than I thought it is going to be. Take this as an example.
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', sans-serif;
}
</style>
Should fonts be pre-loaded in this case as well?
The actual font URL will be something like https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2.
Assuming that https://fonts.googleapis.com/css?family=Open+Sans is geo-location optimized (linking different font based on the client IP), this might result in loading the same font multiple times from different URLs.
from usus.
Personally, I don't care about fonts, they are big and make the page slower.
from usus.
🎉
@david-trejo-ck You can opt-out of the feature using --preloadFonts false
.
from usus.
Related Issues (20)
- What makes styles 'critical'? HOT 2
- Pseudo classes missing from extracted CSS? HOT 2
- Skip `inlineStyles` when already inline? HOT 2
- preload non-critical CSS pattern? HOT 2
- Add tests
- Exclude CSS loaded by alien frames (e.g. third party scripts)
- Add a chart illustrating how usus integrates into the web stack
- Detect if a page responded with a 404 statusCode HOT 2
- Custom page load event. HOT 1
- Engines definition excludes node 6
- Ability to pass down custom Chrome settings HOT 1
- Prevent inline styling HOT 3
- media queries not included
- Postprocessing url() in result critical css HOT 4
- CentOS - ECONNREFUSED ip:port
- [Ask] How to Open Raw HTML (.html) in React 'Public' Folder?
- await is a reserved word (12:12) HOT 1
- Create examples for Node JS SEO crawlers use
- just prints to console no way of saving file HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from usus.