非公式RTについては趣向主義色々あれど、
身内でじゃれあう時には欲しくなっちゃいますね。
そんなわけで、非公式RTボタンを追加するブラウザ拡張を2点ここに。

Chrome

Classic Retweet – Google Chrome 拡張機能ギャラリー

導入すると、Twitterの各ツイートの「リツイート」ボタンの右に
「ClassicRetweet」というのが出現するので、これをリプライ同様に使います。
自分のツイートにはつかないみたいです。（上の画像は合成です！）

Firefox

Firefoxの場合はユーザースクリプトでの導入になりますので、
事前にGreasmonkyを入れておきましょう。

Twitter add RT button for new UI for Greasemonkey

インストール後、「返信」の右に「RT」「QT」ボタンが出現します。
こちらは自分のツイートにも出ます。

（追記）
こちらのユーザースクリプトをChromeで使うことも出来ます。お好みで。

Twitterの新公式ページ、
クライアントをフル活用している方には少し物足りないかもしれませんが、
関連ツイートとかも見やすくなっているので個人的には十分な感じです。
食わず嫌いな方がいましたら是非に。

フロントエンドで出来ること

CSSは一番はじめにロードする

スタイルシートに含まれる背景画像のロードと、
ページのレンダリングを出来るだけ早くおこなう為です。

JavaScriptは一番最後にロードする

JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。
ただし、レンダリング前に処理したいケースもあるので、可能な限りで。

CSS/JavaScriptは圧縮しよう

ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。
YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
ついでに軽くバリデートしてくれるのも助かりますね。

使用例など。

java -jar yuicompressor-2.4.2.jar -v --charset UTF-8 -o hoge.min.js hoge.js

• YUI Compressor
• YUI Compressorをお手軽にするバッチファイルを書いてみる

また、導入が面倒な場合はオンラインツールも公開されています。

• Minify CSS – Compress CSS Code
• Free Javascript Compression and Minify Javascript Resources – Minify JS

HTTPアクセスを減らす

大量のJavaScriptやCSSをロードしているページはご注意を。
可能な限りファイルを纏めて、HTTPアクセスを減らしてやると良いようです。

<script type="text/javascript" src="hoge.js"></script>
<script type="text/javascript" src="fuga.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript" src="bar.js"></script>

<!-- ↓ ファイルをまとめて圧縮 -->

<script type="text/javascript" src="mylibraries.min.js"></script>

また、大量の画像を部品として使用する場合は、
CSS Spriteなどを利用してまとめてあげると良いですね。

CSSの@importを避ける

@importによるインポートは、に比べてパフォーマンスが落ちるそうなのでご注意を。
むしろ、ひとつのCSSファイルにまとめてあげて圧縮するのがベストですね。
それが面倒だと感じる場合は、LESSやSassのような開発ツールの導入も検討してみましょう。

• LESS – Leaner CSS
• Sass – Syntactically Awesome Stylesheets

DNSルックアップを減らす

広告やGoogleAnalytics等で致し方ない場合の方が多いですが、
出来るだけ別ドメインからのファイルインポートは避け、
DNSルックアップを減らすのが吉です。

サーバサイドで出来ること

Expiresを設定する

ヘッダの有効期限を適正に設定する事で、更新頻度の低いファイルをキャッシュさせます。
※ApacheのExpiresモジュールが有効になっている必要があります。
cf) mod_expires – Apache HTTP サーバ

.htaccessでの設定例。
有効期限の初期設定を1ヶ月に設定しています。

ExpiresActive On
ExpiresDefault "access plus 1 month"

もしくは、ファイルの種類毎に設定を変えたい場合の例がこちら。

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType applicdation/javascript "access plus 1 month"
ExpiresByType image/png "access 3 month"

YSlowでチェックしてみる

サイトパフォーマンス測定ツールとしては、こちらもYahooから提供されている、
FirebugプラグインのYSlowが良い感じです。

インストールするとFirebugに「YSlow」タブが追加され、
閲覧しているページのパフォーマンスを測定する事が出来ます。
細かく項目別にA～F判定を行ってくれるので、
チェックすべきところがすぐに分かり、目安として使えそうですね。

• Yahoo! YSlow for Firebug

Webデザインは年々リッチになりつつありますが、
その分フロントエンドのパフォーマンスは注意しておきたいですね。

contentEditableは、要素をユーザ側で編集可能にする為の属性です。
ブラウザ毎でちょっとクセのある機能ですが、
これで編集可能Tableを作ったらどうなるか、という実験です。

書いてみたもの（Webkit/Firefox）

まず「myEdit」というidを持つTableを用意し、
その子要素のtdをダブルクリックした際にそのセルを編集可能にトグルし、
編集が終了したら編集不可に戻します。

※ChromeとFirefoxのみで動作確認 ※jQueryを使用

$("#myEdit td").live("dblclick",function(e){

    e.target.contentEditable = true;
    e.target.focus();

}).live("blur",function(e){

    e.target.contentEditable = false;

}).live("keydown",function(e){

    var code = e.which;
    var ctrl = (typeof e.modifiers == "undefined") ?
    e.ctrlKey : e.modifiers & Event.CONTROL_MASK;
    if(ctrl && code == 86){
        return false;
    }else if(e.keyCode == 13){
        e.target.blur();
        return false;
    }

}).live("contextmenu",function(e){

    return false;

});

デモを見る（JSBin）

各ブラウザのcontentEditableでの改行の仕様が安定していないので、
改行を含まない一行のみのコンテンツに制限して実装しています。
また、改行以外にも余計な要素を挿入させない為、ctrl+vは弾き、
かつコンテキストメニューを無効にしています。

なんだか、問題点いっぱいですぞ？

問題点

IE/Operaでの動作

上のスクリプトはIE/Operaでは動作しません。
というのは、どうやらtdにおけるcontentEditableが動作しない為です。
なので、何か別の要素をtdにappendして、
その要素でcontentEditableをtrueにしてやらなければなりません。

しかし、それをやるなら巷で多く使われている
input要素でスワップしてやる手法の方がよりスマートで楽です。

挙動が本当にばらばらである

各ブラウザでの挙動は本当にまちまちです。
この差異は果たしてハックで埋められるものなのか、甚だ疑問です。

データの保護が面倒

input要素ならば、「一行のテキスト」のみに制限する事は容易ですが、
contentEditableでは上記スクリプトのように面倒な処理をせねばなりません。
そもそも一行に制限しなければならない理由が「安定しないから」ですからね。

保護の為にコンテキストメニューを無効にしている点についても、
ユーザフレンドリーにする為の実装なのに、ユーザの操作を妨げるとは本末転倒。
代替で自前のコンテキストメニューを表示すれば良いですが、
果たしてそこまでしてcontentEditableでやりたいのでしょうか…

私的結論

Webサイト上でクロスブラウザな運用をするのは、
労力的な意味でも報われない感がいっぱいです。

ですが、より限定された使い方、
例えばChromeエクステンションのオプション画面等ならば
使えるのではないでしょうか。

実は、はじめからそれに使いたくて書いたんですけどね…

2010/8/23 : メニューバーからのペーストに対応出来てないことに気付く。