Improve first load weight?

[CharlesNepote]

Description

Quarto could be an awesome tool to generate low-tech static websites (example), in particular for not-so-techies people.

There is, however, an important obstacle: Quarto's simple HTML page first load weights ~1MB.

1. In particular, Bootstrap produces a 460 KB CSS file containing many useless things (I believe it's just in case).

I have done a first simple test using PurgeCSS, adapting this code: web page weight is reduced from 960 KB to 498 KB. Bootstrap CSS file is reduced from 463 KB to 93 KB.

2. Also some JS are not minified. I used the following code to do so:

# Requirement: install UglifyJS

#minification of JS files
find ./_site -type f \
    -name "*.js" ! -name "*.min.*" ! -name "vfs_fonts*" \
    -exec echo {} \; \
    -exec uglifyjs -o {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;

#minification of CSS files
find ./_site -type f \
    -name "*.css" ! -name "*.min.*" \
    -exec echo {} \; \
    -exec uglifycss --output {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;

Minifying reduced from 498 KB to 470 KB.

3. Also, ~125 KB are taken for the (useful!) search feature (quarto-search.js and autocomplete.umd.js), while many users don't use it at all.
   Wouldn't it be possible to call those script on demand?

4. Last, ~30 KB is also taken by Google Fonts even if I specify mainfont and monofont:

format:
  html:
    mainfont: "sans-serif"
    monofont: "monospace"

With a well configured web server, all these files can be compressed on the fly (~220 KB) and also cached on the browser. But it is still a certain amount of bytes. Not all the web clients are accepting gziped content encoding, and many people only visit one page. What could be the possibilities to lower page weight?

I understand I can launch post-render command lines or scripts, but I think it is not ideal.

Maybe I'm asking too much, and my need doesn't interest many people. I just think that digital is one of the few places where you can significantly, easily and quickly reduce your footprint on the planet compared to physical stuff.

See also

• Possible features in minimal option, and a working example #9305
• Add truly minimal rendering #7987
• Minify / Optimization of _site directory post rendering ? #6511
• A quarto extension that optimizes your images pre-render #9053

[jimjam-slam]

I'd definitely be interested in slimming down HTML pages if there's room for the Quarto team to do so without compromising functionality. For our interactives at https://github.com/360-info, I generally use theme: none to get Bootstrap out entirely, which cuts page size a lot but means you miss out on a good chunk of stuff (some of which I end up reimplementing more poorly in CSS and vanilla JS).

CSS and JS assets are usually the smaller part of page load for our interactives (the datasets are usually on the order of 100s of KB or maybe low MBs), but at least we can set up the page if we have the CSS and JS, even if the data is still incoming. (And I admit that there's plenty I could still do to improve the load of our interactives too!)

I don't know whether there's a significant benefit to minifying code on top of server-side compression (although I guess gzip has to at least represent white space with some RLE, so there's probably at least a tiny bit), but I'd be interested to see data on it!

I would be happy to use a post-render solution!

[cderv]

Also, ~125 KB are taken for the (useful!) search feature (quarto-search.js and autocomplete.umd.js), while many users don't use it at all.
Wouldn't it be possible to call those script on demand?

Those are dependencies for the search feature. You can disable through config. See https://quarto.org/docs/websites/website-search.html#disabling-search

I generally use theme: none to get Bootstrap out entirely, which cuts page size a lot but means you miss out on a good chunk of stuff (some of which I end up reimplementing more poorly in CSS and vanilla JS).

This would be a first good way to start on this. This should reduce the size a lot. @CharlesNepote did you set that option before doing your sizing ? It would be interesting to see the difference if not.

[CharlesNepote]

Thanks a lot for your answers @jimjam-slam and @cderv.

I have built the following bash script, here are my results with theme: cosmo + toc: true + test page:

• normal rendering: 966 KB
• rendering with post-render: ./purge_css.sh: 466 KB

#!/bin/bash

# purge_css.sh

echo "$(date +'%Y-%m-%dT%H:%M:%S') - $0 - CSS purge and minification..."

# See: https://purgecss.com/CLI.html
# sudo npm i -g purgecss
mkdir -p ./temp_purgecss
find ./_site -type f -name "*.css" \
    -exec echo {} \; \
    -exec purgecss --css {} --content "./_site/**/*.js" "./_site/**/*.html" -o ./temp_purgecss \; \
    -exec bash -c ' mv "./temp_purgecss/`basename {}`" "`dirname {}`" ' \;
rmdir ./temp_purgecss

# See: https://github.com/mishoo/UglifyJS
# sudo npm install uglifyjs -g
# minification of JS files
find ./_site -type f \
    -name "*.js" ! -name "*.min.*" ! -name "vfs_fonts*" \
    -exec echo {} \; \
    -exec uglifyjs -o {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;

# sudo npm install uglifycss -g
# minification of CSS files
find ./_site -type f \
    -name "*.css" ! -name "*.min.*" \
    -exec echo {} \; \
    -exec uglifycss --output {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;

echo "$(date +'%Y-%m-%dT%H:%M:%S') - $0 - End."

It's quite fast, ~ 5 seconds. Here's the log:

./purge_css.sh
2024-04-14T19:54:23 - ./purge_css.sh - CSS purge and minification...
./_site/site_libs/quarto-html/tippy.css
./_site/site_libs/quarto-html/quarto-syntax-highlighting.css
./_site/site_libs/bootstrap/bootstrap-icons.css
./_site/site_libs/bootstrap/bootstrap.min.css
./_site/styles.css
./_site/site_libs/quarto-nav/quarto-nav.js
./_site/site_libs/quarto-search/autocomplete.umd.js
./_site/site_libs/quarto-search/quarto-search.js
./_site/site_libs/quarto-html/quarto.js
./_site/site_libs/quarto-listing/quarto-listing.js
./_site/site_libs/quarto-html/tippy.css
./_site/site_libs/quarto-html/quarto-syntax-highlighting.css
./_site/site_libs/bootstrap/bootstrap-icons.css
./_site/styles.css
2024-04-14T19:54:27 - ./purge_css.sh - End.

This solution needs to install purgecss, uglifycss and uglifyjs with npm (or something else). I have only tested under Linux, but I guess it should work on all other environments.

I have tried to build a typescript script but failed to import libraries with deno.

[cderv]

I have tried to build a typescript script but failed to import libraries with deno.

Are you referring to Deno script we support through quarto run ?
https://quarto.org/docs/projects/scripts.html#deno-scripts

We don't support in there to use external 3rd parties library directly. They need to be downloaded locally and referenced from local. Doc mentions

You may also see examples of Deno code that imports 3rd party libraries directly from URLs. As noted above, this functionality is not available in Quarto Deno scripts. Rather, you should download any external libraries you wish to use, include them with your project source code, and import them using relative file paths.

Maybe packaging in a Quarto extension would allow to ship in different project.

[amitness]

@CharlesNepote Thanks, your script has been super helpful.

Just wanted to add a note that, if you directly add it to post-render, it runs on both quarto preview and quarto render. As such, previewing blog posts and hot-reloading locally becomes very slow.

To skip the minification when doing quarto preview, you can add this at the beginning of your purge_css.sh script. This will makes sure the minification only runs when doing quarto render.

#!/bin/bash

# purge_css.sh
if [[ -z "$QUARTO_PROJECT_RENDER_ALL" ]]; then
    exit
fi

# rest of your script
# ...

[CharlesNepote]

I generally use theme: none to get Bootstrap out entirely, which cuts page size a lot but means you miss out on a good chunk of stuff (some of which I end up reimplementing more poorly in CSS and vanilla JS).

@jimjam-slam could you give examples (you have so many repos!)?

Those are dependencies for the search feature. You can disable through config. See https://quarto.org/docs/websites/website-search.html#disabling-search

@cderv In fact I would love to keep this feature, but I was wondering if this js stuff could be loaded on the user demand: eg. clicking on the search icon would load the scripts.

[jimjam-slam]

Haha, plenty of usesless ones!

For examples of theme: none, check out most of the ones I've made at https://github.com/360-info, such as:

• https://github.com/360-info/report-nuclearpower/blob/main/trademap/index.qmd
• https://github.com/360-info/report-climate-resilience-vulnerability/blob/main/scatter/index.qmd

(theme: none here is specified by the extension used by this doc; it's not directly in the doc itself!)

[jimjam-slam]

Not sure if this is relevant, but I'm just starting to muck around with dashboards, and a basic example I tried with theme: ["default", "style.scss"] had bootstrap.min.css weighing just 86 kB, bootstrap-icons.css weighing 20 kB, and bootstrap.min.js weighing 34 kB.

(That said, dashboards are bringing in some other hefty JS, but it did make me wonder if there'd been some slimming happening with the development of dashboards... that said, they're based on HTML documents afaict, not websites, so maybe there's some stuff left out because of that!)

EDIT: I was looking at compressed weights, which are largely the same across documents, websites and dashboards (and arguably more important, since most static site hosts automatically compress JS and CSS!). Taking a closer look at this actually convinced me to turn Bootstrap back on and cut out a bunch of my own code 😅

[CharlesNepote]

I guess the majority of the users are rarely using the search engine, if ever. This one is currently always loaded: quarto-search.js and autocomplete.js represent 37KB + 93KB = 130 KB which are useless most of the time.

By the way, it seems possible to launch the search engine on demand (using events such as onmouseover, onfocus...). This article is showing the way: https://hacks.mozilla.org/2021/08/mdns-autocomplete-search/

I'll try to investigate further.

[cderv]

Could you open a new specific topic for this idea ? Thank you

[CharlesNepote]

Fine, done: #9604

[danmackinlay]

I suspect it's a different topic albeit related, but I have been getting in trouble with my front page listing being >100MB. I've opened a discussion about that under #9390

[lmuenter]

While we're talking about optimization: is it possible to include asset bundling in quarto? This could make this tool more effective for generating static websites. Instead of importing potentially dozens of site_libs, one could just include the bundle...

[mcanouil]

Like using lib-dir? https://quarto.org/docs/reference/projects/options.html