ウェブサイトの表示が遅い理由（作り直さずに直せること）

ロシオはハラパで園芸店を営んでいる。2か月前にお金を払ってウェブサイトを作ってもらい、仕上がりは上々だった。入口の大きな写真、季節の植物、営業時間、電話番号、地図。気に入りすぎて、店先の看板にそのリンクを入れてもらったほどだ。

でも、彼女が見ていないのは、画面の向こう側で起きていることだ。誰かが街角に立ち、モバイルデータ、電波2本の状態で「ハラパ園芸店」と携帯で検索する。リンクをタップする。背景が出て、ロゴが出て、写真が入るはずの場所には灰色の四角が残ったままだ。6秒後、その人はGoogleに戻り、次の候補をクリックする。

その人は「この園芸店は自分には合わない」と判断したわけではない。何を売っているのかさえ、わからなかったのだ。それでも統計上は、最後まで読んでくれた客と同じ「訪問1件」としてカウントされる。表示が遅いウェブサイトとは、開いてから内容が表示されるまでに数秒かかるサイトのことだ。そしてそれが起きるとき、失っているのは「客」ではない。あなたという選択肢があることすら知らなかった人たちを失っているのだ。

自分の携帯では速く見えるのに、他の人には遅い理由は?

それは自分の携帯が噓をついているからだ。毎日同じ端末から、お店のWi-Fiにつながった状態で開いていて、すでにキャッシュされている。だから自分にはいつも一瞬で開く。でも初めて訪れる客がモバイルデータで開けば、8秒かかっていてもおかしくない。

本当のテストには、ちょっとしたお願いが一つあればいい。あなたのページを一度も開いたことがない人に——レジ前の客、近所の人、甥っ子でもいい——携帯を借りて、Wi-Fiではなくその人のデータで開いてもらう。あなたは何も説明せず、画面を見ているだけでいい。電話番号が表示される前に、その人の顔を見ればわかる。

このリストの中で、これだけは自分一人では確かめられない診断法だ。

ウェブサイトの表示を遅くしているのは何か?

ほとんどの場合、写真が原因だ。携帯で撮った写真は普通4〜5メガバイトもある。それがページ上では3センチ角の小さな枠に収まっているだけ。切手サイズで表示するために、看板1枚分のデータを丸ごと送っているようなものだ。客は何も見えないうちに、その看板分の通信料を払わされている。

ロシオのページには40枚の写真がある。入口、シダ、多肉植物、素焼きの植木鉢、土曜に店番をするおばさん。そのうち10枚だけでもう50メガバイトになり、街角に立ったまま誰かがそれをダウンロードする羽目になる。しかもギャラリーは、客が実際に下までスクロールして見なくても、全部を一度に読み込もうとする。月末でデータ残量が心配な時期なら、なおさら誰も望んでいないことだ。

これが最も重いパーツであり、同時にいちばん直しやすい部分でもある。写真を1枚も消す必要はない。もっと小さいサイズで、もう一度アップロードし直すだけでいい。

2つ目:テンプレートに最初から入っていた仕掛け

2番目に重いのは、テンプレートに標準で入っている仕掛けだ。自動で写真が切り替わるカルーセル、背景として流れる入口の動画、スクロールすると文字がふわっと浮き出てくるアニメーション。

カルーセルのおかげでシダを買った人など誰もいない。これらはすべて、ページ全体を表示する前に携帯がダウンロードして組み立てなければならないパーツであり、どれも客が知りたかった質問には答えてくれない——日曜は営業しているのか、ゴムの木はいくらなのか、ということだ。

3つ目:後付けの追加機能

3つ目は、後から付け加えられた機能だ。5秒後にポップアップするチャット、誰もスクロールしていなくても勝手に読み込まれる埋め込み地図、レビューの枠、クッキーのバナー、5つのSNSへのボタン。

そのどれもが、ページの表示が終わる前に、場合によっては他国のサーバーまで、それぞれ別口でデータを要求する。1つだけなら気づかない。6つ重なれば、確実に感じる。

ウェブサイトのテンプレートはなぜ表示が遅いのか?

テンプレートの表示が遅いのは、あなたのビジネス用に作られたものではないからだ。それらは、あなたが選んだカタログの中で見栄えよく見えるために作られていて、そこではカルーセルやアニメーションこそが、人にクリックさせる決め手になる。

使わない部分を取り除けと教えてくれる人はいない。そして大半のエディタでは、セクションを削除するほうが残すよりも手間がかかる——どのモジュールなのか探し出し、消したら何が壊れるのか見当をつけなければならない。だから、そのまま残る。あなたのページが遅いのは、誰かが仕事を適当にやったからではない。最初から別のビジネス用の要素を抱えたまま生まれて、それを取り除く時間を誰も持てなかったからだ。

テンプレートを選ぶのではなく、必要なものを言葉で説明する場合、根本的な違いはデザインではない。頼んだセクションだけが入って出来上がる、それだけだ。取り除くものがないのは、そもそも付いていないからだ。

テンプレートが本当に強い場面

見た目で売るもの——植物、服、食べ物、ネイル——なら、大きくきれいに配置された写真がどんな文章よりも効く。そしてテンプレートは、まさにそれを中心に組まれている。カルーセルが実際に役立つ業種もある。ビフォーアフターを8枚見せたいサロンなどはその例だ。そして、すでに今のページで成果が出ているなら、速さだけを理由に全部作り直す価値はほとんどない。

そして、間違ったことに1か月を費やさないために、いちばん大事なことを一つ。**Googleにしっかり出てくる遅いページは、誰にも見つけられない速いページに勝る。**業種名と自分の町で検索しても出てこないなら、ここから始めるべきではない。

大事なのは読み込みの速さか、表示される順番か?

全体の読み込み時間よりも、コンテンツが表示される順番のほうが大事だ。最初の1秒で店名、営業時間、電話番号が見えていれば、読み込みが終わるまでに6秒かかっても「速い」と感じてもらえる。逆に、最初に出てくるのが2メガバイトの写真で、電話番号が口コミの下、ページの最後にあるなら、3秒でも永遠のように感じられてしまう。

誰もストップウォッチであなたのページを測っているわけではない。測っているのは、探していたものがもう見つかったかどうかだ。それが先に出てくれば、残りは落ち着いて読み込みを続けていい。

作り直さずに、表示の遅さを直すには?

直すべきことは3つ、この順番で、すべて1週間でできる。

1. 写真をもっと小さいサイズで再アップロードする。 多くのエディタには画像を最適化・圧縮するオプションがある。なければ、アップロードする前に携帯側でリサイズしておく。まずはページ最初の写真から始めよう。それが他のすべての表示を止めている元凶だからだ。

2. 使っていないものを取り除く。 まずカルーセル——いちばん良い写真を1枚だけ残す。次に背景動画。それから、去年から投稿していないSNSへのボタン。

3. 人が探しに来たものを、上に持ってくる。 店名、業種、営業時間、電話番号、住所を最初の画面に置く。電話番号はタップしてそのままかけられるようにする。

どうせなら、最初からやり直したいなら

今のページが助けになるよりも重荷になっているなら、Proyectaに望む形をそのまま伝えればいい。

「ハラパの園芸店用のページ。種類別に売っている植物、価格の目安、基本的な手入れ方法、地図付きの住所、営業時間、WhatsAppボタン。モバイルデータでも速く開くように、カルーセルも動画もなしで。」

この最後の部分も、他のことと同じように言葉で伝えるだけでいい。リンク付きで公開され、もし何か余計なものが付いてきたら、減らすようにお願いすればいい。

正直に言っておくと、写真は自分でアップロードする必要があるし、サイズも正しく整える必要がある。この部分は、Proyectaでも、Wixでも、誰も代わりにやってはくれない。

このタブを閉じる前に

今日、店に最初に入ってきた人に携帯を借りてみよう。その人のデータでページを開き、3つ数える。

3秒経っても電話番号が画面に出てこないなら、どこから始めるべきかはもうわかったはずだ。そして、問題は「ページが格好悪い」ことではなかったということも。