ページ速度の最適化：読み込み時間を改善する方法

ウェブサイトの読み込み時間は、1つの単純な理由で重要です。それは、ユーザーの全体的なエクスペリエンスに大きな影響を与えるということです。 したがって、Webサイトのパフォーマンスを向上させるための最も重要な考慮事項の1つは、ページ速度を最適化する方法です。

この包括的なガイドでは、ページ速度を測定する方法（無料および有料のツールを使用）、ユーザーの速度を低下させる原因、および読み込み時間を最適化する26の方法を学習します。 さぁ、始めよう。

コンテンツ

1.ページ速度について知っておくべきことすべて
2.ページ速度を測定するためにどのツールを使用する必要がありますか
3.Webサイトの読み込みにかかる時間
4.ページ速度を最適化する方法
5.高速WebサイトのOnPage対策
6.自動ページ速度の最適化

ページ速度について知っておくべきことすべて

ウェブサイトの読み込み時間が重要なのはなぜですか？

速いロード時間が非常に重要である理由は複数あります。

1.ユーザーエクスペリエンスの向上： Googleは、読み込み時間が長くなるとバウンス率に深刻な影響を与えると考えています。 実際、読み込み時間を1秒から6秒に増やすと、バウンス率が106％増加する可能性があります。これが、パフォーマンスのコアWebバイタルの1つになっている理由です（以下を参照）。

2. SEOランキング要素： Googleやその他の検索エンジンにとって、ポジティブなユーザーエクスペリエンスは、ウェブサイトの品質を決定する重要な要素です。 これが、GoogleがコアWebバイタルの1つとしてページ速度を使用する理由です。 したがって、サイトの読み込みが速いほど、ランキングが高くなる可能性が高くなります。

3.コンバージョン率の最適化：この調査によると、読み込み時間を1秒遅らせると、コンバージョンを最大7％削減できます。 これは最初はそれほど重要ではないように聞こえるかもしれませんが、オンラインショップで1日あたり1,000ユーロの売り上げが発生する場合、読み込み時間が1秒遅れると、1日あたり70ユーロ、1か月あたり約2,100ユーロの損失が発生する可能性があります。 これを年間ベースで計算すると、ページ速度が遅いことが実際の売上高のキラーになります。

4.クロール： Googlebotのクロール予算は限られているため、読み込みが遅いWebサイトはクロールが遅く、それほど集中的にクロールされません。 したがって、読み込み時間が速くなると、サイトがより頻繁にクロールされる可能性があります。つまり、Googleのインデックスのコンテンツの関連性も高くなります。

ページ速度はどのように測定されますか？

一般に、Webサイトの読み込み時間は、Webサイトが呼び出されてから、ブラウザに完全に表示されるまでの時間（秒単位）です。 「読み込み時間」と「ページ速度」という用語は同じ意味で使用されます。 Webでトピックを検索すると、両方のバリエーションが見つかります。 ウェブサイトの読み込み時間は、4つの異なる測定値に分割することもできます。

• 最初のバイトまでの時間（TTFB） ：Webサイトが呼び出されてから、Webサーバーによって最初のバイトがロードされるまでの時間。
• First Contentful Paint（FCP） ：表示要素がブラウザーに初めて表示される時刻。
• First Meaningful Paint（FMP） ：ユーザーがWebサイトがロードされているという印象を持っている時間。
• Time to Interactive（TTI） ：Webサイトがレンダリングされ、ユーザー入力の準備ができた時間。

この記事では、ページ速度の測定方法を正確に知ることができます。

ページ速度を測定するためにどのツールを使用する必要がありますか

読み込み時間を分析および最適化するために利用できる多くのツールがあります。 ログファイル分析など、Webサイトの読み込み時間を決定する方法は他にもあります。

PageSpeed Insights

読み込み時間を測定するためのこのGoogleツールは、常に更新および改善されています。 Pagespeed Insightsの最新バージョンは、Chromeブラウザの拡張機能としても利用できるWebサイト最適化ツールであるLighthouseに基づいています。 ChromeユーザーエクスペリエンスレポートであるCrUXのデータを使用します。

ドメインに入ると、ツールは0〜100の速度スコアを計算します。Pag​​eSpeedInsightsは、モバイルデバイスのスコアとデスクトップのスコアを区別します。 モバイルスコアは標準として使用され、多くの場合非常に低くなります。これは、Googleがウェブサイト運営者にモバイルバージョン専用にウェブサイトを最適化するように動機付けたいためです。 速度スコアの下に、個々の測定値が表示されます。 それらの色分けは、問題の深刻さを判断するために使用できます。

図1： GooglePageSpeedInsightsのスタートページ

グーグルアナリティクス

Google Analyticsを使用してWebサイトを分析すると、「パフォーマンス」領域に読み込み時間に関する統計が表示されます。 「ウェブサイトの速度」をクリックします。 eコマーストラッキングをインストールしている場合は、読み込み速度がコンバージョンにどのように影響するかを直接評価できます。

Google検索コンソール

Google検索コンソールでは、メニューポイント[クロール]の下に読み込み時間が表示されます。 ここには、1日にダウンロードされるキロバイト数と、Googlebotがサイトの1つをダウンロードするのに必要なミリ秒単位の時間が表示されます。 これにより、Webサイトの読み込み時間に関する問題を簡単に見つけることができます。

ライト

RyteのプラットフォームのWebPerformanceで、「LoadingTimes」レポートにページのスコアの概要が表示されます。 この概要の下に、個々のページの「接続時間」、「最初のバイトまでの時間」、および「ロード時間」のスコアに関する詳細情報も表示されます。

別の「コアウェブバイタル」レポートもあります。このレポートには、読み込み速度（「最大コンテンツペイント」で測定）、双方向性（「最初の入力遅延」）、視覚的安定性（「累積レイアウトシフト」）。

Yslow

YslowはYahoo!によって開発されました。 ブックマークレット、コマンドセンターのツール、またはブラウザ拡張機能として使用できます。 速度のルールはYahoo!の仕様に基づいています。 このツールは、コマンドライン機能があるため、上級ユーザーにとっても興味深いものです。 Firefox経由でプラグインを使用するには、プラグインFirebugもインストールする必要があることに注意してください。

図2： Yslow

Pingdom

Pingdom.comを使用するには、登録する必要があります。 読み込み時間を図と統計で示し、評価を簡素化します。 どの要素かを簡単に確認できます。

図3： Pingdom

WebPageTest.org

WebPageTest.orgを使用すると、さまざまなブラウザで読み込み時間をシミュレートできます。 また、さまざまな場所からテストして、他の国からの訪問者がサイトをロードする速度をテストすることもできます。

どちらが速くロードされますか

どちらがより速くロードされるかは、2つのサイトのロード時間を相互に比較します。 一度に最大4つのサイトを比較できるWebサイトスピードランカーも同様に機能します。

ウェブサイトの読み込みにはどのくらい時間がかかりますか？

一般に、満足のいくユーザーエクスペリエンスを得るには、Webサイトの読み込みに2秒未満かかる必要があります。 ロード時間が短いほど良いです。 理想的には、ロードに1秒未満かかるはずです。 Webサイトの読み込み速度は、さまざまな要因によって異なります。 一部では、ページ上の最適化で改善できます。 あなたが影響を与えることができない他の人。

これらの要因には影響しません。

• 帯域幅： Webサイトの読み込み時間は、利用可能なインターネット帯域幅の影響を受けます。 3G接続とスマートフォンを使用すると、高速DSL接続を使用する場合よりもWebサイトの読み込みが遅くなります。
• ブラウザのキャッシュ：ユーザーが長期間キャッシュを空にしていないブラウザを使用している場合、コンピュータのメモリが大量のデータを処理できないため、サイトの読み込みが大幅に遅くなる可能性があります。
• クライアントの処理能力：古いデスクトップコンピューターとスマートフォンでは、メモリと処理能力が不十分なためにDOM構造とスクリプトの実行が遅くなるため、ページの読み込みが遅れる場合があります。

これらの要因に影響を与えることができます：

• ファイルサイズ：ファイルのサイズによって、Webサイトの読み込み速度が決まります。 これには、HTMLコード自体だけでなく、スタイルシート、スクリプトファイル、および画像も含まれます。 ファイルが小さいほど、ページの読み込みが速くなります。
• サーバー接続： Webページが呼び出されると、Webサーバーが要求を処理します。 処理するデータが少ない場合は、処理速度が速くなります。 ウェブサイトのトラフィックが多い状態で同時に多くのリクエストが行われると、メインメモリとプロセッサの容量が使いすぎて、読み込み時間のボトルネックになる可能性があります。 この場合、容量を増やす必要があります。

ページ速度を最適化する24の方法

さて、読み込み時間が重要である理由と、Webサイトでそれらを測定する方法がわかったので、ページ速度を最適化するために試すことができるさまざまな方法を見てみましょう。

1.高速接続時間を作成します

WebサーバーでWebページ要求を処理する前に、Webサーバーとユーザー間の接続を確立する必要があります。 これに費やされる時間は、接続時間、遅延、またはpingと呼ばれます。 これは、RyteプラットフォームのWebPerformanceで測定できます。 理想的には、遅延は100ミリ秒未満です。 接続のセットアップにかなり長い時間が必要な場合は、最適化対策を講じることができます。

2.グローバルリーチにCDNを使用する

オンラインビジネスがグローバルに存在することが重要である場合、接続時間はWebサイトへのアクセス元によって大きく異なる可能性があることにすぐに気付くでしょう。 これは、ノードがWebサーバーが配置されているデータセンターまで地理的に増加するという事実によるものです。

ここでは、コンテンツ配信ネットワーク（略してCDN）が役立ちます。 CDNは、Webサイトがグローバルサーバーネットワークにキャッシュされるようにするため、ユーザーのコンピューターとCDN内の次のサーバーの間に常に少数のノードが存在します。 このサービスは高額な費用がかかりますが、主にドイツ語圏を対象とするWebサイトの運営者にとって必ずしも報われるわけではありません。

CDNを使用するには、プロバイダーに登録する必要があります。 Cloudflareにはいくつかの無料プランがありますが、オファーが無料である条件を正確に確認する必要があります。 料金ベースのプロバイダーは通常、ネットワーク上で毎月使用されるデータ量ごとに課金します。

既知のプロバイダーは次のとおりです。

• Amazon Cloudfront
• Cloudflare
• スタックパス
• wao.io

3.ページ速度に合わせてWebサーバーを最適化します

Webサーバーへの接続が確立されると、この要求は要求されたファイルを処理して提供します。 サーバーサイドスクリプトも呼び出されます。これは、たとえば、データベースからコンテンツを読み取り、出力できるようにします。

4.インフラストラクチャのボトルネックを検出します

Webページの読み込みが遅い場合は、Webサーバーとその基盤となるインフラストラクチャが過負荷になっている可能性があります。 これにはいくつかの原因が考えられます。たとえば、ホスティング事業者にエラーがある場合や、ウェブサーバーが一度に多くのリクエストに応答する必要がある場合などです。

迅速に対応できるようにするには、これらのボトルネックを認識することが重要です。 多くのホスティングソリューションは、サーバーの使用率を監視するためのメトリックを提供します。 上記の測定値のうち、 Webパフォーマンスの下でRyteプラットフォームを使用して測定できる「TimetoFirstByte」も役立つ場合があります。 大幅に増加する場合は、Webサーバーに問題がある可能性があります。

5.サーバー側のキャッシュを使用する

データベースクエリなど、頻繁に要求されるコンテンツをサーバーにキャッシュできるため、要求を何度も実行する必要がありません。 これは、複数の記事を読んだり、製品を表示したりするユーザーにとって特に重要です。つまり、セッションで複数のページを呼び出します。 したがって、最初のページを呼び出した後の読み込み時間を短縮できます。

Webサーバーソフトウェアの設定（Apache HTTPサーバーとNginxが最も頻繁に使用されます）では、サーバー側のキャッシュをアクティブにしてセットアップできます。 必要な知識がない場合は、ホスティングプロバイダーに問い合わせるか、自動化されたクラウドサービスによってキャッシュやその他のPageSpeed測定を実行することができます（以下を参照）。

6.ブラウザのキャッシュを使用する

ブラウザキャッシュを使用すると、Webサーバーのサーバーキャッシュではなく、WebブラウザによってWebサイトの要素がキャッシュされます。 したがって、Webサイトの新しいURLにアクセスするときに、すべての要素を新たにロードする必要はありません。 これにより、読み込み速度が向上します。
ブラウザのキャッシュは、プラグインまたは拡張機能を介して多くのCMSでアクティブ化できます。

WordPressでブラウザをキャッシュするための可能なプラグインは次のとおりです。

• WPロケット
• W3トータルキャッシュ
• WP最速キャッシュ

ブラウザのキャッシュを手動でアクティブ化するには、.htaccessファイルを調整します。 したがって、Apacheサーバーの2つのモジュールmod_headersとmod_expiresをオンにすることができます。

mod_headersを使用する場合、.htaccessは次のコード（ソース– GitHub）で完了する必要があります。

<FilesMatch "。（css | js | gif | pdf | jpg | jpeg | png）$">
ヘッダーセットCache-Control"max-age= 2592000、public"
</ FilesMatch>

角かっこは、キャッシュに配置されるファイル形式に関連しています。 同時に、キャッシュの期間は「年齢」で指定されます。 単位は秒です。 この例では、キャッシュはブラウザによって30日間保存されます。

ブラウザのキャッシュにmod_expiresを使用する場合は、.htaccessファイルを次の行で展開します。

##キャッシュの有効期限##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg「アクセスプラス1年」
ExpiresByType image/jpeg「アクセスプラス1年」
ExpiresByType image/gif「アクセスプラス1年」
ExpiresByType image/png「アクセスプラス1年」
ExpiresByType text /css"アクセスプラス1か月"
ExpiresByType text/html「アクセスプラス1か月」
ExpiresByType application/pdf「アクセスプラス1か月」
ExpiresByType text /x-javascript"アクセスプラス1か月"
ExpiresByType application/x-shockwave-flash「アクセスプラス1か月」
ExpiresByType image/x-icon「アクセスプラス1年」
ExpiresDefault「アクセスプラス1か月」
</ IfModule>
##キャッシュの有効期限

この方法では、ファイルタイプごとに一意の時間枠を個別に決定できます。

7.GZip圧縮を使用する

ファイルが可能な限り小さい場合、ファイルは最速で処理および送信できます。 これは、ユーザーのブラウザにWebサイトを表示するコードにも当てはまります。 zipファイルのように、このコードは圧縮できるため、サイズを小さくすることができます。 次に、圧縮されたデータがブラウザで解凍されます。

この方法は、Webサーバーの計算能力が必要であり、これにも時間がかかるため、長い間懐疑的に見られていました。 ただし、メリットはデメリットを上回っているため、必ず使用する必要があります。 ウェブサイトコードを圧縮するための完全なガイドをお読みください。

gzipでファイルを圧縮するにはどうすればよいですか？

ApacheサーバーはWebサイトで最も頻繁に使用されるため、次の例はApache用です。

mod_deflateとmod_gzipの2つの異なるモジュールが使用されます。

1. mod_deflateモジュールは通常、プリインストールされています。 次のコンソールコマンドを使用して、それがすでに存在するかどうかを確認できます。

sudo apachectl -t -D DUMP_MODULES | grep deflate

「deflate_module（shared）」という出力が表示された場合、mod_deflateはすでにインストールされています。 それ以外の場合は、ホストに連絡してください。

2.次に、Apache構成ファイルである「httpd.conf」を開きます。 通常、「/ etc / httpd /conf/」フォルダにあります。 そこで、次の行を追加します。

AddOutputFilterByType DEFLATE text / text text / html text / plain text / xml text / css application / x-javascript
アプリケーション/javascript

これは、テキストとHTML、CSS、およびJavaScriptコードがGZipで圧縮されていることを示しています。 ファイルを保存し、ApacheWebサーバーを再起動します。 今後、データはApacheによって圧縮されます。

8. HTTP/2を有効にします

デフォルトでは、すべてのWebページファイル（画像やスクリプトなど）はHTTP/1.1プロトコルを使用してロードされます。 これらのファイルは、別の接続を介して次々にダウンロードされます。

これにより、読み込みプロセスが遅くなります。 SSL証明書を使用すると、WebサーバーをHTTP/2プロトコルに切り替えることができます。 HTTP / 2を介して、すべてのファイルが単一の接続を介してダウンロードされます。 それらも優先されます。 すべての一般的なブラウザはプロトコルをサポートしているため、ためらうことなくプロトコルを操作できます。

詳細については、この記事を参照してください：HTTP / 2を使用してWebページの読み込み速度を向上させる方法：初心者向けガイド。

9.画像を圧縮する

ウェブサイトのダウンロード量の比例して最大の部分は画像で構成されています。 これは、多くの製品やポートフォリオWebサイト、特に写真家のWebサイトがあるオンラインショップに当てはまります。

画像のファイルサイズを大幅に縮小できれば、ページ速度を大幅に向上させることができます。 Ryteでの画像圧縮に関する広範な記事をすでに書いています。 これが要約です。

10.すべての画像を最適化する

画像は、ウェブサイトをユーザーにとって明確で魅力的なものにするために重要です。 ただし、画像はWebサイトのファイルサイズを大幅に増加させ、読み込み時間を遅くする恐れもあります。 したがって、Webでの使用に最適化された画像のみを使用する必要があります。

一般に、写真と高品質のグラフィックスはJPEGファイルと見なされ、小さいグラフィックスと色や透明度の少ないグラフィックスはPNGファイルと見なされます。

さらなるステップ：

• GimpやAdobePhotoshopなどの画像処理プログラムを使用して画像をWebサイトにアップロードする前に、画像を圧縮します。 どちらのプログラムも、初心者に「Web用に保存」機能を提供します。 このようにして、ファイルサイズは自動的に最適化されます。 kraken.ioやPNGGauntletなどのツールを使用すると、追加情報を削除してファイルサイズを減らすことができます。
• 対応する画像サイズはソースコードに記載されています。ブラウザがグラフィック自体のサイズを計算する必要がある場合は、読み込み時間を長くすることができます。 指定されたサイズは、サーバーに保存されている画像の元のサイズに対応している必要があります。 CSSを介して画像サイズに関する情報を定義することもできます。
• メタタグとEXIFデータを削除する：たとえば、自分のカメラやスマートフォンの画像を使用する場合、それらには場所、使用するカメラ、その他のデータなどの多くの追加情報が含まれます。 tinypngなどのツールを使用すると、これらを削除してストレージスペースを節約できます。

11.WebP画像形式を使用します

Googleは、WebPを使用して、ロスレス（PNGに類似）とロッシー（JPEGに類似）の両方の画像を圧縮できる新しい画像形式を作成しました。 古いフォーマットよりもさらに効率的です。

すべてのブラウザがまだWebPをサポートしているわけではありません。 したがって、WebPファイルの代替をソースコードに保存し、スイッチをインストールすることは理にかなっています。次に例を示します。

<写真>
<source type = "image / webp">
<source type = "image / jpeg">
<img src = "img / testbild2.jpg" alt = "Fallback-Bild">
</picture>

12.デスクトップサイトとモバイルサイトを区別する

将来的には、全ユーザーの半数以上がデスクトップコンピューターではなくモバイルデバイスを介してWebサイトにアクセスするようになります。 画像に対する要求は、両方の出力メディアで大きく異なります。 デスクトップでは通常、良好なインターネット接続があり、大型のHDモニターでは、ユーザーはそれに応じて最高品質の高解像度画像を求めています。

一方、モバイルエンドデバイスでは、Webサイトは移動中にアクセスされることが多く、したがって、最高の帯域幅ではアクセスされません。 ディスプレイが小さいということは、品質要件が低いことも意味します。

さらに、画面フォーマットにより、画像はデスクトップとは異なる解像度で表示されます。 したがって、出力メディアを区別し、画像の2つのバリエーションを作成することは理にかなっています。

WebPの前の例と同様に、この目的のためにスイッチをWebサイトのコードに格納することもできます。 たとえば、CSSを使用すると、画面の解像度を照会できるため、表示を出力メディアに適合させることができます。

13.遅延読み込みを設定します

製品の概要とフォトギャラリーでは、一度に多くの写真が表示されます。これにより、読み込み時間が大幅に遅くなります。 これは、ショップの運営者や写真家にとって特に問題であり、オンラインショップでは、ホームページや商品カテゴリの最初のページであることが多いため、特に厄介です。

ただし、この方法で読み込まれた画像の多くは、ユーザーがページを下にスクロールしたときにのみ表示されます。 したがって、ユーザーが「折り目の上の」部分を見るときに、それらがすでにロードされている必要はありません。

「遅延読み込み」と呼ばれる方法を使用すると、フォルダの下の画像が実際にビューポートに表示されたときにのみ読み込まれるようにすることができます。

14.ソースコードをクリーンアップします

WebサイトのURLが呼び出されると、クライアントまたはブラウザがHTMLドキュメントのソースコードを1行ずつ追跡します。 空の文字または改行がすべて読み取られます。 余分な空の文字が1つでも、Webサイトのパフォーマンスに悪影響を与えることはありません。

ただし、Webサイトは、そのサイズによっては100行を超えるソースコードで構成されている可能性があるため、余分な空の文字やコメントがたくさんあると、読み込み時間に明らかに影響を与える可能性があります。

したがって、ソースコードを最小限に抑える必要があります。

• 不要なコメントをすべて削除します。
• 余分な空の文字をすべて削除します。
• たとえば、「<strong> </ strong>」などのソースコードにコンテンツのないフォーマットが見つかった場合は、不要なフォーマットを削除します。

余分なソースコードを避けるために、常にHTMLとしてフォーマットされたテキストをWebサイトに挿入するか、CMSエディターを使用するか、テキストを挿入してからプレーンテキストとしてフォーマットする必要があります。 Wordまたは別のOfficeプログラムからのテキストをCMSに直接統合すると、余分なソースコードが生成されます。

さらに、ソースコードからすべてのスペースとコメントを削除できるプログラムがあります。 これらのプログラムを使用する場合は、縮小されたファイルがほとんど読み取れないため、編集用に常にコピーを保持する必要があります。

15.外部スクリプトを減らす

共有ボタンであろうとトラッキングコードであろうと、外部スクリプトはさまざまな方法でさまざまな目的でWebサイトに統合できます。 これにより、別のソースからのこれらのスクリプトの可用性に依存するようになります。

スクリプトの取得元のWebサーバーが特に遅い場合は、Webサイトの読み込み時間も遅くなります。 したがって、これらのスクリプトが本当に必要かどうかを確認してください。

その他のヒント：

• 非同期トラッキングコードのみを使用してください。 これらは、サイトがレンダリングされるまでロードされず、サイトのロードを妨げることはありません。
• Googleタグマネージャーなどのツールを使用します。 つまり、多数のトラッキングコードのソースコードに統合する必要があるコードスニペットは1つだけであり、読み込み時間に大きな影響はありません。
• 可能であれば、スクリプトをWebサーバーに保存し、外部から統合しないようにする必要があります。
• iFrameの数を減らします。

16.JavaScriptとCSSを外部委託する

JavaScriptは、ブラウザで、したがってクライアントコンピュータで関数を実行できるスクリプト言語です。 CSS（Cascading Style Sheets）を使用して、Webサイトの形式と表現を定義できます。 これらの要素には多くのソースコードが必要であり、URLが要求されるたびに再度ロードする必要があります。 これには時間がかかります。

ソースコードを減らすために、CSSファイルとJavaScriptファイルを外部委託することができます。 その後、それらは1つのドキュメントにマージされます。 1回の取得のみが必要です。 ブラウザがファイルをキャッシュにロードすると、ロード時間を再び短縮できます。

JavaScriptを外部委託する方法：

Webサイトのソースコードをエディターで表示します。 次に、すべてのJSファイルを切り取り、すべてのコードスニペットを挿入する新しいテキストファイルを作成します。 ファイルをmain.jsとして保存し、サーバーのサーバー上の他のすべてのHTMLファイルが含まれているフォルダーに保存します。

WebサイトのHTMLコードで、次のコマンドを削除します。

と

削除したコマンドを次のコマンドと交換します。

17.CSSおよびJavaScriptファイルを最小化します

不要な空の文字を削除することで、CSSとJavaScriptのサイズを減らすことができます。 これらは「空白」とも呼ばれます。 このようにして、たとえば、ソースコードを1行だけに減らすことができます。

使用可能な空の文字を含むコードスニペット：

CSSコードと空の文字：

空白やコメントを削除すると、読みやすさが大幅に低下します。 理想的には、2つのバージョンで作業する必要があります。編集可能なすべてのスペースとコメントを含むバージョンと、Webサイトに表示するバージョンです。

行ったすべての変更を複製する必要がないように、たとえば、プログラムを使用して変更を「縮小」することもできます。 特別なツールを使用して、JavaScriptとCSSを最小限に抑えることもできます。 推奨されるツールは次のとおりです。

• CSSファイル用のYUICompressorまたはcssmin.js
• JavaScript用のクロージャコンパイラ

18.最後にJavaScriptとCSSをロードします

すべてのJavaScriptファイルとCSSファイルが読み込まれるまで、Webサイトは完全には表示されません。 ロードプロセスを容易にするために、HTMLコードの最後にJavaScriptとCSSを挿入できます。 サーバーが遅い場合でも、サイトの開発に影響はありません。

したがって、CSSファイルの理想的な位置は、Webサイトの<head>領域です。 ただし、JavaScriptをWebサイトのフッターに組み込む必要があります。

ファイルの可能な統合は次のように表示されます。

19.背景にCSS3を使用する

Webサイトで使用される各画像には、数行のコードが必要です。 このコードは、Webサイトが呼び出されたときに1行ずつ読み取られます。 ボタン、アイコン、または背景をグラフィックとして保存する場合、ブラウザはWebサイトをロードするのに多くの時間を必要とします。

解決策は、CSS3を介して写真以外のすべてのグラフィック要素を生成することにあります。 このようにして、ソースコードを削減します。 同時に、ファイルはすべてのエンドデバイスで同じ高品質で表示されます。

20.プリフェッチとプリレンダリングを使用する

プリフェッチテクノロジーを使用している場合、サイトが完全に読み込まれる前であっても、ブラウザはWebサイトの特定の要素をキャッシュに保存します。 このようにして、Webサイトのレンダリングを妨げることなく、画像、グラフィックス、またはJavaScriptとCSSをロードできます。

ファイルをプリフェッチできるように、ソースコードを調整する必要があります。 この場合、目的の要素の前に属性rel =” prefetch”が付けられます。

例：

<link rel = "prefetch" href = "// mysite.com/example-image.jpg">

ここでは、別のサイトがロードされる前でも、例がリロードされます。 したがって、新しいサイトビューでの読み込み時間が短縮されます。

事前レンダリング方法を使用する場合、完全なWebサイトが事前にブラウザからダウンロードされ、一時的にキャッシュに保存されます。 これには、完全なレンダリングに必要なすべてのファイルが含まれています。 事前にレンダリングされたWebサイトは、呼び出されたときにほぼ遅滞なくロードできます。 したがって、ロード時間は50ミリ秒未満に短縮されます。

事前レンダリングを実装するには、アクセスするWebサイトのソースコードに次の行を挿入する必要があります。

<link rel = "prerender" href = "// prerendering-site.com/index">

21.301リダイレクトを減らす

301リダイレクトは、コンテンツの重複を回避したり、再起動後に古いURLを新しいURLにリダイレクトしたりするのに最適です。 ただし、リダイレクトするたびに読み込み時間が長くなりますが、それほど大きくはありませんが、ブラウザがリダイレクトに遭遇するたびに、新しいURLを取得する必要があり、ブラウザはhttpリクエストが返されるまで待機する必要があります。 複数の310リダイレクトが互いに続く場合、ロード時間が大幅に増加する可能性があります。

>>リダイレクト：初心者向けガイド<<

リダイレクトが多すぎるのを避けるために、URL構造または新しいURLの開発を文書化する必要があります。 確立された301リダイレクトについても同じことが言えます。 Webサイトの分析で複数の転送が見つかった場合は、1つ以上のリダイレクトに迂回することなく、最初の転送を実際のリンク目標に直接誘導する必要があります。

22.悪いリクエストを避ける

Webブラウザなどのクライアントがサイトにアクセスすると、ファイルを表示できるように各リソースにリクエストが送信されます。 それでもこれらのリソースが画像やJavaScriptファイルの形式で見つからない場合は、読み込み時間を浪費するリアクションチェーンにつながる可能性があります。

間違ったファイルを修正し、正しいパスを指定するか、新しいファイルに転送することで、不正なリクエストを簡単に回避できます。

23.AMPを使用する

Googleは、Accelerated Mobile Pagesを使用するウェブマスターに、ほとんど遅れることなくモバイルウェブサイトを読み込む機会を提供しています。 この目的のために、サイトはモバイルデバイスで表示できるように特定の要件を満たす必要があります。

WordPressなどの多くのCMSでは、プラグインを使用してAMPを使用できます。 これまで、AMPはオンラインショップでは使用できませんでした。 ただし、これは開発者によって想定されています。

その他のリソース：

• AMPプロジェクトのホームページ
• WordPress-AMP-プラグイン

24.自動ページ速度最適化を試してください

このガイドでは、ページ速度を向上させるための多くの対策を学びました。 ただし、これらの対策のほとんどは、技術的な知識とそれらを実装するための時間を持っている必要があります。

これら2つのいずれかがハードルになる場合は、ページ速度の最適化を自動化されたサービスに任せることができます。

自動ページ速度最適化のためのクラウドサービスwao.ioは次のように機能します。コンテンツ配信ネットワークのように、wao.ioはWebサイトを一時的に保存し、メニューから定義できる手段を実行します。 インテリジェントな画像圧縮とコード最小化に加えて、これには遅延読み込みなどの高度な手段も含まれます。

wao.ioはまた、セキュリティ攻撃から保護し、Webサイトの監視とユーザー数のメトリックを提供します。

結論

Webサイトには、ページの読み込み時間を改善するために使用できる調整ネジが多数あります。

この記事では、いくつかの可能性を発見しました。 いくつかの方法は、初心者やSEO初心者にとっても非常に簡単に実装できます。

それらのほんの一部を試してみても、あなたはあなたのウェブサイトをより速くし、あなたのユーザーをより幸せにし、そしてより良い検索ランキングで報われることができると確信しています。