WebサイトにおけるSEO対策のはじめかた

今回は初心者の方向けのSEO対策について紹介したいと思います。この記事を読めばSEOの意味から実務で行うSEO対策の初歩まですべてカバーできます。本記事は万人向けに作成されたものです。

 

本サイトはWordPress向けのサイトですが、この記事においてはWordPressの言葉は出さないので安心して読み進めてください。また文章は長めの記事になりますが、よろしくお願いいたします。

 

本記事はこんな人にオススメです。

  • SEOって何?意味あるのか?を知りたい
  • SEO対策を始めてみたいけれど、何から手を付けていいか分からない
  • SEO対策をやれと指示されて取り組んでいるけれど、正しくできているかを知りたい

 

SEO対策とは何?目的は?

SEOってなに?どう読むの?

SEOってなに?

SEOとはSearch Engine Optimizationの略称で、読み方はアルファベットそのままで「エスイーオー」と呼びます。直訳すると「検索エンジン最適化」という意味ですが、シンプルに自分のWebサイトを検索で見つけやすくするための方法 と思ってもらえれば理解しやすいのではないでしょうか。このときに自分のサイトを上位に表示させることができれば、それだけ流入量が増えるということです。

 

SEO対策の目的は?意味あるの?

結論からいえば、検索結果を上位にさせるため です。

例えばあなたのサイトで掃除機を売るために、「掃除機どっとこむ」を立ち上げたとしましょう。「掃除機どっとこむ」では、掃除機をサイトから注文してもらうことで商品を売りたいと考えています。そのとき掃除機を買うことを検討している田中さんはiPhoneGoogle検索をかけ「掃除機 おすすめ」と検索しました。このときに検索結果の上位に表示された別サイトから購入されてしまいました。

SEOの目的について

しかしSEO対策をしっかりと行ったサイトであれば、検索結果の上位に表示されるので、結果としてサイトの流入量が増える=購入してもらえる確率が高まります。この検索結果を上位にさせるために必要なのがSEOなのです。

 

何やらテクニック論としての話に聞こえるかもしれませんが、決してそうではありません。SEO対策として推奨される項目をつぶしていけば、それが最終的にユーザーのサイトでの体験を高めることにつながっていますつまりはユーザー体験を高めることの手段の一つがSEOというわけです。

さっそく重要性がわかったところで早速現状の確認を行いましょう。

本記事ではGoogle検索のSEO対策についての記述をしています。

 

SEO対策の現状確認をする

何の「数値」をどの「ページ」で対策するか

SEO対策を行う前に、何の数値を上げたいかを改めて確認する必要があります。サイトのアクセス数、再訪問率、購入数など何を対象にして数値を伸ばしたいかによって手を入れるべきSEO対策は異なります。もちろんWebページ全てにあらゆる施策を打てればいいのですが、ビジネスにおいては時間に限りがあるため実際に手をつけられる項目は少なくなります。

したがって何よりも自身の商品の伸ばしたい数値を決めましょう。何の数値を上げたいかを確認すれば、おのずと対策を実施しなければいけないページが見つかることでしょう。

 

もしも「掃除機どっとこむ」であれば、掃除機の購入数の要となる商品紹介ページからのCVR(商品ページから購入に至るまでの率)を高めたいと思うことでしょう。みなさんのサイトの重点となるページから対策をはじめてみることをおすすめします。

そして対象となるページが決まれば、SEO対策がどの程度、現状で実施されているかを確認していきましょう。本記事では最初の第一歩を紹介しています。

 

検索順位を確認する

一番最初に実施するべきは検索順位を確認することでしょう。検索順位はそのままの意味で、検索における表示の順番になります。当然順番が早いほうが上位に表示される可能性が高くなるため大切になります。検索順位が高ければそれを維持できるように、低ければ一つでも高い順位に持っていくことが、SEOの目的である「検索結果を上位にさせるため」に直結します。

 

検索順位を確認するツールは多くありますが、Google AnalyticsGoogle Search Console が最も基本的なツールです。導入していない場合は、まずはサイトに導入するようにしましょう。個別の使い方は山程記事がネット上にあふれているため、そちらの解説に譲ります。Google AnalyticsGoogle Search Console もいずれも検索結果の順位にとどまらず、ユーザの属性などの情報も取得できるため、ひとまず導入することをおすすめします。

 

Google Search Console ではどのような検索結果でこのサイトが表示されたかを教えてくれる

 

有料でもいいからという方は、筆者は 検索順位チェックツールGRC というツールを利用して確認しています。GRC では登録したページとキーワードを登録しておいてチェックボタンをクリックするだけでキーワードの検索順位を確認することができます。

筆者はスタンダードプランで購入しており、UIが若干古臭さが残りますが、ツール自体は超オススメです。URLと検索語を登録しておけば日ごとにどの程度順位が変動したかなどをグラフで確認することができるツールです。ひとまず機能制限がありますが無料でお試しできること、また有料ライセンスも 495円/月から始めることができるお得ツールなのでぜひ購入を検討してみてください。

 

機械的な評価を確認する

先程の検索順位は積み上げた結果としての順位ですが、現時点で今のページは機械的にどの程度の評価がされるのか?を確認をします。機械的にという意味ですが、Webにはクローラによって機械的に確認されるサイトの項目があります。

 

クローラとは、あらゆるWebページを訪問しその評価をおこなうプログラムのことで、Googleのクローラは全世界に公開されるWebサイトを今この瞬間にも駆け巡っているのです。今回は初心者向けということなので、シンプルにGoogleの推奨するLighthouseを利用することにしましょう。Lighthouseは無料で利用することができるツールです。

 

Lighthouseでは以下のようにサイトの表示速度やSEOスコアを数値で評価させることができます。SEO対策の文脈では「h1,h2タグの順番が守られていること」「画像サイズが大きすぎないこと」などサイトの内容の細かな点までチェックされますが、Lighthouseはそれらを網羅的に指摘してくれるツールと思ってもらえればよいです。当然足りていない点数がなぜ足りていないのか理由も掲載されていrます。

 

ここでは長くなるため使用方法そのものは割愛します。Lighthouseの使い方は以下の記事を参照してください。

ad-sho-loko.hatenablog.com

 

 

SEO対策をする

次に算出されたSEOの評価について対策を実施してみましょう。本記事ではSEO対策において最も重要な三点のポイントにしぼって紹介します。よくあるテクニック論ではなく本記事では概念的な話をします。

  1. コンテンツを充実させる
  2. 被リンクの数を増やす
  3. Core Web Vitals にしたがう

コンテンツを充実させる

Googleアドセンスのトップページには、サイトのコンテンツが第一 という言葉が掲載されています。この言葉が示すとおり、SEO順位を高めるための方法を一つだけあげるとすれば質の高いコンテンツを提供することに尽きるでしょう。なぜならばそれがユーザの体験の向上に寄与するからです。

 

じゃあ質の高いコンテンツって何?という話になるのですが、実は一概にはこうであるといえないのです。なぜならサイトの評価は相対的なものであるからです。希少性の高いコンテンツを提供していればサイトの見た目などは気にならないかもしれませんし、他に競合が多いページであれば商品数が多いサイトのほうが優位になるかもしれません。なのでこの章で紹介する内容はあくまでも一般論として受け止めてください。ただ難しく捉えなくとも差別化となる要素を伸ばしていくことが直接コンテンツの充実につながります。

 

では一例をあげましょう。例えば本サイトのようなブログであれば文字数が重要となります。文字数が直接重要なのではなく、質を大切にした結果、文字数が評価対象に陥ってしまうというのが正確な表現でしょうか。

 

ラッコキーワードというSEOのために活用するツールがあるのですが、「掃除機 おすすめ」と検索した結果、検索上位に登場する平均文字数が12,231文字とのことでした。つまりある程度の質を担保するためには文字数が重要になってくるということです。

 

あくまでもこれはブログやメディアなどの場合によります。通販サイトであればやはり商品数が一番大事でしょうし、サービスの紹介ページであれば結局はサービスそのものの質を高めることが大切になるでしょう。コンテンツの質を充実させるとは結局商品を差別化することとほぼ同じでしょう。

 

被リンクの数を増やす

被リンクとはWebサイトへのリンクのことです。自サイトへのリンク数が増えれば増えるほどSEOの順位はおのずと向上していきます。「掃除機どっとこむはオススメだよ」と評判になればなるほど順位が上がることはなんとなく感覚的にも一致するのではないでしょうか。

 

ただ結局はコンテンツの質を高めたときの結果として被リンクが増えるということなので、無料の枠組みにおいては地道に積み上げていくほかにありません。個人サイトのレベルで対応できることとしては、SNS運用を行うというが最も簡単な方法ではないかと思います。TwitterInstagramのアカウントを同時に運用し、サイトが更新されたときにツイートするなどを行えば、フォローするメンバーに通知させることができます。そこから被リンクが広がる可能性があります。

 

一方でお金をかける方法としては、広告を出すという手段が最もシンプルで効果的でしょう。Googleの広告を出す、インフルエンサーに紹介してもらうなど、どちらかというとマーケティングの領域になります。本当を力をかけたい場合は広告代理店などを利用したほうがよいでしょう。

Core Web Vitalsにしたがう

Core Web Vitals とは Google の提唱する機械的に評価させるためには何を対応すればいいのか?を確立させたものです。

Web 上での優れたユーザーエクスペリエンスの提供に不可欠な品質シグナルに関する統一されたガイダンスを提供するためのイニシアチブです。

https://web.dev/learn-core-web-vitals/

難しいことが記載されているように感じますが、より品質の高いWebページを作り出すための指標になります。極端な話をすれば、先ほど計測したLighthouseにおいて100点を獲得するには、何をすればいいのかを示したものが Core Web Vitals になります。Webサイトの質をLCP, FIDなどの数値として表示させることで、定性的ではなく定量的にSEO対策ができる点が最大のメリットです。例をあげましょう。

  • モバイル対応
  • HTTPS化対応
  • 表示速度の改善

などがCore Web Vitals の範疇です。

Core Web Vitals はエンジニアリング(技術)の側面が強くなります。したがってサイトを構築するエンジニアや業者に対してCore Web Vitals を守れているかどうかの確認をするとよいでしょう。ただ仮にすべての項目に対応できているとすれば、それはレベルが高いサイトであることの証左でもあります。対応できていない箇所をつぶしていくだけでもSEO対策として成果を上げることができるでしょう。\

 

筆者のサイトはこの項目については、たくさんの記事を書いています。もしこの記事を読み終わってSEOを対策することになったら、ぜひ一度は巡回してみると新しい発見が得られると思います。

 

SEO対策を継続的に実施する

はじめの第一歩として現状のサイトのSEOの評価を確認することができたら、継続してSEOを確認する環境・文化を作り上げましょう。なぜならば、SEO対策はその場限りでは成果がでません。継続して確認・対策をすることで少しずつ芽が出てくるものです。この環境を作り上げることが組織において難しいとされるものです。

 

継続して確認するためには、当たり前ですが朝や夕方の時間を使って毎日確認するのが一番でしょう。確認する数値とページを事前に決めていれば5分もあれば確認できるようになります。反省する方法はいたって簡単で先程紹介したツールを定期的に利用するだけです。

 

しかし毎日のように紹介した方法でチェックする時間がないという場合も多いでしょう。そういったときには有料のツールを検討してください。有料のツールでは毎日SEOのレポートを出力してくれる機能であったり、Excelなどの表計算ソフト向けにエクスポートしてくれたり、便利な機能が山ほど搭載されています。

 

先ほど紹介した 検索順位チェックツールGRC を利用するのもよいでしょう。

 

まとめ

これにてSEO対策については以上になります。これさえできればSEO対策の初歩を踏み出したといってもよいでしょう。SEOを向上させることになれば、あなたのサイトのユーザ体験(UX)の改善に必ず繋がります。

誰でも簡単にできる!WordPressでWebサイトを立ち上げる手順【初心者におすすめ】【ConoHa WING編】

今回は ConoHa WING にて WordPressを立ち上げてみます。いくつもサーバーを立ち上げてきた筆者ですが、実際に立ち上げてみて他と比較しても圧倒的に簡単でした。初めてWordPressサーバを立ち上げる人にはもってこいのサービスです。ぜひお試しあれ。

前提

まずアカウント登録を求められます。これは事前に登録しておいてください。もし持っている方は右のログイン画面からログインすれば問題ありません。

立ち上げ手順

アカウントを登録すると早速サーバーのスペックを選択する画面に遷移します。まず料金タイプは好きなドメイン名をつけたければ WINGパック、そうでなければ 通常料金を選択してください。まったく初めての方は WING パックがおすすめです。WordPressが簡単にセットアップできます。ここからの説明はWINGパック前提なのでご注意ください。

契約期間はそのままサーバを契約する期間、プランは高額になればなるほどスペックが高くなります。お好きなものを選んでもらえればよいですが、初心者の方は ベーシック から始めましょう。初期ドメインは好きな名前をつけてあげてください。WINGパックを選択していれば無料でもらえるので、.conohawing.com ではないドメインがもらえます。ここは自分のサイトにぴったりのドメイン名をつけてあげてください。例えば本サイトは kaizen-seo.net です。サーバー名は管理用の名前なので自分が分かりやすいように名前をつけてあげます。

今回はWordPressかんたんセットアップを利用します。WordPressを即使えるようにしたいのであれば、 利用する を選びましょう。WINGプランを選択すればここで好きなドメイン名をつけることができます作成サイト名はそのままブログ名になりますが、後ほど変更もできます。WordPressユーザ名とパスワードWordPressの管理画面(記事の投稿など)にログインするためのユーザ情報です。WordPressテーマは、WordPressを着せ替えできるような機能で、見た目や機能を変更することができます。今回は無料なので Cocoon を選んでみました。

次にサーバの契約者情報を入力します。ここは問題ないでしょう。

次にSMS認証の画面が表示されます。自分の電話番号を確認して、SMS認証を選びましょう。

ご自身の携帯電話にメッセージが送信されるので、その認証コードを入力します。ほかのWebサイトと何ら違いはありません。

そしてお支払方法を選択します。クレジットカードならすぐに利用することができるためおすすめです。

そうするとサーバ管理画面にてインストールしましたのダイアログが表示されます。これにて立ち上げ自体は完了です!あっという間でした。

作業が完了してから数分は起動に時間がかかります。自分の場合はサイトが表示できるまで15分ほどかかりました

自身のサイトのURLにアクセスして以下のように鳥のテーマが表示されれば無事にサイト作成が完了しています!

WebサイトをHTTPS化する

さて立ち上げ自体は終了しましたが、このままでは HTTPS による通信を提供できません。なのでこの勢いでHTTPS の設定をしていきましょう。あくまでも任意ですが、HTTPS化SEO対策としても最重要項目です。HTTPS化されていない場合ブラウザのURL欄には保護されていない通信セキュリティ保護なし と表示されます。HTTPS化されたWebサイトには鍵マークがつくので、構築したサイトにも鍵をつけることを目標にしましょう。

Chrome

Edge

まずサイト管理画面より サイトセキュリティ をクリックします。そして 無料独自 SSL の利用設定を ON にします。SSLとはセキュリティのプロトコルのことで、HTTPS化するために設定が必要になる項目です。深入りすると難しくなってしまうので本記事では軽く紹介する程度にとどめておきます。

そして サイト設定 を表示し、かんたんSSLをクリックします。これで完了です。

最後にもう一度サイトにアクセスしてみましょう。URLの欄に鍵マークがついていれば無事にHTTPS化できています。おめでとうございます!

まとめ

ConoHa WING による WordPressの構築の記事でした。非常に簡単でポチポチするだけでサイトが構築できる素晴らしいサービスでした。すこし運用してみてまた細かな点は記事に起こしていこうと思います。よろしくお願いします。

それでは次の記事でお会いしましょう👋

サイトマップの意味と作成方法をわかりやすく解説 | サイトマップはSEOにおいて必要?

サイトマップという言葉を聞いたことがありますか?SEO対策の一環としてサイトマップというファイルを配置するとクローラに最適な巡回をしてもらうことであなたのサイトのインデックス登録がより効率化されるかもしれません。そしてサイトマップを更新することでクローラに更新通知を送ることができるため、人間だけでなくクローラにとってもありがたい存在なわけです。今回はクローラにとってWebサイトの地図の役割を持つサイトマップについてゼロから理解できるように紹介します。

サイトマップとは何か?

サイトマップとはクローラがWebサイトをたどるときに参考にするWebサイトの地図のことです。クローラはサイトマップを確認しながら、Webサイトのクロール(検査)を進めていきます。サイトマップXMLもしくはHTML形式のファイルになっている場合が多いです。本サイトはXML形式のサイトマップを利用しています。

サイトマップによって、クローラがサイトの構造を把握でき、サイト解析がサイト作成者の意図通りに行われるというメリットがあります。サイト作成者にとっても適切なクロールがされるようになり、クローラにとってもサイトマップのおかげで言われたとおりにクロールすればよいということになります。

サイトマップは必要?

結論としてはすべてのサイトで作成しておくことをおすすめします。まず基本的にGoogle のクローラは、自動的にリンクをたどってサイトを検査してくれます。なので、サイズの小さいサイト完全にリンクでたどれるサイトでは不要とされています。ただほとんどの場合においては作っておくべきとされています。理由はただGoogleサイトマップがあったほうが良いと言っているので「なるほど、そうなんだ」と受け入れるしかありません。WordPressにおいてはプラグインを入れておけばいいので、あまり深く考えずに作成してもよいだろうと筆者は考えています。

補足: HTMLサイトマップについて

先ほどからXMLによるサイトマップを中心として会話を進めていますが、HTMLで作成するサイトマップというものも存在します。HTMLはより人間にとって可読性が高いため、サイトマップを読者に閲覧してほしい場合はHTMLサイトマップも用意するといいとされています。ただし、これはクローラにとっては必須ではないため、あなたのサイトがサイトマップを必要とすれば用意をすればいいです。

WordPressでのサイトマップの作り方

おすすめはプラグインを入れて対応しましょう。本サイトでは Google Sitemaps XML を利用しています。本プラグインXML形式でのサイトマップ限定です。もし必要があれば、必要に応じて他プラグインを検討してみてください。ちなみにもちろん自作サイトマップでもかまいませんが、更新が面倒などの不都合が多いためできる限りプラグインに頼るべきです。

WordPressのテーマによってはデフォルトで用意されている状態かもしれません。テーマの公式ドキュメントを参考にしてみてください。

有効化すると自動でサイトマップが作成されます。自分のWebサイトのURLに /sitemap.xml とパスを追加して表示してみてください。以下のように XML Sitemap Index が作成されていればそれで完了です。一瞬でしたね。

ひとつ設定しておいたほうが良い箇所があるとすれば、 Sitemap コンテンツ という見出しのチェックボックスです。これはどのページをサイトマップに含むかを決めることができます。本サイトであればカテゴリやタグでのページは検索結果に表示させなくてもいいため、 カテゴリーページを含めるタグページを含める のチェックを外しています。質の高いサイトマップを作成するためにも自身のサイトで何をサイトマップとしてインデックス登録させるかを考えましょう。

また設定画面から your sitemap というリンクをクリックすることで手動でサイトマップを送信することもできます。デフォルトの設定であれば更新時に通知を飛ばしてくれますが、万が一自分で飛ばしたい場合はこちらのリンクからどうぞ。

各検索コンソールでの確認

サイトマップの作成が完了したら、Google Search Console で読み込まれているかを確認しましょう。左タブの サイトマップ より確認できます。もし読み込まれていない場合は、サイトマップのURLを指定して送信すれば、クローラが確認してくれます。

Bing Webmaster Toolsにおいても同様にサイトマップという項目があります。こちらを確認すればサイトマップが問題なく送信されているかどうかを確認できます。

さいごに

今回はサイトマップの紹介でした。基本的にサイトマップを用意しておくと、SEO観点からは効果的とされています。今一度見直してみてはいかがでしょうか。

検索エンジン(クローラ)制御の初歩 | index, noindex, follow, nofollow

今回は クローラ制御に関する記事です。クローラの制御はSEOにとっても基本中の基本といえるテクニックになります。本記事では最もシンプルな4種類の属性(index, noindex, follow, nofollow)について紹介します。

index / noindex

概要

クローラにページをインデックスさせる(させない)ための属性です。インデックスさせたいほうにindex 、させたくないほうにnoindex を付与します。デフォルトは 多くの場合は、index です。ページを検索結果に表示させたいわけですから、index をつけるほうが基本になります。ただし、ページによってはクローラにインデックスをさせないほうが良い場合があります。例えば本サイトではプライバシーポリシーや連絡先は noindex を指定しています。これらは検索結果に表示されても仕方ないですよね。

noindex を指定するべきはシンプルに検索結果に表示させなくてもよいページという認識でよいと思います。具体的には、

  • 検索結果に表示させる必要がないページ(連絡先、プライバシーポリシーなど)
  • 検索結果に表示させたくないページ(認証が必要なページ、非公開ページなど)

が該当します。

noindex を付与したページは、クロールされないため、Google Search Console で除外されたかを確認することができます。

指定方法

ページ単位でメタタグを head の間に挿入することで指定することができます。メタタグとは何?という方はこちらの記事を参考にしてください。インデックスをさせたい場合は以下のように記載します。

<meta name="robots" content="index">

逆にさせたくない場合はこちら。

<meta name="robots" content="noindex">

このタグをクローラが読み取ってそのページをインデックスするかどうかを判断します。

もしくは以下のようにHTTPレスポンスヘッダに付与することでも可能です。こちらはレスポンスヘッダのため、より細やかな制御が可能になっています。

X-Robots-Tag: noindex

follow / nofollow

概要

クローラにページの a タグのリンクを検査させる(させない)ための属性です。検査させたいほうに follow、させたくないほうに nofollow を付与します。クローラは賢いのでページ内リンクをたどっていくことでクロールを進めていきます。このときに「リンク先にはクロールしないように!」と命令するための属性になります。

indexと比較するとどのように付与するべきか迷うところですが、クロールされると不都合なページには nofllow を付与します。

  • ユーザが投稿する可能性のあるページ(コメントなど)
    • ユーザが投降した内容にリンクがある場合に不都合が生じる
  • 有料サイトへのリンク
    • 有料サイトにページの評価を渡すことをクローラが禁じているため
  • 信頼できないサイトへのリンク

指定方法

こちらもメタタグを利用する方法があります。以下のコードを head タグの間に挿入しましょう。

<meta name="robots" content="nofollow">

しかし、follow/nofollowは、aタグのリンクに関する制御のため、ページ単位で制御することが難しいことが多いです。そのときは a タグに rel="nofollow" とつけることでそのタグを検査させないという命令をさせることができます。

<a href="example.com" rel="nofollow"></a>

このように指定すれば、クローラは example.com へのリンクをたどらなくなります。

WordPressでのクロール制御

WordPressにおいての基本的なクロール制御方法ですが、意外とデフォルトでは難しい状態になっています。サイトすべてをインデックスさせないようにするためには設定 > 表示設定より、検索エンジンがサイトをインデックスしないようにする にチェックを入れてください。非公開ページであればチェックしなければクロールされてインデックス登録から検索結果に表示されてしまうため注意です。

現実的には記事ごとに設定をしたい場合がほとんどだと思われます。その場合は All in One SEOというプラグインを導入しておきましょう。このプラグインはクローラ制御のようなSEO関連のツールをオールインワンにまとめたプラグインです。

インストールすれば、記事編集画面に以下のように紹介したクローラ制御ができるようになります。この設定はメタタグ単位、つまりページ単位での設定なので注意してください。

なお筆者は AFFINGER6 というWordPressテーマを利用しているため、記事ごとに index の変更という項目が用意されています。記事作成画面の右ペインにあるので確認してみてください。WordPressのテーマによっては類似の機能が搭載されているかもしれません。

「そこまで大げさなプラグインは必要ない」という方は、mypace Custom Meta Robots というプラグインが最もシンプルで使いやすいです。日本人の方が作成してくださっているため、日本語で利用ができる点もメリットです。

プラグインは最終更新が2年前のため、大変オススメだったのですが推奨できなくなりました。

こちらもインストールすると同じように記事の編集画面に指定ができるようになります。

https://ja.wordpress.org/plugins/mypace-custom-meta-robots/

さいごに

本記事では基本的なクローラの制御方法について紹介しました。覚えておけば汎用性の高い知識なので習得しておきましょう。またクローラ制御の命令はこの4種類以外にも存在します。普段使いはしないかもしれませんが、興味のある方は検索をしてみるとよいでしょう。

サードパーティ製の JavaScript の読み込みを非同期化する

みなさんこんにちは。今回はサードパーティーJavaScriptを高速化する方法について紹介します。

はじめに

例えば Google AdsenseGoogle Analytics など第三者サードパーティー)のスクリプトを head タグに埋め込んだりした経験はあるでしょうか。まさにその自分ではない第三者が開発したスクリプトのことをサードパーティースクリプトといいます。サードパーティースクリプトは未知なるスクリプトであり、場合によってはパフォーマンスに大きな影響をもたらします。

文字で説明するのには少し難しいかもしれません。実例で見ていきましょう。以下は筆者のサイトで読み込まれるリクエストになっています。 CSSJavaScript が読み込まれていることが分かります。ここでサードパーティーとして、Google AdSenseadsbygoogle.js )や Value Commerce ( mylinkbox.js ) の JavaScript が読み込まれています。

一方で、以下は筆者のLighthouseで計測したクリティカルなリクエストの一覧(初回画面描画に必要なリソース)ですが、先ほどのスクリーンショットに記載されていたスクリプトは表示されていません。なぜでしょうか?実はページ表示とは別に非同期(別の時間軸)で読み込ませているからです。非同期で読み込むことによって初回の画面描画をふさぐことがないため、通信量は変わりませんが、ユーザへの画面の反応を早くさせることができます。これがサードパーティースクリプトの非同期読み込みという技術になります。

非同期読みこみをさせる方法

非同期読み込みを指定する方法は簡単です。まずみなさんは JavaScript を埋め込むときに以下のようなコードを記載していることと思います。

<script type="text/javascript" src="third_party_script.js"></script>

このスクリプトタグに 非同期 を示す async を追加すればよいです。具体的にはこのように書きます。

<script async type="text/javascript" src="third_party_script.js"></script>

この方法は特にサードパーティースクリプトには有効な手段になります。アクセス解析や広告などは自分たちのコードとは独立して実行することが可能だからです。独立という言葉が難しいかもしれませんが、互いに影響を及ぼさないということです。逆に影響を及ぼすコードとは、A → B の順で読み込まねばならないコードが該当し、AのあとにBのスクリプトを読み込まねばならないため、これは非同期にさせることはできません。

なぜこれだけで表示が高速化されるのか不思議かもしれませんね。逆に async がない場合は何が起きるのかをイメージするとわかりやすいです。async がない場合は、そのスクリプトをダウンロード・実行するまで画面の描画が停止されます。つまり、Google Analyticsスクリプトであれば、Google のサーバにアクセスして、ダウンロード、実行までを待たねばならないため、場合によっては画面表示までの時間を大幅にブロックすることになります。

類似するdefer という属性もあります。しかしサードパーティーにおいては独立したコードであることがほとんどであるため、この記事では紹介しません。詳細を知りたい方は 検索をかけてください。

まとめ

今回はサードパーティースクリプトの非同期読み込みの話でした。ただキーワードを付与しただけかと思われるかもしれませんが、これが実に強力な機能になっています。ぜひ自身のサイトを確認しています。丁寧なサイトであれば、スクリプトをコピーさせる段階で付与している場合があります。気づかぬうちに付いていたというケースも多々あることでしょう。

それでは次の記事でお会いしましょう👋