Webデザインで、もっとも見落としがちなこと…
それは、表示スピードです。

このウェブコンテンツの表示速度議論は、通信環境が次世代の「5G」になれば、問題がなくなると言う見解も多い(私も大部分で賛同)ですが、私は、一部、そんな短絡的な問題ではないのではないかと不安を残しています。

通信速度が5Gになっても、別のアナウンスでGoogleはデザインを指摘してくる?

WEBデザインを最適化することは、コンテンツの読みやすさや利便性、そして、情報発信者のメッセージを閲覧者に適切に伝えるために施すものだと、私たちは考え、このサイトを運営しています。

私たちの技術やスキルが完璧だとは言いませんし、まだまだ、今後もアクセス解析などを見ながら改善していきたいと考えています。

このことを抑えて考えてみると、WEBコンテンツは、そもそも「アクセスされなければ意味がない」とも言い換えることができます。

コンテンツのデザインは、ページへの訪問者を引きつけることはできますが、ページへのアクセスを誘発することはできません。

そう考えると、WEBコンテンツのデザインは、自然発生的に引き起こる検索経由のトラフィックを阻害する要因を極力取り除く必要があります。

Googleはかねてより、WEBコンテンツの表示速度に関して言及しています。

昨年2017年5月24日にGoogleがおこなったGoogle Markting Next 2017では、『ページの読み込み時間が1秒から10秒になると離脱する確率は123%に増加する』と、現在のモバイル端末におけるトラフィック傾向を発表しています。

ページの読み込み時間が1秒から10秒になると離脱する確率は123%に増加する

また、『モバイルサイトの訪問者の53%が読み込みに3秒以上かかるページから離脱します』とも、発表しています。

モバイルサイトの訪問者の53%が読み込みに3秒以上かかるページから離脱します

この報告も押さえておきたいところですね。

 

詳しくは、松村の公式ブログ内『Google Markting Next 2017(翻訳付き)』の記事で紹介していますので、ご確認ください。

ここで気になることは、Googleが今後、インターネットの通信規格(国際規格)が5Gとなり、その後もますます高速化されるだろうことを知らないはずはないのに、なぜ、今後、通信速度によってWEBコンテンツの表示速度は数十倍以上、同じ周波数帯域なら1,000倍近いデータをやり取りできてしまうと言う状況が迫っているのに、コンテンツの表示速度に関するデータを強調するのか?!と、言うことです。

それは、おそらく、Googleのデータ管理容量における負担軽減も関係しているのではないかと考えています。

結局、インターネットの通信速度が高速化され続けたとしても、Googleは何かしらを指摘して、WEBコンテンツのデータ軽量化を促進する統計データを提示し、検索ランキングの決定要因として組み込んでくるのではないかと考えられます。

そこで、本サイトのコンテンツを使って、デザインと表示速度、データ量の関係について調査してみましたので、ご報告いたします。

洗練されたコンテンツデザインは、データ量も抑えられる

まず、下記の画像をみてください。

GTmetrix検証結果1

この画像は、本サイトで1カラムデザインの基本を押さえつつ、運用目的に応じて多少手を加えた、各ページをGTmetrixで検査した際の画像です(クリックすると大きな画像を確認できます)。

一番左が、本サイトのトップページ。続いてパワーポイント・デザインで作成したページ。左から3番目のページは、1カラムレイアウトデザインの基本を押さえた「詳細情報」を掲載したページで、一番右が、トップページの基本デザインを忠実に再現したページの調査結果です。

この” トップページの基本デザインを忠実に再現したページ “で採用しているコンテンツデザインは、過去、国内外約3,000サイトを調査し、その基本要素のみを抽出した要素をもとにデザインしたものです。

何も、私が発案した「洗練されたデザイン」と言うわけではございませんので、誤解ないよう願います。また、このデザインを、あなたも簡単に採用できる方法を本記事ではご紹介しています。

今回はGoogleの「PageSpeed」に関する項目のみを掲載した画像を掲載していますが、ここでは、下記27項目でページが評価されています。

GTmetrixのPageSpeed27項目

  1. Avoid a character set in the meta tag:メタタグ内の文字セットを避ける
  2. Avoid bad requests:悪い要求を避ける
  3. Avoid CSS @import:スタイルシートの @importを避ける
  4. Avoid landing page redirects:リンク先ページのリダイレクトを避ける
  5. Combine images using CSS sprites:CSSスプライトを使って画像を結合する
  6. Defer parsing of JavaScript:JavaScriptの解析を延期する
  7. Enable gzip compression:gzip圧縮を有効にする
  8. Enable Keep-Alive:キープアライブを有効にする
  9. Inline small CSS:インラインの小さなスタイルシート
  10. Inline small JavaScript:小さなインラインJavaScript
  11. Leverage browser caching:ブラウザのキャッシュを利用する
  12. Minify CSS:スタイルシートを縮小する
  13. Minify HTML:HTMLを縮小する
  14. Minify JavaScript:JavaScriptを縮小する
  15. Minimize redirects:リダイレクトを最小限に抑える
  16. Minimize request size:要求サイズを最小化する
  17. Optimize images:画像の最適化
  18. Optimize the order of styles and scripts:スタイルとスクリプトの順序を最適化する
  19. Prefer asynchronous resources:非同期リソースを優先する
  20. Put CSS in the document head:ドキュメントヘッドにCSSを挿入する
  21. Remove query strings from static resources:静的リソースからクエリ文字列を削除する
  22. Serve resources from a consistent URL:一貫したURLからリソースを提供する
  23. Serve scaled images:最適なサイズの画像を掲載する
  24. Specify a cache validator:キャッシュバリデータを指定する
  25. Specify a character set early:キャラクタセットを早期に指定する
  26. Specify a Vary: Accept-Encoding header:Vary:Accept-Encodingヘッダーを指定する
  27. Specify image dimensions:画像のサイズを指定する

今回の調査では3箇所のみ(B)判定を受けましたが、その(B)評価部分は17番目の「Optimize images(画像の最適化)」でした。

専門的な内容は割愛しますが、画像データJPEGやPNGデータには、WEBコンテンツとして余計なデータが含まれています。

これらWEBコンテンツとして不要なデータは「WebPコンバーター」などのツールで、取り除くことができ、最適化することができます(ツールは英字サイトですがリンク先からダウンロード可能です)。

このGTmetrixでの調査の結果指摘された画像を特定するためにGoogleの「PageSpeed Insights」で、各ページをチェックしましたが、最新の「PageSpeed Insights」では、「Optimize images(画像の最適化)」で2番目に評価の高い「B(87)」左から3番目のページで3つの画像が指摘されるだけでした。

若干GTmetrixとGoogleの「PageSpeed Insights」では、検証結果が異なることが気にはなりますが、基本に忠実にデザインしたページがオールAだったことは、難しいことを考えず、確固たる調査機関がリサーチをし、信頼のあるWEB開発企業が採用しているデザインを踏襲するメリットを多大に感じる体験でした。

このサイトでも採用している、この「トップページの基本デザイン」は、私自身が、これまでに国内外約3,000サイトを調査し共通点や要素をまとめフォーマット化したものではありますが、現在は、この基本に沿ったデザインを簡単に採用するためのWordPressテーマが販売されています。

もちろん、この調査の際には、調査対象サイトが、どのようなCMS(コンテンツ・マネジメント・システム:WordPressやムーバブルタイプなど)で作られており、WordPressの場合は、どのようなテーマを採用しているのかを可能な限り調べ調査したものです。

一部、私たちが推奨しているテーマを使ったサイトもありましたが「極めて一部のサイトのみだった」ことをここに書き留めておきます。

表示速度とコンテンツ評価の関係

表示速度とコンテンツ評価の関係を考察する前に、まずは、下記の画像を確認してください。

この画像は、先ほどの1カラムレイアウトのページと2カラムページのGTmetrixチェックデータを並べたものです。

ここで気付けることは、比較的「読み込み秒数(Fully Loaded time)」が短い2カラムページですが、Googleの評価は8ポイントも低い評価になっていることです。

また、「読み込み秒数(Fully Loaded time)」と「ページデータ量(Total page size)」に矛盾(データ量が多いのに読み込み時間が短い、または差がない)点を見つけることができます。

例えば、上段の一番右側と、下段一番左側のページでは、約1.8倍のデータ量がありながら、読み込み時間は変わりません。

ただし、読み込み速度が速くても(読み込みにかかる時間が短い)、データ量が多ければ、Googleの評価が低くなることは目を見張ります。

文字数に関しては、上段4ページの内、左から3番目のページのみ2カラムレイアウトページと同様の「詳細情報コンテンツ」です。

詳細情報コンテンツですので、下段4ページのも含めた5ページの平均文字数は15,000文字程度です。もっとも多いページが下段右から2番目のページで19,596文字(Microsoft Word換算)、もっとも文字数の少ないページは、その上段に示される、上段左から3番目のページで、10,186文字と、約2倍の文字数があります。

文字量が2倍ほど多いにも関わらず、読み込み時間に1秒以上の差が出ると言うことは、文字量と読み込みスピードに因果関係はないと言えるでしょう。

また、もっとも読み込み時間のかかったページに使用されている画像の総データ量は202KBで、もっとも読み込みスピードの早かったページの総画像データ量は156KBです。

もっとも画像総データ量の少なかったページのデータ総量は77KBですが、読み込み時間は2.7秒で、もっとも読み込みスピードの早かったページの約半分のデータ量でした。

このことから、画像のデータ量が読み込みスピードに大きな影響を与えるかと聞かれれば、「その心配はない」と、答えても間違いではないのではないかと考えます。

GTmetrix最低評価「F」を引き起こした原因

今回調査したページで最低評価の「F」判定が行われたのは、下図の通り「Serve scaled images(最適なサイズの画像を掲載する)」の項目でした。

レスポンシブWebデザインを採用したウェブサイトでは、画面の幅によって画像の大きさも可変します。

また、WordPressのアプリ(プラグイン)を使って、リサイズされた画像を自動生成し表示させるものもあります。

このサイトでは、ある種、すべてのページでリサイズされた画像が掲載されるのですが、今回の指摘を調査した結果、サイドバーに表示される画像が大きな影響を与えていることがわかりました。

この「サイドバーに表示される画像」は、タブレット以下(800px以下)の端末で閲覧された場合、本文の下部に移動し、モニター幅いっぱいに広がります。

指摘された画像は、仮にモニターサイズを「パソコンサイズ」「タブレットサイズ」「スマートフォンサイズ」の3つに分けた場合、過度に画像サイズが変化する画像に対して指摘されていました。

そのため、2カラムレイアウトを採用した場合の「本文」に掲載した画像に対して、このような「Serve scaled images(最適なサイズの画像を掲載する)」で、マイナス判定をされることはないようです。

下段一番左のページで唯一「F(18)」となっている理由は、本文内で3分割レスポンシブの事例を掲載する画像に対する指摘があったため、1ページのみ評価が過度に低くなっています。

では、解決策をお伝えする前に、今回の調査結果をおさらいしておきましょう。

画像は、クリックすると拡大画像を確認することができます。

2カラムページの調査結果
ポイントのおさらい

  • 仮説の域を脱しないが、Googleはインターネットの通信速度が上がっても、コンテンツのデータ量や読み込みスピードなどを軽くするよう指摘し続ける。
  • コンテンツのデータ量、読み込みスピードは、ウェブコンテンツとして最適な画像を使用すれば、画像の枚数やデータ量、文字数などは大きく影響しない(おそらくそれ以外のJavaなどのプログラムが影響する)。
  • Googleの「PageSpeed Insights」評価だけを頼りにしてはならない。

WEBコンテンツのデータ量軽減とGoogleの評価を高める施策

今回、Googleの「PageSpeed Insights」とGTmetrixを使った検証は、この記事をアップする時点で公開しているコンテンツ(noindexコンテンツを除く)を全て検証してみました。

現在、本サイトにはこの記事を除いて検索エンジンへの登録を許可しているページは、12ページあります。

本記事で画像で紹介しているのは、その内8ページですが、他の4ページのデータは、この8ページのデータと差異が認められなかったため掲載を割愛しました。

では、これらの調査結果を踏まえて、あなたにオススメの、コンテンツ表示スピード対策をご紹介し、今後、本サイトで採用していく改善策や対応策、今後のコンテンツ表示スピードに関する運営方針と、検索経由のトラフィック獲得方針についてご紹介していきます。

これからホームページ制作または、リニューアルを検討している方へ

これから、ホームページの制作やリニューアルを検討されている方は、オリジナルデザインや制作会社の経験則によるデザインやテンプレートを選択するのではなく、海外を含めとても多くの企業サイトが採用している「基本フォーマット」に沿ったデザインを採用することをお勧めします。

特にWordPressを使ったホームページを検討している場合は、調査済みのテンプレート(WordPressの場合は「テーマ」と言う)を採用することをお勧めします。

私たちも、ホームページ制作サービスを提供していますが、他のページでもお伝えしている通り、ホームページを作る際に、もっとも工数がかかるのは「オリジナルデザイン」です。

そして、オリジナルデザインは、改善ポイントに「軸」を持たないため、成果の是非は、「当たり外れ」のギャンブルになってしまい、アクセス解析などのデータを参考にした改善を煩雑にしてしまいます。

既存の秀逸なWordPressテーマでは、そのテーマと相性の良いアプリ(WordPressの場合は「プラグイン」と、言う)も同梱されていることが多く、カスタマイズも容易です。

ただし、これは海外のWordPressテーマに限っての話で、国内WordPressテーマは、プラグインに切り離すべきシステムを直接テーマに組み込んでいるため、プログラム面の改善がほとんどできません。

このような国内外の違いは、国内WordPress開発会社の多くが、無償のWordPressテーマを配布したり、有償のWordPressのテーマを販売した後の「個別依頼」を見込んでのことだと考えられます。

また、このような追加利益を目論んでいない国内のWordPressテーマ販売会社の商品では、海外の良質なテーマと比べ、2〜3倍近い価格で販売されていることがほとんどです。

さらに、先日、飛び込んできたコンテンツの表示スピードやGoogleのモバイルフレンドリーテスト、「PageSpeed Insights」でも、高得点を獲得できる無料のWordPressテーマ(国内)が、大々的に宣伝されていたので調査してみました。

それが、以下の結果です。

SEO関連の情報やツールは、多角的に検証しましょう。

まずは、下記の画像をみてください。

噂の無料WordPressテーマとの比較
本サイトに関するデータで、一部上記画像と異なる点があります。これは、調査時毎のサーバーの反応等による誤差だと考えられます。その理由は、本記事の作成都合により、調査時間に大きな幅があるためです。

この画像は、本サイトでもっとも評価が高いページと、もっとも評価の低いページに加え、宣伝されていた国内無料のWordPressテーマ配布サイトでPRされていたページと、画像の多いページのGoogle「PageSpeed Insights」データおよびGTmetrixデータを結合した図です。

販売者に不利益にならないように、URLおよびキャプチャ画像を伏せさせていただきます。

この国内WordPressテーマは、そのテーマを使うだけでGoogleの「PageSpeed Insights」で、「ほぼ満点を獲得できる」とPRしていました。

確かに本サイトと比較しても、PRされていたページでは、モバイルでもパソコンでも「Good」評価(80点以上)を獲得しています。

しかし、読み込みスピード(「Fully Loaded time」)を見てみるとPRページでは、Googleが「53%が離脱する」と指摘する3秒を若干上回っています。

モバイルサイトの訪問者の53%が読み込みに3秒以上かかるページから離脱します

サブページに関しては、10秒以上読み込みにかかっていますので、検索経由でこのページへのアクセスは、たとえ、人気のキーワードで上位表示できたとしても、その半数以上がページの表示を待たずに、検索結果に戻り別サイトに訪問すると考えられます。

ページの読み込み時間が1秒から10秒になると離脱する確率は123%に増加する

さらに詳しく見てみましょう。

新登場した話題の無料WordPressテーマとの比較

この結果を見る限り、とても残念なことではありますが、PRするために都合の良いデータのみを使っているのではないかと思わざるを得ません。

確かに、今回調査させていただいた無料WordPressテーマの紹介サイトは、あくまでも「無料」のテーマですから、性能に限界はあるかもしれません。

加えて、広告を掲載するとGoogleの「PageSpeed Insights」での評価は落とさなくても、他のツールでの評価を極端に下落させることが多々あり、この評価の低いページには広告も6箇所掲載されていたので、広告が評価を左右しているのかもしれません。

※ PRページに広告はなく、このページでは広告を掲載することで表示速度および評価を落とすことも言及されています。

WordPressのテーマは、サイトを公開したのちに、コロコロと入れ替えられるものではありません。そのため、無料テーマを使用する場合は、今後数年、そのテーマを使い続けることを視野に入れ選択しなくてはなりません。

WordPressの場合は、WordPressのシステムバージョンアップがあり、このバージョンアップに適合するためにテーマのバージョンアップも求められます。

個人的な意見ですが、無料のWordPressテーマが、何年もの間、バージョンアップ版をリリースし続けられるとは、これまでの経験で考えにくいと言うのが、私の見解です。

有料版のWordPressテーマを選ぶ場合は、機能や価格もさることながら、バージョンアップ履歴やその頻度も確認し、選ぶようにしてください。

なぜ、他社のWordPressテーマを槍玉に挙げているのか

妙な批判が渦巻く前に、あえてここで記述しておきます。あえて下品な言葉「槍玉にあげる」としていますが、実は、PRページを読んで、検証テーマのひとつに加えようかと、このWordPressテーマを調査したのが、本記事の後半部分を書き改めた理由です。

実は、この情報が飛び込んで来なければ、本記事は昨日までに後半部分がもう少し違う形でアップされていました。

これまで、WordPressテーマは数千テーマ調査し、100テーマほど実際に運営したり、そのテーマを購入しホームページを作ったり(制作途中でテーマを変えた場合もあります)してきました。

現在も、気になるテーマがリリースされたりすれば、調査対象に含めるかどうかをまず調査し、テストサイトを運営するなどしながら、良質なテーマを探し続けています。

今回は、本サイトの表示スピードとGoogleの評価に関する調査記事にスタートアップ記事として原稿を書き始めました。

結果として、比較テーマがあれば「尚良し」と考え、新着テーマを「検証対象」とするかどうかを調査し、その結果を本記事に掲載しました。

その理由は、これから調査を始めるスタートアップ記事という内容だけでは、読者である、あなたにとって、何の解決策も得られないからです。

では、結論を…

WordPressテーマを選ぶ場合は…

  1. 複数のツールで複数ページ調査する。
  2. 調査が面倒な場合は、「新発売」のテーマは購入しない(無料でも使わない)
  3. WordPressテーマを選ぶ場合は、性能や価格はもとより、バージョンアップ履歴と頻度を確認する。

今後の本サイトにおける対策

今後、本サイトにおけるブログの更新頻度やコンテンツの追加頻度に関しては、サイトで取り扱っているテーマおよび、製作時に設定した運営方針から、それほど頻繁だとは言えませんが、「7対3」もしくは「8対2」ほどの割合で2カラムレイアウトのブログ記事が多くなってくることでしょう。

このような状況を踏まえると、今回の調査の中では、下図のデータを軸に方針を定めることが肝要です。

2カラムページの調査結果

この結果を踏まえると、本サイトで採用しているWordPressテーマにおいて、画像の最適な処理を行う以外、特別な配慮は必要ないと結論づけることができます。

プラグインの選択もテーマとの相性も良く、システム的な問題に悩まされることなく、原稿に集中し、検索結果経由のトラフィックがどのように発生するのかをアクセス解析データを観察しながら、情報発信に努めるだけで良い状態であるということがわかったことになります。

逆を言えば、どれだけ優れた記事を書いても、ホームページのシステム的な要因が影響し、検索経由のトラフィックを取りこぼす可能性があるということ。

逆に、ホームページ制作時に、実績のあるデザインとWordPressテーマを選択すれば、対面販売における営業トークを改善するように、情報発信記事の改善を行うだけで十分であり、そこに「インターネットだから…」「ホームページだから…」という専門知識は必要なくなるということです。

これが、私たちが推奨している「ホームページ自社制作、自社運営」の秘訣であり、理由です。

Webデザインで見落としがちなこと【まとめ】

Webデザインで見落としがちなこと【まとめ】

  1. Webデザインで、もっとも見落としがちなことは「表示速度」
  2. 「表示速度」改善のためのツールでもあるGoogleの「PageSpeed Insights」だが、「表示速度」とこのツールの評価が常に比例するとは限らない。
  3. WEBページの「データの質」を検証する場合は、多角的な視点で複数のツールを使って検証しなければ意味がない。
  4. WordPressテーマを選ぶ際は「バージョンアップ履歴」と「バージョンアップ頻度」を重視する。
  5. 国内SEO情報は、ビジネスライク的な偏りの多い情報が多いため、Googleの公式発表をチャックしたり、可能なら検証サイトを運営しチェックすることが欠かせない。
本サイトの表示スピードに関する調査データ

【補足】

今回、書き改めることになった、後半部分は、ある商工会の懇親会で質問されたことやご相談いただいたことに関することです。詳しくはメールマガジンでお伝えいたします。