From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/improving-tufte-jekyll/index.html | 143 ++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 build/posts/improving-tufte-jekyll/index.html (limited to 'build/posts/improving-tufte-jekyll/index.html') diff --git a/build/posts/improving-tufte-jekyll/index.html b/build/posts/improving-tufte-jekyll/index.html new file mode 100644 index 0000000..036de82 --- /dev/null +++ b/build/posts/improving-tufte-jekyll/index.html @@ -0,0 +1,143 @@ + + + + + + + + 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.

+

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:

+ +

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

+

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.

+

Fixing Render Blocking Items

+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + +
URLSize (KB)Savings (ms)
/css/style.css2.0150
/lazysizes@4.0.1/lazysizes.js5.0960
MathJax.js?config=TeX-MML-AM_CHTML18.01,260
+

These items were resolved by:

+ +

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

+ + + + + + + + + + + + + + + + + +
PerformanceAccessibilityBest PracticesSEO
94100100100
+

New Version

+ + + + + + + + + + + + + + + + + +
PerformanceAccessibilityBest PracticesSEO
98100100100
+

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!

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf