サイトの最適化-リソースの圧縮編

2016.01.06
広島県福山市でホームページ制作をしているフリーランスの個人事務所Toftです。

最新の要素も取り入れるため、SEO対策周辺について改めて調べてみたので紹介したいと思います。

今回調べてみたのは、『リソースの圧縮』のお話です。

最近では、スマートフォンでサイトを表示するといったことも日常的になってきたので、スマホでも素早く表示されるパフォーマンスがSEO観点でも評価されるようになってきているようです。

そして、そのパフォーマンスを高めるのに効果的なのが、CSSやJavascript、画像などのリソースの圧縮です。
リソースを圧縮するように設定すると、かなり表示速度が改善されますよ!

改善方法を紹介する前に、おすすめのサイト表示速度を測るツールを紹介します。

PageSpeed Insights

pagespeed insights

https://developers.google.com/speed/pagespeed/insights/
サイトを表示する速度を測るツールはいくつかあると思いますが、わたし的におすすめしたいのがGoogleの『PageSpeed Insights』というツールです。
『PageSpeed Insights』は、サイトのコンテンツを解析してくれ、そのサイトを表示するのにどのくらいの時間がかかっていて、何が表示速度を遅くしているのかなどを明らかにしてくれるというとっても優れたツールです!
『PageSpeed Insights』は、日本語で表示されるのでわざわざ翻訳する手間も省けます。

サイトをお持ちの方で、また『PageSpeed Insights』を使ったことのない方はぜひ試してみてください。

リソースの圧縮(html,css,javascriptなど)

サイトのリソースが圧縮できておらずページの表示速度に影響していると、『PageSpeed Insights』では以下のように『圧縮を有効にする』改善案が表示されます。

assyuku

この状態の時には、cssなどを圧縮した後だったので33KBほどの削減に留まっていますが、何もしていない状態だと多い時には100KB以上削減できると思います。

リソースの圧縮方法

『gzipやdeflateを使用してリソースを圧縮することで』
と書いてあるので、今回は比較的簡単に済むdeflateで圧縮をしてみたいと思います。

deflateという圧縮法を使用するには、.htaccessファイルに『DEFLATE』の設定を記載するのが一般的なようです。

htmlやcss、javascriptなどのファイルを圧縮するには、
.htaccessファイルにあるの中に以下を追加します。

また、Webフォントを使っているとttfや.otfのようなファイルも圧縮対象にあげられることもあると思います。
それに対応するには、『AddType』でフォントファイルの形式を追加したあとに上記と同じように『AddOutputFilterByType』を記載してあげる必要があります。

これらを記述してあげるだけで・・・

assyukugo

このように82→85に速度が改善されました。
圧縮対象になるファイルがたくさんある場合は、もっとアップすると思いますよ。
だたし、.htaccessファイルを変更、または圧縮後にはサイトがうまく表示されなくなる場合がありますので、変更後にしっかりチェックしてみることをおすすめします。
また、自分のサーバーにあるファイルは圧縮できますが、外部から読み込んでいるファイルは圧縮することができないので、そこはしょうがないと思って諦めたほうがいいです。

リソースの圧縮(画像ファイル)

ついでに画像の圧縮方法も紹介しておきますね。
画像を圧縮すると、かなり容量を削減することができるので画質が落ちない程度に圧縮することをおすすめします。
画像の最適化に関する提案は、以下のような感じで記載されます。

gazouassyuku

画像の圧縮に関しては、アルゴリズムで解決する方法はなく、個々で解決する必要があります。
個々で圧縮すると、圧縮後のクオリティも分かるので安心ですよ。

画像を圧縮するには・・・Webのツールを使うと楽にできます。
提案内容にも記載されている『ロスレス圧縮』という方法を使用するツールでおすすめなのが、
『optimizilla』というサイトです。

optimizilla

http://optimizilla.com/
この『optimizilla』は、圧縮する画像をドロップするだけで圧縮してくれて、圧縮前の画像と見比べることができるという優れものです。
圧縮のクオリティも高いですし、圧縮前の画像と比べてもほぼ変わらないクオリティを維持できているので安心して圧縮できます!
圧縮率の高い画像は、90%くらい圧縮できますよ。

一つ一つ画像を圧縮していくのは少し面倒ですが、圧縮率の高い画像から圧縮していくとかなり速度の数値も変わってくると思うので、ぜひ試してみてください!

まとめ

今回紹介した圧縮法だけでも、かなり速度が改善できるので、よりSEOを極めたい方はぜひ試してみてくださいね。

おすすめアプリ!

tyokin