スピーカー一覧が重いです。

[martinheidegger]

(The speaker list is slow/heavy)

スピーカーの画像の一覧は一つ一つ CSS を使って色が変わります。
Every image of the speaker list receives a color transformation treatment:

nodefest.github.com/2018/src/scss/main.scss

Line 1078 in 8674259

filter: brightness(75%) grayscale(10%) sepia(0%)

そのエフェクトは結構 CPU/GPU を使っています。Android 端末は何回も Firefox が落ちました。
解決方法を考えると二つの方法を考えました。表示の前にフィルターされているバーションがあれば、軽い CSS のフェードエフェクトを使って同じエフェクトできると思います。

This effect uses a lot of CPU/GPU. My Android's firefox crashed more than once.
There are other ways to achieve the same effect: If we have two versions of the same image we can get the same effect by doing a simple cross-fade.

二つのバーションを用意できる方法
Ways we could create those two versions:

1. ビルドスクリプト。npm run build の時に Node プロゼスを使って同じエフェクトの画像を用意する。
   Build script: with npm run build a node process generates a image with the same filter.
2. クライアントのJS でフィルターがつけている画像を Canvas を使って用意する。
   Client script: Prepare a pre-filtered canvas image before displaying the image in the DOM.
3. 手作業。誰かが全ての画像を手作業で作っている (あんまりよろしくない方法です、自動に動いていないし、ドキュメンテーションが必要となっています）
   Hand work: One could just simply create all by hand. (I dont like this variant, because its not automated and needs documentation.)