2017年1月18日ホームページのUIにおいてページの表示速度は非常に重要な要素ですが、この点はどのように診断してますか?今回は僕が普段使用する表示速度の診断ツールと改善策をまとめておきます。ホームページの表示速度は正常ですか?どうして表示速度が重要なの?ホームページにおける表示速度の重要性はユーザー視点で考えると良くわかります。表示速度が遅いユーザーが不満に感じるすぐにページを離脱スマホやパソコンを利用している時に突然インターネットが使えなくなるとイライラしてしまいますよね。ホームページの表示速度が遅いと同じような不満をユーザーに与えることになります。ホームページに不満を持つということは、サイトを離脱してしまうことに繋がり顧客獲得機会を逃すことになります。これは企業としては絶対に避けるべき問題です。表示速度が速いとどうなる?逆に、表示速度が速いとユーザーは快適にホームページを閲覧することができます。快適にホームページを使うことができると、サイトを閲覧する時間(滞在時間)が延びることはもちろん、それにより他のページを見てもらう機会が増えてアクセス数も増えてきます。数が伸びることもよくあります。サイトの内容に関わる部分ではないので影響力は少ないですが、間接的にユーザーにとって不満を与えてしまうものであれば内容は良くても検索順位が下がる可能性があります。同じような内容のページで表示速度の違いが大きくあるならば、Googleは表示速度の遅いサイトを下位表示します。最低限抑えるべき点として覚えておきましょう。僕が普段使用しているホームページの速度診断ツールはこの4つです。Analyticsの分析項目に「ページ速度」があります。この項目ではサイト表示に平均で何秒かかったかはもちろん、ページ単位での速度を見ることができます。Analyticsを入れている方は必ず見るようにしましょう。Insights表示速度の評価とともに改善点も提示してくれます。この改善点に従って表示速度改善の施策を行うと楽です。評価が厳しくてWordPressとか使ってる表示コンテンツの多いサイトはBランク以上には中々なりません(笑)URL:https://developers.google.com/speed/pagespeed/insights/GTmetrixURL:https://gtmetrix.com/PingdomURL:https://tools.pingdom.com/この2つは参考データとしていつも合わせて使用しています。どの診断ツールを使うかによって評価は変わってくるので、複数のツールを使いたくなるんです。※個人的な基準としてはどれも60点以下・Dランク以下になってくると表示速度の改善を考える必要性が出てくると考えています。いえ大事なのは単純な数値としてのページ表示速度ではなく、ユーザーがどのように感じるかです。客観的にホームページを診断してみてください。表示速度が遅くなる原因と対策ホームページの表示速度が遅くなる原因はユーザー環境によるものと、運営環境によるものに分けられます。ユーザー環境ユーザー環境においてページの表示速度が遅くなる理由は主に2つです。処理速度(スペック)の低いパソコンやスマホを使用していると、アプリはもちろんホームページの表示速度も遅いです。ネット環境ネット通信が重い環境にいると、適切な情報通信が行われないため表示速度が落ちます。おいてページの表示速度が遅くなる理由は主に4つです。安いサーバーはサーバーの応答速度が遅い傾向にあるので、ページの表示速度が遅くなりがちです。アクセスの少ないサイトであれば良いですがアクセスの多く集まるサイトではサーバー選びも気をつけるべきです。ソースを読み込みすぎCSSやjavascriptなど外からソースを読み込みまくっていると、表示速度が遅くなります。CleanerやAutotimizeといったプラグインを使用ページサイズが重い膨大なコンテンツを読み込んでページサイズが大きくなってくると、ページの表示に時間がかかります。画像を多く読み込むか・ファイルサイズの大きい画像を多く読み込む形になっていると極端に表示速度が落ちることがあります。Optimizerというプラグインを使用すると簡単に画像の圧縮ができます。cacheでコンテンツのキャッシュを作ったり、無駄なコンテンツはなるべく表示させないことも大切です。アクセス過多サイトに急激なアクセスが集まったりするとサーバーで処理できなくなってサイトの表示ができなくなることがあります。※WordPressの各プラグインの使い方についてはここでは触れません。ホームページの表示速度は正常ですか?もしホームページの表示速度が極端に遅いなどの問題があると運営側にとってもユーザーにとっても不利益が生じてしまいます。ホームページの運営に携わっている方は自分のサイトがどの程度のスピードで表示されるのかを必ず確認して対策を講じておいてください。一度設定を整えれば、あとは楽チンです。Webデザイナーぎしたかフリーランス(歴3年)|フロントエンジニア・Webデザイナー|仕事:Web制作|2019年の目標→エンジニア転向|Webサイトを作ったり記事を書いています。今も紙の本が好きです。