Googleの PageSpeed Insights で見ると スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する という項目が出ててCSSファイルがブロックしてる様なので それをなんとかしよう、と言う話。

ソーシャルボタンにツイートされた数とかを載せるのには JavaScriptでAPIを叩いて数取ってきて挿入、みたいなことが良くされますが、 いくつも違うソーシャルボタンがあると結構負担がかかります。

このブログはテストも兼ねて毎日一度はビルドして更新する様にしているので 最大一日程度なら数が変わらなくてもそんなに困らないだろう、 ということで数をビルド時に取ってきて埋め込んでしまうようにしました。

Octopressで気になってる部分を改善しておこうと思って色々やってるんですが、 今回はJavaScriptやHTMLを圧縮したりまとめたりする方法について。

Octopressでfor文を使ってその中でタグを使った時に 全てが同じ出力の様になったり 同じ文字が追加され続けて出力が肥大化していったりしてしまいました。

ちょっとfor文について理解が間違ってた所があったのでそれについて。

Octopressの中でHTMLコメント<!-- ... -->を書いた所、 一部最後の部分が–>と変更されていました。

これだとコメントの終了部分がなくなりずっとコメントになってしまって困ります。

この問題が起こった部分がたまたま次にすぐ別のコメントがあったので これまで問題なく見えてた様ですが、 ちょっとこれでは困るので何とかしようと思ったら思った以上に大変でした。

Rakeコマンドを使って エラーが出た時、--traceオプションを使って 詳しく調べられるよ、と言うメッセージが出ますが ここで--traceを渡すのはrakeコマンドに対してになります。

ただ、実際にgenerateタスクとかでエラーが起こってるのは中で呼んでる Jekyllコマンドがエラーを出してることが大体の時なので それを詳しく調べたい、と言った時のためにTaskをアップデートしました。

これまでブログのサムネイル的な物を使いたい時に NailThumbを使って縮小した画像を使ったり ¹、 直接imgタグでサイズを指定してリサイズしたり ² してましたが、 大きいサイズのままのものを使うので 特にサイドバーに表示する小さい画像用のものにはかなり無駄でした。

なのでOctopressでgenerateする際に自動で 小さい画像も作ってそれを貼り付けられる様なプラグインを作りました。

Octopressのプラグインの中で画像をちょっといじって 変換後の物を使いたい、と思って プラグインの中で新たなファイルを作って入れようとしたのですが、 きちんと新しいファイルを入れようと思ったら ちょっと手を加える必要があったことについて。

ソーシャルボタンを自作に変更 の所でソーシャルボタンをJavaScriptを使って取ってくる様なのを 自分で書くようにしてるのですが、Facebookのカウント数取得が このままだと上手くいかないこともあるようなので改善。

ちょっとサイトで上手く表示されない所があって 問題は埋め込んでたJavaScriptでデフォルト引数を使ってた せいだった件。