From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/improving-tufte-jekyll/index.html | 147 ++++++++++++++++++++++++-------- 1 file changed, 110 insertions(+), 37 deletions(-) (limited to 'build/improving-tufte-jekyll') diff --git a/build/improving-tufte-jekyll/index.html b/build/improving-tufte-jekyll/index.html index 84b89be..95bc768 100644 --- a/build/improving-tufte-jekyll/index.html +++ b/build/improving-tufte-jekyll/index.html @@ -1,27 +1,36 @@ - + Improving Tufte CSS for Jekyll - - + + +
-

Improving Tufte CSS for Jekyll

+

Improving Tufte CSS for Jekyll

+

2019-11-01

+

After creating the ET-Jekyll theme almost two years ago, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years.

-

Introductions

-

I've always been a sucker for Edward Tufte's incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it ET-Jekyll (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.

+ +

Introductions

+ +

I’ve always been a sucker for Edward Tufte’s incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it ET-Jekyll (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.

+

Feel free to read all the details on the design here: ET-Jekyll theme details

-

Minor Fixes One Year Later

-

When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let's see the changes made at a glance:

+ +

Minor Fixes One Year Later

+ +

When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let’s see the changes made at a glance:

+ +

You can view all the updates in more detail here.

-

So what did this accomplish? Let's break it down below.

-

First Contentful Paint & Input Delay

+ +

So what did this accomplish? Let’s break it down below.

+ +

First Contentful Paint & Input Delay

+

The new improvements have netted the theme a savings of 300ms on first paint and reduced the input delay by 150ms. Small wins - but wins nonetheless since every millisecond counts.

-

- First paint comparison -
First contentful paint savings: 300ms (direct link to image)
-

-

- Input delay comparison -
Reduction in input delay: 370ms down to 220ms (direct link to image)
-

-

Fixing Render Blocking Items

+ +

Fixing Render Blocking Items

+

The original theme reported a few items that were slowing down the initial render for the end-users:

+ - - - - -
URL Size (KB) Savings (ms)
/css/style.css 2.0 150
/lazysizes@4.0.1/lazysizes.js 5.0 960
MathJax.js?config=TeX-MML-AMHTML 18.0 1,260

These items were resolved by:

+ + +URL +Size (KB) +Savings (ms) + + + + + +/css/style.css +2.0 +150 + + +/lazysizes@4.0.1/lazysizes.js +5.0 +960 + + +MathJax.js?config=TeX-MML-AM_CHTML +18.0 +1,260 + + + + +

These items were resolved by:

+
  • Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface)
    • -

    Lighthouse Numbers

    + +

    Lighthouse Numbers

    +

    Though it might not look like much, the updated theme receives a 4-point boost to its performance rating during a Lighthouse audit. Having a perfect score would be even better, but I can settle for 2-points under (for now).

    -

    Old Version

    + +

    Old Version

    + - - -
    Performance Accessibility Best Practices SEO
    94 100 100 100

    New Version

    + + +Performance +Accessibility +Best Practices +SEO + + + + + +94 +100 +100 +100 + + + + +

    New Version

    + - - -
    Performance Accessibility Best Practices SEO
    98 100 100 100

    Final Thoughts

    -

    This project could still use some more fine-tuning, but for now I'm fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile.

    -

    Please don't hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!

    + + +Performance +Accessibility +Best Practices +SEO + + + + + +98 +100 +100 +100 + + + + +

    Final Thoughts

    + +

    This project could still use some more fine-tuning, but for now I’m fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile.

    + +

    Please don’t hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!