DESIGN
自分のブログサイトを高速化するために行った3つの事
- ARTICLE - No.18
- issue-2015.6.14
- 2,008 views
Posted by Keisuke Aratsu
POP1280
最近、どうもサイトアクセスした際に表示されるまでもっさりしているのが気になるなぁと思って、Googleの「PageSpeed Insights」を使ってどのくらいもっさりしているのか計測してみた。
するとPC,SPともに数値が低く、案の定もっさりしていた事が分かったのでこれはイカンと思い、高速化のためにどんどん手入れしていきました。
結局一番効果があったのは画像の圧縮だったんですが、それ以外の施策もちゃんと効果を発揮してくれたので以下に記載しておこうと思います。
その前に、
何で高速化しようと思ったのか？
１つは単純にもっさりしているのが気になって来た事。もう１つはこれが原因で離脱してしまう読者がいるであろうこと(ユーザビリティの改善)。あと、サイトが重いとクローラーが敬遠してしまい検索順位にも影響が現れてしまうらしい。
という理由で今回手入れをしていきました。ちなみに、手入れする前は「PageSpeed Insights」での評価は100点満点中、SP40点くらい、PC50点くらいでした。あまり良くないですね。
そんな訳で行った施策です。
1. 画像を圧縮する
一番効果があって、目に見えて数値に表れたのがこれ。結局のところ画像を多くすればするほどにファイル容量が多くなってしまうので、画像は少なければ少ないにこした事はないし、サイズが小さければ小さいにこした事はない。
とはいえ画像が少なければ何か寂しいサイトになってしまうし、ぱっと見のイメージもつきにくいし、困ったもの。
なので、圧縮できる画像はせっせと圧縮してしまいましょう。「Tiny png」とか前に紹介した「compressor.io」とかが便利でいいです。photoshopで画像保存する時も画質を気持ち低めに設定するなど心がければかなりのサイズを圧縮する事ができます。めんどくさければwordpressのプラグインとか探して使うのもいいですね。
でも、１つ気をつけて欲しいのは、サイト高速化ばかりに気を取られて画質をどんどん落としてしまう事。これをやりすぎると目に見えて画像が劣化してしまうので注意。サイトのクオリティにも関わって来ますので。自分の目で見ながらいい具合を見極めつつ圧縮していきましょう。
あと、WORDPRESSの場合１つ画像をアップすることに全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の整理をしていきつつ、不要なものをどんどん削除していく方向でもう少し速度改善していきたいと思っています。マイブログ、いい感じに運営できてきているのでもう少し頑張ろう。アクセスも少しづつ安定してきている！
