YSlow:ページ読み込み速度 gzipで高速化

2010 年 5 月 24 日 コメントはありません

こちらの記事もタイトルの
『YSlow:ページ読み込み速度 gzipで高速化』まんまです。

YSlowで、「Compress components with gzip」と出る、アレです。

このブログではサーバーにDreamhost使っていますが、gzipで高速化してみました。
先日書いたExpires Headersの最適化と同じく、.htaccessで制御(自分検証)してYSlowの評価を上げます。
同名のgzipファイルがある場合はgzipを読み込んで、gzipファイルがない場合には通常のファイルを読んでくださいね、というお願い。

ということで、.htaccessに以下を追加します。

# GZIP処理
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(css|js|html?|xml)
RewriteCond %{REQUEST_FILENAME} !\.gz
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
AddEncoding x-gzip .gz

IE6がgzipを読めないのか、圧縮したCSSやJSだけをサーバーに置いておくとIEでの動きが何かおかしいので、gzipと元ファイルの両方をサーバーにアップロードしておきます。
Firefoxなどはgzipを読み込むのでファイルに加筆修正した後はgzip圧縮とアップロードを忘れずに。

40kbのCSSファイルが8kbにまで圧縮され、読み込み速度も余裕で体感できる程速くなりましたよ。

WordPress 記事内でソースを表記するプラグイン Syntax Highlighter for WordPress

2010 年 5 月 24 日 コメントはありません

WordPressの本文(記事内)でHTMLやCSS、PHPなどのソースをきれいに表示するプラグインはいくつかあるのですがこのブログで使っているのはSyntax Highlighter for WordPress。

Syntax Highlighter for WordPressのダウンロード先( http://wppluginsj.sourceforge…….ghlighter/ )からzipファイルをダウンロードして解凍。
プラグインフォルダにアップロード後、使用開始すればいいだけという、誰にでも簡単にはじめられるプラグインです。

Syntax Highlighter系のプラグインは他にもたくさんあるのですが、テーマとの絡みでしょうか。
このブログにはSyntax Highlighter for WordPressが一番しっくり来ました。

本文内では半角の大カッコ [] で[css]とか[html]とか[php]とかを括ってソースを記述し、最後に[/css]や[/html]、[/php]などで閉じるだけ。

具体的にはこんな感じで記述。

[css] .hogehoge {background-color : #FFF ;}[/css]

記事本文の[css]などは全角の大カッコ使ってますのでコピペすると動かないので注意して下さい。
[css]などの必要タグはAdd Quick Tagプラグインを導入して、登録しておくと記事の作成が楽になります。

この先は自分のちょっとCSSカスタマイズメモ。
デフォルトに#e3e3e3の外枠を付けてみました。

syntax-highlighter/css/shThemeDefault.css にボーダーを追加します。
shThemeDefault.cssの冒頭を以下に変更。

.syntaxhighlighter
{
	background-color: #fff !important;
}

.syntaxhighlighter
{
	background-color: #fff !important;
	border:1px solid #e3e3e3 !important;
}

以上、これだけでだいぶ見やすくなります。

ちなみにフォントサイズやスタイルを変更するには syntax-highlighter/css/shCore.css を触ります。
このブログではフォントファミリーにMS ゴシックを追加しています。

font-family: "MS ゴシック", "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

パックマンの効果音が流れるウィルス?フィッシング?・・・Googleでした。

2010 年 5 月 22 日 コメントはありません

妹から電話がかかってきました。
インターネットでブログ更新してたら突然何か変な音がしだした!と。
電話の向こうで流れているのは懐かしのパックマンの効果音。
スタートの音、ドットを食べてる音、そしてモンスターにやられたときの音。

「それ、パックマンの音じゃない?」というものの、妹はパックマンを知らない模様。

「フィッシングが何とかって出てたよ!突然!」 らしい。
もちろん妹的には魚釣りのフィッシングだと思っている。
そして、毎度のことながら「何もしてないのに勝手に!」と。
まぁ何かやってるわけですよ、きっと。

問題のPCが手元にないので確認出来ていなくて、Googleさんに訊いてみたのですがそれっぽいのは見つからず・・・
自分で早急に確認しますが知ってる方、教えて欲しいなぁと言う記事です。

5月23日追記:
原因はGoogleトップページのロゴでした・・・
Googleのロゴがパックマンに!
パックマン30周年記念!さすがGoogleです。
懐かしの効果音もするし、ブラウザ上で実際に遊ぶことも出来ちゃう!
さっそく遊ばせてもらいました!
このロゴは5月22日、23日の期間限定とのことです。

YSlow:ページ読み込み速度 CSS Expressions は古いIE独自の仕様なので削除

2010 年 5 月 22 日 コメントはありません

YSlow対策:ページ読み込み速度 CSS Expressions修正。というか削除ですね、IE独自のこれは。
Wordpressで構築している別のサイト、YSlow最適化の中でAvoid CSS expressionsというのがB評価になっていました。
なんだろうと思って調べてみると、プラグインのCSSにexpressionというプロパティが入っているらしい。
自分では知らないプロパティだったのでまた調べてみる。
結果、expressionを使うとCSSの中でJavascriptが使えるようになるとのことでした。
が、これはInernet Explorer5.0以上のIE独自のCSS。

抜粋: http://www.inter-office.co.jp/……tents/187/

結果としてCSSのプロパティにJavaScriptの評価結果がセットされますが、IE以外のブラウザでは無視されます。なので、ブラウザ間で一環した表現をするために、IEだけをを特別扱いする必要がるような場合に役に立ちます。
問題はexpression 関数が思っている以上にやたらに評価されてしまうということです。ページが再描画されたりリサイズされたりする時だけではなく、スクロールしたり、マウスを動かしたりする場合にさえ評価されてしまいます。expression 関数にカウンタを書いて、どれくらい頻繁に評価されるのか追いかけてみたところ、ページ上をマウスカーソルを動かし続けたら、ちょっとの間に1万回も評価されていました。

しかもマイクロソフトによるとしかもIE8.0以降はサポートしていないとのこと
抜粋: http://msdn.microsoft.com/ja-j……53083.aspx

なぜ CSS expressions のサポートを終了するのですか?
* 標準への準拠のためです
CSS expressions は Internet Explorer の独自実装であって、他の環境との相互運用性を持ちません。
CSS expressions は通常 Internet Explorer のバグを回避するため、もしくは min-width や max-width のようにブラウザーがサポートしていないCSS 2.1 の機能をエミュレートするといった場合に用いられています。Internet Explorer 8 では、これらのバグ修正だけではなく、未実装の機能をネイティブでサポートするべく努力しました。
* パフォーマンスを向上させるためです。
Steve Souder のような Web パフォーマンスの専門家がフロント エンドのパフォーマンスを改善するために CSS expressions を利用しないこと (英語) を推奨しているように、CSS expressions の実行は非常に高い負荷を必要とします。
* ブラウザーの攻撃対象面を減らすためです。
CSS expressions はスクリプトの実行コンテキストを公開してしまうので、スクリプト インジェクションのような攻撃を受ける可能性があります。

はい、こんなことはしていられません。ということでCSS内部から該当の箇所を削除。
以下のような箇所です。

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight :document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat') ? document.documentElement.scrollLeft :document.body.scrollLeft);
}

IE。。。削除した結果、YSlowのCSS Expressionsは以下のようにE評価からA評価になりました。
最適化前


最適化(というか削除)後

最初は総合評価EだったYSlow、今のところBまで来ています。
このブログは未だにE評価か・・・

YSlow:ページ読み込み速度 Expires Headersを.htaccessで

2010 年 5 月 20 日 コメントはありません

タイトルの
『YSlow:ページ読み込み速度 Expires Headers を.htaccessで。』まんまです。

サーバーにDreamhost使っていますが、自分でも簡単に(というかこれが限界でした) Expires Headers を最適化してみました。

この方法は.htaccessに以下のソースを貼り付けるだけで動いています(自分検証)ので簡単にYSlowの評価を上げることが出来ます。
以下の記述では最長の24週間、中間の2日、最短の2時間にしていますがmax-ageの値を変えることで自分の好きな時間に変更できます。

ということで、.htaccessに以下を追加します。

# Expire Header処理
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$"> # 24weeks
	Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
<FilesMatch "\.(xml|txt)$"> # 2DAYS
	Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
<FilesMatch "\.(html|htm)$"> # 2HOURS
	Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

これだけですがYSlowだいぶ良くなりました(Add Expires headersの評価はFからAに!)
最適化前


最適化後

あーーーそうなんです。このブログにも適応させないと・・・。

後gzip処理によってcssとJavaScriptが相当圧縮されて軽くなりました!
今度書きます。

WordPressのダッシュボード上でTo-Doを作成・表示するプラグインを日本語化

2010 年 5 月 15 日 コメント 5 件

WordPressのダッシュボード上でTo-Doを作成・表示するプラグイン、 http://cleverness.org/plugins/……o-do-list/ をインストールしてみました。
参考にさせていただいたのは病的溺愛シンドロームさま。

まぁ、自分で使う分には英語のままでもいい(英語が出来るとかじゃなく、適当でいいから・・・)のですが、クライアント(っつーか友達)に使ってもらうとなると別です。

これまでもいくつかプラグインを日本語化したのですが、今回やってて、無料で使わせてもらっているワードプレスであり、無料で使わせてもらっているプラグインなわけですし、自分も微力ながら公開したりするほうがいいんじゃないかと思いました。
ので、日本語入れたcleverness-to-do-listをアップしておきます。

ttp://route58.org/download/wp-plugins/cleverness-to-do-list_2.0.3_ja1.0.1.zip 最新を下部に記載しました。
ttp://route58.org/download/wp-plugins/cleverness-to-do-list_2.0.3_ja.zip
langフォルダだけでいいかな、とも思ったのですが、簡単にインストール出来るようにプラグインごとzipにしました。

>>インストール方法
上記zipファイルをダウンロード後、解凍、プラグインフォルダにFFFTPなどで通常通りアップロードして有効化。
これだけです。

日本語がおかしいとか、プラグインがアップデートされてたとか、動かないぜーとか、NGだよーとかありましたら是非突っ込みお願いします。

※「To-Do」という単語自体が日本で普及していないため、一部のTo-Do訳を「やること」にしています。
To-Doでいいじゃんって場合にはPOファイルの編集をお願いします。

P.S.日本語POファイル作るときはファイル名をhogehoge-ja.poという感じで小文字で。これでちょっとハマッタ。

2010/05/17追記01:
POファイルに登録されていなかった単語を追加して、足りない英語表記の部分を日本語化しました。
しかしなぜか、UPDATE成功しました!などの更新表記部分がいまだ英語のままです・・・

2010/05/17追記02:
プラグインが2.0.4にアップデートされました。
で、よく考えてみると、自分はこれまでPOファイルの作成の仕方自体に問題があったようでした・・・
それに気づきましたので、langフォルダ内のcleverness-to-do-list.potを元に忠実に日本語化ファイルを作成してみました。
若干、翻訳不明な点がいくつかあり、きちんと日本語化できていません。。。
ただ、この不明箇所は「複数ユーザーでWordpressを共有するケースで必要な翻訳」ですので普通に個人で使用する分には全く問題ないはずです。
お気づきの点などありましたら是非ご連絡お願いいたします。
cleverness-to-do-listプラグインを作成されたCindyさんには連絡していますので、僕が理解出来、きちんと翻訳できましたらまたアップロードさせて頂きます。

※ 日本語化も相当砕けた表現でしたので、プラグイン梱包(Cindyさんが懲りずにしてくれるといいのですが)用は、「やっつけたTo-Do」ではなく、「完了したTo-Do」にしておきます。。。
いずれにしても、分かりやすい表現を意識していますので、厳密な英訳ではなく意訳ということをご理解下さい。

ダウンロードは以下からお願いいたします。

【丁寧バージョン – 出来れば梱包バージョン】
http://route58.org/download/wp……_1.0.0.zip
せっかくなので
【やっつけバージョン】
http://route58.org/download/wp……1.0.0a.zip

上記は本家プラグインで漏れているっぽい箇所の修正しています。
今から使う方にはイメージしやすいと思います。
cleverness-to-do-list.ph 573行目
h3タグにid=”addtd”の追加

【本家サイト】
http://cleverness.org/plugins/……o-do-list/

修正点、不具合っぽいところはプラグイン本家さんにも伝えています。
しかし初めての日本語化、翻訳を採用されてうれしくもあり、めちゃめちゃがんばりました・・・
さすがにいい加減ではいけないなと反省です。。。

これからも宜しくお願いします。

沖縄そば みよ家で今日はから揚げ丼頂きました!

2010 年 5 月 13 日 コメントはありません

沖縄そば みよ家さんで今日はから揚げ丼頂きました!美味しかったです。ご馳走様でした。
http://miyoya.com/2010/05/08_1……/trackback
コメントとトラックバックを別で表示するテスト兼ねてますけど。
ワードプレスなのでPINGBACKなんだけど、PINGBACKとTRACKBACKは同じ扱いにしています。

SEO 被リンクをたくさんもらう地道な王道。それはリンクのお願い。

2010 年 5 月 13 日 コメントはありません

SEO、所謂検索エンジン最適化について

プログラマーの技量ももちろんのことですが、運営者の意識も超大事だよなーという再認識に関するグダグダです。

プログラマーというか、サイト設計者たちが考え、工夫する、TitleタグやDiscriptionタグ、Keywordタグ、H1属性やそれらの配置など、ソースをいじったり(最近はDiscriptionはあまり見ないよというような話は置いておいてです・・・)、キーワード出現率を考えたり、やっぱり被リンクは重要なファクターを占めていると思います。

でも、運営者、会社の経営者や店長、または責任者自身がそれなりにかかわらないとだめだなね。そんなことは分かっているんだけど。

前置きが長くなりましたが、次回、某社長に話す、地道且つメンドクサイ具体的な案を忘れないようにと。。。

GoogleやYahooなどのサーチエンジンで、自分の会社名で検索。
そうすると、個人ブログがたくさん出てくるはず。そこに一つ一つメッセージを送って、記事内にリンクを作ってもらう。
こんなかんじで。
「当社のことをネタにしてくれてありがとうございます!このページ(URLも一緒にね)を見させて頂いたのですが、リンクつきに変えてもらえないでしょうか。当社サイト内のリンクページ(URLも一緒にね)でもリンクさせて頂きましたので是非宜しくお願いします!
リンクしていただける場合はこちらに差し替えお願いいたします。
サンプルソース
<a herf=”” text=””>ホゲホゲ</a>
当社のリンクページ(URLも一緒にね)も是非ご覧下さい!
そして是非また当店にお越しくださいませ!
割引券をご用意させていただきますし、是非これからも仲良くさせてください!
○○○さんからのご連絡、心よりお待ちしています。
ホゲホゲ店主 ホゲホゲ」

位、やったほうがいいよー。

えーと、自分は一回怒られたことがあります。勝手にリンク張るな、と。
ブログというものが定着する5年以上前の話で、ホームページへのリンクだったのですが、こちらからリンクをするデメリットは相手方には絶対ないはずだったので、相当へこみました。
ただ、その後返事をもらえない覚悟で説明のメールを出し、結果理解してもらえました。
リンク依頼って大変っぽいけど、大事だよーと思うのです。

P.S. このブログで初めてビジュアルエディタボタンを押してみたらpタグやbrタグが勝手に挿入されて超ややこしいことになりました。
やっぱ最低限の設定は手を抜かずにやっておくべきですね。

カテゴリー: SEO, WEB タグ: , ,

WordPress ビジュアルエディタのフォント変更 WP2.9.2

2010 年 5 月 13 日 コメントはありません

WordPress 管理ページのビジュアルエディタのフォント変更。
自分ではなかなか使わないビジュアルエディタですが、ビジュアルエディタでの雰囲気とサイトの表示が違うこともあって、関係ないところで改行したり、Pタグ入れてしまったりするようです。じゃ、書いてる時点でイメージ出来たらいいのね、ということに。
Wordpressのwp-includesのCSSを変更。

変更箇所は \wp-includes\js\tinymce\themes\advanced\skins\wp_theme\content.css ファイルのbody.mceContentBody。
Wordpress2.9.2だと67行目あたりだけどbody.mceContentBodyで検索するのが早いかも。

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

body.mceContentBody {
	font: 13px/19px 'メイリオ',Meiryo,'MS Pゴシック',Verdana, Arial, Helvetica, sans-serif;
	padding: 0.6em;
	margin: 0;
}

に変更。MACのリクエストはないのでここでは考慮していませんが、いずれ必要になるんだろうね。

web デザイナーのナナメガキ さんのページが参考になりました。
http://loconet.web2.jp/blog/ar……amily.html

しかしInternet Explorerは早くなくなって欲しいなぁ。

WordPress 本文(記事内)でPHPを実行させるプラグイン

2010 年 5 月 12 日 コメント 1 件

WordPressの記事内にPHPを記述して動かしたいってことで、いろいろ調べてみました。
php-executionrunPHP か・・・

runPHPは記事(ページ)毎にPHPを有効にする事が出来るので間違えて記事内にPHPを書いてしまうことがないのが良さげ。
ただ、runPHPはもうアップデートされていないし、最新バージョンの2.2.2はWordpress2.9.2では動かない(テーマや他のプラグインと競合しているのかもしれないけど)・・・
バージョン2.1bだと同じ環境でもすんなり動くので、そっちも使ってみている。
※2.1bを使っているとアップデートのアラートが煩いのでrunPHP.php内のバージョン情報を2.2.2に変更。
しかしWordpress3.0になっても動くのかは不明・・・。

一方php-executionは常に更新されているようで安心なのですが記事毎の有効化はない。
のでクライアントが予期せずPHP書いたりするかなー、と気になるところ。
どっちにしたって全角入れたら(というか基本的には)ビジュアルエディタで開いちゃいけないって事なんだよね・・・
対クライアント的には皆さんどうしているのでしょうか・・・

両方を様子見ながらだけどphp-executionに軍配があがりそうです。
このブログではphp-executionを使っています。

サンプル:一ヵ月後の日付を吐き出すPHP

<? echo '※【有効期限】 ' . date("Y年m月d日", strtotime("+1 month")) . 'まで<br />'; ?>
<? echo 'Expire date: ' . date("Y/m/d", strtotime("+1 month")) . '<br />'; ?>

表示結果
※【有効期限】 2019年01月12日まで
Expire date: 2019/01/12

カテゴリー: プラグイン, PHP, Wordpress タグ: , , , ,

傾いたこの世界から 転げ落ちそう~ ♪

Positions by Seo-Watcher