[O]オレのはてブにSNSボタンを設置して高速化もしてみた

Olehatebu header

昨日、皆様にご紹介した「オレのはてブ」ですが、いかんせん表示が重い!という絶大なるクレームをいただきまして、頑張って作業してみました。

あと、こちらもご要望いただきましたSNSボタンを設置してみました。当初ははてブボタンだけの設置を考えていたのですが、どうせなら全部付けてしまえと四畳半の人に言われたので全部つけちゃいました(コイツがケッコー重かったりする)。

まずはSNSボタンを設置

olehatebu1
最初はオフィシャルからコードを吐き出してもらって貼り付けてみたのですが、あまりデザイン的にシックリ来なかったので、独自の画像ファイルをSNSボタンにできる方法を探してきて設置しました。

あと、「もうちょっとアイコン大きくしてよ!バカッ!」というご要望もいただきましたので、30px四方くらいにしておきました。

高速化その1〜キャッシュ〜

昨日、寝る前に東京の教授から「キャッシュやで!」と言われ、今朝から取り掛かりました。

前まではいちいちRSSを処理していたのですが、ちょっと見よう見まねでMagpierssに切り替えてキャッシュを使えるようにしました。一様、30分に設定してあります。

高速化その2〜PHPファイルの分割〜

WordPressなどを触ったことのある方ならわかりやすいかと思いますが、ヘッダーとかサイドバーとか、よく使う決まった部分は別ファイルにして読みこむようにしました。一度読み込んでおくと、その次から早そうなんで(テキトー)。

高速化その3〜CSSやJSなどをgzip圧縮〜

.htaccessをちょっと弄りまして高速化を行いました。もう何がなんだか分からない領域でしたが無事に完了することができました。気持ち早くなっていると思います。よ?

SOPPORTED BY 麗氏

いやぁ、ほとんど午前中ずっとデバックしてもらってましたw 本当に申し訳ないです。ありがとうございました、麗さん(@X_urara_X)。

高速化のお勉強に使わせて頂いた記事など

まとめ

今後もちょっとずつ改良していこうと思いますが、僕が使っているサーバーではこれ以上レスポンスを良くするのは難しいかもしれません。

しかし、「もっとこうしてくれたらいいのにー」などのご意見はいつでもお聞かせ下さい。今後ともOlein編集長(@Olein_jp)とオレインデザイン(http://www.olein-design.com)をどうぞよろしくお願いします。