Above the foldとは│コンテンツの表示速度を改善する方法
モバイル向けのサイトを運営しているものの、うまく検索エンジンの上位に表示できず、サイトの改善が必要だと感じている人は多いのではないでしょうか。
一般的なSEO対策はひと通り行っているものの、成果が上がらないときには、「Above the fold」の見直しが必要な場合があります。しかし、Above the foldとは何かを知らない人は少なくありません。
そこで今回は、Above the foldの概要や重要性を解説したうえで、Above the foldのコンテンツ表示スピードを改善する方法を紹介します。
1.Above the fold（アバブ・ザ・フォールド）とは？
Above the foldは、新聞の一面トップや、一面トップを飾るほどの重大なニュースを意味する英語です。Webマーケティング業界では、Webサイトを訪れたユーザーのデバイスに最初に表示される、スクロールをせずに閲覧できる画面領域を指す言葉として用いられ、「ファーストビュー」と言い換えられることもあります。
なお、スクロールしなければ閲覧できない画面領域は、「Below the fold（ビロウ・ザ・フォールド）」と呼ばれます。
2.Above the foldの重要性
SEO施策を実施するうえで、Above the foldは重要な要素です。また、Above the foldがユーザビリティに及ぼす影響も、無視することはできません。以下より、SEOとユーザビリティといった2つの観点からAbove the foldの重要性について解説します。
●SEO観点
大手検索エンジンのGoogleは、Above the foldに表示される内容を検索順位に反映する「ページレイアウトアルゴリズム」を採用しています。
Above the foldを占める広告の割合が高いと、ユーザーエクスペリエンスが低いWebページと判断されて評価を下げられてしまうため、注意が必要です。反対に、Above the foldに信頼性が高い有益な情報を多く含めば、高いSEO効果を期待できるでしょう。
●ユーザビリティ観点
多くのサイト訪問者は、Webページを表示して数秒のうちにWebページを閲覧し続けるか否かを決めると言われています。
ユーザーの心をつかむためには、Above the foldでユーザーにとって役立つWebページであることをアピールすることが重要です。具体的な施策としては、各小見出しへのリンクを表示してページ内容が一目でわかるようにすることなどが挙げられます。
3.Above the foldのコンテンツの表示スピードを改善する方法
Googleは、多くのユーザーが読み込みに時間がかかるWebページを疎んじていることから、モバイル向けサイトの高速化を推奨しています。Above the foldは、1秒未満で表示できるようにすることが望ましいです。
Above the foldに掲載するコンテンツの表示スピードを改善する方法としては、以下の3つが挙げられます。
| （1） | Above the foldのエリアとBelow the foldエリアの2つに分ける |
|---|---|
| コーディングをする際には、Above the foldエリアとBelow the foldエリアを完全に分けておきましょう。エリアを分けることで、Above the foldをより速く表示できます。 | |
| （2） | CSSを圧縮する |
| HTTPリクエストによって生じる遅延を減らすため、Above the foldの外部CSSファイルは1つだけにしてください。また、Webページ固有のCSSは、インラインで記述することがポイントです。 | |
| （3） | JavaScriptの読み込みを遅らせる |
| Above the foldを読み込むうえで重要な役割を持つもの以外のJavaScriptは、Above the foldの読み込みが終わるまで遅らせましょう。 | |
SEO効果を高めるためにも、上記の方法をぜひ実践してみてください。
まとめ
真っ先にユーザーの目に飛び込むAbove the foldは、SEO対策をするうえでも、ユーザビリティを高めるうえでも、決して無視できないものです。Above the foldを改善すれば、Webページの検索順位が上がったり、ユーザーの離脱率が下がったりすることが期待できます。
モバイル向けサイトのSEO効果を高めたい人は、ぜひ、今回紹介したAbove the foldのコンテンツの表示スピードを改善する方法を実践してください。
KEYWORD
