エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
2021年にGoogleがランキング指標として導入した「Web Vitals」。
本記事ではCore Web Vitalsのスコアを向上させるためにできることを5つご紹介します。
目次
Web Vitalsとは
「Web Vitals」とは、Googleが2020年5月に発表した指標です。WebサイトのUXをより正確に評価するために導入されました。
Googleは、Web Vitalsのなかでもとくに重要なポイントとして、ページ読み込みに関わる指標「Core Web Vitals」を挙げています。
【Core Web Vitals 3要素】
- LCP（Largest Contentful Paint）：読み込み時間
ユーザーが求める有意義なコンテンツ要素の読み込みに、どれくらいの時間がかかるか- FID（First Input Delay）：インタラクティブ性
ユーザーが最初にアクション（ボタンのクリックやタップ）をしてからブラウザが応答するまでにどれくらいの時間がかかるか- CLS（Cumulative Layout Shift）：視覚的安定性
画面の要素がどれくらい安定しているか（レイアウトのズレなどを量を評価）
Web Vitalsについては、以下の記事でも紹介しているので、ぜひ参考にしてみてください。
Googleが新たなランキング要素「Web Vitals」を発表。”ページエクスペリエンス”が鍵となるか
Workship MAGAZINE
Core Web Vitalsに対応するための5つのポイント
Webサイトの速度とUXは、これまでも重視されてきました。Core Web Vitalsを見る限り、2021年以降もその傾向は変わらないようです。つまり押さえるべきポイントは従来と同様、できるだけ早く、ユーザーにメインコンテンツを提供することです。
以下ではCore Web Vitalsに対応するためにできることを、具体的にご紹介します。
ポイント1. 画像を最適化する
容量の大きな画像は、WebサイトにとってLCP（読み込み時間）を遅くする最大の要因です。Webページの読み込み速度を早くするために、配置されている大きな画像は最適化しましょう。
画像の最適化については、以下の3つの方法が挙げられます。
【画像サイズの圧縮】
必要に応じて画像サイズを圧縮しましょう。画像を最適化するツールについては以下の記事をご覧ください。
無料で使えるおすすめ画像圧縮ツール12選まとめ！実際にコーギーを圧縮してみた
Workship MAGAZINE
また、小さなサイズでも高品質の画像を提供したい方は、Googleが提供している静止画フォーマット「WebP」の利用も検討しましょう。WebPは2020年9月現在、Chrome、Safari 14〜、Edge、Firefox、Operaなどの主要ブラウザで対応しています。
【CMSの活用】
CMS（コンテンツ管理システム）によっては、画像の読み込みを改善する機能がついているものもあります。
たとえば2020年8月にリリースされたWordPress 5.5では、デフォルトで画像の遅延読み込み（Lazy-load）が自動化されます。これは画面に表示される画像のみが読み込まれ、画面外にある画像の読み込みを抑制してくれる機能です。スクロールにあわせて読み込むことで、必要なときだけ大きな画像をロードできるようになります。
とくに画像の多いページや、縦に長いランディングページなどで、速度改善やUX向上が期待できるでしょう。
【画像CDNの利用】
Webサイトの速度を早めるのに、CDN（コンテンツデリバリーネットワーク）の利用も効果的です。CDNとは、インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと。
画像CDN（画像専用のCDN）を使えば、画像のフォーマットやサイズも細かくコントロールできます。画像CDNで圧縮された画像は、そのURLでプロパティの文字列を取得し、画像の動作をブラウザに指示します。
おすすめのCDNベンダーについては以下の記事をご覧下さい。
CDNベンダーおすすめ5選！コンテンツ配信を高速化しよう！
Workship MAGAZINE
ポイント2. ページのレイアウトを改善する
新しい指標のひとつに、CLS（視覚的安定性）があります。これは「遅れて表示される広告のせいで、間違ってボタンを押してしまった」というようなレイアウトに関する評価です。こういったレイアウトは、WebサイトのUXを下げてしまいます。CLSを最適化してもページが高速になるとは限りませんが、UXは改善されるでしょう。
CLSは、サイズを明記していない広告や、動的なコンテンツを含んだ画像が原因で発生します。サイズが適切に指定されていない場合、ロード中に画面がブレるため、ページが不安定に見えます。これは、新しいコンテンツが既存のコンテンツの上に挿入されているために起こる現象です。
下記のように、画像の幅と高さをあらかじめ設定することでこの現象は改善されます。テキストよりも後に表示される画像のスペースを、ブラウザが確保してくれるためです。
<img src="big_mountain.jpg" width="640" height="360" alt="大きな山">ブラウザは広告や画像が後から追加されるのを把握できるため、ページのゆがみがなくなります。
すぐに画像を表示したい場合は、低解像度のプレースホルダーを追加してみてください。もちろん、通常の画像でもこの方法で画像の最適化ができます。その際には、すべての画像サイズで同じ比率を採用しましょう。
ポイント3. サーバーの読み込み速度をあげる
サーバーリクエストへの応答が早いほど、Webサイトの評価やUXは高くなります。
サーバーを最適化するには、おもに以下の3つの方法あります。
- ホスティングプランを見直す
- 最新バージョンのPHPを使用する
- ハードウェアの容量を確認する
まずは適正な価格で、優れたパフォーマンスを提供するホスティングを選択しましょう。
ハードウェアが不足している場合は、ハードウェアをアップグレードする必要があります。データベースの動作を調査し、改善できるかどうかも確認しましょう。『Query Monitor WordPress』などのプラグインを使用して、サイトのクエリ分析が可能です。
また「link rel=preload」や「HTTP/2 Server Push」を用いて、サーバーがリクエストに応答する方法を調整することもできます。先述した画像を最適化する方法と同じように、CDNを活用するのもよいでしょう。
【link rel=preload】
<link> 要素の rel 属性で preload を指定すると、 HTMLの <head> 要素内で読み込みリクエストを宣言します。ブラウザのレンダリング機構が起動する前に読み込みを始めたいリソースを指定することが可能です。ページのレンダリングがブロックされにくく、必要なリソースをより早く利用できるようになります。（出典：MDN web docs）
【HTTP/2 Server Push】
Server Pushを利用すると、サーバーは特定のリソースをクライアントにまとめてプッシュできるようになります。そのため、リクエストが到着しなくてもブラウザのキャッシュで将来のレスポンスを準備することが可能です。（出典：キャッシュ屋blog）
複雑なWebサイトのサーバーは、リクエストの処理やファイルの提供に追われ続けているため、応答が遅くなることが多いです。その場合はサーバーの読み込み速度を上げて、UXの改善に役立ててみてください。
ポイント4. 重要なコンテンツを早く表示させる
ブラウザがWebページを読み込んで表示するとき、ファイルを取得しレンダリングしています。この際、Webサイトの読み込みに必要なファイルが多いほど、またファイルのサイズが大きいほど、読み込みは遅くなります。
ブラウザは基本的に、すべての外部ファイルの読み込みを完了するまで、レンタリングを行いません。この外部ファイルがレンタリングを妨げる現象を「レンタリングブロック」と呼びます。
レンタリングブロックは、外部CSS／JSファイルなどが原因で発生します。CSSの読み込みの遅さが原因で、画面表示に時間を要することも。この場合は以下の対処をとることで、より速く画面上にファイルを表示できます。
- デザインの重要な要素（スクロールせずに見える部分）をメインのCSSファイルから取り出す
- 上記の要素をコードにインライン化する
重要なCSSのセットを取得する際は、『WP Rocket』などのWordPressキャッシュプラグインを使うと便利です。WP Rocketには「Optimize CSS delivery」というチェックボタンがあります。これを有効にすると、レンダリングブロックをするCSSが取り除かれるため、Webサイトの読み込み速度が改善されるでしょう。さらにWP Rocketには、CSSやJavaScriptを縮小したり、JavaScriptの読み込みを遅らせたりする機能もあります。
レンダリングブロックの対応方法については、以下の記事で詳しくご紹介しています。
レンダリングブロックの原因と解決法！ページの表示速度を早めよう
Workship MAGAZINE
ポイント5. 外部のスクリプトを見直す
Webサイトの読み込み速度の問題は、外部要因も影響しています。
たとえばWebサイトがスクリプト広告に依存している場合、Webサイトの読み込み速度は広告プロバイダーの管理下にあります。そのため読み込み速度を上げようとしても、広告が高性能になるのを待つしかありません。もし広告の読み込みが遅い場合は、別のプロバイダーを探すのもひとつの手です。
もし広告配信の際のスクリプトが、Webサイトの速度を低下させることが分かった場合、以下のことを考えてみてください。
- その広告は本当に必要か？
- スクリプトの価値はなにか？
現状を見直せば、もっと最適化された広告を出せる可能性があります。また可能であれば、スクリプトの自作もおすすめです。読み込みをコントロールできるようになります。
少なくとも、スクリプトは非同期で読み込むか、読み込みを遅延させましょう。これらの対処をすることで、ブラウザは最初にページを作成してから、外部スクリプトを取得し実行できるようになります。
分析スクリプトなど、読み込むスクリプトが重要な場合には、非同期で行うのがおすすめです。重要度の低い要素の読み込みは遅くする必要があります。
検索順位を上げる絶対解はない
Web Vitalsのスコアには数多くの要素が影響しており、完璧な対策方法は存在しません。またSEOの観点から見ても、検索順位にはWeb Vitals以外のさまざまな要素も絡んできてます。Googleでさえ「多くの要素が相互に影響しあいスコアを算出しているため、これを行ったら絶対にスコアが上がる、という対策を指摘するのは難しい」と述べています。
しかしそのような中でも、Googleは以下のポイントを改善すべきと述べています。
- Webサイトを遅くする要素
- UXを損なう要素
上記のポイントを調べるには、ツールの活用が有効です。たとえば『Web.dev/measure』に特定のページのURLを入力すると、以下の4つの観点からの評価を得られます。
- Performance：Webページの読み込み速度は最適か
- Accessibility：ユーザーおよびクローラーにとってアクセスしやすいか
- Best Practices：パフォーマンスを上げる方法
- SEO：検索エンジンにおいてWebサイトを上位表示できているか
▲Web.dev/measureでWorkship MAGAZINEのページを評価
▲Workship MAGAZINEのページで改善すべき点と、修正後の影響の大きさ
上記の画像を見ると、使用していないJavaScriptを取り除くことで（Remove unused JavaScript）、ページのパフォーマンスを高められるのが分かります。
おわりに
今回紹介した5つのポイントは、Core Web Vitalsのスコアをただ向上させるだけのものではありません。ユーザーに優れたUXを提供するのに有効です。
2021年のWeb Vitals導入に向けて、ぜひ本記事の内容を参考にしてみてください。
（執筆：Edwin Toonen 翻訳：Sato Mizuki 編集：Kimura Yumi）
人気のフリーランス・副業求人
【リモート可】家族向けのIoTサービスにおけるオンライン/オフライン商品/サービスマーケティングを担当するマーケターを募集
- #スタートアップ
職種：マーケティング
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
※正社員※【週4リモート × 少数精鋭】裁量ある成長環境でwebマーケしませんか？
- #副業OK
- #正社員募集
- #フルリモートOK
職種：マーケティング
時給：3,000円 〜 4,000円
働き方：どちらでも可
エリア：東京都
※正社員※【週4リモート × 少数精鋭】裁量とライフバランスある環境でwebマーケしませんか？
- #副業OK
- #正社員募集
- #フルリモートOK
職種：マーケティング
時給：4,000円 〜 5,000円
働き方：どちらでも可
エリア：東京都
Yoast helps you with your website’s search engine optimization, with our internationally loved software and our online SEO courses.
この記事はYoastからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
5 ways to improve your Core Web vitals
