Performing Lume Performance Tuning

8 min

lume
language: ja bn en es hi pt ru zh-cn zh-tw

Hello, it's me, the incompetent one.
The server-side cache and other settings were still from the previous WordPress setup, so I'm changing them again.

Nginx

All necessary content is cached on the Nginx side, which acts as a reverse proxy.
Caching before reaching the backend Apache means it's like having my own CDN server.

Changes

if ($request_uri ~* "\.(jpg|jpeg|png|webp|gif|mp4|css|js|ico|woff2|svg|pdf|zip|eot|ttf|xml|json|txt|html)(\?.*)?$") {  
    set $do_not_cache 0;  
}

I hadn't been caching HTML until now, but since I'm using a "static site" generator, I've added it.

Also, I wonder if there's any point in having a branch to decide whether to cache a static site in the first place.

if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|sitemap(_index)?.xml") {  
 set $skip_cache 1;  
 set $skip_reason URI;   
}

I intentionally left this code as is. Partly so I can switch back to WordPress anytime, but also because I don't want to cache things like sitemaps, so I'm preventing them from being cached.

That's probably about it for the Nginx side.
Previously, I had articles under /blog, so I had separate cache settings for /blog. However, I felt there was no particular reason to separate them, so I stopped doing so.

Lume

I looked through Lume's plugins and decided to include everything that seemed capable of code minification. Plugins

Terser

Terser
Let's look at the Terser documentation from within the Terser site.
It's the API Reference Minify options structure
 section.

I'll change only the necessary parts while consulting with AI.
It's helpful that it adds comments to make it easier to understand.

$ cat _config.ts   
import lume from "lume/mod.ts";  
import blog from "blog/mod.ts";  
import plugins from "./plugins.ts";  
import nunjucks from "lume/plugins/nunjucks.ts";  
import basePath from "lume/plugins/base_path.ts";  
import terser from "lume/plugins/terser.ts";  
import minifyHTML from "lume/plugins/minify_html.ts";  
import lightningCss from "lume/plugins/lightningcss.ts";  
  
const site = lume({
  src: "./src",  
  location: new URL("https://soulminingrig.com"),  
});  
  
site.use(basePath());  
site.use(plugins());  
site.use(nunjucks());  
  
// ファイル圧縮  
site.use(terser({
  options: {  
    compress: {  
      drop_console: true,  
      passes: 5,  // パスを増やしてさらに圧縮を試みる  
      unsafe: true,  
      pure_getters: true,  // ゲッターを純粋な関数として扱う  
      unsafe_arrows: true,  // アロー関数の最適化  
      unsafe_comps: true,  // 比較の最適化  
      unsafe_Function: true,  // Functionコンストラクタの最適化  
      unsafe_math: true,  // 数学的な最適化  
      unsafe_methods: true,  // メソッド呼び出しの最適化  
      unsafe_proto: true,  // __proto__の最適化  
      unsafe_regexp: true,  // 正規表現の最適化  
      conditionals: true,  // 条件文の最適化  
      dead_code: true,  // デッドコードの除去  
      evaluate: true,  // 定数式の評価  
      booleans: true,  // ブール演算の最適化  
      loops: true,  // ループの最適化  
      unused: true,  // 未使用のコードの削除  
      hoist_funs: true,  // 関数宣言の巻き上げ  
      keep_fargs: false,  // 未使用の関数引数を削除  
      hoist_vars: true,  // 変数宣言の巻き上げ  
      if_return: true,  // if-returnの最適化  
      inline: true,  // インライン化  
      join_vars: true,  // 変数宣言の結合  
      side_effects: true,  // 副作用のある式の削除  
      warnings: false  // 警告を無効化  
    },  
    mangle: {  
      properties: {  
        reserved: ['$', '_'],  
        regex: /^_/  // アンダースコアで始まるプロパティを保護  
      },  
      toplevel: true  // トップレベルの変数名も難読化  
    },  
    format: {  
      comments: false,  
      beautify: false,  
      ascii_only: true,  // ASCII文字のみを使用  
      wrap_iife: true  // IIFEをラップ  
    },  
    sourceMap: false,  // ソースマップを完全に無効化  
    ecma: 2023,  
    enclose: false,  
    keep_classnames: false,  
    keep_fnames: false,  
    ie8: false,  
    module: false,  
    nameCache: null,  
    safari10: false,  
    toplevel: true  
  }
}));

I changed the necessary parts and removed the sections that didn't work when added to my environment.

Honestly, I was quite impressed by how easy it was to configure. I wonder if this is good enough for JS.

### Lightning CSS
Lightning CSS

import lightningCss from "lume/plugins/lightningcss.ts";  
~  
site.use(lightningCss({
  extensions: [".css"],  
  include: /.+\.css$/,  
  options: {  
    minify: true,  
    sourceMap: false,   
    drafts: {  
      nesting: true,  
      customMedia: true  
    },  
    nonStandard: {  
      deepSelectorCombinator: true  // 深いセレクタ結合子を有効化（必要な場合）  
    },  
    targets: {  
      android: 98,  
      chrome: 98,  
      edge: 98,  
      firefox: 97,  
      ios_saf: 15,  
      safari: 15,  
      opera: 83,  
      samsung: 16  
    },  
    browserslist: null   
  }
}));  
~~~

Honestly, I'm not very interested in this, so I don't have much to say.
I think the default settings are probably sufficient, so it might be fine without any options.

Minify HTML

Minify HTML Honestly, since I've already optimized it to some extent in the preceding steps, I just thought of this as a fun extra.

import minifyHTML from "lume/plugins/minify_html.ts";  
~~~  
site.use(minifyHTML());

The HTML file after being built looks like this.Image
People who directly edit HTML files might feel disgusted, but since I only interact with the .md files before building or through the LumeCMS browser, I don't really pay much attention to it.

Result
If Google-related loads are excluded, it's fast.Image

Honestly, it ultimately comes down to how to handle external loading.
Hmm... My actual goal was to speed things up as much as possible without me having to do much manual work, so I don't plan to delve deeper than this. I'm not entirely satisfied, so I might just tweak it while staring at the Network panel. That's all for now.
It's a bit of a vague ending, but I look forward to your continued support.

By the way, I woke up around 1 AM and started tinkering with a fuzzy feeling, and this is what happened. It's what you call "fuwa-fuwa time" (fluffy time). Please give me some "mofu-mofu time" (cuddly time) too.