スマホサイト作成の時に有効な「ページの軽量化」３つ！

アフィリエイトでスマホサイトを作成する時は「ページの軽量化」がコツ！

以前書いた「アフィリエイトでスマホサイト作成をするときの３つの基本！」では、
レスポンシブウェブデザインでサイトを作成するのがおすすめと書きました。

アフィリサイトを作る上では、
レスポンシブデザインで作成した方が管理の手間も省けて便利だからです。

ただ、レスポンシブデザインにすると、
１つのソースをPCサイトとスマホサイトの両方で共有することになります。

その為、PC寄りにサイトを作成すると、
スマホサイトのブラウジング速度が落ちてしまいます。

そこで「スマホファースト」の視点で考えて
アフィリサイトを作成することが大切になりますが、

今回はレスポンシブデザインでスマホサイトを作成するとき、
手軽にできる「ページの軽量化」の方法を紹介したいと思います。

ページの軽量化に成功すれば、
ユーザーは快適にネットサーフィンができますし、

「Google が掲げる 10 の事実」でも、
「遅いより速いほうがいい。」と明言されてあるので、

ブラウジング速度の向上⇒ページの軽量化は
やっておいて損はない対策の一つだと言えます。

2chのまとめサイトをスマホで見ていて、
ページの表示が遅いとイライラしませんか？

僕はそう言った経験があるので、
出来るかぎり自分のサイトでも軽量化を心がけています。

今すぐできるおすすめのページの軽量化

　　・キャッシュの適用をする
　　・画像の解像度を下げる
　　・ソースを最適化する

もちろん、僕がやっている軽量化はまだまだレベルが低く、
正直プロのコーダーさん方にはとても敵いません。

ですが、出来るところからで良いと思います。
毎日少しずつ技術を伸ばしていきましょう！

キャッシュの適用をする

キャッシュを適用することにより、
wordpressやアフィリサイトの表示速度は劇的に改善します。

※キャッシュ…サイトデータを一時的に記憶してくれるもの。これを適用することでサイトの表示速度が改善します。

特にスマホサイトの場合は、コンテンツ表示までに時間が掛かると、
すぐに離脱されてしまうので、出来るかぎりキャッシュを適用した方が良いです。

シリウス（上位版）の場合は、サイト編集画面より
「サイトオプション」⇒「iPhoneサイト設定」で

画像のキャッシュ化を選択することが可能です。
（※クリックで拡大可能）

wordpressの場合は、キャッシュを適用してくれるプラグインを使うのが手軽です。

僕は「W3 Total Cache」と言うのを使っていますが、
他にも色々とあるので自分に合ったものを選んで下さい。

W3 Total Cache のおすすめの設定方法
https://bazubu.com/w3-total-cache-23854.html
（「バズ部」様より）

またこれだけだと、CSSやjavascriptなどのキャッシュは適用できないので、
googleの「PageSpeed Insights」では不合格を受けてしまいます。

（※クリックで拡大可能）

そこで、.htacessでキャッシュを適用させることになるのですが、
この辺の操作方法に関しては、長くなるので割愛。

補足記事：.htacessを使ってサイトのキャッシュ設定をする方法

恐らくこの方法をすれば、サイトの表示速度もかなり改善されるはずです。

画像の解像度を下げる

画像の解像度を下げることも、
ページの軽量化には非常に有効な方法です。

PCサイトでは気にならない表示速度でも、
スマホだと画像サイズが大きすぎて、表示に時間が掛かることが多いです。

画像の解像度を下げる方法は色々とありますが、
分かりやすいのは「tiny png」というサイト

このサイトを使えば、自動で画像を圧縮してくれるので、
サイトで画像を掲載する前にひと手間かけると便利です。

wordpressの場合はプラグイン「EWWW Image Optimizer」を使えば、
画像を自動で圧縮してくれるので便利です。

（僕はtinypngと併用して使っています。）

EWWW Image Optimizer の設定方法と使い方
https://bazubu.com/ewww-image-optimizer-23864.html
（「バズ部」様より）

また、画像の用途に合わせて「png」「jpg」「gif」を使い分けることも、
ページ軽量化をするときのちょっとしたコツになります。

ソースを最適化する

最近の僕がwordpressで最も勉強中なのがここ。

ソースの最適化に関しては、
正直僕もほどんど分かっていない部分の方が多いです。

ただ、一つ言えることは

cssやjavascriptを読み込ませる順番や手順を正しくすると、
サイトの表示速度も改善するという点です。

特にスマホサイトの場合、CSSやjavascriptの読み込み順序を書き換えるだけで、
スマホサイトの表示速度が改善するので、ぜひともやりたいです。

ただこの改善がもう少し勉強に時間が掛かりそうな感じです。
最悪、外注さんに依頼するかもしれませんが、要克服課題に設定中。

wordpressに関しては「Autoptimize」などを使えば、
複数のcssやjavascriptをまとめてくれるので、一応改善につながります。

Autoptimizeの設定と使い方
https://netbiz-life.com/archives/5222
（「Satoshi’s blog」様より）

あと「header cleaner」などもおすすめです。

Head Cleaner の最も理想的な設定方法
https://bazubu.com/head-cleaner-23851.html
（「バズ部」様より）

他にもCSSやjavascriptの最適化をしてくれるプラグインはいくつかあるので、
ページを軽量化したい場合はぜひ調べてみて下さい。

プラグインだけではどうしても「PageSpeed Insights」で
合格点をもらえなかったので、

もう少し勉強をして、改善点が見つかったら、
また改めて記事に起こし直したいと思います。

ページの表示速度を高めることは、スマホ最適化の第一歩

今回はスマホサイト作成の上で大切な、
「ページの軽量化」について話をまとめました。

ただ「ページの軽量化」はスマホサイトだけでなく、
PCサイトにも直結して重要な項目になります。

なぜなら、ページの表示速度を少しでも早くする事は、
それだけ離脱率の改善にも繋がるからです。

「サイト表示が２秒遅いと、直帰率は50％も増加する」
なんて発言もあるくらいですから、表示速度の改善はやれる範囲でやっておいが方が良いです。

もちろん僕らの仕事はアフィリエイトなので、
最終的には「サイト作成、SEO、URLのクリック」の３要素の方が大切。

でも、こういった横道も少しづつ覚えていくと、
アフィリエイトの地力も伸びてくるので、ぜひ頑張りましょう！

僕もページの軽量化などに関してはズブの素人なので、
プロにはまったくもって敵いませんが、新しいことを覚えると楽しいですよ。

何か質問やご指摘などがありましたら、
ぜひとも宜しくお願い致します★

■追伸■

メルマガではサイトアフィリエイトの話を中心に解説しています。

もしあなたがアフィリエイトで本気で成功したいなら、
絶対に読む価値のあるメルマガになっているので、

ぜひ今すぐ試しに読んでみて下さいね！

＞＞メルマガの詳細はこちらをクリック！＜＜