Now that we've set up the baseline, let's see how much we can improve it. Enable a cache plugin We will first install a Cache Plugin to make easier to cache different portions of the website. I will use W3 Total Cachehttps://wordpress.org/plugins/w3-total-cache/ with the default settings. | Source | Form Factor | Performance | Best Practices | Accessibility | SEO | PWA | | --- | --- | :-: | :-: | :-: | :-: | :-: | | PSI | Mobile | 68 | 98 | 100 | 100 | N/A | | PSI | Desktop | 98 |...
It surprising to me that we still need to discuss font loading on the web after how long we've been able to load fonts using @font-face. Before we jump in let's do a brief trip down font loading memory lane. In the beginning we didn't have web fonts. We had to rely on web safe fonts that were guaranteed to be installed on most systems. CSS first introduced @font-face in 1998 but it faltered becaue, at the time, it did not providem any level of protection so font foundries were reluctant to let users load their fonts with @font-face so...
I think ch units in typography are cool, but there was something about them that I hadn't thought about and is something that may impact your site's performance metrics. This post will explore ch units, what they are and what they do. It will also discuss a problem presented by Silvestar Bistrović in Be careful with ch unitshttps://www.silvestar.codes/articles/be-careful-with-ch-units/ along with a possible solution. What are ch units According to the W3C's CSS Values and Units Module Level 3https://www.w3.org/TR/css-values-3/length-advance-measure candidate recommendation, the 'ch unit': > Represents the typical advance measure of European alphanumeric characters, and measured as the used advance measure...
In a previous posts, I discussed the basic of streams and how to use them,how to use them in service workers, and how to build custom streams. This post will cover an additional area of interest: Using Brotli compression in streams. Using Brotli compression The streams API supports GZIP and Deflate. There are other compression algorithms that are worth looking at, in particular Brotlihttps://en.wikipedia.org/wiki/Brotli. > Brotli is a lossless data compression algorithm developed by Google. It uses a combination of the general-purpose LZ77 lossless compression algorithm, Huffman coding and 2nd-order context modelling. Brotli is primarily used by web servers and...
Scopped CSS has been a hot topic in front-end development. It is designed to give you tighter control over your styles and how they interact with each other. The @scope at-rule The @scope root at-rule declares a scoping root and optional scoping limits associated with a set of style rules. Using the @scope at-rule we can specify: Rules that apply to all elements in the scope using the :scope seelector Rules that apply to specific elements in the scope that will override the default rules This example defines a scope of .card. All elements with a the class will be...
Performance is important. Performance will keep people coming back to your site. Performance is very hard to get right, specially for mobile devices. I'm particularly interested in seeing how my blog https://publishing-project.rivendellweb.nethttps://publishing-project.rivendellweb.net does in mobile. The first step is to check what the browser tells me: Running PageSpeed Insightshttps://pagespeed.web.dev/ will produce both mobile and desktop reports. What I find most interesting is the differences between mobile and desktop and between runs on different browsers. It also provides both the results of the Chrome User Experience CrUXhttps://developer.chrome.com/docs/crux/ for the site and the artificial results from Lighthouse. Unfortunately, there is no CrUX...
Since color-mixhttps://developer.mozilla.org/en-US/docs/Web/CSS/colorvalue/color-mix is now available in all browsers we can revisit what it is, how it works and one possible use in creating a customizable color palette. What is color-mix The color-mix function allows you to combine 2 colors, in a given color space, with the specified percentages of each color. The most basic usage uses only the color space and the two colors css .demo01 { background: color-mixin oklab, red, blue; } You can use percentage values to indicate how much of each color to apply to the mix. If you specify a percentage value, it will be subtracted...
The @layer at-rule manages CSS cascade layers, a way for authors to control specificity and order of appearance. This is important because those are two determining factors a browser considers when applying an element's style. Working with the cascade is one of the biggest pain points for developers so it would be awesome if we had a built-in way to manage it. To understand cascade layers, we need to understand origins as browsers use the term. When the browser composites styles, there are three primary origins: 1. User-Agent origin: The default styles applied by the browser 2. Author origin: The...
Thanks to Kevin Powell and his video for showing me how to do a trick that has always intrigued me. The idea is that we have a border color that fades to transparent or invisible. This will take two items: The border imagehttps://developer.mozilla.org/en-US/docs/Web/CSS/border-image property The linear gradienthttps://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient function Setup the HTML we will use looks like this html Item Title item content Item Title Item content Item Title item content We will also add some CSS to make make the row-based flex layout: css .row { display: flex; gap: 2em; justify-content: space-evenly; padding: 2em; } Creating the effect With all...
While I was researching gradients, I came across a couple of interesting features introduced in the CSS Color Level 4 specificationhttps://www.w3.org/TR/css-color-4/ You can specify the color you want the gradient to run on. This is called hue interpolation. The example below uses the OKLab color space in the conic gradient css .oklab01 { background: conic-gradient in oklab, red, orange, yellow, green, blue, indigo, violet ; } You can also specify how browsers interpolates the hues in a gradient The four possible values are: - shortest - longest - increasing - decreasing The Codepen below shows the different hue interpolation methods...
