ページの読み込み時間を最適化し、SEO を改善する方法は?

私たちはめちゃくちゃせっかちな世界に住んでいます。 質の高いコンテンツを迅速に提供することは、数年前にはうらやましい成果でした。 今日、それはあらゆるビジネスの基本的な要件です。

人々があなたのウェブサイトにアクセスするのを長く待たせれば待つほど、彼らが直帰する可能性が高くなります. 遅い Web サイトは深刻な問題であり、すぐに対処する必要があります。

なんで？

コンバージョン率が 3% だとします。 100 回のクリックごとに 3 人の見込み客を獲得できます。 では、ランディング ページが恐竜時代に読み込まれたために 3 つすべてが跳ね返った場合はどうなるでしょうか。 収益への影響を想像してみてください。

この投稿では、そのシナリオを回避する方法を紹介します。 ページの読み込み時間を最適化するには、5 つのステップがあります。

ステップ 1: 現在のページの読み込み速度を確認します。

Google PageSpeed Insights と GTMetrix は、ページ速度を計算するための便利なツールです。 どちらも速度を妨げる要因をリストしています。 ただし、GTMetrix は、ページの読み込みにかかる秒数を示します。

ドメイン URL を GTMetrix にプラグインして、ツールに魔法をかけてもらいましょう。

数秒で数値が入力され、成績が割り当てられます。

また、ページの各要素の読み込みにかかった時間もマップされます。 たとえば、上の画像のように、FCP (First Colorful Paint) の読み込みに 5.5 秒かかりました。 ページの合計読み込み時間は、なんと 7.3 秒！

このツールは、ページの読み込み速度を上げるための提案のリストも作成します…

…その他のヒント:

次のセクションでは、GTMetrix でより高速な速度スコアを取得する方法について詳しく説明します。

ステップ 2: Web サイトを最適化して、ページの読み込み速度を向上させます。

SEO 画像最適化のヒント

画像サイズを小さくするには？

すべての Web サイトは、要求に応じてサーバーから読み込まれるファイルです。 読み込みを高速化するために、ファイル サイズを最小限に抑える必要があります。

画像は通常、サイズが非常に大きくなります。 読み込みには何百年もかかります。

しかし、賢く使えば大きな価値があります。 たとえば、GTMetrix の画像は、参照を提供しながら私の主張をよりよく伝えるのに役立ちました。

画像を削除するべきではありませんが、使用を最適化することはできます。 これらは、画像サイズを縮小する 4 つの方法です。

• 画像圧縮
• 画像のトリミング
• 画像のサイズ変更

画像圧縮

使用する画像のサイズを小さくします。 このファイルサイズを縮小するプロセスを画像圧縮と呼びます。 画像はレイヤーのスタックです。 各層が風味を加えます。 圧縮は、画像を鮮明にするレイヤーを削除することで、ページ サイズを縮小します。

これは画質に影響を与えますが、SEO ポイントを獲得することで補う以上のものです。

画像を JPG 形式で保存することから始めます。これはディスク容量が少ないためです。 一部のブログでは JPEG2000 または WEBP を推奨していますが、私のテーマにはその形式でのレンダリングの問題がありました。 多くの場合、JPG が適切に機能します。

ここから、さらに圧縮を行うには 2 つの方法があります。

1. 画像をオンラインで圧縮する

jpeg を圧縮して JPG 画像をアップロードします。 このツールは画像を圧縮し、どれだけ圧縮されたかを示します。 圧縮されたイメージをダウンロードして、Web ページに使用します。

2. プラグインを使用して画像を圧縮する

私はプラグインを使うのがあまり好きではありません。 確かに、コーディングができなくても仕事は簡単です。 しかし、それらはあなたのウェブサイトの既存のコードを妨げます. ただし、検討する価値のあるオプションです。

画像の圧縮に役立つプラグインはたくさんあります。 あなたは選択に甘やかされています。 とにかく、プラグインを使用する前に、「WordPress のバージョンと互換性があります」チェックマークを確認してください。

非可逆/可逆圧縮の選択

圧縮は非可逆/可逆の場合があります。 画像をどの程度圧縮するかを説明します。

テキストが多い画像には可逆圧縮を使用します。 損失のある画像テキストは、ぼやけて読めない傾向があります。 他のすべてには可逆圧縮を使用します。

どちらが最適かを試してみてください。

画像のトリミング

画像サイズを縮小するのは明らかな方法のように思えますが、文字通り画像サイズを縮小しているように見えますが、多くの人はそれを無視する傾向があります。

ブログに適した画像のサイズをメモしてください。 メイン画像とアイキャッチ画像のサイズは一貫している必要があります。 ただし、補助的なビジュアルは、必要なものを表示するために切り取ることができます。

たとえば、この投稿のスクリーンショットには冗長なビジュアルはありません。 アドレス バーやフッターはありません。 すべてのピクセルがページの読み込み時間に追加されます。 不要なものを削除します。

MS ペイントでの画像のサイズ変更

この明白に聞こえる方法は、目に見えないところに隠れています。

1. MS ペイントで画像を開きます。 サイズを変更するオプションが表示されます。
2. サイズ変更のパーセンテージを設定すると、寸法とサイズがはるかに小さいバージョンが作成されます。 ファイルサイズの負荷を軽減します!

画像の遅延読み込み

すべての Web サイト データはデータ センターに保存され、必要に応じて取得されます。 イメージは変わりません。 遅延読み込みの手法は、訪問者がビジュアルにスクロールするまで取得プロセスを遅らせます。

システムがその画像を提供するために必要なリソースを獲得するのは、そのときだけです。 この手法は、必要な場合にのみロードする要素をキューに入れることで、システムの初期負荷を軽減します。

これにより、初期読み込み時間が短縮されるだけでなく、帯域幅も節約されます。

このページで試してみてください。下にスクロールして、画像に到達する前ではなく、到達したときに画像がどのように読み込まれるかを確認してください。

Web サイトに Lazy Load を実装する方法は?

a3 Lazy Load プラグインは、遅延ロードをすばやく実装するのに役立ちます。

適切なフォントを選択します。

多くの場合、フォントはデザインの範囲に入ります。 パフォーマンス要因として見られることはめったにありません。

しかし、それはページサイズに貢献します。 前述の GTMetrix からのレポートは、フォントが画像の次に多くのサイズを占めていることを示しています。

読み込み速度を速くするには、読み込みの速いフォントを選択する必要があります。

私は自分のウェブサイトに Open Sans を使用しています。これは、自分のビジネス カテゴリにこだわる必要がないためです。 クリエイティブ ビジネスを経営している場合は、美しさのためにページ速度を少し犠牲にすることをお勧めします。 また、ブランドアイデンティティに貢献するスタイリッシュなフォントが必要な場合は、それを選択してください. ブランド >> ページ速度。

コードを突き詰める

JavaScript (JS) とカスケーディング スタイル シート (CSS) は、表示されるすべての Web ページをサポートするコードです。 どちらもページの読み込み速度に 2 つの方法で影響します。ページ サイズが増加し、処理に時間がかかる一連のリクエストをサーバーに送信します。

しかし、それらはあなたのウェブサイトにいくらかのスタイルと力強さを加えるために必要です. たとえば、下のサブスクリプション ボックスに注目してください。下にスクロールするとうなずきます。 効果を逃した場合は、このページをリロードして、もう一度お試しください。

効果は注目を集めますが、使いすぎると気が散ってしまいます。

スタイルとページ速度の間にはトレードオフがあります。 ページ速度のためにスタイルを削除しないでください。 ただし、コードを最適化すると、ページの読み込み速度が向上します。

そして、これが私がやった方法です：

JS/CSS を縮小する

縮小化により、コードの不要なチャンクが削除され、ファイル サイズが縮小されます。 これにより、ブラウザーはコードをより速くダウンロードして実行できるようになり、帯域幅が節約されます。

キャッシングを活用する

キャッシュは、Web サイトのコピーを保持するストレージ ユニットであり、呼び出されるたびにロードする必要がなくなります。 キャッシュを使用すると、最初の読み込み後、再度呼び出されるたびに Web サイトの読み込みが速くなります。

LiteSpeed Cacheプラグインを使用して、コードとキャッシュを縮小します。

ステップ 3: Web ホスティング プロバイダーの変更を検討します。

空力スポーツカーは灯油で走るでしょうか？ いいえ。

同様に、適切に最適化された Web サイトでも、サーバーが次の氷河期までにしか応答しない場合、ページの読み込み速度は遅くなります。

主に不確実性のために、私は変更をためらっていました。 しかし、いくつかの調査を行った結果、Hostinger を選択するに至りました。後悔はありません。

他の多くのウェブホストがあなたのために仕事をします。 予算と場所に基づいて、あなたに合ったものを決定してください。

これは、WebHost を変更するための完全なガイドです。

ステップ 4: コンテンツ配信ネットワーク (CDN) を使用します。

地理的な距離は、ページ速度に大きな影響を与えます。 訪問者が Web サイトがホストされている場所から遠く離れているほど、ページの読み込み時間が長くなります。

CDN は、世界中の複数のデータ センターにあるグローバル サーバーの集まりです。 これにより、訪問者はホーム サーバーではなく、地理的に近いサーバーに接続できます。 これは、異なるネットワーク間の交換ポイントでサーバーを活用することによって行われます。

距離が短くなると、ウェブページの提供が速くなります。

私は Cloudflare CDN を使用しており、その目的を大いに果たしてきました。

ステップ 5 (省略可能): Accelerated Mobile Pages (AMP) を使用してモバイル ページの読み込み速度を上げる

コードの縮小について話したことを思い出してください。 HTML は、CSS/JS よりも軽量なコード形式です。 スタイリングは許可されませんが、HTML は、サーバーが Web サイトをロードするために必要な基本的なコードです。

AMP ページは、ウェブページの HTML 形式です。 これらは主にモバイル デバイスで使用される 2 番目のバージョンのページです。 これらはコードを最小限に抑えたものであるため、ページは一瞬で読み込まれます。

AMP に移行するということは、ページからスタイリングを排除することを意味します。 ただし、ニュースページやブログには有益です。 私はそれらを簡単に使用しましたが、モバイルページの速度でも最初の 3 つのステップで十分だったため、決定に戻りました。

AMP を実装するかどうかを決定するための詳細なガイドを書きました。

結果

上記の手順により、ページの読み込み速度が驚くほど速くなりました。 GTMetrix に戻りますが、これが私の Web サイトの現在の位置です。

1.2秒でロードされます。 約6倍の増加。

でも、その証拠はプリンにあります。 試してみて、どうなるかコメントで教えてください。