Skip to content

Commit 65f960c

Browse files
cotes2020cotes2020
authored
perf: speed up page rendering and jekyll build process (cotes2020#2034)
- Ensure inline scripts execute after the DOM has fully loaded. - Use Rollup to bundle the theme-mode and Mermaid scripts, reducing the number of Jekyll include snippets.
1 parent d51345e commit 65f960c

33 files changed

+410
-407
lines changed

‎_includes/analytics/cloudflare.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,3 @@
44
src="https://static.cloudflareinsights.com/beacon.min.js"
55
data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
66
></script>
7-
<!-- End Cloudflare Web Analytics -->

‎_includes/analytics/fathom.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
<script
33
src="https://cdn.usefathom.com/script.js"
44
data-site="{{ site.analytics.fathom.id }}"
5-
defer>
6-
</script>
7-
<!-- End Fathom Code -->
5+
defer
6+
></script>

‎_includes/analytics/google.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Global site tag (gtag.js) - Google Analytics -->
22
<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
33
<script>
4-
document.addEventListener('DOMContentLoaded', function (event) {
4+
document.addEventListener('DOMContentLoaded', () => {
55
window.dataLayer = window.dataLayer || [];
66
function gtag() {
77
dataLayer.push(arguments);

‎_includes/analytics/matomo.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<!-- Matomo -->
2-
<script type="text/javascript">
3-
var _paq = window._paq = window._paq || [];
4-
_paq.push(['trackPageView']);
5-
_paq.push(['enableLinkTracking']);
6-
(function() {
2+
<script>
3+
document.addEventListener('DOMContentLoaded', () => {
4+
var _paq = (window._paq = window._paq || []);
5+
_paq.push(['trackPageView']);
6+
_paq.push(['enableLinkTracking']);
77
var u="//{{ site.analytics.matomo.domain }}/";
88
_paq.push(['setTrackerUrl', u+'matomo.php']);
99
_paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
1010
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
1111
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
12-
})();
12+
});
1313
</script>
14-
<!-- End Matomo Code -->

‎_includes/comments.html ‎_includes/comment.html

File renamed without changes.

‎_includes/comments/disqus.html

+36-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,25 @@
1-
<!-- The Disqus lazy loading. -->
2-
3-
<div id="disqus_thread">
4-
<p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
5-
</div>
6-
7-
<script type="text/javascript">
1+
<script>
82
var disqus_config = function () {
93
this.page.url = '{{ page.url | absolute_url }}';
104
this.page.identifier = '{{ page.url }}';
115
};
126

13-
{%- comment -%} Lazy loading {%- endcomment -%}
14-
var disqus_observer = new IntersectionObserver(
15-
function (entries) {
16-
if (entries[0].isIntersecting) {
17-
(function () {
18-
var d = document,
19-
s = d.createElement('script');
20-
s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
21-
s.setAttribute('data-timestamp', +new Date());
22-
(d.head || d.body).appendChild(s);
23-
})();
24-
25-
disqus_observer.disconnect();
26-
}
27-
},
28-
{ threshold: [0] }
29-
);
7+
function addDisqus() {
8+
let disqusThread = document.createElement('div');
9+
let paragraph = document.createElement('p');
3010

31-
disqus_observer.observe(document.getElementById('disqus_thread'));
11+
disqusThread.id = 'disqus_thread';
12+
paragraph.className = 'text-center text-muted small';
13+
paragraph.innerHTML = 'Comments powered by <a href="https://disqus.com/">Disqus</a>.';
14+
disqusThread.appendChild(paragraph);
15+
16+
const footer = document.querySelector('footer');
17+
footer.insertAdjacentElement("beforebegin", disqusThread);
18+
}
3219

3320
{%- comment -%} Auto switch theme {%- endcomment -%}
34-
function reloadDisqus() {
35-
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
21+
function reloadDisqus(event) {
22+
if (event.source === window && event.data && event.data.id === Theme.ID) {
3623
{%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
3724
if (typeof DISQUS === 'undefined') {
3825
return;
@@ -44,7 +31,27 @@
4431
}
4532
}
4633

47-
if (document.getElementById('mode-toggle')) {
48-
window.addEventListener('message', reloadDisqus);
34+
addDisqus();
35+
36+
if (Theme.switchable) {
37+
addEventListener('message', reloadDisqus);
4938
}
39+
40+
{%- comment -%} Lazy loading {%- endcomment -%}
41+
var disqusObserver = new IntersectionObserver(
42+
function (entries) {
43+
if (entries[0].isIntersecting) {
44+
var d = document,
45+
s = d.createElement('script');
46+
s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
47+
s.setAttribute('data-timestamp', +new Date());
48+
(d.head || d.body).appendChild(s);
49+
50+
disqusObserver.disconnect();
51+
}
52+
},
53+
{ threshold: [0] }
54+
);
55+
56+
disqusObserver.observe(document.getElementById('disqus_thread'));
5057
</script>

‎_includes/comments/giscus.html

+14-30
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
11
<!-- https://giscus.app/ -->
2-
<script type="text/javascript">
2+
<script>
33
(function () {
4-
const origin = 'https://giscus.app';
5-
const lightTheme = 'light';
6-
const darkTheme = 'dark_dimmed';
7-
8-
let initTheme = lightTheme;
9-
const html = document.documentElement;
10-
11-
if (
12-
(html.hasAttribute('data-mode') &&
13-
html.getAttribute('data-mode') === 'dark') ||
14-
(!html.hasAttribute('data-mode') &&
15-
window.matchMedia('(prefers-color-scheme: dark)').matches)
16-
) {
17-
initTheme = darkTheme;
18-
}
4+
const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
5+
const initTheme = themeMapper[Theme.visualState];
196

207
let lang = '{{ site.comments.giscus.lang | default: lang }}';
218
{%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
@@ -41,30 +28,27 @@
4128
async: ''
4229
};
4330

44-
let giscusScript = document.createElement('script');
31+
let giscusNode = document.createElement('script');
4532
Object.entries(giscusAttributes).forEach(([key, value]) =>
46-
giscusScript.setAttribute(key, value)
33+
giscusNode.setAttribute(key, value)
4734
);
48-
document.getElementById('tail-wrapper').appendChild(giscusScript);
35+
36+
const $footer = document.querySelector('footer');
37+
$footer.insertAdjacentElement("beforebegin", giscusNode);
4938

5039
addEventListener('message', (event) => {
51-
if (
52-
event.source === window &&
53-
event.data &&
54-
event.data.direction === ModeToggle.ID
55-
) {
56-
{%- comment -%} global theme mode changed {%- endcomment -%}
57-
const mode = event.data.message;
58-
const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
40+
if (event.source === window && event.data && event.data.id === Theme.ID) {
41+
const newTheme = themeMapper[Theme.visualState];
5942

6043
const message = {
6144
setConfig: {
62-
theme: theme
45+
theme: newTheme
6346
}
6447
};
6548

66-
const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
67-
giscus.postMessage({ giscus: message }, origin);
49+
const giscus =
50+
document.getElementsByClassName('giscus-frame')[0].contentWindow;
51+
giscus.postMessage({ giscus: message }, 'https://giscus.app');
6852
}
6953
});
7054
})();

‎_includes/comments/utterances.html

+26-37
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,38 @@
11
<!-- https://utteranc.es/ -->
2-
<script
3-
src="https://utteranc.es/client.js"
4-
repo="{{ site.comments.utterances.repo }}"
5-
issue-term="{{ site.comments.utterances.issue_term }}"
6-
crossorigin="anonymous"
7-
async
8-
></script>
9-
10-
<script type="text/javascript">
2+
<script>
113
(function () {
124
const origin = 'https://utteranc.es';
13-
const lightTheme = 'github-light';
14-
const darkTheme = 'github-dark';
15-
let initTheme = lightTheme;
16-
const html = document.documentElement;
5+
const themeMapper = Theme.getThemeMapper('github-light', 'github-dark');
6+
const initTheme = themeMapper[Theme.visualState];
7+
8+
let script = document.createElement('script');
9+
script.src = 'https://utteranc.es/client.js';
10+
script.setAttribute('repo', '{{ site.comments.utterances.repo }}');
11+
script.setAttribute('issue-term', '{{ site.comments.utterances.issue_term }}');
12+
script.setAttribute('theme', initTheme);
13+
script.crossOrigin = 'anonymous';
14+
script.async = true;
1715

18-
if (
19-
(html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
20-
(!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
21-
) {
22-
initTheme = darkTheme;
23-
}
16+
const $footer = document.querySelector('footer');
17+
$footer.insertAdjacentElement('beforebegin', script);
2418

2519
addEventListener('message', (event) => {
26-
let theme;
20+
let newTheme;
2721

28-
{%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
29-
if (event.origin === origin) {
30-
{%- comment -%} page initial {%- endcomment -%}
31-
theme = initTheme;
32-
} else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
33-
{%- comment -%} global theme mode changed {%- endcomment -%}
34-
const mode = event.data.message;
35-
theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
36-
} else {
37-
return;
38-
}
22+
{%- comment -%}
23+
Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
24+
{%- endcomment -%}
25+
if (event.source === window && event.data && event.data.id === Theme.ID) {
26+
newTheme = themeMapper[Theme.visualState];
3927

40-
const message = {
41-
type: 'set-theme',
42-
theme: theme
43-
};
28+
const message = {
29+
type: 'set-theme',
30+
theme: newTheme
31+
};
4432

45-
const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
46-
utterances.postMessage(message, origin);
33+
const utterances = document.querySelector('.utterances-frame').contentWindow;
34+
utterances.postMessage(message, origin);
35+
}
4736
});
4837
})();
4938
</script>

‎_includes/head.html

+23-2
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,32 @@
9797
<link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
9898
{% endif %}
9999

100-
<!-- JavaScript -->
100+
<!-- Scripts -->
101101

102102
{% unless site.theme_mode %}
103-
{% include mode-toggle.html %}
103+
<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
104104
{% endunless %}
105105

106+
{% include js-selector.html lang=lang %}
107+
108+
{% if jekyll.environment == 'production' %}
109+
<!-- PWA -->
110+
{% if site.pwa.enabled %}
111+
<script
112+
defer
113+
src="{{ '/app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
114+
></script>
115+
{% endif %}
116+
117+
<!-- Web Analytics -->
118+
{% for analytics in site.analytics %}
119+
{% capture str %}{{ analytics }}{% endcapture %}
120+
{% assign platform = str | split: '{' | first %}
121+
{% if site.analytics[platform].id and site.analytics[platform].id != empty %}
122+
{% include analytics/{{ platform }}.html %}
123+
{% endif %}
124+
{% endfor %}
125+
{% endif %}
126+
106127
{% include metadata-hook.html %}
107128
</head>

‎_includes/js-selector.html

+3-26
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,12 @@
6262

6363
{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
6464

65-
<script src="{{ script | relative_url }}"></script>
65+
<script defer src="{{ script | relative_url }}"></script>
6666

6767
{% if page.math %}
6868
<!-- MathJax -->
69-
<script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
70-
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
69+
<script async src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
70+
<script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
7171
<script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
7272
{% endif %}
7373

@@ -84,26 +84,3 @@
8484
{% endcase %}
8585
{% endif %}
8686
{% endif %}
87-
88-
{% if page.mermaid %}
89-
{% include mermaid.html %}
90-
{% endif %}
91-
92-
{% if jekyll.environment == 'production' %}
93-
<!-- PWA -->
94-
{% if site.pwa.enabled %}
95-
<script
96-
defer
97-
src="{{ 'app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
98-
></script>
99-
{% endif %}
100-
101-
<!-- Web Analytics -->
102-
{% for analytics in site.analytics %}
103-
{% capture str %}{{ analytics }}{% endcapture %}
104-
{% assign type = str | split: '{' | first %}
105-
{% if site.analytics[type].id and site.analytics[type].id != empty %}
106-
{% include analytics/{{ type }}.html %}
107-
{% endif %}
108-
{% endfor %}
109-
{% endif %}

‎_includes/jsdelivr-combine.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% assign urls = include.urls | split: ',' %}
22

3-
{% assign combined_urls = nil %}
3+
{% assign combined_urls = null %}
44

55
{% assign domain = 'https://cdn.jsdelivr.net/' %}
66

@@ -15,12 +15,12 @@
1515
{% endif %}
1616

1717
{% elsif url contains '//' %}
18-
<script src="{{ url }}"></script>
18+
<script defer src="{{ url }}"></script>
1919
{% else %}
20-
<script src="{{ url | relative_url }}"></script>
20+
<script defer src="{{ url | relative_url }}"></script>
2121
{% endif %}
2222
{% endfor %}
2323

2424
{% if combined_urls %}
25-
<script src="{{ combined_urls }}"></script>
25+
<script defer src="{{ combined_urls }}"></script>
2626
{% endif %}

0 commit comments

Comments
 (0)