3/23/2023 0 Comments Make webfont![]() Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. That’s better than many sites do on high speed connections! The site is fully rendered in 3.7 seconds on first load, and 2.4 seconds on subsequent visits. I tested the site on a slow 3g connection based in Sydney (my servers are in the United States, and I don’t use a CDN). The improvement is even more dramatic on slower connections. On subsequent visits (after the font is in cache), the site finishes loading in about 400ms! On a high-speed internet connection, my site has it’s first contentful pain at 500ms (half a second) mark, and finishes rendering in 1.1 seconds (after the fonts load). If you want to play around with the source code, you can download it from GitHub.Īfter shifting my own site to this approach, I saw a dramatic improvement in performance. You can see a demo of this approach here. There are CSS rules that correspond to each type category shown. includes ( 'css/fonts.css' )) // Return the requested fileĪnd with that, we’re caching our web fonts and service them locally.Make your webfont active inside your Persona by referencing it in your CSS. Some themes also have an option to change the font-display property in their options.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |