1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Improving Tufte CSS for Jekyll</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="improving-tufte-css-for-jekyll">Improving Tufte CSS for Jekyll</h1>
<p>2019-11-01</p>
<p>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.</p>
<h2 id="introductions">Introductions</h2>
<p>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 <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (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.</p>
<p>Feel free to read all the details on the design here: <a href="https://et-jekyll.netlify.com/et-jekyll-theme/">ET-Jekyll theme details</a></p>
<h2 id="minor-fixes-one-year-later">Minor Fixes One Year Later</h2>
<p>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:</p>
<ul>
<li>Sidenote, marginnote and figure element restyling (flexbox)</li>
<li>Table styling fixes (right alignment issues)</li>
<li>Switch MathJax over to SVG embeds (performance fixes)</li>
<li>Simplify HTML skeleton of main pages, remove overkill classes</li>
<li>Remove lazysizes.js to save on load times</li>
<li>Fallback on font-display for font loading</li>
<li>Inline all CSS for faster initial paint</li>
<li>Minor link :hover coloring (accessibility)</li>
<li>Add missing image link on example page</li>
<li>Update details post structure</li>
</ul>
<p>You can view all the updates in more detail <a href="https://github.com/bradleytaunt/ET-Jekyll/commit/254f9e8f28764c9525ba7405bbbfa18a3867d241">here</a>.</p>
<p><strong>So what did this accomplish?</strong> Let’s break it down below.</p>
<h2 id="first-contentful-paint-input-delay">First Contentful Paint & Input Delay</h2>
<p>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.</p>
<h2 id="fixing-render-blocking-items">Fixing Render Blocking Items</h2>
<p>The original theme reported a few items that were slowing down the initial render for the end-users:</p>
<table>
<thead>
<tr>
<th>URL</th>
<th>Size (KB)</th>
<th>Savings (ms)</th>
</tr>
</thead>
<tbody>
<tr>
<td>/css/style.css</td>
<td>2.0</td>
<td>150</td>
</tr>
<tr>
<td>/lazysizes@4.0.1/lazysizes.js</td>
<td>5.0</td>
<td>960</td>
</tr>
<tr>
<td>MathJax.js?config=TeX-MML-AM_CHTML</td>
<td>18.0</td>
<td>1,260</td>
</tr>
</tbody>
</table>
<p>These items were resolved by:</p>
<ul>
<li>Rendering all styling inline (therefore removing the extra HTTP request)</li>
<li>Removing the lazysizes library altogether (browsers plan to support lazy loading natively in the future)
<ul>
<li>The future plan is to integrate something like Cloudinary for out-of-the-box image processing</li>
</ul></li>
<li>Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface)</li>
</ul>
<h2 id="lighthouse-numbers">Lighthouse Numbers</h2>
<p>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).</p>
<h4 id="old-version">Old Version</h4>
<table>
<thead>
<tr>
<th>Performance</th>
<th>Accessibility</th>
<th>Best Practices</th>
<th>SEO</th>
</tr>
</thead>
<tbody>
<tr>
<td>94</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
<h4 id="new-version">New Version</h4>
<table>
<thead>
<tr>
<th>Performance</th>
<th>Accessibility</th>
<th>Best Practices</th>
<th>SEO</th>
</tr>
</thead>
<tbody>
<tr>
<td>98</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
<h2 id="final-thoughts">Final Thoughts</h2>
<p>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. </p>
<p>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!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://barf.btxx.org">barf</a>. <br>
Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
