chore: 11ty perf post
This commit is contained in:
cdransf
parent
881aca29c5
commit
50b14474d2
8 changed files with 185 additions and 21 deletions
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"timestamp": 1685981003659
|
||||
"timestamp": 1686146575943
|
||||
}
|
||||
46
cache/jsonfeed-to-mastodon.json
vendored
46
cache/jsonfeed-to-mastodon.json
vendored
|
|
@ -3357,7 +3357,7 @@
|
|||
"title": "🔗: The New New Reading Environment",
|
||||
"url": "https://www.nplusonemag.com/issue-45/the-intellectual-situation/the-new-new-reading-environment/",
|
||||
"content_text": "🔗: The New New Reading Environment https://www.nplusonemag.com/issue-45/the-intellectual-situation/the-new-new-reading-environment/",
|
||||
"date_published": "2023-05-15T00:00:00-08:00",
|
||||
"date_published": "2023-06-03T00:00:00-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110372126007474699"
|
||||
],
|
||||
|
|
@ -3901,5 +3901,49 @@
|
|||
"https://social.lol/users/cory/statuses/110492451050188548"
|
||||
],
|
||||
"lastTootTimestamp": 1685981003656
|
||||
},
|
||||
"https://www.disconnect.blog/p/apples-vision-pro-headset-deserves": {
|
||||
"id": "https://www.disconnect.blog/p/apples-vision-pro-headset-deserves",
|
||||
"title": "🔗: Apple's Vision Pro headset deserves to be ridiculed",
|
||||
"url": "https://www.disconnect.blog/p/apples-vision-pro-headset-deserves",
|
||||
"content_text": "🔗: Apple's Vision Pro headset deserves to be ridiculed https://www.disconnect.blog/p/apples-vision-pro-headset-deserves",
|
||||
"date_published": "2023-06-05T00:00:00-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110494368281450857"
|
||||
],
|
||||
"lastTootTimestamp": 1686010258442
|
||||
},
|
||||
"http://joe-steel.com/2023-05-24-Happy-Hour-vs-Wine-Lists.html": {
|
||||
"id": "http://joe-steel.com/2023-05-24-Happy-Hour-vs-Wine-Lists.html",
|
||||
"title": "🔗: Happy Hour vs. Wine Lists",
|
||||
"url": "http://joe-steel.com/2023-05-24-Happy-Hour-vs-Wine-Lists.html",
|
||||
"content_text": "🔗: Happy Hour vs. Wine Lists http://joe-steel.com/2023-05-24-Happy-Hour-vs-Wine-Lists.html",
|
||||
"date_published": "2023-06-03T00:00:00-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110495282093879757"
|
||||
],
|
||||
"lastTootTimestamp": 1686024202072
|
||||
},
|
||||
"https://letterboxd.com/cdme/film/gone-girl/": {
|
||||
"id": "https://letterboxd.com/cdme/film/gone-girl/",
|
||||
"title": "🎥: Gone Girl, 2014 - ★★★★½",
|
||||
"url": "https://letterboxd.com/cdme/film/gone-girl/",
|
||||
"content_text": "🎥: Gone Girl, 2014 - ★★★★½ https://letterboxd.com/cdme/film/gone-girl/",
|
||||
"date_published": "2023-06-06T13:23:37-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110498113821911570"
|
||||
],
|
||||
"lastTootTimestamp": 1686067410675
|
||||
},
|
||||
"https://letterboxd.com/cdme/film/dog-day-afternoon/": {
|
||||
"id": "https://letterboxd.com/cdme/film/dog-day-afternoon/",
|
||||
"title": "🎥: Dog Day Afternoon, 1975 - ★★★★★",
|
||||
"url": "https://letterboxd.com/cdme/film/dog-day-afternoon/",
|
||||
"content_text": "🎥: Dog Day Afternoon, 1975 - ★★★★★ https://letterboxd.com/cdme/film/dog-day-afternoon/",
|
||||
"date_published": "2023-06-07T12:39:38-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110503301997648615"
|
||||
],
|
||||
"lastTootTimestamp": 1686146575941
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
{% include "icons/github.liquid" %}
|
||||
{% include "icons/mastodon.liquid" %}
|
||||
{% include "icons/lastfm.liquid" %}
|
||||
{% include "icons/musicbrainz.liquid" %}
|
||||
{% include "icons/instapaper.liquid" %}
|
||||
{% include "icons/letterboxd.liquid" %}
|
||||
{% include "icons/trakt.liquid" %}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
{% if site.listenbrainz != "" %}
|
||||
<a
|
||||
href={{ site.listenbrainz }}
|
||||
rel="me"
|
||||
title="ListenBrainz">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ListenBrainz</title>
|
||||
<path
|
||||
d="M11.582 0L1.418 5.832v12.336L11.582 24V10.01L7.1 12.668v3.664c.01.111.01.225 0 .336-.103.435-.54.804-1 1.111-.802.537-1.752.509-2.166-.111-.413-.62-.141-1.631.666-2.168.384-.28.863-.399 1.334-.332V6.619c0-.154.134-.252.226-.308L11.582 3zm.836 0v6.162c.574.03 1.14.16 1.668.387a2.225 2.225 0 0 0 1.656-.717 1.02 1.02 0 1 1 1.832-.803l.004.006a1.022 1.022 0 0 1-1.295 1.197c-.34.403-.792.698-1.297.85.34.263.641.576.891.928a1.04 1.04 0 0 1 .777.125c.768.486.568 1.657-.318 1.857-.886.2-1.574-.77-1.09-1.539.02-.03.042-.06.065-.09a3.598 3.598 0 0 0-1.436-1.166 4.142 4.142 0 0 0-1.457-.369v4.01c.855.06 1.256.493 1.555.834.227.256.356.39.578.402.323.018.568.008.806 0a5.44 5.44 0 0 1 .895.022c.94-.017 1.272-.226 1.605-.446a2.533 2.533 0 0 1 1.131-.463 1.027 1.027 0 0 1 .12-.263 1.04 1.04 0 0 1 .105-.137c.023-.025.047-.044.07-.066a4.775 4.775 0 0 1 0-2.405l-.012-.01a1.02 1.02 0 1 1 .692.272h-.057a4.288 4.288 0 0 0 0 1.877h.063a1.02 1.02 0 1 1-.545 1.883l-.047-.033a1 1 0 0 1-.352-.442 1.885 1.885 0 0 0-.814.354 3.03 3.03 0 0 1-.703.365c.757.555 1.772 1.6 2.199 2.299a1.03 1.03 0 0 1 .256-.033 1.02 1.02 0 1 1-.545 1.88l-.047-.03a1.017 1.017 0 0 1-.27-1.376.72.72 0 0 1 .051-.072c-.445-.775-2.026-2.28-2.46-2.387a4.037 4.037 0 0 0-1.31-.117c-.24.008-.513.018-.866 0-.515-.027-.783-.333-1.043-.629-.26-.296-.51-.56-1.055-.611V18.5a1.877 1.877 0 0 0 .426-.135.333.333 0 0 1 .058-.027c.56-.267 1.421-.91 2.096-2.447a1.02 1.02 0 0 1-.27-1.344 1.02 1.02 0 1 1 .915 1.54 6.273 6.273 0 0 1-1.432 2.136 1.785 1.785 0 0 1 .691.306.667.667 0 0 0 .37.168 3.31 3.31 0 0 0 .888-.222 1.02 1.02 0 0 1 1.787-.79v-.005a1.02 1.02 0 0 1-.773 1.683 1.022 1.022 0 0 1-.719-.287 3.935 3.935 0 0 1-1.168.287h-.05a1.313 1.313 0 0 1-.71-.275c-.262-.177-.51-.345-1.402-.12a2.098 2.098 0 0 1-.707.2V24l10.164-5.832V5.832zm4.154 4.904a.352.352 0 0 0-.197.639l.018.01c.163.1.378.053.484-.108v-.002a.352.352 0 0 0-.303-.539zm-4.99 1.928L7.082 9.5v2l4.5-2.668zm8.385.38a.352.352 0 0 0-.295.165v.002a.35.35 0 0 0 .096.473l.013.01a.357.357 0 0 0 .487-.108.352.352 0 0 0-.301-.541zM16.09 8.647a.352.352 0 0 0-.277.163.355.355 0 0 0 .296.54c.482 0 .463-.73-.02-.703zm3.877 2.477a.352.352 0 0 0-.295.164.35.35 0 0 0 .094.475l.015.01a.357.357 0 0 0 .485-.11.352.352 0 0 0-.3-.539zm-4.375 3.594a.352.352 0 0 0-.291.172.35.35 0 0 0-.04.265.352.352 0 1 0 .33-.437zm4.375.789a.352.352 0 0 0-.295.164v.002a.352.352 0 0 0 .094.473l.015.01a.357.357 0 0 0 .485-.108.352.352 0 0 0-.3-.54zm-2.803 2.488v.002a.347.347 0 0 0-.223.084.352.352 0 0 0 .23.62.347.347 0 0 0 .23-.085.348.348 0 0 0 .12-.24.353.353 0 0 0-.35-.38.347.347 0 0 0-.007 0Z"/>
|
||||
<title>ListenBrainz</title></svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
@ -10,7 +10,7 @@ I've been using Fastmail for years now and have explored a number of different a
|
|||
|
||||
For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis.
|
||||
|
||||
<img src="https://cdn.coryd.dev/blog/fastmail-workflow.jpg" alt="A diagram of my Fastmail workflow" style="width:100%;height:auto;margin:.5em 0" />
|
||||
{% image '<https://cdn.coryd.dev/blog/fastmail-workflow.jpg>', 'A diagram of my Fastmail workflow', 'w-full', '600px', 'eager' %}
|
||||
|
||||
## Alias-specific rules
|
||||
|
||||
|
|
|
|||
134
src/posts/2023/optimizing-for-performance-with-eleventy.md
Normal file
134
src/posts/2023/optimizing-for-performance-with-eleventy.md
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
date: '2023-06-07'
|
||||
title: 'Optimizing for performance with Eleventy'
|
||||
draft: false
|
||||
tags: ['Eleventy', 'development']
|
||||
image: https://cdn.coryd.dev/blog/page-speed.jpg
|
||||
---
|
||||
|
||||
In the interest of over-engineering my personal site I've gone out of my way to optimize it for performance. It started out fairly quick as it's static, built using [Eleventy](https://www.11ty.dev) and is hosted with Vercel but, beyond the basic setup, I've taken some additional measures to drive the [pagespeed](https://pagespeed.web.dev) scores to `100` across the board.<!-- excerpt -->
|
||||
|
||||
## Limit client side JavaScript
|
||||
|
||||
I use a minimal amount of client-side JavaScript for behavior on my site, namely these blocks from my `base.liquid` template:
|
||||
|
||||
```javascript
|
||||
const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (isDarkMode()) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
...
|
||||
document.getElementById("toggleDarkMode").addEventListener("click", function() {
|
||||
if (isDarkMode()) {
|
||||
localStorage.theme = 'light'
|
||||
document.documentElement.classList.remove('dark')
|
||||
} else {
|
||||
localStorage.theme = 'dark'
|
||||
document.documentElement.classList.add('dark')
|
||||
}
|
||||
});
|
||||
(function() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
if (pagination) {
|
||||
pagination.addEventListener('change', (event) => {
|
||||
const page = parseInt(event.target.value)
|
||||
if (page === 1) {
|
||||
window.location.href = '/'
|
||||
} else {
|
||||
window.location.href = `/${
|
||||
event.target.value - 1
|
||||
}/`
|
||||
}
|
||||
})
|
||||
}
|
||||
})()
|
||||
```
|
||||
|
||||
These blocks allow the dark theme to be set based on the user's system preferences or at their discretion, using a button in the navigation. Additionally, the final function enables navigating between pages quickly using the `select` at the bottom of each blog listing page.
|
||||
|
||||
Everything is in line and concise without external script references. The lone external script is used for [Vercel's privacy friendly analytics](https://vercel.com/analytics).
|
||||
|
||||
## Inline and minify CSS
|
||||
|
||||
I use [Tailwind](https://tailwindcss.com) for CSS styles[^1] which is minified at build time:
|
||||
|
||||
```bash
|
||||
ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./tailwind.css -c ./tailwind.config.js -o _site/assets/styles/tailwind.css --minify
|
||||
```
|
||||
|
||||
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
|
||||
{% raw %}
|
||||
|
||||
```liquid
|
||||
{% capture css %}
|
||||
{% include "../assets/styles/prism.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
{{ css | cssmin }}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
## Minify HTML output
|
||||
|
||||
Final HTML output for the site is minified when it's built using `@sherby/eleventy-plugin-files-minifier` which, [per the docs](https://www.npmjs.com/package/@sherby/eleventy-plugin-files-minifier):
|
||||
|
||||
> This plugin allow you to automatically **minify** files when builting with **[Eleventy](https://www.11ty.dev/)**. It currently supports `css`, `html`, `json`, `xml`, `xsl` and `webmanifest` files.
|
||||
|
||||
Implementing this in `.eleventy.js` is straightforward:
|
||||
|
||||
```javascript
|
||||
const pluginFilesMinifier = require('@sherby/eleventy-plugin-files-minifier')
|
||||
...
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPlugin(pluginFilesMinifier)
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Optimize images
|
||||
|
||||
Finally (and this is something that took me longer than it should have to do), we optimize images at build time using `@11ty/eleventy-image`, defining a shortcode in `.eleventy.js` as follows:
|
||||
{% raw %}
|
||||
|
||||
```javascript
|
||||
// image shortcode
|
||||
eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loading) {
|
||||
let metadata = await Image(src, {
|
||||
widths: [75, 150, 300, 600],
|
||||
formats: ['webp'],
|
||||
urlPath: '/assets/img/cache/',
|
||||
outputDir: './_site/assets/img/cache/',
|
||||
})
|
||||
|
||||
let imageAttributes = {
|
||||
class: css,
|
||||
alt,
|
||||
sizes,
|
||||
loading: loading || 'lazy',
|
||||
decoding: 'async',
|
||||
}
|
||||
|
||||
return Image.generateHTML(metadata, imageAttributes)
|
||||
})
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
This is most impactful on [my now page](https://coryd.dev/now) which is populated with quite a few images and, when used, looks something like this:
|
||||
{% raw %}
|
||||
|
||||
```liquid
|
||||
{% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
For this page in particular, the images that are rendered above the fold are set to load as `eager` to mitigate performance impacts related to [too much lazy loading](https://web.dev/lcp-lazy-loading/). These images are fetched from caches hosted at [Bunny.net](https://bunny.net/?ref=revw3mehej) when the site is built.
|
||||
|
||||
All of these boilerplate steps leave us with a quick to load, accessible and resilient site:
|
||||
|
||||
{% image '<https://cdn.coryd.dev/blog/page-speed.jpg>', 'Pagespeed scores for coryd.dev/now', 'w-full', '600px' %}
|
||||
|
||||
[^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.
|
||||
|
|
@ -39,7 +39,7 @@ Software and services that I use for work and my own enjoyment.
|
|||
|
||||
- [Obsidian](https://obsidian.md)
|
||||
- [Readkit](https://readkit.app)
|
||||
- [Plexamp](https://plexamp.com)
|
||||
- [iBroadcast](https://ibroadcast.com)
|
||||
- [Ivory](https://tapbots.com/ivory)
|
||||
- [Parcel](https://parcelapp.net)
|
||||
|
||||
|
|
|
|||
|
|
@ -2318,9 +2318,9 @@ fast-levenshtein@^2.0.6:
|
|||
integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
|
||||
|
||||
fast-xml-parser@^4.0.14, fast-xml-parser@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.2.2.tgz#cb7310d1e9cf42d22c687b0fae41f3c926629368"
|
||||
integrity sha512-DLzIPtQqmvmdq3VUKR7T6omPK/VCRNqgFlGtbESfyhcH2R4I8EzK1/K6E8PkRCK2EabWrUHK32NjYRbEFnnz0Q==
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.2.4.tgz#6e846ede1e56ad9e5ef07d8720809edf0ed07e9b"
|
||||
integrity sha512-fbfMDvgBNIdDJLdLOwacjFAPYt67tr31H9ZhWSm45CDAxvd0I6WTlSOUo7K2P/K5sA5JgMKG64PI3DMcaFdWpQ==
|
||||
dependencies:
|
||||
strnum "^1.0.5"
|
||||
|
||||
|
|
|
|||
Reference in a new issue