WordPressウェブサイトのコアウェブバイタルを改善するためのヒント
公開: 2021-09-13グーグルはウェブデザイナーとウェブサイト所有者の両方の間にパニックの波を作り出す方法を持っています。 検索アルゴリズムに変更を加えると、人々は追いつくためにスクランブリングを開始します。 その理由は簡単に理解できます。 誰も彼らのSEOランキングが苦しむことを望んでいません。
したがって、Core Web Vitalsメトリックが発表されたとき、応答はかなり予測可能でした。 これらの変更はサイトのパフォーマンスに基づいているため、ロード時間を非常に高速にすることに注意が向けられています。
しかし、それは必ずしも単純ではありません。 WordPressなどのコンテンツ管理システム（CMS）を実行するWebサイトは、特に困難な場合があります。 さまざまな要因が関係しています。 したがって、パフォーマンスを向上させるには、多面的なアプローチが必要です。
どこから始めれば？ WordPressWebサイトのCoreWebVitalsスコアを上げるためのガイドを確認してください。
キャッシングを実装する
WordPress Webサイトの速度を上げる最も簡単な方法の1つは、キャッシュを実装することです。 多くの場合、以前は低迷していたサイトは、この1つのステップで大幅に高速化されます。 これは、比較的安価なホスティングでも当てはまります。
デフォルトでは、WordPressのページと投稿はサイトのデータベースからコンテンツと設定を取得する必要があります。 これには時間がかかります。 一方、キャッシュはコンテンツを静的HTMLファイルとして提供し、データベース呼び出しの必要性を排除します。 仲介者（つまり、データベース）が邪魔にならないようにすると、より迅速なロード時間が続きます。
一部のホスティングパッケージ、特にマネージドWordPressホスティングには、サーバーベースのキャッシュが含まれます。 これは、Webデザイナーからの要求がほとんどなく、非常に優れたパフォーマンスを発揮するため、多くの場合、最良のオプションです。 頻繁にクリアする必要があるかもしれません。 そうでなければ、それは実践的な経験です。 また、プラグインと効果的に組み合わせて、速度をさらに向上させることができます。
ホストがサーバーレベルでキャッシュを提供していない場合でも、プラグインを介してパフォーマンスを最適化できます。 キャッシングプラグインは、範囲、複雑さ、価格が異なります。 ただし、ロード時間の改善に関しては、具体的な結果が得られます。 これは、Core WebVitalsにとってもプラスの効果です。
レンダリングブロックスクリプトとスタイルの読み込みを延期する
Google PageSpeed Insightsでウェブサイトのパフォーマンスをテストすると、レンダリングをブロックするリソースの問題が多く出てくるようです。 これらは、「クリティカル」とは見なされないスクリプトとスタイルです。つまり、「折り畳み上」のページコンテンツをレンダリングする必要はありません。
これらのリソースは、ロード時間の短縮を妨げる可能性があります。 具体的には、Core Web Vitalsの「LargestContentfulPaint（LCP）」スコアに影響を与えます。 これは、ページのメインコンテンツ領域が読み込まれるのにかかる時間です。 LCPを減らすことは、まあ、非常に重要です。
状況を改善する1つの方法は、さまざまなコンテンツ要素（画像、ビデオ、ブロックレベルのテキスト）の読み込みを遅らせる（または延期する）ことです。 これにより、必要なスクリプトとスタイルのみが最初に読み込まれ、他のすべてが後で読み込まれるようになります。
ミニファイに加えて、多くのWordPressキャッシング/最適化プラグインにもこのタイプの機能が含まれています。 ただし、間違ったリソースを延期すると問題が発生する可能性があるため、少し実験が必要になる場合があります。
行った変更をテストし、ブラウザコンソールにエラーがないか確認してください。 適切な構成を見つけたら、ページ上のレンダリングをブロックするリソースの数を大幅に減らす必要があります。
画像を最適化する
大きなヒーロー画像と複雑なスライダーの普及は、パフォーマンスの最適化の課題を追加するだけです。 これらのアセットは見栄えがよいかもしれませんが、メガバイト相当のデータを簡単に追加できます。 特にモバイルでは、Core WebVitalsの合格点は得られません。
ありがたいことに、負荷を軽減する方法はいくつかあります。 何よりもまず、不要と思われる画像をすべて削除します。 大きな画像を1つでも削除すると、違いが生じる可能性があります。
残りの画像は最適化できます。 これにより、ファイルサイズが小さくなり、読み込み時間への影響が少なくなります。
画像の最適化をどのように行うかはあなた次第です。 最悪の犯罪者のコピーをダウンロードし、お気に入りの画像エディタを使用して圧縮してから、Webサイトにアップロードし直すことができます。 または、便利なWordPressメディアプラグインを使用してプロセスを自動化できます。
レスポンシブ画像
モバイルユーザーの場合、WordPressにはsrcsetを介してレスポンシブ画像を提供する機能が含まれています。 実際、コンテンツ内に配置された画像に対して自動的に汚い作業を行います。 これは、大規模なデスクトップサイズのメディアがモバイルユーザーエクスペリエンスを低下させるのを防ぐため、非常に価値があります。 メインコンテンツ領域外の画像の場合、この機能を実装するためにいくつかのカスタム作業を行う必要がある場合があります。
現代の画像フォーマット
使用しているファイル形式も確認する価値があります。 たとえば、GoogleのWebP形式では、画質を維持しながらファイルサイズを縮小できることがよくあります。 一部の新しいフォーマットはレガシーブラウザ（ahem、IE）でサポートされていないため、フォールバックバージョンが必要になる場合があることに注意してください。 プラグインもそれを助けることができます。
すべてのものを遅延ロードする
遅延読み込み機能は、アイテムがブラウザのビューポートにある場合にのみアイテムを読み込みます。 画像、iframe、その他のサードパーティコンテンツ（ソーシャルメディアウィジェットなど）の読み込みを遅らせることで、ユーザーが最初に目にする要素にリソースを集中させることができます。
WordPressは、ネイティブのブラウザベースの画像への遅延読み込みをすでに実装しています。 ページまたは投稿に画像を追加すると、 loading="lazy"属性が<img>タグ内に配置されます。 つまり、画像に高さと幅の属性が含まれている場合です。
これは素晴らしいことですが、ビデオやiframeなどの他の要素についてはどうでしょうか。 これらのアイテムは、最初からロードしたときにページの重量を減らすこともできます。
Iframeはデフォルトで遅延読み込みされるようになったため、心配する必要はありません。 一部のより複雑な要素では、この機能を実装するためにカスタムコードまたはプラグインが必要になる場合があります。
散らかったものを片付ける
時間の経過とともに、手入れの行き届いたWordPressサイトでさえ雑然となる可能性があります。 詰まったデータベース、まだアクティブな未使用のプラグイン、使用していない機能を備えた肥大化したテーマ–それは起こります。 また、Core WebVitalsを下にドラッグすることもできます。
そのため、何度も片付けることが重要です。 サイトのデータベースは手動で最適化することも、定期的に最適化するように設定することもできます。 未使用のプラグインは非アクティブ化してゴミ箱に捨てることができます。 テーマは、よりスリムにすることも、より良いものに置き換えることもできます。
あなたのウェブサイトを遅くしているものについて研究し、犯人を見つけてそれらに対処してください。 これがどれほどの違いを生むことができるかに驚くかもしれません。
あなたのウェブサイトのコアウェブバイタルを改善する
Core Web Vitalsは、WordPressWebサイトのパフォーマンスを最適化するというすでにトリッキーなプロセスを複雑にします。 他のパフォーマンスメトリクスで高いスコアを獲得しているWebサイトでさえ、この分野ではまだ不十分な場合があります。 これは、何よりもモバイルテストで際立っています。
良いニュースは、デザイナーが追いつくためにできることがたくさんあるということです。 キャッシュを実装すると、優れた基盤が確立され、すぐに後押しされます。 そこから、ファイルサイズを縮小し、重要度の高い順にスタイルとスクリプトをロードすることが重要です。
さらに言えば、Core WebVitalsを念頭に置いてサイトのCSSを調整することも理にかなっています。 これは、恐ろしい累積レイアウトシフト（CLS）スコアを助け、膨満感を減らすのに役立ちます。
一般的に、パフォーマンスに優れているものはCore WebVitalsにも適しています。 スコアはかなり早く改善できます。 これらの個々の欠点のいくつかを解決するには、試行錯誤が必要になることを知っておいてください。
包括的な目標は、ユーザーがWebサイトにアクセスしたときに必要なものだけが読み込まれるようにすることです。 そうすることで、訪問者とGoogleの両方が非常に幸せになります。