ブログ高速化

DESIGN

自分のブログサイトを高速化するために行った3つの事

  • ARTICLE - No.18
  • issue-2015.6.14
  • 610 views

Posted by Keisuke Aratsu
POP1280

最近、どうもサイトアクセスした際に表示されるまでもっさりしているのが気になるなぁと思って、Googleの「PageSpeed Insights」を使ってどのくらいもっさりしているのか計測してみた。
するとPC,SPともに数値が低く、案の定もっさりしていた事が分かったのでこれはイカンと思い、高速化のためにどんどん手入れしていきました。
結局一番効果があったのは画像の圧縮だったんですが、それ以外の施策もちゃんと効果を発揮してくれたので以下に記載しておこうと思います。

その前に、

何で高速化しようと思ったのか?

1つは単純にもっさりしているのが気になって来た事。もう1つはこれが原因で離脱してしまう読者がいるであろうこと(ユーザビリティの改善)。あと、サイトが重いとクローラーが敬遠してしまい検索順位にも影響が現れてしまうらしい。
という理由で今回手入れをしていきました。ちなみに、手入れする前は「PageSpeed Insights」での評価は100点満点中、SP40点くらい、PC50点くらいでした。あまり良くないですね。

そんな訳で行った施策です。

1. 画像を圧縮する

一番効果があって、目に見えて数値に表れたのがこれ。結局のところ画像を多くすればするほどにファイル容量が多くなってしまうので、画像は少なければ少ないにこした事はないし、サイズが小さければ小さいにこした事はない。
とはいえ画像が少なければ何か寂しいサイトになってしまうし、ぱっと見のイメージもつきにくいし、困ったもの。
なので、圧縮できる画像はせっせと圧縮してしまいましょう。「Tiny png」とか前に紹介した「compressor.io」とかが便利でいいです。photoshopで画像保存する時も画質を気持ち低めに設定するなど心がければかなりのサイズを圧縮する事ができます。めんどくさければwordpressのプラグインとか探して使うのもいいですね。
でも、1つ気をつけて欲しいのは、サイト高速化ばかりに気を取られて画質をどんどん落としてしまう事。これをやりすぎると目に見えて画像が劣化してしまうので注意。サイトのクオリティにも関わって来ますので。自分の目で見ながらいい具合を見極めつつ圧縮していきましょう。
あと、WORDPRESSの場合1つ画像をアップすることに全3パターンのサイズを生成してしまうので、いらないサイズがあれば捨ててしまいましょう。サーバーを圧迫する原因になります。

2. キャッシュとリソースの圧縮を設定する

これもなかなか効果を実感することができました。
wordpressの入っている直下のディレクトリに.htaccessが配置されていると思いますが、その中にキャッシュに関する記述を入れましょう。これで読み込み速度が改善されます。
ちなみに僕が書いたのは以下の通り

#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
 
#圧縮の設定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

これで画像やフォント、cssやjs,htmlに対してキャッシュとリソースの圧縮を設定する事ができます。

参考にさせていただいたサイトはこちら
寝ログ

3. サムネイルサイズの設定

上にも書いた通り、画像をアップすると全3サイズの画像を自動生成します。なので必要な画像サイズに合わせてサムネイルのサイズを設定しておく事で、ムダな画像を生成する必要がなくなってきます。
特に、レスポンシブでブログを作る際はCSSで画像サイズを合わせてしまうと、表示されているサイズは小さくなっていても実際に読み込んでいるサイズはそれよりも大きなものとなっているので、これがサイトを重くしてしまう原因となってしまいます。
なのでダッシュボードの「設定」>「メディア」からサムネイルサイズを設定して必要に応じて使い分けるようにすることで生成された3種類の画像をムダ無く使い回しつつ、サイト高速化に役立てることができます。

今回行った施策は上記3点でした。これだけでかなり速度改善に繋がったので、もっさり感じる方は少しいじってみるといいと思います。上にも書いてますが画像が一番目に見えて変わりやすいです。
他にもjsの読み込み順を変えたりとかcssの見直しとかも行いましたがそれは今回は割愛します。一応「PageSpeed Insights」でも指摘してくれるので参考にしてみるといいですね。
ちなみに、手入れを行った結果SP56点、PC72点まで改善しました。SPにまだまだ課題が残るものの、かなり速度が向上したのでとりあえずはここで一段落としたいと思います。ちなみに、googleの推奨としては80点台を目標とするのが良いそう。
現状80点台は出せてないものの、改善できたのでこれからも時間かけてcssとかjsの整理をしていきつつ、不要なものをどんどん削除していく方向でもう少し速度改善していきたいと思っています。マイブログ、いい感じに運営できてきているのでもう少し頑張ろう。アクセスも少しづつ安定してきている!

LATEST_

ABOUT ME_

アラツ ケイスケ :
福岡県糟屋郡志免町在住。畑で野菜を育てて生きていきたいwebデザイナー。嫌いなものはクチャラー。1984年10月生まれ。昨年三十路デビューしました。音楽とB級映画をこよなく愛す一面、垂れ流すだけで何を聞いたか観たのか全く記憶にないこともしばしば。(大抵寝落ちしてるか、本を読んでます。)
このブログでは自分が書きたい音楽の事やデザインの事、福岡の事を好きなように書いて行くつもりです。記事掲載のご相談も受け付けますのでどうぞお気軽に。随時受け付けます。僕がバテあがってたらお返事までお時間掛かると思いますが悪しからず。

→CONTACT