公開日:
2016年になりましたね~月日の流れは速いものです。
サイトも速くしたいという訳で、
(若干むりやり感もありますが)サイトの高速化について色々共有いたします!
※上の画像は正月をイメージしたものです。これを書いている加藤は着物美女ではありません。
何故サイトを高速化するのか
そもそも論ですが、サイトの高速化はなぜ必要なのでしょう?
理由1:ユーザーは待ってくれない!
ユーザーは待ってくれません。特にスマホユーザーは。
アクセスしたら即座にそのサイトを閲覧したいのです。
細かな数字などはググって頂きたいのですが、サイトの表示スピードが数秒遅れるだけでユーザーの直帰率が大幅に上がります。
(直帰率ってイヤな言葉ですよねぇ・・・)
理由2:SEO的にGood!
サイトスピードが速ければすなわちそれだけで検索結果が上位になるという訳ではありませんが、Google検索のボットがクロールに要する時間は検索アルゴリズムにおいて結果表示の一つの要素として扱われます。
詳しくはこちらのサイトを参照ください。
グーグルが順位付けに使ってるのはページ表示速度ではなくクロール時間らしい | 編集長ブログ―安田英久 | Web担当者Forum
解釈がちょっと難しいところもあるので乱暴に極論すると「サイトのスピードが速い方がSEO的にも良い!」と考えてOKです。
(※裏側には色々な理屈があるのでちゃんと知りたい人はググってくださいね。)
理由3:収益性の向上
サイトに広告などを置いて収益化している場合、サイトの表示速度が速いことは収益に対しても良い影響があります。
「理由1」で述べたようにユーザーの離脱率が下がりますので、単純に広告が閲覧される回数も多くなります。
またコンテンツと広告が速やかに表示されることで、広告のアクティブビュー視認可能率も上昇します。
アクティブビューの視認可能率=測定可能なインプレッションの総数のうち、視認可能なインプレッションの割合
参考
測定可能なインプレッションの総数のうち、視認可能なインプレッションの割合
※要するに広告が見られる率が上がるってことです!
施策前と施策後の比較
そんなこんなでサイト高速化の施策を行ったのですが、いったいどれくらい変わったのかお見せ致します。
■対象サイト
ゲーム攻略!SQOOL.NET
http://sqool.net/
■施策前
昔のスクリーンショット画像を引っ張り出してきました。
これは確か2014年末くらいの画像です。
スミマセン、あまり記録画像をとっておらず、純粋な施策前の数値は不明です。
※対象ページは「http://sqool.net/」これのトップページです。
ちなみに左側が本当に何もしていない状態で、スマホが何と39点。PCも確か50点無かった^^;
右側は「.htaccess」というファイルを調整してブラウザキャッシュ等を有効にした状態。これでも65点。
サイトの表示スピードはPCで8秒、スマホだと10秒以上かかっていました。(遅すぎだろう・・・;;
このサイトはワードプレスで作っています。
ワードプレスは便利なCMSですが、若干重くて遅いのが悩みの種ですよね。
でも大丈夫!頑張ればワードプレスだって速くなります!
■施策後
こんな感じで超改善しました!
(だからきっとこれから書くことは大体正しいはず!)
うーん、スマホでの表示速度はまだまだ改善の余地があると思います。
でも表示スピードは5秒以上速くなりました。
PCでの表示はメチャメチャ速くなりました!
色々な人に「トップページすごく速くなりましたね!」とか言われてもう有頂天です。
スマホ側はまだまだなんですが
とりあえずここに至るまで何をやったのか、何が効果的だったのかを次回以降の記事でざっくりとご説明します!
説明する予定の項目
・外部リクエストを減らす。特にJS!CSS!
・JSとCSSの読み込み遅延を設定してみる(できるだけコピペで!)
・CSSを分割!ファーストビューを高速化!
・「.httaccess」でキャッシュを制御!
・CDNを効果的に使おう!
※記事を書きながら項目は変更するかもしれません。
私用するツール
お楽しみに~