サイトの速度を最適化するための 8 つのヒント

公開: 2022-08-03

あなたのサイトはどれくらい速いですか？

遅いサイトがユーザーの行動に悪影響を与えることは誰もが知っています. しかし、サイトの速度を最小限に抑えるためにできる限りのことを本当に行っていますか?

今日は、Web 開発、岩石学、WordPress、サイエンスフィクション、ジンが好きな男性と、サイトの速度を最適化するための 8 つのヒントについて話し合います。そして、PHP にどっぷり浸かったり、ステージに上がったり、良い本を読んだりしているときが一番幸せです。彼はデジタルストラテジスト、デジタルマーケティングテクノロジスト、フルスタック開発者であり、Yoast の SEO 責任者です。

In Search SEO ポッドキャスト Jono Alderson へようこそ。

8つのステップは次のとおりです。

コア Web バイタル
クラウドフレア
Chrome デベロッパーツール
高度な画像最適化技術
高度なフォント最適化テクニック
CSS と JavaScript のトリック
キャッシングとバージョン管理
賢いサードパーティキット

高速 Web サイトの 8 つの必須要素

J: ねえ、ここにいてよかった。お招きいただきありがとうございます。これはとてもエキサイティングです。

D:素晴らしい、城野。よろしくお願いします。 Jono は、jonoalderson.com で見つけることができます。城野さんは、遅いサイトが実際にユーザーの行動に与える影響について、現在どのようなスタンスをとっていますか?

J: たくさんの研究があります。そして、それはどれもニュースではないと思います。何十年も前にさかのぼる研究があります。そして、これらすべてが、人を何ミリ秒待たせるかということと、それが何かを買う可能性にどれだけ影響を与えるかということとの間には、驚くほど直接的な相関関係があることを示しています。おそらく、人々が意識的に「ああ、200 ミリ秒かかりすぎたので、競合他社と買い物をするつもりだ」と言っているわけではありません。しかし、この時間帯は窓の外を見たり、別のタブを開いたり、ランチは何にしようかと考えたりするかもしれません。

最近、大手コンサルティング会社であるデロイトの非常に興味深い調査を目にしました。そして彼らは、英国と米国の e コマースとリードジェネレーション、さまざまなセクターにわたる最大のさまざまなサイトの 50 のサブセットのようなものを調べました。そして彼らは、まばたきにかかる時間である200ミリ秒の遅延のようなものを発見し、サイトの速度を10％程度の収益の増加分だけ低下させました. これはそのような研究の 1 つにすぎません。このようなものはたくさんあります。そして彼らは皆、より速く、よりスマートに、よりアクセスしやすく、より使いやすくなれば、それだけお金が増えると言っています。ええ、私たちがこれを見ているのは簡単です。

D: Amazon の調査を見たのを覚えています。10 年以上前のことだと思いますが、最新の統計は見ていませんでした。しかし、それは確かにすべて比較対象でもあります。人々が他のウェブサイトを閲覧することに慣れていて、あなたのサイトが他のウェブサイトよりもずっと遅いと感じている場合、彼らはあまり長く留まることはないでしょう.

J: ええ、そして人々は本当にこれについて考えていません。彼らは、自分のサイトはおそらく十分に速いと考えています。しかし、競合他社のサイトは高速化し、Facebook も高速化し、Instagram も高速化しており、ユーザーエクスペリエンスのベースラインに対する期待は変化しています。したがって、予想よりも速くなる必要があります。そうでない場合は、比較的遅くなります。

D: では、今日は、高速な Web サイトの重要な要素を共有します。最初に、コア Web Vitals から始めます。

1. コア Web バイタル

J: これ以外にもいくつかあると思います。しかし、これは間違いなく私の頼りになるリストです。 Core Web Vitals については、誰もが聞いたことがあると思います。しかし、まだお持ちでない場合は、Google がこれを開始したのは 2020 年半ばだと思います。そしてそれは、PageSpeed とは何かを測定するための、ある種の標準化された普遍的な指標を作成しようとする試みです。技術的にも概念的にも非常に複雑だからです。ページの読み込みには、さまざまな段階があり、それに影響を与えるさまざまなものがあります。そのため、彼らはそれを、時間の経過とともに監視、傾向分析、分析できる一連の指標に単純化しました。

これの本当に素晴らしい点は、これが単なるステップ 1 であるということです。現時点では 3 つの指標があり、今年はさらに 2 つの指標が追加されます。指標自体は進化しています。これは、これらの種類の測定値に対して具体的な数値を設定するための成熟したエコシステムになりつつあります。つまり、オンラインビジネスとして、自社のスコアがあまり高くなく、競合他社のスコアの方が優れていると言うのははるかに簡単になります。すべての調査でこれが収益に結びついていることがわかっているため、これを改善することに注力する必要があります。突然、私たちは利害関係者に、ページ速度が重要であるだけでなく、独断的ではなく、隅にいるSEO担当者が彼をそのコーナーの開発者に同意せず、実際に共有言語を持っていません. したがって、これはビジネスツールとして非常に強力であり、技術的な手段だけを気にする必要はありません。

D: あなたの脳は、ウェブサイトを改善するために実際に実行できる最も重要で最速の 8 つのことしかないと断言することはできないと言っているのは知っています。あなたの脳は現時点で実際に 1024 のことを考えることができることは知っていますが、私たちはあなたが思いついた 8 つの最初のアイデアを共有しているだけです。 2位はCloudflareでした。

2.クラウドフレア

J: Web サイトのページ速度を上げるために 1 つのことを行うだけの十分な時間とリソースがあるとしたら、それは Cloudflare に移行することになります。 Cloudflareは巨大です。彼らは、この分野で最大のテクニカルテクノロジー企業の 1 つです。しかし、それがちょっとオタクっぽいという理由で聞いたことがない開発チームや企業がたくさんあります。 Cloudflare はコンテンツ配信ネットワークです。これは、Web サイトの前にあるインフラストラクチャの一部です。無料版があります。セットアップには約 10 分かかります。そして彼らはあなたのサイトをスピードアップするために魔法を使うだけです. 画像を自動的に縮小し、JavaScript を縮小し、読み込み方法を変更し、さまざまな場所でさまざまな用途に使用できるように世界中の接続がより効率的にルーティングされるようにします。そして、これらはすべて、理論的には可能なことであり、非常に頭がよく、リソースが豊富な開発チームがあれば、その一部を実行できます。しかし、Cloudflare の無料製品がそのほとんどを行い、月額 20 ドルの製品が残りのほとんどすべてを行う場合、なぜあなたはそうするでしょうか?

サイトのスコアがあまり高くない場合、少し遅いかもしれませんが、ボタンをいくつかクリックするだけで、読み込みに 6 秒かかるサイトを 2 秒に短縮できます。基本レベルは驚異的ですが、パワーユーザーと高度なケースでは、さらに先に進むことができます。私のサイトの仕組みにCloudflareをより深く統合したいと言うことができます。そして、このビジネスロジックの一部をオフロードしたいと考えています。そして、ユーザーがいる場所に近いクラウドのエッジにある Google アナリティクスで、このタグ付けと追跡を実行したいと考えています。これは、サイト自体を高速化するのに苦労している場合、レガシーハードウェアで実行している場合、またはホスティングが少し面倒な場合などに驚異的なツールであり、実際に Cloudflare をそれらすべての前に座らせることができます。また気になること。これにより、それらが担当するスタックの異なる部分の数と、ビジネスロジックをどれだけオフロードしたいかについて、いくつかの興味深い疑問が生じます。しかし、簡単なハックとしては、驚異的なツールです。

D: 3 つ目は、Chrome デベロッパーツールを使用してパフォーマンスのボトルネックを特定することです。

3. Chrome 開発者ツール

J: ええ、PageSpeed Insights や Web Page Test などの Core Web Vitals ツールを実行すると、最高レベルのスコアと一般的なアドバイスが得られます。また、JavaScript の使用を減らすなどの一般的なアドバイスの問題点は、それを Web サイトや課題に適用するのが非常に簡単ではないということです。あなたのウェブサイトはユニークで、非常に具体的な方法で組み込まれています。機会がどこにあるかを実際に特定する次のレベルに到達したい場合は、Web サイトの読み込み方法を確認する必要があります。そのために使用できる最高のツールの 1 つが Chrome 開発者ツールです。

私はWindowsコンピューターを使用しています。そこで、ブラウザで F12 を押して、Mac に相当するものがあると確信し、Inspect の概要を取得しました。 [ネットワーク] タブをクリックすると、ページに読み込まれるすべてのものを、読み込みの順序と所要時間で示すウォーターフォール図が表示されます。更新を数回押すと、その様子が見られ、パターンが見え始めます。また、この 1 つの特定の処理に他のすべての処理の 2 倍の時間がかかることを理解するために、非常に詳細な開発者である必要はありません。そして、それはたくさんのものを保持しています。そして、それは大きな JPEG です。この JPEG を縮小する必要があるかもしれません。したがって、特にページごとまたはテンプレートごとにサイトを診断する方法として、これは最大の違反者がどこにあるかを確認する強力な方法です。

もちろん、それ以外にもニュアンスはありますが、最大のボトルネックを修正する方法を知っているということは、保留されているすべてのものをより速くロードできることを意味します。そして、簡単な機会をチェリーピッキングして見つける方法として、これはそれに近づくための優れた方法です. 他のものを妨げているものを見つけて、それを少し速くします。そして、それをスクリーンショットして開発者などに渡すことができます。そして、彼らはそれが何であれ攻撃できるはずです。

D: 4 つ目は、高度な画像最適化技術を使用することです。

4.高度な画像圧縮技術

J: はい、大きな JPEG を例に挙げました。そして、これはまだ恥ずかしいほど一般的です。多くのサイトが遅い主な理由の 1 つは、誰かが 10 メガバイトの GIF をホームページにアップロードしたり、携帯電話やカメラで写真を撮って CMS に挿入したりしたことです。そして、それを少し縮小する必要があるかもしれないという論理はありません。たぶん、サイズに合わせる必要があります。 Chrome 開発者ツールや Cloudflare を見ていると、このイメージが大きいために読み込みに時間がかかることがボトルネックであることがよくわかります。それに対処するために使用できるあらゆる種類のツールがあります。最も重要なのは、それらの画像を作成するために使用しているプロセスであり、おそらくワークフローがあります。 Photoshop で作品を作成している場合、作品をエクスポートするときは、Web 用にエクスポートしていることを確認してください。この JPEG が本当に完璧なピクセル品質である必要があるかどうか、または品質を少し下げてファイルサイズを節約できるかどうかを考えてみてください。少し技術的なことが必要な場合は、squoosh.app にアクセスしてください。 Squoosh は、Google 開発チームによって作成されたツールです。彼らはとてもオタクで、本当にイメージ空間に夢中です。画像をドラッグアンドドロップします。クリックすると、PNG を JPEG に変更できるオプションが表示されます。ドラッグアンドドロップすると、画像の品質が変化するのがわかります。私はそのトレードオフに満足していますか? そして、クリックして何が起こるかを確認し、あちこちでさらに数キロバイトを削ることができる高度なチェックボックスがたくさんあります. また、2 メガバイトから 200 キロバイトまでのイメージを、ドラッグアンドドロップして設定をいじるだけで、非常に簡単に取得できます。ワークフローにあまり組み込まれていませんが、これらの大きなボトルネック画像の一部を縮小するための簡単な修正として、それは本当にクールです.

D: ええ、認めたくないので、画像の最適化に取り組む必要がありますが、実際にはまだ Macromedia Fireworks を使用してソフトウェアを作成しています。

J: ああ、花火が恋しい。それが私のおもちゃだった良い10年ほどがありました。

D: わかっています。画像を作成し、それを約 80% の品質で JPEG としてエクスポートし、「Web 用には問題ありません」と判断します。たぶん、それは10年前の何か遠いものでした.

J: それはおそらく、80% まで出力するだけで問題ないという多くの人々のワークフローです。そして、それは、ほとんどの場合、問題ありませんが、時折、物事がすり抜けてしまうことがあります。ボトルネックの解消とブロックの解除を行いたい場合は、時間をかけてすべての画像を見て、「サイズのトレードオフに満足していますか?」と考える価値があります。

D: もちろんです。そして、最高のものと競争しなければならない超高速の最新のサイトの場合、私が説明したことは確かにそれを行うことができません. 5 つ目は、高度なフォント最適化技術を使用することです。

5. 高度なフォント最適化技術

J: 大きな JPEG はしばしばブロックの問題になると言いました。そして、大きな犯罪者の 1 つはフォント、特に Google フォント、または実際には、サードパーティのドメインから読み込んでいるフォントです。これらは多くの場合、ページで最も遅いものであり、ページで最大のものであり、ユーザーとして常にこれを目にすることになります. ページを読み込んでいるときに、整理するのに数秒かかり、フォントが点滅します。これは、ユーザーエクスペリエンスが非常に悪いものです。 Core Web Vitals にとっては、さまざまな点で非常に悪いですが、修正があります。そのため、Google フォントや類似のフォントの問題の 1 つは、クロスドメイン接続を確立することです。これには少し時間がかかります。あなたが接続しようとしているものは、しばらく時間がかかる一連のバックエンドシステムに対してクエリを実行します。フォントを吐き出し、そのフォントをダウンロードしてレンダリングする必要があります。そのプロセスには 5 つのステップがあり、数秒かかります。それを速くする方法はありません。

したがって、最も簡単な方法の 1 つは、これらのフォントをローカライズすることです。それらを Google Fonts からロードしないでください。Google Fonts が提供する CSS のコピーと貼り付けに関する指示は無視してください。少しグーグルで調べて、これらのフォントを自己ホストする方法に関するガイドを見つけてください。これは、セットアップと CMS によって異なります。通常、これを非常に簡単にするためのプラグインとプロセスがあります。それはそれをすべて剃ります。そして、あなたがしたいもう一つのことは、私が読み込んでいるこのフォントが実際に何であるか、そしてどのように読み込んでいるのかを調べることです.

モダンフォントローディング CSS では、特定の文字セットを定義できます。したがって、たとえば、Web サイトがほとんど英語であることがわかっている場合、拡張ラテン語グリフ全体のフォント文字を読み込む必要はおそらくないでしょう。これは実際にはデフォルトで行われます。読み込んでいるフォントは 1 から 9 までの AZ のみを使用していますが、実際には、ページに決して表示されない 200 の奇妙な文字を読み込んでいます。ですから、それを切り分けることができれば、はるかに高速です。また、「このフォントをすばやく読み込みたいが、キャッシュしないようにしたいですか? または、トレードオフがある場合は、読み込みをどのくらい待ちますか? そして、別のものにフォールバックしますか?それとも、あるべき場所に空のスペースを表示するだけですか?」さまざまな設定をいじくり回すことができ、Google で検索して最適化できるツールがあります. 同じように、画像を隅々まで見たい場合は、それらのフォントをどのように読み込んでいるかを実際に調べてください. csstricks.com にはいくつかの優れたガイドがあります.しかし、繰り返しますが、CMS とスタックを見てください。これを簡単にするためのプラグインと購入があります。

D: そして 6 番目に、CSS と JavaScript のトリックを使用します。

6. CSS と JavaScript のトリック

J: 次によくある問題は、スタイルとスクリプトの読み込み方法です。そして、複雑な視覚要素がたくさんあり、動きやインタラクション、ウィジェットやクリックして何かを実行できるものがあるウェブサイトを持っている場合、CSS と JavaScript がパワーアップするのに時間がかかっていたのはほぼ確実です。さまざまな方法でページを読み込んで操作します。これは、他のものを支えているもののウォーターフォールを見ているときに、Chrome デベロッパーツールのレポートに表示されます。 JavaScript は、これに対して非常に悪質な犯罪者です。たとえば、ページの上部にカルーセルを表示するスクリプトがある場合、カルーセルがスクロールを開始する前にそのスクリプトが読み込まれるのを待つ必要はありません。したがって、これでできることがいくつかあります。 1つは、それらを小さくすることができるということです。 Cloudflare はこれが得意です。小さいほど、バイト数が少なくなり、ページの読み込み時間が速くなります。しかし、もう 1 つの非常に強力な方法として、この JavaScript ファイルに対して、すぐに読み込む必要はなく、ページが完成するまで待つことができます。

そして、それを行うにはさまざまな方法があります。非同期にロードすることも、遅延することもできます。遅延は通常、今日のベストプラクティスです。人々は、非同期を組み合わせてあらゆる種類の奇妙なことを行い、それを延期すると混乱します。しかし、すぐには必要ない JavaScript ファイルで defer 属性を使用するだけで、ページを大幅に高速化できます。したがって、フッターで何かを制御する JavaScript がある場合、特に JavaScript と CSS の相互作用が非常に複雑になることを考慮すると、ページの残りの部分を読み込むのを待つ必要はありません。ページに多くのスクリプト、多くのスタイル設定がある場合、そのうちのいくつかは JavaScript が読み込まれるまで待機します。そのため、あちこちで他のものを支えているものがあります。したがって、本当に戦術的で、これはすぐには必要ないと言うことで、パフォーマンスを大幅に向上させることができます。繰り返しになりますが、Chrome デベロッパーツールのどこに違反者がいるかを確認するのは非常に簡単です。開発リソースがあれば、これを行うのは非常に簡単です。文字通りタグに属性を追加するだけで、それが自動的に行われます。

D: 7 番目は、キャッシングとバージョン管理を最大限に活用することです。

7. キャッシングとバージョン管理

J：つまり、Cloudflare が非常にうまく機能していることの 1 つは、最初にリソースに遭遇したときに、それが画像、JavaScript の一部、またはスタイルであるかどうかにかかわらず、それを Cloudflare に保存し、将来それを要求する人は誰でもそれを保存することです。キャッシュされたバージョンを取得します。そして、それは彼らにとって非常にローカルな場所から提供されました。それは非常に効率的で、本当に素晴らしいです。多くの Web サイトは、これを非常に難しくする方法で動作します。たとえば、スタイルシートとスクリプトのバージョン管理を確実に行いたいとします。したがって、JavaScript の最新バージョンを公開するときは、これがバージョン 6 であることを伝えたいと思うでしょう。そして、それは Cloudflare によって適切にキャッシュされ、アクセスするすべての人のためにキャッシュされます。それを更新するとき、そのファイルの種類を変更したり、ファイル名を変更したりするので、これはバージョン 7 です。そして、すべてのキャッシュが期限切れになり、人々が別のリソースを要求し、すぐに戻ってきます。

これが本当に強力になり始めるのは、実際の Web ページ自体をキャッシュし始めるときです。そのため、Cloudflare はデフォルトで、JavaScript の一部と CSS の一部のみをキャッシュします。 Web ページをキャッシュしたい。ただし、ログインしているユーザーやショッピングカートに商品を入れているユーザーを誤ってキャッシュしないようにする必要があります。 WordPress を使用している場合、これを自動的に行う自動プラットフォーム最適化と呼ばれる Cloudflare のサービスがあります。これで、ユーザーに最も近い Cloudflare データセンターがあればどこからでも Web サイトにサービスを提供でき、600 ミリ秒ではなく 50 ミリ秒でキャッシュに保存されたバージョンを取得できます。

より複雑な Web サイトをセットアップしている場合は、Cloudflare と Workers 製品を使用してこれを行うことができます。この製品は、ページルール製品の下で、そのための独自のロジックを定義できます。しかし、基本的には、Web サイトに何もしてほしくないという前提があります。誰かがあなたのページを開いている場合、そのページ、すべての JavaScript、およびすべてのスタイリングが、最も近いデータセンターがあればどこからでも提供されることを望みます。私のサーバーはノルウェーにあると思います。しかし、私のウェブサイトを開くと、そこにあるものはすべてマンチェスターから来ています。そこが Cloudflare のデータセンターに最も近い場所だからです。そして、あなたはこれをいじることができます。これは Chrome 開発者ツールで確認できます。これが Cloudflare をキャッシュしているかどうかを示す列をビューに追加できます。そして、これらの設定をチェリーピックして微調整し始めて、バックエンドに何もヒットしないようにすることができます.

D:それで、最後の 1 つに進みます。第 8 に、巧妙なサードパーティ製キットを使用します。

8.賢いサードパーティキット

J: たくさんのものがあります。これでごまかすことができます。現時点で、私は 2 つの本当のお気に入りを持っています。 1 つは、興味深いドメインを持つ Instant.page にある Instant Page です。これは本当にクールです。したがって、サイトがすぐに速くなるわけではありませんが、その後のナビゲーションが速くなります。そのため、ユーザーがマウスをページ上のリンクの上に移動すると、ブラウザーのバックグラウンドでそのリンクがプリロードされるため、ユーザーがクリックすると、リンクは既に利用可能になります。そして彼らは、平均的な人が実際にクリックする前に、マウスをリンクの上に 16 ミリ秒移動させるという多くの調査を行っています。そのため、バッファ時間が少しあります。その 16 ミリ秒は、バックグラウンドでページの読み込みを開始するのにちょうど十分な時間です。だから、それは瞬時に感じます。

そして、それが本当に素晴らしい理由がいくつかあります。 1 つは、優れたユーザーエクスペリエンスです。 2 つ目は、最初のページの読み込みではなくても、Core Web Vitals に影響を与えます。Core Web Vitals は、サイト全体の速度と読み込み時間を URL に集約しています。したがって、それらのナビゲーションが非常に瞬時に行われる場合、全体的なスコアが驚くほど高くなり、改善された Google ランキングの聖杯に近づく可能性があります。

より技術的な人々のために、私が現在夢中になっているもう 1 つのおもちゃは Party Town です。また、サイトにロードしているコンテンツの一部はサードパーティであることが前提です。そして、それは多くの場合、トラッキングピクセルと Google タグマネージャー、そしておそらくその他のオッズとエンドです。そのようなものを、Web サイトにとって重要な主要な重要なものと競合させたくありません。したがって、ページの読み込みを強化する JavaScript がたくさんある場合、Google タグマネージャーがそれに対して読み込みを行い、リソースを盗んでから戦うことは望ましくありません。これらを分離して、ブラウザのページが重要なものを優先する必要があり、サードパーティのものがバックグラウンドで発生する可能性があることを認識できるようにします。また、技術的な観点から見ると、これらのサードパーティリソースはすべて別のワーカーに読み込まれます。つまり、通常のストリームの外で実行され、パフォーマンスに影響を与えず、バックグラウンドで静かに実行されます。この種のものから信じられないほどのパフォーマンスの向上を見てきました。これは、パフォーマンスの最適化が進んでいるところだと思います。セットアップが少し難しいです。すべてのもので完全に機能するわけではありません。しかし、あなたが本当に競争に勝ちたいのなら、これは本当にクールなおもちゃです. 少しベータ版ですが、試してみる価値はあります。

D: Party Town の URL を探していたのですが、Google で検索するとなかなか見つからないので、GitHub にありました。

J: はい。共有できるリンクを送信しました。とてもベータ版です。それはまさにGitHubです。現時点では非常にオタクで開発者です。

The Pareto Pickle - 100 個の小さな変更を加える

D: パレートピクルスで締めくくりましょう。つまり、パレートは、20% の努力から 80% の結果を得ることができると言っています。適度な労力で信じられないほどの結果が得られる、お勧めの SEO アクティビティを 1 つ挙げてください。

J: 私ができる最善のアドバイスは、SEO に最適なパレートを無視することです。私は、これがもうそのように機能するとは思わない。あなたが 100 年前に実店舗を経営している私たちの祖父母である場合、これは素晴らしいアドバイスだと思います。私たちの生態系は違うと思います。特に SEO の場合、勝つ方法は 100 個の小さな変更を加えることです。今日と明日、死ぬまで 1 つずつ繰り返します。そうしないと、競合他社の動きが速くなります。品質、ブランド、ビジネスがすべてです。あなたが戦術的に「ああ、これをやりなさい」と言うことができるものは何でも、競合他社もそれを行うことができます.

そうです、あなたのブランドの評判を倍増させるような賢い答えが潜在的にいくつかあります。それは間違いなくうまくいくからです. しかし、それはとても複雑なことです。そして、それについて考えるより良い方法は、今日の午後、何を改善できるかということだと思います. そして、行ってそれをしてください。そして、彼らは巨大である必要はなく、ただ反復して改善するだけです.

D:物事に優先順位を付ける必要はありません。しかし、他のものよりも大きな影響を与えるものがあることは確かです。

J: ええ、でも大きなことはすべて、より良い解決策、より良いコンテンツ、より製品と市場の整合性、または聴衆を感動させて助けることが判明するだけですが、それらのどれもあなたができる具体的で戦術的なことではありません.

あなたが何を知っている、私は私の心を変更します。できることの 80% は、Cloudflare を入手することです。

D: 私はあなたのホストである David Bain です。 Jono さん、In Search SEO ポッドキャストにご参加いただき、誠にありがとうございました。

J: 来てくれてありがとう。これはうれしかったです。

D: 聞いてくれてありがとう。