aboutsummaryrefslogtreecommitdiff
path: root/posts/chasing-performance.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
committerBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
commite8876fb866c3d89c432dcd04634e9bd2ced18022 (patch)
tree2c9a51310bd9bd8041e5d7bbb85bbfd010e2b514 /posts/chasing-performance.md
parentc803e304d959f4926a55068d2b11f64bf4c95607 (diff)
Switch things back to smu instead of lowdown
Diffstat (limited to 'posts/chasing-performance.md')
-rw-r--r--posts/chasing-performance.md16
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 &amp; Caching