高速なWEBサイトを実現する研究 #1「遅いページを見てると心理的にネガティブになりがち」

インターネットで遅いと「イライラ」するのは、今の時代特有の感情であって、100年前には存在しなかった感情なのかもしれません。 情報は、知ってて当たり前、知らないことは有り得ない時代における情報取得はWEBを使う事が書籍よりも上回りはじめています。 3Gという公衆インターネット回線から4G,LTEと切り替わり、2020年には5Gが登場しますが、回線が太くなったとしても、そもそものWEBサイトコンテンツが遅い場合には、これまでと何も変わらない遅さを提供してしまいます。 要するにどんなに早い回線を持っていても、スペックの低いサーバーや、読み込みからブラウザレンダリングに時間がかかるWEBサイトを構築してしまっては、5Gの恩恵をうけられないだけでなく、ユーザー離脱も増えるサイトを作っているようなものです。

安く作ったホームページの現実

会社を立ち上げたばかりで、安価に知り合いやクラウドJOBサイトなどで、3万円やら5万円などの金額で作っているケースが増えているようです。 とりあえずインターネットサイトを構築した人などのサイトを見てみると、非常に重い、遅いサイトのオンパレード！！ どうやら、wordpressでSEOにも最適なブログの書けるホームページを有り物のテーマでサクッと作っているのが現状のようです。 wordpressもECcubeも、WEBサイトフレームワークは基本的にどれも遅くなるという事を知らずに、便利だから、周囲のみんながそうやっているから・・・という理由で遅いホームページは使っているうちにストレスになって来ることも知らずに、安価に構築することが目的になっている人がなんと多いことでしょう。 結果、立ち上げたばかりのビジネスですが、本来の目的であるホームページからの集客はほぼ見込めず、SEOも日に1人2人ぐらいしか来ないWEBサイトを、ランニングコストを払いながら使い続けていく事になります。 また、ビジネスにおいて、会社の紹介を行なうパンフレットのような役割を行なうホームページは、取引先から隅々まで細かくチェックされる事も多いと思いますが、この時点で遅いサイトや見にくい、使いづらいホームページは、まず心理的にマイナスイメージが植え付けられます。

読み込みが遅いページは離脱率が高い

当たり前すぎる話ですが、最近ではホームページを閲覧するのはスマートフォン端末がPC閲覧よりも多くなっているケースも珍しくありません。 https://news.mynavi.jp/article/20180122-573640/ 上記サイトに、ホームページを読み込み時間に関しての離脱率がかかれています。  

読み込みにかかる時間に対する離脱率の割合 2秒 : ９％ 5秒 : 38%

https://digitalidentity.co.jp/blog/seo/algorithm/speedupdate.html こちらのサイトには、3秒で53%もの離脱が発生したデータも存在するとの事です。 これらのサイトでは、3秒がボーダーラインという結果を伝えていますが、ページ読み込みを3秒以内に行なわなければいけないようです。 https://seolaboratory.jp/27843/ 自分のホームページの読み込み時間を確認したい場合は、上記のURLにリンクがあるサイト速度計測などのツールを使ってみるか、ブラウザのデバッグコンソールによる読み込み時間の値を参考にするといいでしょう。 wordpressで作られたページは、恐らく3秒を下回ることはないでしょう・・・orz ※中にはスピードを考慮して作られたページであれば、2秒ぐらいになっているページはあるようです。

レスポンシブデザインができていないサイトも離脱増

電車の中などでスマートフォンを使ってホームページを見ている時に、スマホ対応（レスポンシブデザイン）ができていないサイトを開いてしまうと、思わず舌打ちしてしまうことって、ありませんか？ wordpressを使えば自動的にレスポンシブデザインが構築できると考えているWEBサイト構築者であれば、何の迷いもなくwordpress信者になっているかと思いますが、確かに便利なWEBサイトフレームワークでも、集客などのビジネスに向かないという現状をきちんと理解しておかないと、結果的に誰も特をしないホームページが出来上がってしまいます。 GoogleのSEOにおいても、2018年あたりから、ホームページの読み込み時間もSEOランキングに影響するという事も密かに噂されていることを考えると、ホームページの読み込みスピードは、非常に重要な要素である事が分かります。

ホームページの読み込みを早くする手っ取り早い方法

それでは、実際に自分のホームページが遅い人は、何をどうすればいいのでしょうか？

1.ページ内で使っている画像の容量を徹底的に減らす

jpegやpngなどでクオリティ高いページを作っている場合には、jpegの圧縮率を高くして、ページ内の画像容量を落とすことで転送スピードを早くすることができます。 Googleのページスピード計測ツールなどでの提案事項も、ほとんどが画像の容量の提案が多いでしょう。

2.javascript,cssのテキスト読み込みの圧縮

単純に改行をなくすだけでも効果がでるし、javascriptにおいては圧縮ツールなどを使うと変数や関数名などを短縮化して、物理的にバイト数を減らしてくれます。 https://syncer.jp/js-minifier メジャーどころとして、「JS Minifier」というのがあり、簡単に使えるので、手軽にできる作業です。

3.読み込みファイル数を減らす

画像、javascript,cssは、どのページでも必ず何かしら読み込んでいるかと思いますが、テキストファイルであれば、そのままhtmlファイルに記述すると、WEB通信におけるヘッダ情報などが減少できます。 WEB通信では、リクエストヘッダ、レスポンスヘッダなどの情報が意外とたくさん流れています。 読み込みファイル数が多い場合などは、こうした無駄なデータが発生してしまっているケースがほとんどです。 cssの@importなども簡単に修復できるポイントです。 画像は、小さなものであれば、base64データとしてimgタグに直書きすることも可能なので、やって見る価値はあります。

4.bodyのみajaxで入れ替える

この方法は、ホームページ内の全てのページで同じ構成になっていて、javascriptやcssなどのモジュールが同じであるという条件であれば、javascriptでajax機能を使って、htmlファイルをテキストデータとして読み込み、body部分だけを抽出して、現在開いているページのbody内データと入れ替えることで、少し高速化することができます。 ただし、サイト構成など、構築前に設計しておくレベルでないと、トラブルになる事も起こりえるので、wordpressを使っているサイトではあまりオススメできない内容です。

5.外部サイトの読み込みを極力減らす

ホームページが重い原因が、アフェリエイトで導入している広告バナーのせいであることもたまに起きています。 またGoogleAnalyticsや、便利なAPIモジュールなど、ホームページを開いた時に、別ドメインのモジュール読み込みを行っているような場合に、スピードを遅くするサービスも確かに存在します。 そのサービスを使わなくなっただけで、ページ読み込み時間が改善するという安易な対応もあるし、簡単に自分のサイトで構築できるものもあるので、エンジニアと相談してみましょう。

ページスピード研究の今後

今回はwordpressをこき下ろしましたが、僕のこのブログサイトも、wordpressで、実際に3.5秒ぐらいの読み込み秒数になっていますが、調子が悪いときなどは6秒ぐらいかかる事もあります。 一方、プログラムから考慮して構築した僕の会社のホームページは、0.3秒ぐらいで読み込めるようになっています。 ※2019年04月時点 http://myntinc.com/ スピードアップはビジネスにおいても、WEB閲覧ユーザーに対する「おもてなし」と考えるべきかもしれませんね。 このコーナーは今後、ページ読み込みを早くするためにどういうプログラムをするといいのかというのを紹介していきたいと思います。 次回も、お楽しみに。