dara-j

以前、Firefox3でtumblrのダッシュボードが重いって愚痴エントリを書いたのだが、ふとしたことでこれが解決したのでメモ。

やっぱりメインはFirefox3、なんだけど。

ChromeでもMinibuffer＋LDRizeが動くのでダッシュボードをつらつらと見たりして遊んでるうちに、やっぱりこの操作感が気持ちいいので久々にFirefox3でもLDRizeをONにしてみたのだが、やっぱり重い。

いや、LDRize云々以前に、普通にスクロールさせるだけでも猛烈なストレスなわけで、「やっぱPC買い替えかぁ？」とか思ってたのだが、ふと「なにがボトルネックになってるのだろうか」と疑問。

Firebugでスタイルを表示してみて、いろいろ試したところ、「ol#posts li.post」（個別エントリの要素）に

    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;

ためしにFirebug上でこれらを0px指定にしてみたら、スクロールがかなり軽くなった。これが原因か！

で、Stylishの導入ですよ

ということで、tumblrのダッシュボード向けに-moz-border-radius-*を無効にできれば快適なダッシュボード生活がまた戻ってくると判明したのだが、どうやってそうやるんだ？

ユーザスタイルシートやらいうキーワードは聞いたことがあったので調べてみると、Stylishという機能拡張を導入すると、グリモンでユーザJSを適用できるようにサイトごとにスタイルシートを設定できる、と。

さっそくインストール、見よう見まねでこんなスタイルを書いてみた。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.tumblr.com") {
    ol#posts li.post {
        -moz-border-radius-bottomleft: 0px !important;
        -moz-border-radius-bottomright: 0px !important;
        -moz-border-radius-topleft: 0px !important;
        -moz-border-radius-topright: 0px !important;
    }
}

やっぱり重く感じてた人は他にもいたんだねぇ。

で、あんまりうれしくなったので上のスタイルをtumblrにPOSTしたら、さらに徹底的に改良したreblogが。

特にアバター（ユーザのアイコンみたいなもの）にまで適用したことで、notesを表示するときのアコーディオンエフェクトもずいぶん軽くなり、ほんとに快適。ありがたや、ありがたや。やっぱりv4になってから重たいと感じてた人は他にもいたのだなぁ。

最終的には先のtizooo氏のをベースに自分のPOSTと他の人のPOSTを若干色分けするルールを追加してこんな感じに落ち着いた。

こちらが適用前（デフォルト）。

で、カクカク適用後はこんな感じ。

ついでにGoogleも。

実はGoogleの検索結果も、表示している内容のわりに妙に重かった。これまたFirebugで調べて突き止めた原因が、font-familyのArial指定。これでなんでそこまで重くなるのかはわからんけど、ともかくarial指定を解除することで軽快になることだけは確か。ってか、俺のPCどんだけ重いのかと。

ということで、Google向けにこんなのやってみたり。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.google.co.jp") {
    body, td, div, .p, a {
        font-family: sans-serif !important;
    }
}

まぁ他にも重いサイトはあり、場合によってはユーザスタイルシートじゃどうもならんところもあるんだろうけど、利用頻度が高いところをこうやって潰せるとまだまだこのPCでも使えるかなぁ、と思ったり。