2 つの簡単なステップで Web サイトのパフォーマンスを向上させる

公開: 2023-12-22

オフィスのラップトップでウェブサイトを更新する男性。

したがって、よりパフォーマンスの高い Web サイトが必要になります。 最も基本的なレベルでは、検索エンジンが Web ページの本文コンテンツにできるだけ早くアクセスできること、およびページが速く読み込まれることを確認する必要があります。

そうは言っても、これらの要件の両方に役立つ 2 つのシンプルな SEO のベスト プラクティスは次のとおりです。

  1. CSS（カスケードスタイルシート）の外部化
  2. JavaScript の外部化

この記事では、その理由を説明し、始めるための簡単な手順をいくつか紹介します。

  • CSSとは何ですか?
  • JavaScriptとは何ですか?
  • なぜ Javascript と CSS を外部化するのでしょうか?
  • JavaScript と CSS はすでに外部化されていますか?
  • Javascriptを外部化する方法
  • CSSを外部化する方法
  • 小さな一歩、大きな影響
  • FAQ: CSS と JavaScript を含む 2 つの簡単な手順を使用して Web サイトのパフォーマンスを向上するにはどうすればよいですか?

CSSとは何ですか?

カスケード スタイル シート (CSS) は、フォントや色など、Web サイトの外観と雰囲気を作成するために HTML コードを Web ページにどのように表示するかを記述します。

JavaScriptとは何ですか?

JavaScript は、検索ボックス、音声とビデオ、地図など、Web ページでの対話機能を可能にするプログラミング言語です。

JavaScript と CSS を外部化する理由

Web サイトのコードを検索エンジンに適したものにしたいと考えています。 したがって、検索エンジン スパイダーが簡単にクロールして Web ページの内容を理解できるように、基礎となるコードを作成する必要があります。

これは、検索エンジンが検索クエリの関連性を判断できるようにするために必要です。 検索エンジンが最初にクロールすべきことの 1 つは、不要なコード行ではなく、Web ページの本文コンテンツです。

ウェブサイトも高速であることが必要です。 Google などの検索エンジンは、ユーザー エクスペリエンスのためにウェブページのパフォーマンスを重視しており、それに特化したランキング シグナルを含むページ エクスペリエンス アルゴリズムのアップデートをリリースしました。

CSS と JavaScript はどちらも Web ページを乱雑にし、読み込みを遅くし、検索エンジンのクロールを困難にする可能性があります。 コードの最初の 100 行で、Web ページ上の実際の本文コンテンツにアクセスできるようにしたいとします。

これらのファイルを外部化すると、先ほど述べた問題を簡単に解決できます。 これにより、ページの読み込み時間が短縮され、ランキングが大幅に向上し、クロール予算が節約されます。

CSS を外部化する利点

外部 CSS ファイルを作成すると、Web サイトの外観を 1 か所で制御できるため、変更を加える場合に Web サイトのすべてのページを編集するよりもはるかに効率的です。

CSS ファイルがある場合は、外部ファイルに変更を加えるだけで済み、その変更はサイト全体に適用されます。

外部 CSS ファイルを使用すると、他にも利点があります。 これにより、フォント タグなどのインライン書式設定を削除し、適用するスタイルを指示する CSS タグに置き換えることができます。 これにより、Web ページを乱雑にするコードが減ります。

コードが少ないほど、ファイル サイズも小さくなります。 ファイル サイズが小さいほど、Web ページの読み込みが速くなります。

JavaScript を外部化する利点

JavaScript 用の外部ファイルを作成すると、同様の利点があります。 JavaScript を個々の Web ページから外部ファイルに移動する場合、Web ページに必要なのは、情報を得るために JavaScript ファイルを呼び出す 1 行のコードだけです。

JavaScript は長くて扱いにくい傾向があるため、これを 1 つ実行するだけで、Web ページのサイズを半分に減らすことができます。

JavaScript と CSS はすでに外部化されていますか?

CSS と JavaScript が外部化されているかどうかを簡単に確認できます。 Web サイトのホームページにアクセスして、ソース コードを確認します。 ソースを表示するには、ページを右クリックして「ページのソースを表示」を選択します。

BruceClay.com の「ページ ソースの表示」のスクリーンショット。
BruceClay.com の「ページ ソースの表示」のスクリーンショット

以下は、Web ページ上の外部化されていない JavaScript のコードのサンプルの例です。

<script language=”javascript”>

var _pn=”あなたの+無過失+権利”; //ページ名

var _mlc=”いいえ+障害+アドバイス”; //マルチレベルコンテンツカテゴリ

var _cp=”null”; //運動

var _acct=”WE531126G4MC09EN3”; //口座番号

var _pndef=”タイトル”; //デフォルトのページ名

var _ctdef=”フル”; //デフォルトのコンテンツカテゴリ

var _prc=””; //コマース価格

var _oid=””; //コマース注文

var _dlf=””; //ダウンロードフィルター

var _elf=””; // リンクフィルターを終了します

var _epg=””; //イベントページ識別子

</script>

これは、JavaScript がページ コードで貴重なスペースをどのように占有するかを示すサンプルにすぎません。 Web サイトに外部化する必要がある JavaScript 行が多数 (30 以上) 含まれるのは通常のことです。

あるいは、外部 JavaScript ファイルを使用すると次のようになります。

<script type=”text/javascript” src=”/sample.js”></script>

以下は、外部化されていないスタイル シートの例です。

.content { クリア: 左;

背景色: #ffffff;

背景画像: URL(“/images/movie_reel2.jpg”); /* 小型リール */

/* 背景画像: URL(“/images/movie_reel.JPG”); 大型リール */

背景位置: 100% 100%; /* 右下隅 */

背景リピート: リピートなし;

境界線: 2px 実線 #666666;

ボーダースタイル: 実線 実線 なし 実線;

パディング: .5em 1em 1em 1em;

マージンボトム: 0em;

マージントップ: 0em;

テキスト整列: 左;

}

h1 {

フォントファミリー: Georgia、Times New Roman、Times、サンセリフ;

フォントサイズ: 18px;

フォント スタイル: イタリック体。

フォントの太さ: 太字;

色: #003399;

テキスト整列: 中央;

}

Web サイトでは、Web サイト内の多数のページから呼び出せる単一のファイルに CSS を含めるのではなく、Web ページに CSS をハードコーディングするのが一般的です。

外部 CSS ファイルを使用すると次のようになります。

<link rel=”stylesheet” href=”styles.css”>

JavaScript を外部化する方法

最初に言及しなければならないのは、正確な追跡やページ機能などのために、Web ページに JavaScript コードが必要になる場合があるということです。

追跡と機能を除けば、すべての JavaScript コードがページ速度に悪影響を与えるわけではないため、外部化する必要があります。

実際、JavaScript がページのレンダリングをブロックする場合など、インライン JavaScript を使用すると、ページの読み込み時間とパフォーマンスが向上する場合があります。

ページの上部でインライン JavaScript を使用すると、大きな JavaScript ファイルが読み込まれるのを待たずに、ページの上部のコンテンツがユーザーに表示されるようになります。

したがって、JavaScript を外部化する方法は次のとおりです。

  1. Web ページの HTML ソース コードで開始タグと終了 <script> タグを見つけて、外部化する JavaScript コードを特定します。
  2. <script> と </script> の間にある JavaScript コードを切り取ります。
  3. メモ帳などのテキスト エディタを使用して新しいドキュメントを作成し、JS コードを新しい空のドキュメントに貼り付けます。
  4. ファイル拡張子「.js」を付けてファイルを保存します。
  5. ファイルをサーバーにアップロードし、そのパスをメモします。
  6. 元の HTML ファイルに戻り、以下を挿入します。ここで、「path/filesource.js」は、新しく作成された .js ファイルの URL です。
    <script language=”JavaScript” src=”path/filesource.js”></script>
  7. これで、埋め込まれた JavaScript コードが 1 行だけで置き換えられます。

検索エンジンが Web ページをクロールするとき、ページの残りの部分に進む前に読み取るコードは 1 行だけです。

その後、これは Google のページ エクスペリエンス アルゴリズムの更新、特に最初の入力遅延に役立ちます。 (FID は 2024 年 3 月に Interaction to Next Paint (INP) に置き換えられることに注意してください。)

CSS を外部化する方法

スタイル シートを外部化するには、.css ファイル拡張子を付けてファイルを保存する点を除き、JavaScript ファイルの場合と同じ手順に従います。 元の Web ページ コードでは、すべての CSS コーディングを次のものに置き換えます。

<link href=”cssfilename” rel=”stylesheet” type=”text/css”>

もう一度、元のページに 1 行のコードが残るので、スパイダーのサイト インデックス作成がより簡単になります。

小さな一歩、大きな効果

JavaScript と CSS を外部化しても Web サイトのパフォーマンスの問題は解決されませんが、良いスタートにはなります。

私たちが協力したあるクライアントは、これら 2 つのベスト プラクティスを実装し、20,000 行のコードを 1,500 行に削減しました。 その後、Web サイトのランキングは大幅に向上し、多くのキーワードでオーガニック検索結果のトップに浮上しました。

はい、これは効果的であり、Web ページのパフォーマンスを向上させるための良いスタート地点となります。

ウェブサイトの速度と検索ランキングを上げるためにサポートが必要ですか? 無料相談についてはお問い合わせください。

FAQ: CSS と JavaScript を含む 2 つの簡単な手順を使用して Web サイトのパフォーマンスを向上するにはどうすればよいですか?

Web 開発の動的な状況において、Web サイトのパフォーマンスを最適化することは、ユーザーの満足度と検索エンジンのランキングにとって非常に重要です。 CSS と JavaScript を効果的に活用すると、サイトの速度と機能が大幅に向上します。 ウェブサイトのパフォーマンスを向上させるための 2 つのシンプルかつ強力なテクニックを詳しく見てみましょう。

CSS ファイルと JavaScript ファイルを縮小して連結する

Web サイトの速度を最適化するには、ファイル サイズを削減することが最も重要です。 複数の CSS または JavaScript ファイルを 1 つに結合すると、HTTP リクエストが最小限に抑えられ、読み込み時間が短縮されます。 縮小化は、コードの機能を変更することなく、不要な文字 (空白、コメント) を削除します。

洞察に満ちたヒント: Grunt や Gulp などのビルド ツールを使用して、自動化された縮小および連結プロセスを実行します。 より迅速にファイルを配信するには、コンテンツ配信ネットワーク (CDN) の使用を検討してください。

非クリティカルなリソースに対する遅延読み込みの実装

遅延読み込みでは、必須ではないリソースの読み込みは、必要になるまで延期されます。 たとえば、スクロールしないと見えない範囲にある画像や 2 番目の JavaScript を非同期的に読み込むことができ、ページの初期読み込み速度が向上します。

洞察力のあるヒント:画像の `loading=”lazy”` 属性を利用して、画像がビューポートに入ったときのみ画像を読み込むようにブラウザに指示し、ユーザー エクスペリエンスと読み込み時間を最適化します。

購入者意図の検索用語とその役割

効果的な最適化には、購入者の意図する検索用語を理解することが極めて重要です。 「Web サイトの速度向上テクニック」、「CSS と JavaScript の最適化」、または「遅延読み込みの実装」などの用語は、Web サイトのパフォーマンスを向上させたいというユーザーの意図を示しています。 これらの用語をコンテンツに組み込むと、ユーザーのクエリに合わせて、可視性が向上します。

ユーザーエクスペリエンスとSEOに対するパフォーマンスの影響

最適化された Web サイトのパフォーマンスはユーザー エクスペリエンスに直接影響し、エンゲージメントを高め、直帰率を削減します。 さらに、検索エンジンは読み込みの速いサイトを優先し、SEO ランキングにプラスの影響を与えます。

美しさとパフォーマンスのバランス

パフォーマンスの最適化は重要ですが、視覚的に魅力的な Web サイトを維持することも同様に重要です。 美しさと機能性のバランスを見つけることで、スピードを犠牲にすることなく魅力的なユーザー エクスペリエンスを実現します。

継続的なモニタリングとテストの役割

Web サイトのパフォーマンス指標を定期的に監視し、テストを実施することが、最適な機能を維持する鍵となります。 Google PageSpeed Insights や Lighthouse などのツールは、パフォーマンスのボトルネックの特定を支援し、タイムリーな調整を可能にします。

将来のトレンド: 最適なパフォーマンスを実現する戦略の進化

テクノロジーの進歩に伴い、HTTP/3 や強化された JavaScript フレームワークなどの新たなトレンドにより、パフォーマンス最適化戦略が再構築され続けています。 これらのトレンドを常に最新の状態に保つことで、Web サイトの競争力を維持し、適切に最適化することができます。

CSS と JavaScript の最適化によって Web サイトのパフォーマンスを向上させることは、Web 開発を成功させるための基礎です。 ファイルの縮小、遅延読み込みなどの手法を採用し、進化するトレンドに常に対応することで、ユーザー エクスペリエンスが向上し、デジタル領域でのサイトの可視性が強化されます。

段階的な手順: Web サイトのパフォーマンスを向上させる

  1. 現在のパフォーマンス指標を評価する: Google PageSpeed Insights などのツールを使用して、改善すべき領域を特定します。
  2. CSS と JavaScript の縮小化を実装する: ビルド ツールまたはオンライン サービスを利用して、ファイルを圧縮して結合します。
  3. コンテンツ配信ネットワーク (CDN) を検討する: ファイル配信を高速化するには、CDN を選択します。
  4. 遅延読み込みの機会を評価する: 遅延読み込みに適した非クリティカルなリソースを特定します。
  5. 遅延読み込みの実装: 画像または二次スクリプトの非同期読み込みに `loading=”lazy”` 属性を統合します。
  6. 購入者の意図する検索用語を調査する: Web サイトのパフォーマンスに関連するユーザーのクエリを理解します。
  7. 購入者意図のキーワードを統合する: コンテンツに関連する用語を組み込んで、視認性を高めます。
  8. パフォーマンス指標を監視する: 指標を定期的に分析し、それに応じて戦略を調整します。
  9. 美しさと機能性のバランス: スピードを犠牲にすることなく、視覚的な魅力を確保します。
  10. 新しいトレンドを常に最新の状態に保つ: 将来を見据えた戦略のために Web 最適化の発展を追跡します。

この包括的なステップバイステップ ガイドでは、CSS と JavaScript の最適化手法を使用して Web サイトのパフォーマンスを効果的に向上させるための詳細なロードマップを提供します。 これらの手順に従うことで、ユーザーの期待と検索エンジンのアルゴリズムに共鳴する、合理化された高パフォーマンスの Web サイトが保証されます。