プラグインを使用してWordPressWebサイトの読み込みを高速化する方法

公開: 2015-06-26

あなたが読者の注意を引きたいならば、たくさんの素晴らしいコンテンツできれいなウェブサイトを持つことは重要です。残念ながら、ページの読み込みが遅すぎると、読者にコンテンツが表示されない場合があります。なんで？あなたは彼らの注意を引き、彼らが次のサイトに移動するのを防ぐためにほんの数秒しかありません。読者は、コンテンツが読み込まれるのを待ちたくありません。待機時間が長くなるほど、それらを失う可能性が高くなります。

このため、ページの読み込み速度を最適化することが非常に重要です。速度を測定し、問題をトラブルシューティングするのに役立ついくつかの優れたツールがオンラインにあります。最も人気のあるツールの1つは、GooglePageSpeedInsightsです。

PageSpeed Insights

Google PageSpeed Insightsは、ウェブサイトの読み込み速度をテストし、問題を特定して優先順位を付け、それらの問題を修正するための提案を行う、無料で使用できるオンラインツールです。

この記事では、ElegantThemesのDiviを基本的なブログとして使用している自分のサイトを使用しています。何を修正する必要があるか、ツールがどのような提案をするか、そしてそれらをどのように修正したかを示しています。スコアは、モバイルとデスクトップの両方の結果を示します。私はデスクトップに焦点を当てています。モバイルの問題のいくつかは、途中で解決されます。

これらの問題のほとんどは、プラグインを使用することで解決されます。プラグインを決定するときは、最近更新され、評判の良いプラグインを使用してください。多くのプラグインは複数の問題を解決します。

注意点–一部のプラグインは、両方が同じ作業を行おうとするため、他のプラグインとうまく機能しません。 これは、望むものとは異なる効果をもたらす可能性があります。 プライマリサイトで使用する前に、テストサイトで試すことをお勧めします。 プラグイン自体だけでなく、プラグインの組み合わせも。 ライブサイトでプラグインを試す前に、最近のバックアップがあることを確認してください。

私の点数

私のスコアはひどい46です。最初に気付くのは、結果に3つの異なるセクションがあることです。

修正する必要があります（2項目）
修正を検討してください（6項目）
合格（2点）

各セクションは、問題が何であるかを示すために展開され、それらを修正する方法についてアドバイスを提供します。最初の項目から始めて、順番に進むのが最善だと思いました。それらを順番に解決すると、リストの他の問題も解決されます。

注–途中でいくつかの失敗もありました。 考えられる問題を認識できるように、それらを含めました。

修正する必要があります

すぐに注意が必要な項目が2つあります。

圧縮を有効にする
フォールド上のコンテンツでレンダリングをブロックするJavaScriptとCSSを排除します

圧縮を有効にする

私の最も重要な問題は、圧縮を使用していないことです。これは、ファイル転送サイズを79％削減できることを示しています。これは、gzipまたはdeflateを使用して実行できます。

WPパフォーマンススコアブースター

この無料のプラグインにはgzip圧縮があり、クエリ文字列を削除し、vary：accept-encodingヘッダーを追加し、有効期限のキャッシュを設定することで、CSSやJavaScriptの問題などの他のいくつかの問題を解決します。 4.7 / 5で、10,000を超えるアクティブなインストールがあるため、これを選択しました。これは、ページの読み込みを高速化し、ページスコアテストを改善するために開発されました。

これにより、サーバーの応答時間を短縮するためのメッセージとともにスコア78が得られました。これは私のホスティングプランと多くの関係があります。私のウェブサイトを新しいホスティングプランに移動することでこれを修正しています。それはこの記事の範囲を超えています。

これについての1つのクールな点は、次の問題の主要な問題のいくつかを解決したことです。折り畳みの上にあるコンテンツのレンダリングをブロックするJavaScriptとCSSを排除します。この問題は、修正を検討するために移動されました。また、LeverageBrowserCachingを完全に修正しました。サイトは現在4つのルールを通過していますが、以前は2つしか通過していませんでした。

サーバーの応答時間を短縮する

これについての奇妙なことは、サーバーの応答時間が.96から1.4に上がったことです。サーバーの応答時間の短縮は、修正する必要があります。これには、キャッシングプラグインが必要でした。

W3トータルキャッシュ

W3 Total Cacheは、Webサイトのサーバーパフォーマンスを高速化するための最も人気のあるプラグインです。ほぼ100万のアクティブなインストールがあり、評価は4.4/5です。キャッシュを通じてサイトを最適化します。さまざまなキャッシュオプションを個別に選択できます。それらには、ページ、データベース、オブジェクト、およびブラウザーが含まれます。将来の有効期限ヘッダーとエンティティタグ、フィード、検索結果をキャッシュします。また、JS、CSS、およびHTMLを縮小するための機能もあります。完全に設定すると、GooglePageSpeedスコアが少なくとも10倍高速化されます。

すべてのキャッシュ機能をオンにして試してみました。 これで私のスコアは86になりました。初めて私のサイトはグリーンになり、私が抱えていたすべての問題は修正を検討していました。サーバーの応答時間を含む5つのルールに合格し、「サーバーは迅速に応答しました」と表示されます。

修正を検討する

私が最初にテストを実行したとき、このセクションには、最終的に到達したときよりも多くの問題がありました。これらの問題の多くは、[修正する必要がある]領域の問題を修正したときに解決されました。

元々含まれていた問題：

ブラウザのキャッシュを利用する
サーバーの応答時間
JavaScriptを縮小する
画像を最適化する
CSSを縮小する
HTMLを縮小する

現在の問題を見てみましょう。

フォールド上のコンテンツでレンダリングをブロックするJavascriptとCssを排除する

スクロールしなければ見えない位置にあるJavaScriptとCSSは、ブラウザに過度の負荷をかけることでページの読み込みを遅くする可能性があります。折り目の上の他のものをロードする前に、ロードする必要があります。

それを修正するいくつかの方法があります：

読み込みを延期する
非同期でロード
それらをHTMLに直接インライン化します

この問題を修正するために使用したプラグインは次のとおりです。

最適化

このプラグインは、JavaScript、CSS、およびHTMLを縮小し（不要なフォーマットをすべて削除し、ファイルのサイズを縮小してブラウザーにロードします）、圧縮します。有効期限ヘッダーを追加してキャッシュします。スタイルをページヘッドに移動し、スクリプトをフッターに移動します。詳細設定を使用して、特定のニーズに合わせて調整できます。

これにより、リストの下にあるJSやCSSの縮小などのいくつかの問題も解決されます。

最初は、HTML、JS、CSSの基本設定をオンにしました。 これにより、私のスコアは88になり、問題は3つのCSSリソースに減りました。 1つはプラグイン自体によって作成され、他の2つはGoogleフォントです。現在、7つのルールを通過しています。それは最小化CSSと最小化HTMLを解決しました。

より良いWordPressミニファイ

このプラグインの主な目的はCSSとJSを縮小することですが、ファイルをフッターやその他の場所に移動できる優れた機能もあります（これが私が選択した理由です）。エンキューシステムを使用して、ブラウザー、プラグイン、およびテーマとの互換性を向上させます。

インストールすると、テーマのすべてのレイアウト設定が削除され、メニュー、画像、リンクなどがすべて画面の左端に表示されました。幸い、アンインストールするとフォーマットが返されました。調整が必要な設定になっている可能性があります。 60,000以上のアクティブなインストールがあり、評価が4.4 / 5であるため、これは優れたプラグインであると確信しています。これは、セットアップなしでは必要な方法で機能しない可能性があるという警告としてのみ含めました。

私のスコアは88で、3つの問題が何であるかを知っていたので、次の問題に進むことにしました。

画像を最適化する

画像サイズは、ページの読み込み速度に大きな影響を及ぼします。 Webで表示したときに、視覚的な違いをあまり伴わずに、はるかに小さい画像サイズと低品質を使用できる場合があります。これにより、読み込み時間が短縮され、使用される帯域幅が少なくなるだけでなく、バックアップ時間が短縮され、サーバーのストレージスペースが削減されます。

EWWWイメージオプティマイザー

このプラグインは、画像をアップロードし、画像を最小サイズを生成する形式に変換するときに、画像を自動的に最適化します。また、すでにアップロードした画像を最適化します。 PNGおよびJPG画像に不可逆削減を適用することもできます。

私がそれをインストールしたとき、それが私に見つけてインストールして欲しいいくつかのファイルがありました。このプラグインは、インストールされているすべてのファイルでうまく機能すると思いますが、箱から出してすぐに機能するプラグインを見つけることにしました。

WPスマッシュ

このプラグインは、品質を低下させることなく画像のファイルサイズを縮小します。これは、隠された情報を取り除くことによって行われます。それはあなたのファイルを分析し、何枚の画像をスマッシュする必要があるかを教えてくれます。あなたはそれらをまとめてつぶすことができます。

無料版は1MBを超えるものをスマッシュすることはなく、一度に50をスマッシュするだけです。それ以上の場合は、WP Smush Proが必要です。これは、一度にいくつでも制限なく、最大32MBの画像をスマッシュします。必要に応じて、オリジナルのバックアップを作成します。価格は月額19ドルからです。

スマッシングが必要な114枚の画像がありました。これらの画像のうち8つは1MBを超えていました。手作業で修正することにしました。 98枚の画像をスマッシュし、ファイルサイズを4.79 MB（8.82％）縮小しました。

これで私のスコアは90になりました。 Google Insightsは、気に入らなかった5つの画像を特定しましたが、1MBを超える画像はありませんでした。それらは.7KBから17KBの範囲でした。

手作業による画像の最適化

サイズを変更したり、品質を下げたり、形式を変更したりすることで、手動で画像を最適化できます。画像を処理するための私のお気に入りで最も使用されているツールの1つは、Paint.NETです。これは、ファイルサイズを縮小するための多くの機能を備えたWindows用の無料の画像および写真編集アプリです。あなたのお気に入りは何ですか？

JavaScript、CSS、HTMLを縮小する

これを直したと思った…

他の問題を処理しているときに、縮小するメッセージはJavaScriptのみであることがわかりました。画像を最適化すると、3つの問題すべてが返されました。私は自分のステップをたどって、何が起こったのかを理解しました。

Better WordPress Minifyを試し、それをオフに戻すと、CSSとHTMLを縮小するという私のメッセージが戻ってきました。私のスコアは88に下がり、5つのルールに合格するようになりました。 W3 Total Cacheの縮小機能をオンにすると、すべての縮小問題に合格しました。私は今88のスコアを持っていて、それは8つのルールに合格しました。また、フォールドの上に6つのファイルがありました。私はこれらのいくつかを解決したことを知っていたので、何かを変えたに違いありません。

トラブルシューティングを行ったところ、以前にBetter WordPress Minifyで問題が発生したときに、Autoptimizeをオフにしていたことがわかりました。 Autoptimizeをオンに戻し、W3 Total Cacheからminifyをオフにして、キャッシュをクリアしました（非常に重要なステップです！）。スコアが90に戻り、サイトは8つのルールに合格しました。折り目の上の3つのCSSファイルと、画像を最適化するためのメッセージに戻りました。

過去の経験に基づいて、これらのファイルに時間を無駄にしないことにしました。 Googleはどんなサイズの画像も嫌いで（どんなに小さくてもサイズを小さくするようにというメッセージが表示されます）、PageScoreを46から90にするのが私の本の勝利だと思います。私はあなたが先にいる間に停止する難しい方法を学びました。

最終スコア

私の最終スコアは90/100でした。このスコアを取得するために使用したプラグインは次のとおりです。

Autoptimize（すべての機能がオンになっている）
W3トータルキャッシュ（ページキャッシュ機能のみがオンになっています）
WPパフォーマンススコアブースター（すべての機能がオンになっています）
WPスマッシュ（無料版）

記録として、モバイルスコアは36から78になりました。これを修正するには、モバイル用に画像とファイルを最適化する必要があります。

最終的な考え

あなたの訪問者、グーグル、および他の検索エンジンは、ロードが遅いウェブサイトを嫌います。 Google PageSpeed Insightsを使用すると、問題が何であるかを正確に把握し、それらを解決するためのヒントを得ることができます。グーグルが嫌う遅いサイトからグーグルが愛する速いサイトに行くために必要なのは、ほんの一握りの無料プラグインだけです。実験には注意が必要です。一部のプラグインは他のプラグインとうまく機能しません。

ご連絡をお待ちしております。 Google PageSpeed Insightsを使用してWordPressWebサイトを最適化しましたか？ あなたの経験は私のようなものでしたか？ 問題を解決するために別のプラグインを使用しましたか？ コメントであなたの経験を聞きたいです。