※ 本記事は2020年10月の記事をリライトしました。
ページが開くまでの数秒間、ただ白い画面を眺めるより——アニメーションで迎えてもらえたら、それだけで印象は変わる。そう思って導入したのが、WordPressのローディングプラグイン「Loading Page」でした。
結論から正直に言うと、このプラグインはSEOに影響が出る可能性があります。当ブログでも数ヶ月使い続けた結果、表示速度の低下とともに検索順位が下落。泣く泣く無効化しました。それでも「どんな仕組みで動くのか」「どう設定するのか」を知っておく価値はあるので、注意点とあわせてお伝えします。
Loading Pageとは？ページ読み込み中をアニメーションで演出するWordPressプラグイン
Webページへアクセスしてから表示されるまでの待ち時間に、GIFアニメーションやパーセント表示を流してくれるプラグインです。訪問者が「開いてるかな？」と不安になる瞬間を、ちょっとした癒しの時間に変えてくれるのが狙い。
多数あるローディング系プラグインの中でも設定が直感的でわかりやすい Loading Page with Loading Screen を使いました。
Loading Page with Loading Screen（WordPress公式）
インストール方法
WordPress管理画面の「プラグイン」→「新規追加」から「Loading Page Plugin」を検索し、インストール→有効化するだけ。有効化と同時に設定ページ（Loading Page Setting）に自動で移動します。
Loading Page Setting の設定ポイント
有効化すると同時にYouTube動画で設定方法を視覚的に見せてくれる親切な仕様です。ほとんどデフォルトのままで問題ありませんが、チェックが必要な項目だけ整理しておきます。
Enable loading screen：ロード画面を表示するかどうか。使用するのでチェックを入れます。
Display a close screen button：画面を閉じるボタンを表示するかどうか。チェックを入れます。
Hide the loading screen in the window onload event：ウィンドウのonloadイベントでロード画面を非表示にします。できるだけ早く非表示にしたい場合はチェックを入れます。
Remove the loading screen in the window onload event：開発中の場合はチェックしない。
Display the loading screen on：表示対象のページ種別。全ページ対応したいので「All Screens」を選びます。
Display the loading screen：表示する期間の設定。常に表示したいので「always」にします。
Display loading screen in：表示対象ページの範囲。全ページに対応するので「all pages」を選びます。
残りの3項目は「全ページ対応のため空白のまま」でOKです。
アニメーションの種類を選ぶ
画面タイプは2種類から選べます。ロゴや好きな画像を表示する「Logo Screen」と、棒状のプログレスバーを表示する「Bar Screen」です。
Select the loading screen：表示タイプを選びます。ここでは「Logo Screen」を選択。
「Bar Screen」を選ぶと棒状のアニメーションになります。
Select the logo image (or any other image)：「Logo Screen」選択時のみ表示されます。ここにGIFアニメーションをアップロードします。
「読み込み率を表示」にチェックを入れると、パーセント表示も加わります。
GIFアニメーションをアップロードする
「Select the logo image (or any other image)」から、拡張子が「.gif」の画像をアップロードします。ここが一番楽しい工程。好きなキャラクターやかわいい動物のGIFを選ぶだけで、サイトの個性がぐっと出ます。
ページ読み込み後、数秒後にローディング画面を表示したいときは遅延秒数を入力してください。0のままにすれば即座に表示されます。
私がサイトに入れていたGIF 。猫のアニメーションは眺めているだけで和みます。当ブログでも実際に使っていたのはこちらのタイプ。ローディング画面が表示されるたびに「かわいい」とひとり悦に入っていました。
⚠️ 注意：このプラグインはSEOに影響が出ることがあります
さて、ここからが一番大事なところです。
当ブログでは導入から数ヶ月後、「どうもページが重くなった気がする」と感じはじめました。気のせいかと思っていたのですが、Googleサーチコンソールを確認すると検索流入がじわじわと下落していた。
原因として考えられるのは、ローディング画面がユーザーの表示体験を遅らせてしまうこと。Googleはページの表示速度（Core Web Vitals）をランキング要因のひとつとしており、意図的に表示を遅らせるような処理はSEO評価を下げる方向に働く可能性があります。
「離脱防止のために入れた」のに、むしろ検索からの入口が減ってしまっては本末転倒。当ブログではその気づきを機に、プラグインを無効化しました。
表示速度とSEOの関係については、こちらの記事も参考にしてください。
→ AFFINGER6からSWELLに乗り換えて気づいた「表示速度とSEO」の話
どんな使い方なら許容範囲？
とはいえ、ローディングアニメーション自体が悪いわけではありません。以下のような限定的な場面であれば、影響を抑えながら楽しめると思っています。
- リニューアル前後の期間限定で雰囲気を演出したい
- 検索流入よりSNS流入が中心のサイト（速度への依存度が低い）
- ポートフォリオや作品サイトなど、表現重視の場
ブログやアフィリエイトサイトのように、Googleからの検索流入を主軸にしている場合は、長期間の常時使用は避けた方が無難です。
コミカルな猫がひょこひょこ動くローディング画面、自分では気に入っていたんですよね。訪問者に「あ、ここのブログかわいい」と思ってもらえるかもと、ひそかに期待もしていました。でも数字は正直で。アクセスが落ちていくのを見て、やめる決断をしました。
演出にこだわる気持ちと、SEOの現実。どちらも大事にしながら、バランスを取っていくのがサイト運営の難しさでもあり、おもしろさでもあるなと思っています。
執筆：秘亭（himetei）｜Web制作・WordPress歴15年 プロフィール詳細
コメント