Gtmetrixエラーを修正してサイトの速度を向上させる方法は？

サイトの速度は、最適化と SEO の基準において最も重要な要素の XNUMX つです。 Gtmetrix は、サイトの速度を測定するための最良かつ最も実用的なツールの XNUMX つです。

実際、読み込み速度は Google のランキングと SEO にとって最も重要な要素の XNUMX つです。 一方、読み込み速度を向上させることは、ユーザーに与える「第一印象」の向上につながります。 したがって、サイトの速度を向上させることで、検索エンジンと UX 要素に関して Web サイトを最適化することになります。

読み込み速度を測定するためのさまざまなツールが多数あります。 GTmetrix、Google Page Speed、Pingdom、Web Page Test など。 GTmetrix はリストの中で最高の XNUMX つであると言えます。 この記事では、GTmetrix、その機能、およびテスト中に表示される最も重要なエラーについて説明します。

サイトの速度は Web サイトによって異なり、使用しているテーマ、インストールしたプラグイン、使用したカスタマイズされたコード、遵守した最適化要素、その他言及できる多くの要素などのさまざまな要因によって異なります。

たとえば、下の図では、いずれかのテスト結果が表示されます。 Deep 驚くべきことを示すテーマのデモ ページスピード。この結果は、このテーマが開発者チーム自体によって完全に最適化されており、サイト速度の最適化について心配する必要がないことを示しています。

これは、テーマがいかに重要であるかを示しています。 この要素を考慮する必要があります テーマを購入する、特にWordPressでは。 本来の目的を貫きましょう。 GTmetrix のエラーとその解決策について説明します。

GTmetrix とは正確には何ですか?

GTmetrix 自体から引用しましょう。

GTmetrix は、サイトのパフォーマンスに関する詳細なレポートを取得するために、ますます使用しているツールの XNUMX つです。 これは、Google Page Speed と YSlow を使用してページの速度パフォーマンスを分析する無料のツールです。 GTmetrix はページのスコアを生成し、修正方法に関する実用的な推奨事項を提供します。

GTmetrix は Web サービスであるだけでなくプラグインでもあり、プラグインを使用したくない場合は、「gtmetrix.com」にアクセスして Web ベースのバージョンを使用できます。

一方、GTmetrix インタラクティブ ブックマークを Firefox、Chrome、 Safari、または Internet Explorer ブラウザ。

最適化された GTmetrix 要素 (PageSpeed および YSlow) の重要性:

サイト訪問者に快適なUX（ユーザーエクスペリエンス）を提供するには、スピードが重要な要素です。 これにより、訪問者の注意と集中力が確実に Web サイトの実際のコンテンツを参照できるようになり、本物のコンテンツに時間を費やして、Web サイトの画像やスクリプトの読み込み時間が短縮されます。

研究によると、ユーザーは 4 秒を超えるロード時間を許容しないことがわかっています。

サイトの応答や読み込みが速いと、ユーザーは Web サイトから離れてしまいます。 SEOの観点から、GoogleはランキングアルゴリズムにPageSpeedスコアを使用することに言及している。 つまり、PageSpeed 要素を使用すると、Web サイトのランクが上がる可能性があります。

開発者およびマーケティング担当者として、Web サイトの最適化を検討している場合、PageSpeed は検討すべき最適化の最優先事項の XNUMX つである必要があります。また、Web サイトとクライアント サイトのこの作業を支援するホワイトラベル パートナーを探している場合、最善の策は次のとおりです。 WordPress サービスのスピードアップ 我々によって。

これをチェックアウト： WordPress サイトのパフォーマンスを高速化する方法 Speed Ultimate 2020 ガイド?

ページスピード

PageSpeed は、さまざまなルールに対するページの適合性を評価します。 これらのルールは、Web 開発のどの段階でも適用できる一般的なフロントエンドのベスト プラクティスです。

YSlowの

YS低成績 Web ページは、XNUMX つの事前定義ルールセットのいずれか、またはユーザー定義ルールセットに基づいています。

GTmetrix 分析エラー

ネットワーク接続エラー

次のようなエラーが発生した場合:

• 「読み取りタイムアウト」
• 「壊れたパイプ」
• 「ピアによって接続がリセットされました」

当社のサーバーと GTmetrix テスト サーバーの間に接続の問題が発生している可能性があります。

サーバーステータスエラー

GTmetrix は、成功の HTTP ステータス コードを返すページのみを分析します。 このエラーが発生した場合は、ページにエラー HTTP ステータス コードがあることを意味します。 この最も一般的な理由は次のとおりです。

• ページを生成している Web アプリケーションは、誤ってエラー HTTP ステータス コードを返していますが、エラーを示さないページ コンテンツを返しています。
• Web アプリケーションが GTmetrix によるページへのアクセスをブロックしています。 WordPress の場合、Bad Behavior や Wordfence などのプラグインが原因である可能性があります。 電子商取引ソフトウェアでは、IP に基づいてアクセスがブロックされるのが一般的です。
• 逆を使用しています 代理 CloudFlare と同様に、GTmetrix がページにアクセスするのをブロックしています。

SSL証明書エラー

GTmetrix は、有効で信頼できる SSL 証明書を持つ HTTPS サイトのみを分析します。 このタイプのエラーは、中間/チェーン証明書が正しくインストールされていない場合によく発生します。

DNSエラー

GTmetrix でサイトのドメインを解決できない場合は、DNS 構成に問題があるか、サイトが最近ネーム サーバーを変更した場合は DNS レコードがキャッシュされている可能性があります。

ページの読み込みに時間がかかりすぎました

GTmetrix がページの読み込みを待機する最大時間は 2 分です。 このエラーの最も一般的な理由は次のとおりです。

• ページまたはリソースの読み込みが非常に遅い
• JavaScript が wi​​ndow onload イベントの発生を妨げています。

URL は HTML ページではないようです

GTmetrix は HTML ページのみを分析するため、ページが HTML ページであることを確認するために、GTmetrix は Content-Type ヘッダーの text/HTML をチェックします。

Content-Type ヘッダーが見つからない場合、または値が空の場合にも、このエラーが発生することがあります。 この問題は通常、サーバーではなく Web アプリケーションが原因で発生します。

JavaScript リダイレクトまたはメタリフレッシュ

残念ながら、GTmetrix は現在、メタ更新を実行するページや JavaScript を使用してページをリダイレクトするページを処理せず、このタイプのエラーを修正できません。

間違いはありません

404 は、パフォーマンスを向上させるために修正する必要がある最も重要なエラーの 404 つです。 410 エラーは誤ったリクエストを引き起こし、サイトの速度に重大な問題を引き起こします。 検索コンソールからそれらを XNUMX に変えて完全に削除するか、有効な URL にリダイレクトする必要があります。

WooCommerce カート フラグメント AJAX を無効にする

オンライン ショップを運営していて WooCommerce を使用している場合、読み込みに時間がかかりすぎる Ajax ファイルがあります。 この Ajax ファイルは完全に読み込まれるまでに 2 ～ 3 秒かかるため、これを無効にするとサイトの読み込み速度が向上します。 無料のプラグインを使用して、WooCommerce カートのフラグメントの問題を解決できます。

CSS と JavaScript ファイルを正しい順序に並べ替える

CSS および JS ファイルは次のとおりである必要があります。 インライン のタグ 鬼ごっこ。 他の場所から読み込まれている場合は、順序を変更するか、Web サイトから削除する必要があります。

お問い合わせフォームのキャプチャの問題

お問い合わせフォームを使用している場合は、そのキャッシュ システムを無効にすることで読み込み速度を向上させることができます。 お問い合わせフォームは av0id でキャプチャをキャッシュしようとするため、プロセスの実行に非常に時間がかかります。 無効にすると読み込み速度を上げることができます。

次に、Web サイトの速度テストの結果で見つかる最も重要なエラーのいくつかを調査します。 ウェブサイトの最適化に役立つ実用的なソリューションを提供しました。

JavaScriptの解析を延期する

まず最初に、JavaScript ファイルを呼び出してこのタイプのエラーを修正するには XNUMX つのオプションがあることを知っておいてください。

方法1：

function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "java.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",
downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

方法2：

CSS の縮小と結合、JavaScript の縮小

それは、CSS と Javascript コードの量を減らすことを意味します。 このエラーを修正するには、追加のスペースと説明を削除するだけです。

GTmetrix Web サイトでは、各リンクの前に「最適化バージョン」という名前のスタイルまたはスクリプトの圧縮バージョンが提供されます。これを自分の Web サイトで自分のスタイルやスクリプトに置き換えてみることができます。ただし、その前に、常に Web サイトのスタイルとスクリプトのバックアップを作成することに注意してください。 役立つオンライン ツールやプラグインがいくつかあります。

実際には、すべての CSS コードと JS コードは、body タグを閉じた後 (後) に配置する必要があります。タグ）のため、Web サイトのパフォーマンスを向上させるには、それらを正しい順序で移動する必要があります。

ブラウザのキャッシュを利用する

この場合、GTmetrix は、Web サイトの読み込み速度を向上させるために、ユーザーのエクスプローラー キャッシュに保存した方がよいケースを示します。

たとえば、GTmetrix は、「http://…/font/calibri.woff」をユーザーのキャッシュに保存する必要があると述べています。

拡張子とアドレスから、Webサイトのデザインに使用されているフォントであることがわかります。 拡張子 .woff のフォントをユーザーのエクスプローラーのキャッシュに保存する必要があると言うだけで十分です。 この目的のためには、次のコードをコピーして .htaccess ファイルに貼り付けるだけです。

ExpiresActive On ExpiresByType font/woff "アクセスプラス 1 年" ExpiresDefault "アクセス 1 か月"

レバレッジブラウザキャッシュエラーを修正するために何をしなければならないかの例を作成しましたが、それだけではありません。 ブラウザ上にキャッシュしたほうがよい要素は数多くあります。 必要なデータのコードは次の場所にあります。

  
  #HTML、CSS、JavaScript、テキスト、XML、フォントを圧縮 
    AddOutputFilterByType DEFLATE アプリケーション/javascript AddOutputFilterByType DEFLATE アプリケーション/rss+xml AddOutputFilterByType DEFLATE アプリケーション/vnd.ms-fontobject AddOutputFilterByType DEFLATE アプリケーション/x-font AddOutputFilterByType DEFLATE アプリケーション/x-font-opentype AddOutputFilterByType DEFLATE アプリケーション/x-font-otf AddOutputFilterByType DEFLATE アプリケーション/x -font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/t tf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml

  # ブラウザのバグを削除します (本当に古いブラウザにのみ必要)
    BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html ヘッダー追加 さまざまなユーザー エージェント


## ヘッダー キャッシュの期限が切れます ##
ExpiresActive On ExpiresByType image/jpg "1 年間アクセス" ExpiresByType image/jpeg "1 年間アクセス" ExpiresByType image/gif "1 年間アクセス" ExpiresByType image/png "1 年間アクセス" ExpiresByType image/svg+xml "1 か月アクセス" ExpiresByType text/css "アクセス 1 か月" ExpiresByType application/pdf "アクセス 1 か月" ExpiresByType text/x-javascript "アクセス プラス 1 か月" ExpiresByType application/javascript "アクセス プラス 1 か月" ExpiresByType application/x-javascript "アクセス プラス 1 か月" ExpiresByType application/x-shockwave-flash "アクセス 1 か月" ExpiresByType image/x-icon "アクセス 1 年" ExpiresDefault "アクセス 2 日"

HTMLを縮小する

それはHTMLコードの量を減らすことを意味します。 これを手動で行うには、以下のようにコードを変更します。

または、次の圧縮モードを使用します。

インラインの小さなJavaScript

これを修正するには、本文セクションのスクリプトを Web サイトのヘッド セクションまたは本文セクションの最後に転送することをお勧めします。 結局、それをファイルに保存して、そのリンクを参照します。

キープアライブを有効にする

サーバーとエクスプローラーの間でファイルを維持することを指します。 次のコードを Web サイトの htaccess フォルダーに置くだけです。

ヘッダー セット接続キープアライブ

不適切なリクエストを避ける

これは、要求されたアドレスがもう存在しないことを意味します。 このエラーを修正するには、GTMetrix がテンプレート内で表示するアドレスを見つけて、このアドレスは利用できないと表示されるので削除する必要があります。

リクエスト数

GTmetrix では、Web サイト上のリクエストは 87 件以下にする必要があると述べています。 これは平均的な数であり、リクエストが少ないほど、パフォーマンスは向上します。

この問題を解決するには、WP-Rocket または Lazy Load プラグインを使用できます。 たとえば、Lazy Load は、images タグの value 属性を省略し、サイトを完全にロードした後、image value 属性を前の順序に戻します。 こうすることで、読み込み中のリクエストが減り、「最初のバイトまでの時間」係数が改善されます。

これらはで購入できるプラグインです Deep 20% 割引のテーマとそのガイドは、 Deep テーマのドキュメント.

画像のサイズを指定する

これは、Web サイト上の画像の幅と高さの値を指定することを意味します。 CSS を介して画像の値を指定するだけでなく、次のように HTML でも指定することをお勧めします。

この解決策を実行すると、画像の SEO が向上して最適化されるため、画像のインデックス作成速度が向上することがわかります。

ページ速度を上げる簡単な方法

1。 プラグイン

サイト上で多数のプラグインがアクティブになっていると、サイトの速度が低下する可能性があります。 テーマに含まれているプラ​​グインを除くすべてのプラグインを非アクティブ化し、ブラウザーのキャッシュをクリアします。 次に、プラグインを XNUMX つずつ有効にして、どのプラグインがサイトの速度を低下させているかを確認します。

2。 イメージ

画像はウェブサイトを最適化するための重要な要素です。 ウェブサイト用に画像を最適化することが重要です。 画像のサイズが大きいと、サイトの速度が低下する可能性があります。 大きなサイズの画像をアップロードしないでください。 たとえば、ウェブログがサイズ 800*600 の画像で作成されている場合、それより大きくない同じサイズの画像をアップロードする必要があります。

3.ホスト

サイトの速度が遅いのは、ホストまたはサーバーが原因である可能性があります。 ホスティングに VPS を使用している場合は、構成が不適切でリソースが少ないことが原因である可能性があります。 共有ホスティングを使用している場合は、この点についてホストプロバイダーに問い合わせて確認してもらう必要があります。

4. JSおよびCSSファイル

キャッシュプラグインを使用する必要があります。 これらのプラグインはファイルを縮小して結合し、サーバーリクエストを減らすためにファイルのバージョンをキャッシュに保存します。その結果、サイトの速度が向上します。

ウェブサイトの読み込み速度を上げるための提案:

いつでも無料のプラグインを使用して速度を上げることができますが、当然のことながら、これには有料のプラグインの方が優れています。 WPロケットをお勧めします。

• WP-Rocketを利用する（有料）
• 無料のプラグインを使用する

A. WP-Rocketプラグインの使用（推奨）

1. バックアップを取得する

何よりもまず、変更される可能性のあるファイルのバックアップを取得します。 テーマの画像や本体ファイルなどのファイル。 これを行うには、wp-content/uploads/ のホスト パネルに移動し、前述のファイルからバックアップを取得します。 また、テーマフォルダーからバックアップを取得し、ディレクトリに before-minify.zip という名前を付けます: wp-content/themes/deep

2. WP Rocketを購入してインストールする

Deep は WP Rocket と協力しており、20% 割引 (プロモーション) コードを専用に提供しています。 この割引コードは、WP Rocket Plugin の購入に使用できます。 このアドレスに従ってください: WordPress ダッシュボード > Deep > パフォーマンス

注： HTML、CSS Minify、JS Minify、CDN、Cache、Minify などのキャッシュ プラグイン (wp-rocket) のすべてのオプションと、プラグインに関連するものはすべて、プラグインが新しいため無効にする必要があります。

3. ファイルの最適化

プラグイン設定に移動し、「ファイルの最適化」タブで「基本設定」の 3 つのオプションをすべて有効にします。 下の画像のように：

4 キャッシュの消去

「ダッシュボード」タブからキャッシュをクリアする必要があります

5. CSS コンテンツを取得する

ブラウザのゲスト モードでサイトを開き、CTRL + U を押してサイトのソースを表示します。 HTML の上に WP-Rocket で作成した CSS ファイルがあるので、クリックしてファイルを開きます。

上記のファイルの内容を開いてコピーし、「CSS 配信の最適化」の「ファイルの最適化」タブに置きます。 表示するには、このオプションをチェックする必要があります。

重要： リクエストが別のサイトに送信され、読み込み時間が増加するため、CSS 内で @import を使用しないでください。 @import には URL があり、これを開いてコンテンツをコピーし、CSS 配信の最適化に配置してから、URL と一緒に @import を削除する必要があります。

次に、キャッシュをクリアし、ブラウザのゲスト モードでサイトをチェックし、すべてが正常であることを確認します。 注： CSS が混乱するのは、CSS 内に開いたコメントがあり、それが閉じられていない場合に発生します。 プラグインが原因である可能性があるため、プラグインを XNUMX つずつ無効化することで、どのプラグインが問題の原因となっているかを知ることができます。

6. JavaScript ファイル

[ファイルの最適化] タブに移動し、JavaScript ファイルで、以下の画像のようにすべてのオプションを無効にします。

7. レイジーロード

画像に LazyLoad を使用するには、[メディア] タブに移動し、以下の画像のように設定を調整します。

8.CDN

これらのコンテンツ配信ネットワークを使用すると、サイトの速度を大幅に向上させることができます。 コンテンツ配信ネットワークは、サーバーに最も近いポイントで画像やスクリプトなどの静的アイテムをユーザーに提供します。

B. 無料プラグインの使用

1。 ダウンロードとインストール Autoptimize

WordPress 管理者 > [設定] メニュー > [自動最適化] に移動してください。 次に、[詳細設定を表示] をクリックし、設定に関して次の例と同じように操作します。

2。 ダウンロードとインストール LazyLoad by WP Rocket

WordPress 管理者 > 設定 > LazyLoad を選択し、画像とビデオの LazyLoad をオンにします。

3。 ダウンロードとインストール Gzip圧縮を有効にする

A. WordPress 管理者 > 設定 > gzip 圧縮に移動し、Gzip 圧縮を有効にします。

4。 ダウンロードとインストール WPスーパーキャッシュ

A. WordPress 管理者 > 設定 > WP Super Cache に移動し、キャッシュ オプションをオンにします。

5。 スライダー革命

Slider Revolution プラグインを使用している場合は、グローバル設定に移動し、この設定例のように操作してください。

公開提案

404エラーを修正

画像の最適化

を使用しております WPSmushプラグイン 画像を最適化します。 GTMetrix Web サイトの「ウォーターフォール」タブで、サイトの画像の読み込みに時間がかかる場合は、次の解決策を使用する必要があります。Web サイト http://compressjpeg.com/ で提供される無料ツールを使用して画像を最適化します。

最初のステップでは、画像サイズが自動的に縮小されますが、画像サイズを改善するには、画像をクリックして設定が開き、必要なだけ画像サイズを縮小できます。

最後に、「ダウンロード」ボタンをクリックすると、圧縮された画像をダウンロードできます。 このウェブサイトの特徴の XNUMX つは、複数の画像を同時にアップロードし、それらを画像のグループとして圧縮できることです。

WooCommerce カート フラグメント AJAX を無効にする

WooCommerce の AJAX ファイルはサイトの読み込みに時間がかかるため、この AJAX を無効にするには、Disable Cart Fragments Plugin を使用する必要があります。 プラグインをダウンロードできます こちら

WP Rocket と一緒に Polylang プラグインを使用している場合は、インストールしてください wp-ロケット-キャッシュ-donotchangepage プラグインも同様です。
GTMetrix の [ウォーターフォール] タブに Contact Form 7 プラグインに関連する Refill が表示される場合は、次のアドレスにアクセスしてください。
/wp-content/plugins/contact-form-7/includes/controller.php :: 行 :: 69 – 71
そして、そのコードをコメント化 (無効化) します。

/* if (定義( 'WP_CACHE' ) && WP_CACHE ) { $wpcf7['cached'] = 1; } */

無効にするには /**/ の間に置きます。
– タスクを実行するたびにプラグイン キャッシュをクリアする必要があることに注意してください。
最後に、新しい画像の追加など、サイトを更新した後は、上で説明した内容を考慮することを常に忘れないでください。
プラグインが更新されると、変更は破棄されるため、更新するたびに手順を再度実行する必要があります。 たとえば、Contact Form 7 プラグインです。