diff options
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 |