ミニファイでWordPressサイトのパフォーマンスを向上させる方法

公開: 2018-11-19

サイトの速度は、ほとんどすべてのサイト所有者にとって長年の懸念事項です。サイトの速度を向上させる方法はいくつかありますが、見過ごされがちな（ただし非常に効果的な）手法の1つである縮小化を検討する必要があります。

簡単に言うと、ミニファイはサイトのコードを最適化して、サイトのサイズを小さくし、実行効率を高めます。これは小さな懸念のように思えるかもしれませんが、実際には驚くほど効果的です。

この記事では、ミニファイの概念とその仕組みを紹介します。また、コードに触れなくても、このメソッドを自分で利用できるいくつかの方法を紹介します。始めましょう！

「縮小化」の概要（およびそれがどのように役立つか）

このブログでは、以前にサイトを高速に保つことの重要性について説明しました。このため、サイトの速度を最適化するいくつかの方法をすでにご存知でしょう。今日は別の方法について説明します。

ご覧のとおり、長いロード時間の背後にある潜在的な理由の1つは、非効率的に記述されたコードです。最近では、ほとんどのサイト所有者がコードを作成する必要はほとんどないため、コードがサイトの動作を低下させているかどうかさえわからない場合があります。ただし、ミニファイと呼ばれるプロセスを使用することで、それを無視できます。

あなたがコーダーでないなら、これは恐ろしく複雑に見えるかもしれませんが、心配しないでください。縮小化は、実際には、CSS、HTML、およびJavaScriptコードの最適化を含む単純なプロセスです。コーディングスキルを必要とせずにこれを実現する方法については、後で説明します。ただし、その前に、次のCSSスニペットを使用して、実際にどのように機能するかを見てみましょう。

h1 {
    background-color: blue;
}

h2 {
    background-color: red;
}

p {
    background-color: black;
}

CSSに少しでも精通していても、これは非常に簡単に解読できます。ページ上のさまざまな要素に割り当てるスタイルを指定するだけです。これは、コードが人間の目で読めるように書かれているためです。この目的のために、改行と余分なスペースを使用して、コードの各部分を明確に定義し、スキャンしやすくしています。

ただし、これは実際にはコンピューターがコードを理解して実行するために必要なものではありません。実際、文字を追加するとコードが「重く」なるため、コンピューターが読み取って実行するのに時間がかかります。したがって、ミニファイは、人間に優しいコードを機械に優しいコードに変えるプロセスと考えることができます。

このコードを縮小すると、代わりに次のようになります。

h1{background-color:blue}h2{background-color:red}p{background-color:black}

このコードは、実際には上記とまったく同じ機能で構成されていますが、不要な部分はすべて削除されています。大きな違いには見えないかもしれませんが、縮小されたコードは実際には元のコードより36％軽量です。これと同じ原則がページ上のすべてのコードに適用されることを想像すると、長期的にはこれがどれほど効果的であるかがわかるでしょう。

それで、あなたは実際にどのようにそれをしますか？自由に使える方法はいくつかありますが、この記事全体でそれらを見ていきます。まず、コードを手動で縮小する方法を見てみましょう。

コードを手動で縮小する方法

コードを縮小できる1つの方法は、自分でコードを縮小することです。これは、テーマやプラグインを作成するときなど、独自のコードを作成する場合に特に便利です。ただし、量によっては、不可能ではないにしても、細かい櫛でコードを処理するのは大変な作業になる可能性があります。

幸いなことに、数秒で縮小されたコードを生成するのに役立つツールがたくさんあります。そのような例の1つは、CSSとJavaScriptの両方で機能するMinifyです。

圧縮するコードをテキストボックスに貼り付けて[縮小]をクリックするだけで、コードはすぐに新しい形式で返されます。新しいバージョンが元のバージョンと比較してどれだけ軽いかについての要約も表示されます。

HTMLコードを縮小する必要がある場合は、その作業にHTMLMinifierをお勧めします。

このツールは、コードの圧縮方法に関する多くのオプションを提供し、Googleでも承認されているため、特に気に入っています。右側の設定を使用して、最終出力を好みに合わせて調整できます。

コードを手動で縮小することは確かに便利ですが、ほとんどの場合、プロセスを自動化することをお勧めします。次は、それを正確に行う方法を見ていきます。

フロントエンドの細部が非常に遅くなる可能性があります…そして、非常に多くのプラグイン、テーマ、テクノロジーが連携しているため、どこから始めればよいかわからない場合があります。 Performance Insightsアドオンを使用すると、サイトの高パフォーマンスと低パフォーマンスの側面を詳しく調べることができます。そこからさらに一歩進んで、専門家チームから直接推奨されるアクションを提供するので、サイトの速度をどこでどのように改善するかを正確に知ることができます。詳細については、こちらをご覧ください。

コードを自動的に縮小するのに役立つ3つのWordPressプラグイン

ミニファイを実装する最も簡単な方法は、WordPressプラグインを使用して作業を行うことです。このようなプラグインは、呼び出されるとすぐにコードを自動的に縮小します。

これは、自分でコードを見なくてもコードを縮小できることを意味します。これを念頭に置いて、最高のミニファイプラグインのいくつかを見てみましょう！

1.最適化

ミニファイが複雑なプロセスになるのではないかと心配している場合は、Autoptimizeが最適な対位法です。これは、入力を必要とせずにサイトのすべてのスクリプトを自動的に縮小する「設定して忘れる」ソリューションです。プラグインをインストールしてアクティブ化するだけで、後はプラグインが処理します。ただし、技術的な側面を知りたい場合は、プラグインにいくつかの高度な構成オプションも用意されています。

主な機能

設定が不要で、使いやすいです。
サイト上のすべてのスクリプトを自動的に最小化および圧縮します。
最適なパフォーマンスを得るために、すべてのスタイルをサイトヘッダーに移動します。

価格：プラグインは無料で、Autoptimizeは119ユーロ（約138ドル）からのプレミアム階層も提供しています。

2. Fast VelocityMinify

これらすべてのプラグインの実行中のテーマはシンプルさです。以前の製品と同様に、FastVelocityMinifyは箱から出してすぐに機能します。プラグインは、コードとスクリプトを最小限のファイル数に圧縮することで、CSSとJavaScriptが可能な限り効率的に配信されるようにします。また、オプションのHTMLミニファイを含む、いくつかの構成設定も含まれています。

主な機能

スクリプトファイルを最小化して、HTTPリクエストの数を減らします。
デフォルト設定でプラグアンドプレイ機能を提供します。
GoogleFontsをマージして最適化します。

価格：プラグインは完全に無料で、プレミアムプランは必要ありません。

3.マージ+縮小+更新

Merge + Minify + Refreshは、箱から出してすぐに機能し始めるもう1つのミニファイプラグインです。その機能はAutoptimizeとほぼ同じですが、特に軽量な代替手段です。ミニファイプロセスの動作方法により、プラグインは最小限の速度低下を提供し、（他のソリューションとは異なり）手動でキャッシュをクリアする必要はありません。

主な機能

スクリプトファイルを自動的に縮小して結合します。
wp-cronを使用して、縮小中の速度低下を最小限に抑えます。
WordPressマルチサイト設定と互換性があります。

価格： Merge + Minify + Refreshは無料でダウンロードして使用でき、プレミアムプランは利用できません。

結論

サイトの最適化に関しては、自由に使えるすべての方法を使用することが重要です。これらの1つはミニファイです。これにより、コードを圧縮して、機能に影響を与えることなくコードをより効率的にすることができます。

この記事では、推奨プラグインの1つを使用して、自分のサイトでミニファイを利用する方法について説明しました。

最適化。パワフルでありながらシンプルで、経験豊富なユーザー向けの追加設定があります。
FastVelocityMinify。初心者と開発者の両方に最適な確かなオプション。
マージ+縮小+更新。高速で信頼性が高く、常に良好なパフォーマンスを確保するのに役立ちます。

ミニファイを使用してサイトを高速化することについて質問がありますか？下のコメント欄で教えてください！

無料ガイドでサイトのパフォーマンスを次のレベルに引き上げましょう！

この無料ガイドには、WordPressサイトのパフォーマンスと速度を向上させるために使用できる8つの簡単なステップがあります。画像、JavaScript、CSSなどのWebアセットの最適化から、包括的なプラグイン監査の実行まで、WordPressの最高のパフォーマンスプラクティスをすべて網羅しています。

今すぐダウンロードしてください！