diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-14 12:26:35 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-14 12:26:35 -0400 |
commit | e8876fb866c3d89c432dcd04634e9bd2ced18022 (patch) | |
tree | 2c9a51310bd9bd8041e5d7bbb85bbfd010e2b514 /posts/chasing-performance.md | |
parent | c803e304d959f4926a55068d2b11f64bf4c95607 (diff) |
Switch things back to smu instead of lowdown
Diffstat (limited to 'posts/chasing-performance.md')
-rw-r--r-- | posts/chasing-performance.md | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/posts/chasing-performance.md b/posts/chasing-performance.md index 775456c..daf7b08 100644 --- a/posts/chasing-performance.md +++ b/posts/chasing-performance.md @@ -147,11 +147,11 @@ Webfonts I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them. -~~~css +```css body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; } -~~~ +``` For reference, there are some things you should to look out for when using custom typefaces: @@ -170,9 +170,9 @@ On top of that, I decided to also implement Filament Group's <a href="https://gi My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the <code>defer</code> property I can be sure to load the <code>IntersectionObserver</code> API polyfill after the rest of the DOM as finished loading. -~~~html +```html <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer> -~~~ +``` I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is. @@ -183,7 +183,7 @@ The only images I use are those included in supported blog posts, so the first s <span class="sidenote">I've also included responsive image sizes for further optimization based on screen size and loading speeds.</span> -~~~html +```html <figure> <picture> <source type="image/webp" @@ -203,12 +203,12 @@ The only images I use are those included in supported blog posts, so the first s class="lazyload"/> </picture> </figure> -~~~ +``` What about users with JavaScript disabled I hear you ask? It's time for <code>noscript</code> to save the day: -~~~html +```html <noscript> <picture> <source type="image/webp" @@ -226,7 +226,7 @@ What about users with JavaScript disabled I hear you ask? It's time for <code>no alt="Toggles Comparison"/> </picture> </noscript> -~~~ +``` ### HTTPS & Caching |