usブログやSNSを通じて、Webに関する最新技術や情報を定期的に更新しています。facebookTwitterホームブログアーカイブどんと来い!サイト高速化【ページスピードはなぜ早くないといけない?】どんと来い!サイト高速化【ページスピードはなぜ早くないといけない?】2018.05.16こんにちは。シナップ広報・ライターの鈴木しのです。みなさんは、Webサイトを開いた際に読み込みが遅いあまりにページを止むを得ず閉じてしまったという経験はないでしょうか。Webサイトの運用の際に「ページスピードは重要だ」といった話を耳にした経験はないでしょうか。サイトのユーザビリティー向上に一役買っているとされているページスピードですが、なんとなく重要だとわかってはいるものの、なぜ重要視されているのか、またそれはどうしたら改善ができるのかイマイチピンときていない方もいることと思います。そこで今回は、シナップエンジニアの野原・山下が社内勉強会でまとめた内容に準じて、ページスピードの重要性・改善方法を前・後半の2回に分けて解説します。Webサイトにまとめられているようなテクニックばかりに頼るのではなく、仕組みの部分からまるっと知ることでより良い改善に繋がります。高速化の改善に悩んでいる際には参考にしてみてくださいね。(著)今回の記事のもととなる社内勉強会ではこちらの本を教本/参考図書としています。この本ではWebサイトの高速化に関して、ブラウザのレンダリングの仕組みから、計測、個別チューニングに至るまで、実践的な解説が詳しくまとめられています。興味がある方はぜひご覧ください。サービスの成長を目指し、様々なお手伝いをしています。シナップは、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。UI改善はもちろん、オウンドメディア戦略、DMP導入支援などマーケティング戦略に基づく様々な改善活動に関するご相談がございましたら、ぜひお気軽にお問い合わせください。CONTACTローディングに3秒かかると離脱率が半数を超えるもしもページスピードがゆっくりだった場合の弊害とはいったいどのような点でしょうか。Google」および「Web担当者Forum」発表のデータを参考として引用します。ページスピードが遅いことによる大きな弊害は「離脱率が高くなる」ことです。ページを読み込むスピードが3秒を超えると、ユーザーの多くはストレスを抱えた状態となります。その結果、参考データによるとユーザーの57%が「離脱」してしまうそうです。それだけではなく「(同サイトに)再訪しない」と回答するユーザーはなんと80%を越え。コンテンツがどれだけ優れていても、ページスピードにストレスを抱えた状態では読んでもらうどころではありません。Webサイトにとって、コンテンツ一つひとつはもちろん大切な構成要素です。それ以上にページスピードはストレスレスにサイトを訪問してもらうために考えなくてはならないポイントなのです。3秒以内に表示するページは20%程度いっぽう、ローディング時間に関するある調査のデータを参照すると、おもしろいことがわかります。とあるアクセス数ランキングでは、上位100以内にランクインするサイトの80%が3秒以上かかってやっとページが表示されるのだということ。Webサイトを構成するコンテンツには大きく分けて3種類あります。テキスト・画像や音楽・動画やVRです。これらは、年々とコンテンツサイズが大きくなっているため、それに伴いページスピードも遅らせる、というのです。「ページスピードが遅くなったら離脱されやすくて、再訪もされにくくなる」はずなのに、いったいなぜ80%のWebサイトは上位にランクインし続けるのでしょうか。それは、ほかでもないユーザビリティをどれだけ意識できているのかどうかという観点が非常に大切です。テクニックに惑わされるなページスピードの改善というと、一般には「画像を最適化する」「スクリプトは直前に」など、小手先のテクニックばかりを意識しがちです。本当に大切なのはテクニックでサイトスピードを改善することではありません。はじめに行わなければいけないことは、手当たり次第テクニックを実践することではなく、ビジネスの場面でよく使われるPDCAを回すことなのです。「この施策を行ったのだから、きっと改善されるのだろう」といった推測ではなく、計測によって改善を目指すこと。これこそがもっともユーザビリティを高めるための改善方法なのです。フロントサイドからアプローチするサイトスピード改善ちなみに、実際にスピードの改善を行う際のフロントサイドからの改善方法は大きく分けて5つあります。リソース読み込みチューニングJavascript実行チューニングレイアウトツリー構築チューニングレンダリング結果描画チューニング認知的チューニング難しい言葉が並びますね。例にとってみていくと、実際に行なう作業には以下のようなものが挙げられます。・cssのimportを避ける・デバイスピクセル比に合わせて画像を指定する(srcset)・スプライト画像でリクエスト数を減らす・jsの読み込みを非同期にする(実行が終わるまでにドキュメントのパース、レンダリングをブロックする)(2〜4については、詳しい解説はここでは長くなってしまうので、今回は省略したいと思います。実際に行う際は専門的な知識も多く必要なため、エンジニアとコミュニケーションを取りながら進めていくのがよいでしょう。認知的チューニング、つまりユーザーが感じる体感速度をチューニングすることを指します。ローディングアイコンのアクション、無限スクロールによる実質的な読み込み速度の調整、実際の処理とは異なるタイミングでフィードバック(反応)のみを返す手法など、さまざまなチューニングが挙げられます。サイトスピードの改善が必ずしも正義なのではなく、ユーザーにとっての満足度がいったいどのポイントにあるのかをしっかりと理解することが、より良いチューニングのために必要なポイントなのです。まとめサイトスピードが遅くなることの弊害や改善方法を簡単にご紹介しました。サイトの高速化では冒頭でも述べたように、闇雲にテクニックを実践するのではなく、まず計測を行い、ボトルネックを探し、その上で有効な改善を繰り返しおこなっていくことがポイントです。今回もう一つのポイントとしてあげた「認知的チューニング」。物理的な速さもさることながら、アニメーションなどのアクションで反応を返すことにより、遅く感じさせない・早く感じさせるなど、人の認知を意識した作りにすることでも高いUXが実現できることがわかりました。引き続き次回後編ではサイト高速化の話題でよく聞く「CDN」について解説します。サイトの高速化をご検討中の方は、ぜひ弊社までお気軽にご相談ください。サービスの成長を目指し、様々なお手伝いをしています。シナップは、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。UI改善はもちろん、オウンドメディア戦略、DMP導入支援などマーケティング戦略に基づく様々な改善活動に関するご相談がございましたら、ぜひお気軽にお問い合わせください。私たちシナップは、クライアントのビジネスと顧客を深く理解し、インターネットとつながるユーザー接点すべてをデザインすることで、ビジネスの継続的な発展を作り出すことを得意としています。IOQ(アクセス)利用規約プライバシーポリシーこのサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。同意するCookieを。