サイト高速化がなぜ必要なのでしょうか？
確かに、SEOに効果的な手法としても言われておりますが、それだけではありません。
ブランドイメージに直結したり、モバイルユーザの増加でより高速化が求められたりと・・・
ブランドイメージに直結する理由は、クラック、フリーズ、長いロード時間で不快に思ったことがあるインターネットユーザーは88%に登るというデータがあり、もう二度とそのサイトを使わないというユーザーがほとんどだったそうです。つまり、リピート率にも直結するわけですね。
モバイルに関しては、ご経験もあるかと思いますが、「あー回線規制が！！」なんてよくありますよね。
回線が規制されないように重いサイトはすぐ閉じる、二度と見ないなどの対策を取る人も多いです。
あげだせばキリがないですが、ひだちデザインで行ったサイト高速化対策を見ていきたいと思います！
ちなみにですが・・・2017年5月7日現在、PageSpeed Insightsでのスコアーはモバイル 92点、パソコン 91点です。
JSとCSSにMinifyをかける
Minifyとは不要なコメントやスペース改行を削除してソースのファイルサイズを削減・圧縮する手法です。
私はcssminifier.comとjavascript-minifier.comを使っています。使い方は簡単で「Input」に自分の書いたJSやCSSを貼り付けて「Minify」ボタンを押すと「Minified Output」に圧縮されたJSやCSSが出力れます。
– cssminifier.com
– javascript-minifier.com
画像を圧縮する
画像サイズはPhotoshopやIllustratorでも圧縮ができるのですが、他のサービスなども組み合わすと更に効果的です。(むしろ私はAdobeに頼らない！)
私が画像圧縮する際にはまず、tinypngで画像圧縮してから一度、サイトをテスト環境などにアップロードしてPageSpeed Insightsをかけます。
PageSpeed Insightsをかけると画像やJS、CSSなど圧縮が必要な場合圧縮してくれますので、それをダウンロードして使います。
ダウンロード方法はPageSpeed Insights画面下に「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」という所がありますのでそこからダウンロードしてください
– PageSpeed Insights
– tinypng
WordPressのpluginで対策
WordPressを使っている場合、pluginなどのJSやCSSが重くなりがちです。
どうしてもだめな時に限りpluginを使うことにしています。
高速化にはWP Minify Fix、Async JS and CSS、EWWW Image Optimizerの3つあれば十分です。
Minify FixはpluginなどのCSS、JSにMinifyをかけてくれます。
Async JS and CSSはjsの実行時にレンダリングブロックせず、非同期で実行されます。
EWWW Image Optimizerは画像を圧縮してくれます。
EWWW Image Optimizer以外は基本的に設定をいじることも何もないのですが、EWWW Image Optimizerはメディアなどに画像を一括最適化してあげる必要があります。
一括最適化方法は、Wordpressの管理画面から「メディア」→「一括最適化」→「最適化されていない画像がスキャン」ボタンをクリックです。
その他にも色々対策を！
上記のものは基本的な対策になります。
この他にも.htaccessでgzipやキャッシュを設定たり、ソースを極力簡素に書いたり、アイコンなどはsvgスプライトを使ったりなどなど出来ることはたくさんあります。
今回紹介したもの以外の対策もこちらで書いていきたいと思います！
