If you're using a third party font service like Google Fonts or Typekit you should work on mitigating potential latency. Say you have a typical Google Font embed code in your <head>. You could minimize the amount of time it takes to connect with that server using the preconnecthttps://w3c.github.io/resource-hints/preconnect resource hint. These hints will not load the resource but will do a DNS lookup for the host, TCP handshake, and optional TLS negotiation, all before the resource is actually requested. html A more widely compatible alternative to preconnect is dns-prefetch. It won’t establish a connection to the server, but it...
Serve through a Specialized CDN Serving content through a CDN has always been a key to improve performance. The edge servers are in diverse geographical locations and they will route users to the closest server to their location. Serving fonts through a CDN is no different. Sites like Adobe Fontshttps://fonts.adobe.com/ formally known as Typekit and Google Fontshttps://fonts.google.com/ provide a faster experience downloading the fonts to your devices. Combine the CDN service with preconnect or dns-fetch resource hints for an even faster experience. Cache fonts using a service worker Most of the time when we hear about Service Workers we hear...
Glyphhangerhttps://github.com/filamentgroup/glyphhanger is a Node application that will help you reduce the size of your fonts by subsetting them. There are times when we use just a few characters from a given font. For example, if we use a font just for headings there are many characters that you will not use, a subset will get rid of these unnecessary characters making the fonts smaller and providing a faster download. Another example is when the font supports multiple languages that you know you won't need for your project like Cyrillic when you know you will be working with English, Spanish, and...
Talking about web font performance is more than just talking about adding the fonts to a page using @font-face. That's just the beginning of our quest for performant fonts. Because of their size fonts tend to be some of the largest components of any web pages. According to the HTTP Archive, the median of requested fonts is 98KB for Desktop and 83.4KB for mobile. !Comparison of median font sizes from 2010 to todayhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/font-bytes Making our fonts performant is particularly important when working with large variable fonts; Roboto VFhttps://github.com/TypeNetwork/Roboto is 976KB when compressed with WOFF2 and, if not cached, can significantly...
Streams are a very interesting concept and a new set of tools for the web. The idea is that we can read and write, depending on the type of stream we're using, chunks of content... either write them to a location or read them from a location. This will improve performance because we can start showing things to the user before it has completed loading. The example below how we can asynchronously download and display content to the user. The problem with this, if you can call it that, is that fetch will wait to download the entire file before...
If you don't know I have a ton of different type and layout experiments in their own websitehttps://web-layout-experiments.firebaseapp.com/. I'll start sharing some of the demos I've been working on via Twitter and explain the code for some here. The full demo is available in Codepenhttps://codepen.io/caraya/pen/MZVbLz. The HTML The HTML is as simple as it comes. It's an h1 heading element inside a container div. We will use the container to place the title and the myTitle heading as the target for lettering.js html Nightfall This example uses only the heading. We could add more text and assume that this is...
While working with Workbox I discovered a hidden danger of opaque responses. This post will address these shortcomings and provide an imperfect solution for how to do it. Normally, opaque responses are not cacheable along with additional restrictions. See Jeff Posnick's Stack Overflow Answerhttps://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses for details but it boils down to the following items: - Because opaque responses are meant to be a black-box you won't get meaningful information from most of the properties of the Response class, or call the various methods that make up the Body interface, like json or text - Browsers pad the opaque resource size....
> Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement PE is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience. PE differs from Graceful Degradation GD in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover...
One of the things that have been tempting when working on a PWA for my layout experimentshttp://web-layout-experiments.firebaseapp.com has been to do everything at once and work on them in parallel. Reading Jason Grigsby'shttps://twitter.com/grigs Progressive Web Applicationshttps://abookapart.com/products/progressive-web-apps book from A Book Apart reminded me that we need to take it easy, plan ahead and do incremental deployment of PWA features. The basics What do I mean by this? There are three technical items that we know we need to turn a site into a PWA: - Host the site using HTTPS - A Web Manifest - A Service Worker The basics...
Journalism Now episode on archival issueshttps://itunes.apple.com/us/podcast/archive-issues/id380130877?i=1000084466768&mt=2 raised some interesting issues when it comes to archiving content and the longevity of the web. In this post, I will cover some of the issues I think are important for archiving the web and provide some ideas at least the beginning of some ideas for automating the archival of content and applications. It is important to note that not all these techniques will allow you to view the content right away and, in some cases, may only provide the data you can use to restore the content to a viewable state in some...
