webサイト表示速度の重要性を勉強してみた

最近、webサイトの表示速度が重要になってきた、とよく耳にします
……と思ったら、実はGoogleでは既に2012年から、全世界で速度を重視した基準を設けているそうですね。
相変わらず浦島太郎なNです。

米Googleによると、検索結果への影響度は1％未満だそうです。
しかし、Amazonの調査だと、0.1秒反応が遅れると売上が1％落ちるのだとか。
ひぇぇぇ！恐ろしい世界だ！

という訳で、SEOより、どうやらユーザーのシビアな視点が影響しているようですね。
特に企業や店舗のwebサイトは、本来お客様のためにあるべきものなので
かなり重大な問題なのではないでしょうか。
1分待って表示されなければ、私でも帰ります。

じゃあ、表示速度を改善するにはどうすれば？
浦島太郎なりに勉強してみました。

・画像、外部CSSファイル、外部Javascriptファイルの使用は必要最低限に

URLを入力してwebサイトにアクセス＝通信1回、という認識は大きな間違い。
実は画像、CSSやJavascriptの数だけ、通信が発生しているのだそうです。
コンテンツの大部分が画像で形成されたり、動作のほとんどをJavascriptに頼ったりするのは危険なのですね。
そりゃFlashが廃れるわけですね……。
あと、CSSファイルの数もできるだけ少なめに。
そしてやはり全てのCSSファイルはlink要素で指定しましょう。@importは避けるべきです。
大いに反省。（使いづらくはなってしまうのですが）

・画像や動画ファイルのサイズに気をつける

サーバーへの通信の回数を減らす特にサイズや作り方で容量が大きくなった画像や、元々容量の大きい動画には要注意。
ファイルサイズが大きければ大きいほど、必要とされる通信量が増え、その分表示速度が遅くなります。
CSSやJavascriptファイルも、不必要な空白や改行、使わなくなった表記は消しましょう。
中身がシンプルな方が、検索ロボットもファイルの中身を読み込みやすくなり、その分webサイトのアピールにも繋がります。
何のアピールかといえば、例えば「うちのwebサイトはクリーンだぞ〜、spamサイトじゃないぞ〜」ということです。

・コンピューターが解析しやすいファイルにする

グループ作業などで、他のメンバーの作業効率をより良くするために1人1人が気を遣うのと同じ理屈だと思っています。
HTMLやCSSの記述内容、Javascriptなどの記述方法や場所によって、表示速度に大きく影響します。
例えば一昔前はjavascriptをheadタグの中に書いていましたが、今はbodyの閉じタグの直前に書くのが主流です。
これは、headタグに書くと、最初から難しい解析に時間を裂かれ、それより下の部分が表示されないままストップしてしまうからです。
正しい文法を使ってコンピューター解析班が迷子にならないように
よりシンプルな内容でコンピューター解析班の命令がより簡単になるように
コーディングを工夫する必要があります。

光回線が主流の今、いらない心配だと思われるかもしれないのですが
一方で、機能は山ほどあってもやはり通信速度の遅い環境にある
スマートフォンやWi-Fiでの利用スタイルが増えつつあるのも事実です。
ノートパソコンだってまだまだ強いのです。
データ量には気をつけて、全てのユーザーが快適に閲覧できるコンテンツにしていきましょう。

ちなみに、表示速度の許容範囲は1.5〜2秒。
理想は1秒以内だそうです。

＜参考サイト様＞
Webサイトの表示速度（Web制作会社.com様）
Webサイト高速化・表示速度改善のために知っておきたい基礎知識（SEO HACKS 公式ブログ様）

表示速度のチェックは、以下のリンクから。

Webサイトのページ表示速度チェックツールまとめ（WP SEOブログ様）

ハートブレーンのwebサイトを診断してみたら
何故か「表示が遅くなる最大の要員」がブログへのリンクボタンでした。
なんで？？？

【ハートブレーン】https://blog.heart-kokoro.net