カテゴリー
SEO ワードプレス

webサイト表示速度の測定の1つの結論

webサイトの表示速度を測定してきました。繰り返し繰り返し、改善し速度を測定という作業を繰り返してきました。その理由は、開く前に訪問者が去ってしまうチャンスロスを無くすことと、ユーザビリティを向上させることによるSEO対策です。その結論がようやく出ました。

結論をお話する前に…
PCの前に座ってばかりだと、どうしても肩がこりますね。
集中すれば尚更です。
知らない内に、細胞が壊死してしまってることもあります。

ひどい時には、肩から指先にかけて痛みを感じます。
痛みを感じるのは、まだましなほうで、それを超えると痛みすら感じなくなり、最終的には切り取る必要さえ出てきます。

うちの婆ちゃんが、無くなる前そうでした。足を切断したのです…
元々、目が不自由だったこともあり、それで生きる力が無くなったかのように、暫くして亡くなってしまいました…
イカン…思い出すと…

PCで肩こりくらい…となめないほうがいいですね。

それでは、webサイトの表示速度の測定を繰り返した結論をお伝えします。
webサイト表示速度測定について

–スポンサーリンク–

webサイトの表示速度の測定で行き着く先とは?

かなり前、wordpressのwebサイトの表示速度を測定することで、一時期ハマりすぎてしまい、サイトを封鎖しなければならなくなるほどまでになってしまいました。

これでは、本末転倒ですよね。

なので、結論としては、
何処で妥協するのか?
ということになります。

極論からいえば、テキストだけのHTMLサイトなら、表示スピードには、何の問題もありませんよね。

とはいえ、現状ではイメージ画像も必要ですし、動画もそうですし、wordpressでいえばカスタマイズも…
やればやるほど、表示スピードに影響されてきます。

つまり、こだわればそれだけ比例して落ちるということにもなりかねません。
もちろん、それに対するスキルがあれば別です。

しかし、簡単にカスタマイズできるから、こだわっていきたいのに、そんなスキルアップまでの時間は求めらないと思います。
なので、表示速度よりも大事な収益化を忘れてしまっては意味がない事に気が付きました。
といっても、多くの訪問者に観覧していただけるよう、そこそこの表示スピードは維持しなればなりません。

そこで、どうすればいいのか?

サイトの表示スピードアップの方法は、腐るほど素晴らしいサイトが出ていますので、ここでは別の角度からお伝えしてまいります。

–スポンサーリンク–

webサイトの表示速度測定ツールの間違い

厳密にいえば、単に目安として、webサイトの表示速度を測定することは、決して間違いではありません。

しかし1つだけ気をつけなければいけないことがあります。
それは、現在のwordpressのテンプレートは、上から順に読み込む方式を使っているので、一概に問題があるとはいえないということです。

つまり、ユーザーが記事を読みながら、サイト全体が表示されていくわけです。
これを、測定ツールでは、全体が表示されるスピードを計測している可能性が高いので、ここが一概にいえない理由です。

とはいえ、サイドバーが遅れて読み込まれる事で、本来なら最も目につきやすい右上の広告が観てもらえない可能性も出てきます。
しかも、最近ではレスポンシブデザインに対応しているテンプレートが多いため、ややもすれば、右上は記事下へ移動してしまうのですね。

その意味では最初から1カラムにすればいいのではないか?という考えもありますが、出来れば他の記事も読んでいただきたい事もあり、サイドバーに表示させたい。広告もそうですよね。表示させたい1つだと思います。
で、あれば重要なコンテンツは、サイドバーの中程におけばいいわけです。

もし、表示速度の改善に限界を感じたのなら、このような視点から対策を練るのも1つの方法だと思いました。

–スポンサーリンク–

webサイトの表示速度を劇的に改善させる唯一の方法とは

webサイトの表示速度を測定することで、数値化すると分かりやすい代わりに、見失ってしまうことがあります。
その1つは、先ほど収益化かもしれませんし、コンテンツの中身の事になるかもしれません。

個人的に経験した事を、最後に記載しておきます。

それは、表示される事を待っていただける位の、興味深いコンテンツを用意するということです。
※もちろん、イライラさせない程度の改善は必要です。

これはファンに甘えるという意味ではなく、じらす効果も有るほどの独自の視点を目指していきたい、ということになります。

ネット上のサイトでは、ご存知のように、わずか3秒で閉じるかどうかが決まります。

とはいえ、それは新規か悩みが浅いユーザーをターゲティングしている時の話です。
新規は大事ですが、リピーターに目を向ける事はもっと重要だと考えます。

これは、別にイイネ!してもらうために…というよりも、リピーターを意識して書いていくことが大事だと思うんですね。

たしかに広告へ流すだけの、軽い八方美人的なサイトは、短期的には良い結果をもたらすかもしれません。

しかし、ここで考えてみると、メルマガのダイレクト・レスポンス・マーケティングが、なぜ未だに有効だと云われているのか?
これだけ、迷惑メールが増え、SNSの影響が大きくなってきたにも関わらずです。

その1つの理由は、リピーター率、ということなのかもしれません。

よくメルマガの読者は資産だといいますが、それは全てを亡くしたとしても、読者へメールを送るだけで収益化できるから、という理由もあるでしょう。

では、サイトの場合はどうなのでしょうか?

–スポンサーリンク–

–スポンサーリンク–

サイトの表示速度とリピーターと収益と…

webサイト表示速度測定と収益について
では、サイトの場合はどうなのでしょうか?

もしサイトが、検索エンジンからの新規だけならば、バージョンアップの進化に振り回されてしまいます。
しかし、リピーターが増えることで、安定していくんですね。

そのためには、ある分野が調べられる、wikiのようなまとめサイトでもいいかもしれません。
更新をコツコツ毎日やっているサイトでもいいと思います。

特にこれからの検索エンジンは、より人間の思考に近づいていくでしょうから、リピーターになりたいサイトが有利になっていくでしょう。

リピーターもそうですが、新規であれば、表示を待ってくれる可能性があるのは、やはり悩みの深さに比例するといえます。
しっかりと悩みの深さを押さえていく必要があるんですね。

それと、もう1つだけ。

もし、気を急いている、忙しいユーザーをターゲティングしていたら、数をこなせばいいわけです。
ニュースサイトのように。
そんな時には、表示速度はかなり重要となります。

この事は、裏を返せば、じっくり調べたい欲求があるユーザーであれば、表示速度を気にするよりも、コンテンツが気になることで、じっくり読んでいただける可能性が増すでしょう。

そうすれば、ラポールも築きやすくなります。
これはつまり、キチンと読んでいただける事により、力を入れて書きたくなることで、良い循環が生まれることにもなるんです。

なので、読んでいただけるような工夫も必要となりますが、それは表示速度だけではないという、至極当たり前の結論に至りました。

–スポンサーリンク–

オマケ

今回のオマケとして、SEOにしても、表示速度スピードにしても、コンテンツ作成にしろ、結局は収益化として1文字の価値を考えていくことになります。

1文字がいくら生むのか?

軽く大量になるほど、安くなります。
ツールによる記事量産などは、その最たるものといえるでしょう。

重く質が高まるほど、高くなります。
※セールスレター型、コピーライティングページなどは、その最たるものといえるでしょう。

ここで目安が必要だということで、あえて平均を出すなら…
1記事1円
を目安として、時間価値と費用対効果を見ていくといいでしょう。

ただここでも1つだけ注意しなければならないことは、1記事2記事では判断できない、ということです。

なぜなら、成功曲線を踏まえつつ平均を見て行く必要があるからです。
つまり、最初しばらくは0円でも、数ヶ月に出る収益と合わせて平均を出す必要があります。

そして1円が2円になった時、単純に費用対効果は2倍になりますから、収益化の部分が重要です。
とはいえ、収益化を急ぎすぎると、そこでストップしてしまいますので、慎重に戦略を練っていかなければいけません。

戦略といっても、決して小難しいことではなく、単純にステップ・バイ・ステップにして段差を付けてあげるだけの事です。

つまり、分かりやすくいえば、いきなり広告のみであれば、ユーザーは「yesか?noか?」と選択を迫られることになります。
どんなに欲しい物やサービスであっても、「どうする?」と聞かれれば殆どの場合「NO!」と拒否されてしまうんですね。

おっと!

話が表示速度からそれてきましたので、今回はこの辺で…

今回の話は、何か少しでも役立ちましたでしょうか?

ありがとうございました。

それでは、またお逢いしましょう。

カテゴリー
ワードプレス

CDNで外部サーバーを呼び出し負荷を分散させる方法

cdnCDNとは平たく言えば、1つのサーバーで全てを賄わず、画像などのメディアファイスを別のサーバーから呼び出すことで、負荷を軽減させ最適化させること。

wordpressで簡単にCDN(コンテンツデリバリネットワーク)を使えるプラグインを2つご紹介。

この仕組みを構築する場合、シンボリックリンクを使いSHHで…と初心者には難しくなってしまいがち。特にこのサイトで使用しているsixcoreサーバーではSHHが使えないのでそこでまたややこしくなってくる。

なので、ここでは簡単に実現するためにプラグインを使用する方法を使うことにする。

–スポンサーリンク–

CDMを無料でできる方法

まず、無料で出来る方法では、【Dropbox CDN】というプラグインを使用する。
【Public】フォルダに使用する画像を入れ、その画像を右クリックし【パブリックリンクのコピー】をクリック。
doropbox1
こちらは無料でできる代わりに10Gまでの制限がある。※超えると404で表示されてしまう。
↑上記の画像はプラグインからではなく、画像リンクをそのまま貼り付けてある。

このように、画像なら特に外部から簡単にリンクで呼び出しができる。そう考えると、FlickrやPicasaでもいいわけだ。
ただ、ポップアップでの画像展開や、wordpressとの連携を考えると少し不便なところも出てくるし、cssやjsやスクリプトなどのプログラムを呼び出すことも難しいといえるだろう。

そんな時活躍してれるのが、【Amazon S3】というアマゾンが提供してくれるサーバーだ。
最近、アマゾンでは電子書籍化も活発になりつつあるし、サーバーも値下げが行われて更に使いやすくなっている。
しかも日本語での対応も徐々に増えてきた(登録の段階など)。とはいえ、まだ実際の仕様などでは英語での表記が多いし、従量課金制ということもあり、従来のサーバーとは使い勝手が違っているのに戸惑うこともあるかもしれない。

次にこのAmazon S3をCDNとしてwordpressで使用するまでの流れを簡単に解説していきたいと思う。

Amazon S3をCDNに利用する方法

Amazon S3は、2013年4月より更に値下げが行われた。
料金の概要は、無料で容量が月5Gまで転送量が月15Gまで使用出来る。※アップロードは2000個、ダウンロードは2万個
→料金の詳細はこちら

今回は【Amazon S3 for WordPress】というプラグインを使用することで、wordpressのメディアファイルとして同期する方法となる。
これにより、CDNによる負荷軽減+バックアップとしても利用できるだろう。
※なお今回の解説画像から早速Amazon S3 for WordPressを利用している。

まず、こちらの『今直ぐサインアップ』よりアカウント作成。
※登録の流れの詳細はこちら

次に【支払い方法】にカード登録。
AmazonS3-1
カードの確認が出来たら(通常、直ぐにメールへお知らせがくる)

AmazonS3-2
↓このような英語で記載のメールが届けばok。

AmazonS3-3
次にwordpressの管理画面より【Amazon S3 for WordPress】を検索後インストールし有効化。

AmazonS3-4
続いて、サイドメニューの【Amazon S3】より【Amazon 3s setting】の『AWS Access kye ID』と『Secret Key』を入力後、【Authenticate Account】をクリック。

と、その前に、『AWS Access kye ID』と『Secret Key』を取得し、【Amazon S3】でセッティングをしておく必要がある。

AmazonS3-5
『AWS Access kye ID』と『Secret Key』は、こちらの【アクセス証明書】より入手できる。
※シークレットアクセスキーは【表示】をクリックすれば見れる。

次にAmazon S3のセッティングを行う。Amazon S3はfirefoxブラウザでアドオンを入手することで行えるようになる。

AmazonS3-6
firefoxのプラウザよりこちらから、【Amazon s3 organizer(s3Fox)】をインストール。

AmazonS3-7
インストール後、firefoxのメニューバーの【ツール】より、【S3 Organizer】をクリックすると、【S3Fox】が起動し表示される。

その画面の左上の【Manage Accounts】すると新しいウィンドウで【s3 Account Manager】が表示されるので、先ほど取得した『AWS Access kye ID』と『Secret Key』を入力後【ADD】をクリック。
※【Account name】 は自分にわかるもので適当でも大丈夫。

表示された画像は2つに分かれている。左がローカル(PS側)で右がAmazon S3となる。
次にフォルダ(パケット)を作成する。

AmazonS3-8
右の画面上で右クリックし、【Create Directory】を選択。
小窓が開くので、【Folder Name】に名前を入力すると作成できる。

AmazonS3-9
このようにフォルダが作成されるので、自分なりに管理しやすいようわけておくといいだろう。
次にアクセス権の設定をしておく。

AmazonS3-10
フォルダを右クリック後、【Edit ACL】を選択。
【Everyone】の【Read】をクリックすると、赤い☓から緑のチェックに変わる。その後【ok】をクリックすると、そのフォルダ全ての公開設定が完了する。

AmazonS3-11
試しに画面左のローカル(PC)より画像を選択し、中央の右矢印をクリックするとアップロードされる。※アップロード状況は画面下に緑のバーで表示される。

次にwordpressのメディアとの同期設定をしていく。
サイドメニューの【Amazon S3】より【Amazon 3s setting】の『AWS Access kye ID』と『Secret Key』を入力後、【Authenticate Account】をクリックすると次の画面になる。

AmazonS3-12
【Use this bucket】のプルダウンメニューより、先ほど作成したフォルダを選択。
【File Upioads】にチェックを入れると、メディアと同期されるようになる。
【save】をクリック。

後は、通常の作業を行うだけ。
つまり、【メディアを追加】より画像を追加するだけで、Amazon S3に追加され、URLもAmazon S3になる。※この解説ページの画像URLを見ると一目瞭然だ。

ちなみに、Amazon S3上で見てみると、
AmazonS3-13
wordpressと同じように、【/wp-content/uploads/2013/04/】のフォルダが自動的に作成されている。

このように画像を多く使用するサイトで負荷をかけず表示をスムーズにしてくれるかもしれない。

気になる課金については、どのくらいのアクセスでどれほど発生するのかを、課金され次第、追ってアップしていく次第だ。

ちなみに、従量課金制というのもあって、現在の使用状況は気になるところだ。
料金は、リアルタイムに確認出来る。
AmazonS3-19
サインアップし、【アカウント】の【サインアップアクティビティ】より確認できる。
※ダイレクトなURLはこちら

確認しつつ、もしも料金が発生しそうな時には、プラグインを『停止』させることで、いつでも”ストップ”させることができる。

–スポンサーリンク–

追記

この記事をアップした後で、少し欲が出てきてしまい、【Amazon CloudFront】も試して見ることにした。
※色々試せるのもAmazon S3のいいところだろう。

少々の画像のみなら、Amazon S3から直接でも大丈夫だと思う。
ただ、音楽や動画(ストリーミング)の配信なども考えると、1つだけ懸念することも出てくるかもしれない。
なぜなら、Amazon S3はアメリカからファイルを呼び出すため、時間がかかる可能性があるから。

そこで、【Amazon CloudFront】経由するといいらしいということと、設定も(上記の作業が終わっていれば)とても簡単なようので、早速試して見ることにした。

まず、firefoxの【Amazon S3 Organizer(S3Fox) 】より、
AmazonS3-14
フォルダを右クリックし【Manage Distributions】を選択。
【Creative Distributions】をクリックすると、【Status】が『InProgress』に変わる。
【ok】をクリック。
しかし、メディアからアップロードしても、URLはAmazon S3のまま変化なしで失敗。

その後【Amazon S3 for WordPress】ではなく、【Amazon S3 and Cloudfront】があることを発見。
AmazonS3-15

すると、設定の【Amazon S3】に、【Cloud Front】が出現。
AmazonS3-16
CloudfrontのURLを貼り付け【save】をクリックすると、無事『cloudfront.net』経由に画像URLが全て変更される。

CloudfrontのURLは
AmazonS3-18
先ほどの、【Creative Distributions】の【Status】欄をクリックすると、上記のURLが出現するので、【コピー】をクリックし、【Cloud Front】のURLへ貼り付けする。

ところが、画像のURLが『http://https://websites-designs.com』に、なってしまった。
そこで、【Cloud Front】のURLから『http://』を削除してみると
AmazonS3-17
無事、表示されるようになった。

–スポンサーリンク–

JetpackでCDN

wordpress.comで開発されているプラグインをまとめた【Jetpack by wordpress】にて、CDNが無料で提供されている。
内容は、

WordPress.com の CDN (コンテンツ・デリバリー・ネットワーク) から画像を読み込ませ、サイトを高速化しましょう。画像をキャッシュし、高速なネットワークから提供することで、あなたのサーバーの負荷をワンクリックで低減できます。

これに加え横幅をサイトに自動調整してくれる機能や、上部から順番に読み込む機能なども備わっている。※更に画像編集もあるようだ。

無料なのでこちらがいいかもしれない。
ただ、無料なだけに詳細な情報が少ないにも事実だ。

Jetpack6
ちなみに、実験的に【Cloud Front】を設定したまま有効化してみた。
すると、アップロードURLは、【Cloud Front】になっているが、サイト上に表示されるURLは、『http://i0.wp.com/d2pxhlacr917eg.cloudfront.net/~Jetpack6.jpg』となっている。

これはもしかすると、【Cloud Front】を更にwordpress.com側の【Photon】が呼び出して表示しているのかもしれない。
そうなると、おそらく意味がないだろう。
ただ、【Photon】の機能や実際の表示速度の計測も含め、しばらく様子を見ていこうと思う。

追記

様子を見ていると、ある日に気がつくと画像が表示されていなかった。
おそらくwordpress側の使用条件にマッチしていなかったのだと予想される。
※乱用されないよう、いくつか条件があるようだ。

CDNmiss1
このように、画像が空欄の状態になっていた。

そこで、jetpackの『Photon』を停止させたところ…

CDNmiss2

このように、画像が表示されるようになった。

–スポンサーリンク–

有料クラウドサービス

今回ご紹介した他にも、表示速度をアップする方法は様々ある。

例えば、『PHP☆Ninjya
このような、wordpress専用のクラウドサービスに一任してしまえば楽だ。
ただ、如何せん費用がかかるのが難点だと思う。

近年、これだけwordpressが普及した中、このようなクラウドサービスは更に普及してくるだろう。
そうなれば価格も抑えられていくに違いない。

それまでの目安として、先ほどのninjyaの例を上げるとするなら、サイトアクセス数が月30万つまり1日に1万を超えたところで検討してみてもいいかもしれない。
※これはserverでの単位なので、1つのserverに複数のサイトがある場合には、serverを移したり増強すればいいと思う。

1サイトで1日1万UA超えてくるなら、9800円は費用対効果としても丁度いいと思う。
※おそらくこの基準で価格を算出していると思われる。とはいえ、出始めたばかりということもあり、まだ高いといえる。

wpboosterというクラウドサービスもある。
こちらは、転送量の従量制課金となっている。
どちらが高いのかは微妙なところ。

–スポンサーリンク–

シークレットキー取得が新しくなる

2014年4月より、シークレットキーの取得方法が変わるので、
こちらの記事に取得方法をメモ代わりに記載。

–スポンサーリンク–

追記2

AmazonのCDN課金が、先月から3000円を超えていて驚いた。
確かにPVは伸びていると思うが、そこまではないと思っていたからだ。

画像やアイキャッチを使うことで、二乗で増えていたのかもしれない。
(あ、そういえば、先月はトレンドで急激に上げたサイトがあったのを思い出した)

ここで1つ疑問が沸いてしまった。
「もしアクセスを上げる攻撃にあった時どうなるのだろう?」と。

なので、暫くの間jetpackの『Photon』の切り替えて試してみることにした。

そこで新たに気がついたのが、プラグインを停止しても「それまでの転送URLは残る」ということに。
そんな時には、「Search Regex」というプラグインを使えば、一括で置き換えしてくれるので、とても便利だった。

参考にさせていただいたサイトはこちら。

Search Regexプラグインは過去に投稿した記事の内容を一括置換することができるプラグインです。

引用元: Search Regexプラグイン記事やコメント内容を一括置換 – WordPressプラグインの一覧.