記事表示1秒台に憧れつつ、激安サーバだし高速表示は難しいかなと思ってた@totto777です。
今日はそんな激安サーバを変えずに、記事表示1秒台を叩きだした方法を15のチェックリストにしました。
ブログを運営していく上で表示速度は死活問題！
早ければ早いほどいい！
ユーザーがページ表示に待てるのは最大2秒なんだって！((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
裏を返せば2秒以内に表示させれば、今まで読んでくれなかった人が記事を読んでくれるってことじゃないか！？
というわけで色々試した結果1秒台(計測先はGTMetrix)で安定して記事が表示出るようになりましたよっとヽ(=´▽`=)ﾉ
【1秒台表示の証拠(Page load timeの部分が表示にかかった時間)】
※3回目だけなぜかTotal huber of requestsの回数が一回少ないけど特に変更は加えてません。
とっとのライフログのサイトスペック
やったことを紹介する前にひとまずうちのサイトの情報を晒します。
サーバなにそれ美味しいの？的な人は無視して次へどーぞ。
【サイトスペック】
- サーバ：firebird(月額525円)
- 共有サーバ
- CPU：クアッドコア(クロック数非公開につき不明)
- メモリ：12GB
- WordPress：3.5.2
- テンプレート集：twenty twelve
- PHP：5.3.3
- 記事数：300件ほど
プロブロガー御用達のsixcoreは憧れるけど今のPV数でそこまで必要かなって感じ。
1.CDNを使う
CDN(コンテンツデリバリーネットワーク)という表示速度を高速化してくれるサービスをつかってます。
うちのブログでつかっているのはCloudflareというCDN。
Cloudflareを使い始めてFTPにログイン出来なくなったら確認すること
Cloudflareの設定はこの記事が参考になります。
WordPressで読み込み速度1秒台を実現するために実施した5つの施策 | gori.me
2.Wordpressのキャッシュ系プラグインを使う
記事の内容などをキャッシュしてくれるWordpressのプラグインをつかってます。
キャッシュ系のプラグインは色々種類がありますが、同じようなのをいくつもいれても速度は変わらなかったので、今は以下の3つに絞ってます。
【インストールしているキャッシュ系プラグイン】
※プラグインの名前をクリックするとそれぞれのプラグインをダウンロード出来ます。
いずれも表示高速系の記事では定番のプラグインです。
高速化では他に「Lazy Load」という画像を後から読み込むプラグインも定番ですが、うちのブログでは同様の効果をjQueryのプラグイン「Unveil」をつかって実現してます。(容量が1KB以下でとっても軽いから)
3.gzipコンポーネント
gzipコンポーネントは、サーバ側でファイルを圧縮して、それを表示させるパソコン側で解凍して表示させるやりかた。
表示させるブラウザに依存するみたいだけど最近のブラウザはほぼこの機能に対応しているので問題なし。
【gzipコンポーネントを使う手順】
サーバの.htaccessに以下を記述。
[cc]AddOutputFilterByType DEFLATE text/html text/css application/x-javascript[/cc]
.htaccessが編集出来ないサーバはphpを使うことで代用が出来る模様。
以下の記事を参考にさせてもらいました。
リピート率に直結！ブラウザのレンダリング速度を高速化する５つのこと | 株式会社LIG
※サーバに負担がかかる技術なのでPVの多いブログはやらないほうがいいかも。
4.プラグインを34個まで減らす
今まで70ちょっとあったプラグインのうち、つかってなかった20個はサーバから削除し、 52個へ。
そこからさらに必要なとき以外は要らないプラグインを停止して34個へ。
5.JetPackの停止
Jet PackはWordpressの定番プラグインなのだけど、これ停止するだけでだいぶ変わったので単体で紹介。
このプラグイン自体が多機能だからつかっていない機能を読み込んだりしてた。
用途としては
- サイト分析
- 無限スクロール
の2点だけだったので停止。
どうしてもJet Packは外せないという人はせめて
- 無限スクロールのチェックを外す
といいと思う。
6.使わないウィジェットを削除
サイドバーに表示させてるウィジェットも、なくて平気なやつは削除。
特に外部のサイトにアクセスするような
- Facebook Likebox
- Twitter タイムライン
は外せるなら外したほうがいいです。
ウィジェットの管理は
「Wordpress管理画面の外観＞ウィジェット」
から。
7.シェアボタンを減らす
上のウィジェット同様外部にアクセスするシェアボタンはその分速度が遅くなります。
- はてぶ
以外は反応がほとんどないので、思い切ってこの3つだけにしました。
8.jQueryプラグインを減らす
サイトを手軽に華やかにしてくれるのでjQueryはついつい入れちゃうんですがこいつも油断ならない！
上で紹介したUnveil以外は速度に関係ないから全て削除！
特にinnerfade.jsは体感速度が結構変わるので必要ないなら外すのがオススメ。
9.HeartRails Captureのキャプチャ画像を自サーバに保存
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス
hiro45jpさんが制作されたShareHtmlというかんたんに記事を紹介出来るツールをつかっているのですが、その中でHeartRails Captureというサイトのデザインをサムネイル画像にしてくれるWebサービスが使われてます。
すごく便利で本記事内でも使いまくってるのですが、HeartRails Captureで作成される画像は
「https://capture.heartrails.com/150×130/shadow?記事URL」
という形式なので、画像自体がHeartRails Captureのサーバに。
この形式だと記事を読み込む度にHeartRails Captureのサーバにアクセスが必要なので、その分記事の読み込みに時間がかかります。
そこで面倒ですが、HeartRails Captureのサーバにある画像を一度パソコン内に保存して自分のサーバにアップロードするようにしました。
※書いてる途中で気づいたのですが、カエレバとかも一緒です。
10.CSSはヘッダ、jQueryはフッタ
性質上一度に複数同時に読み込めるCSSはヘッダで、1つずつしか読み込めないjQueryは「/body」タグ直前にに配置しなおしました。
何故そうするのかに関しては以下の記事で丁寧に解説されてるので気になる人はチェック！
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
11.CSS、jQueryの圧縮
見づらくなりますが、改行などを取り除いてファイルの容量を圧縮。
圧縮自体はCodeKitというツールをつかってます。
CodeKitを使うと元のファイルを残しつつ圧縮したファイルを書きだしてくれるので、後で編集が楽です。
CodeKit — THE Mac App For Web Developers
12.pngはjpgに変換
ブログをやってるとよくパソコンの画面をキャプチャして紹介したりします。
Macは標準で画面を画像にするとpngという形式で保存されます。
これはすごく綺麗なのですが、容量がjpgとくらべて大きくなってしまうのでjpgに変換して上げ直し。
13.画像サイズを小さくする
iPhoneなんかで撮影した画像はそのままだとかなり大きいです。
写真の綺麗さが売りのサイトでも無い限り拡大して画像をみることはあまりないかと思うので、記事幅以下にリサイズします。
とっとのライフログでは幅468pxにしてます。
14.jpg画像を圧縮
jpgはpngに比べるとファイルの容量は小さいですが、それでもまだ圧縮できます。
圧縮はMacならImageOptimというツールに放り込むだけ。
ImageOptim — make websites and apps load faster (Mac app)
15.1画面に表示させる記事を5記事に限定
記事の一覧が表示されるページ(トップページやカテゴリページ)で表示される記事の数を5件にしました。
最初は20件表示にしてたのですが、それ読み込んでる間に離脱されちゃうなと思ったし、興味を持ってもらえれば過去の記事も読んでくれるだろう！
【1ページに表示する最大投稿数の設定】
「Wordpress管理画面の設定＞表示設定>1ページに表示する最大投稿数」
で調整。
以上！
他にやったこと
この機会にすでに古くなっていたりあまりに短すぎる記事などを非公開に。
削除したわけじゃないのでデータベースの容量が変わるわけではないのだけど、自分が読みたいと思わない記事は人も読みたいと思わないかなと。
使えそうなのがあればリライトして再公開しようと思ってる。
おまけ：出来ればやったほうがいいこと
あと今回やらなかったけどやったほうがいいかなと思うこと。
- つかっていないCSSの削除
- サーバの載せ替え
サーバの載せ替えは言ったら元も子もないんだけど、表示速度に大きな影響があるみたいなんで本当はやったほうが良さげ。
そして今値段みたらそこまで高くなかったシックスコア…乗り換えようかな..
試してないからなんとも言えないけど。
あとがき
色々書いたけどまとめると今回高速化のためにやったことは
- 圧縮できるものは圧縮
- プラグインやらウィジェットやら外部アクセスやら減らせるものを減らす
の2つだけだな…
後はこの記事がめっちゃヒットしちゃっても1秒台が表示出来ればよいのだけど。
その前にアクセスはよ来いщ(ﾟдﾟщ)ｶﾓｰﾝ
