diff --git a/cache/jsonfeed-to-mastodon-timestamp.json b/cache/jsonfeed-to-mastodon-timestamp.json index 1716fe0c..00a176ed 100644 --- a/cache/jsonfeed-to-mastodon-timestamp.json +++ b/cache/jsonfeed-to-mastodon-timestamp.json @@ -1,3 +1,3 @@ { - "timestamp": 1686146575943 + "timestamp": 1686168182104 } \ No newline at end of file diff --git a/cache/jsonfeed-to-mastodon.json b/cache/jsonfeed-to-mastodon.json index ef970f88..776319b6 100644 --- a/cache/jsonfeed-to-mastodon.json +++ b/cache/jsonfeed-to-mastodon.json @@ -3945,5 +3945,16 @@ "https://social.lol/users/cory/statuses/110503301997648615" ], "lastTootTimestamp": 1686146575941 + }, + "https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/": { + "id": "https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/", + "title": "📝: Optimizing for performance with Eleventy", + "url": "https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/", + "content_text": "📝: Optimizing for performance with Eleventy https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/", + "date_published": "2023-06-07T00:00:00-08:00", + "toots": [ + "https://social.lol/users/cory/statuses/110504717978669650" + ], + "lastTootTimestamp": 1686168182098 } } \ No newline at end of file diff --git a/package.json b/package.json index 69b9f53d..30c18021 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "markdown-it-anchor": "^8.4.1", "markdown-it-footnote": "^3.0.3", "markdownlint-cli": "^0.34.0", - "marked": "^5.0.4", + "marked": "^5.0.5", "striptags": "^3.2.0", "tailwindcss": "^3.3.2" }, diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md index 96a60c4e..96ab5265 100644 --- a/src/posts/2023/optimizing-for-performance-with-eleventy.md +++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md @@ -60,7 +60,6 @@ ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./ta The site include's Prism for code syntax highlighting and this is embedded and minified in the `` of each page at build time: {% raw %} - ```liquid {% capture css %} {% include "../assets/styles/prism.css" %} @@ -69,9 +68,16 @@ The site include's Prism for code syntax highlighting and this is embedded and m {{ css | cssmin }} ``` - {% endraw %} - +This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`: +{% raw %} +```javascript +const CleanCSS = require('clean-css') +... +// css filters +eleventyConfig.addFilter('cssmin', (code) => new CleanCSS({}).minify(code).styles) +``` +{% 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): @@ -93,7 +99,6 @@ module.exports = function (eleventyConfig) { 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) { @@ -115,15 +120,12 @@ eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loadi 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. diff --git a/yarn.lock b/yarn.lock index 6c59f650..c42f08a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3673,10 +3673,10 @@ markdownlint@~0.28.2: markdown-it "13.0.1" markdownlint-micromark "0.1.2" -marked@^5.0.4: - version "5.0.4" - resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.4.tgz#69bc2b43de2e58ca46f5ff2ff294e9825c7f5cd1" - integrity sha512-r0W8/DK56fAkV0qfUCO9cEt/VlFWUzoJOqEigvijmsVkTuPOHckh7ZutNJepRO1AxHhK96/9txonHg4bWd/aLA== +marked@^5.0.5: + version "5.0.5" + resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.5.tgz#1c7bd284d7d29d7d75d6241b26e5d5bf3b558a12" + integrity sha512-auTmKJTBwZM/GLVFOhmkY7pL8v/0DxiDaXRC2kEyajcNJ0XXn9NphLD0106dbWrbPwcyD4Y0Dus16OkCzUMkfg== maximatch@^0.1.0: version "0.1.0"