しばらく前に、CSSおよびJavaScriptファイルを圧縮すると読み込み時間を大幅に短縮できることを発見しました。いくつかのWordPressサイトでテストしたところ、その結果に驚きました。5〜6秒かかっていたページの読み込み時間が突然2〜3秒に短縮されました。
事実、読み込み時間の1秒の遅延は、訪問者と潜在顧客を失うことにつながります。CSSおよびJavaScriptファイルに不要なスペース、コメント、フォーマットが含まれていると、ビジネスの速度が文字通り低下します。
圧縮は、サイトの動作を変更せずに、余分なコードをすべて削除します。
そのため、WordPressファイルを圧縮する方法を示すこのガイドを作成しました。さまざまなアプローチを説明するので、あなたのサイトに最適なものを選択できます。
ミニフィケーションとは何ですか？いつ必要ですか？
「圧縮」という用語は、WordPressウェブサイト のファイルサイズを小さくする方法を説明するために使用されます。これは、ソースコードから空白、改行、不要な文字を削除することによって行われます。
通常のCSSコードの例を次に示します。
body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
コードを圧縮すると、次のようになります。
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}
通常、ユーザーのブラウザに送信されるファイルのみを最小化することが推奨されます。これには、HTML、CSS、およびJavaScriptファイルが含まれます。
PHP ファイルも圧縮できますが、これによりユーザーのページ読み込み速度が向上することはありません。それは、PHP がサーバーサイドのプログラミング言語であり、訪問者のウェブブラウザに送信される前にサーバー上で実行されることを意味するためです。
ファイルをミニファイする利点は、WordPressの速度とパフォーマンスの向上です。コンパクトなファイルはロードが速いためです。
ウェブサイトのパフォーマンス最適化にお困りですか？ それなら、手頃な価格の WPBeginner プロフェッショナルサービスを利用して専門家を雇ってみませんか？当社の サイトスピード最適化サービス は 699 ドルからで、ミニファイ、遅延読み込み、キャッシュ設定などが含まれます。
ただし、一部の専門家は、パフォーマンスの向上はほとんどのウェブサイトにとって非常に小さく、手間をかける価値はないと考えています。最小化は、ほとんどのWordPressサイトで数キロバイトのデータしか削除しません。ウェブ用に画像を最適化することで、ページの読み込み時間をさらに短縮できます。
Google PageSpeed InsightsまたはGTMetrixツールで100/100のスコアを達成しようとしている場合、CSSとJavaScriptを最小化することでスコアが大幅に向上します。
とはいえ、WordPressサイトでCSS/JavaScriptを簡単に最小化する方法を見てみましょう。3つの異なるオプションについて説明します。
準備はいいですか？まず、最も推奨される方法から始めましょう。
方法1. WP Rocketを使用してWordPressでCSS/JavaScriptをミニファイする
この方法はより簡単で、すべてのユーザーに推奨されます。どのWordPressホスティングを使用していても機能します。
まず、WP Rocketプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
WP Rocketは、市場で最高のWordPressキャッシュプラグインです。これにより、WordPressに簡単にキャッシュを追加し、ウェブサイトの速度とページの読み込み時間を大幅に改善できます。
WordPressでのWP Rocketのインストールと設定方法については、チュートリアルをご覧ください。
有効化したら、設定 » WP Rocket ページにアクセスし、「ファイル最適化」タブに切り替える必要があります。
ここから、CSSファイルを最小化するオプションを確認する必要があります。
WP Rocket は、これがサイトで問題を引き起こす可能性があるという警告を表示します。「CSS のミニファイを有効にする」ボタンをクリックしてください。問題が発生した場合は、いつでもこのオプションを無効にできます。
次に、下のJavaScript Filesセクションまでスクロールダウンする必要があります。
ここで、「JavaScriptファイルを圧縮する」オプションの横にあるチェックボックスをオンにするだけです。
ここでも、サイトに問題が発生する可能性があるという警告が表示されます。「JavaScriptの圧縮を有効にする」ボタンをクリックしてください。
その後、設定を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。
WP Rocketは、CSSおよびJavaScriptファイルを圧縮するようになります。プラグインの設定でキャッシュをクリアして、次のウェブサイト訪問者のために圧縮されたCSSおよびJavaScriptが使用されるようにすることができます。
方法 2. SiteGround を使用して WordPress で CSS/JavaScript をミニファイする
SiteGround を WordPress の WordPressホスティング プロバイダーとして使用している場合、SiteGround Optimizer を使用して CSS ファイルを圧縮できます。
SiteGround Optimizerは、独自のプラットフォームで動作するパフォーマンス最適化プラグインです。サイトの読み込み時間を改善するために、PHPの超高速化と連携してうまく機能します。
SiteGround Optimizer プラグインを WordPress サイトにインストールして有効化するだけです。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。
その後、WordPress管理画面のサイドバーにあるSG Optimizerメニューをクリックする必要があります。
これにより、SG Optimizerの設定に移動します。
ここから、「その他の最適化」の下にある「フロントエンドへ移動」ボタンをクリックする必要があります。
次の画面で、CSSフロントエンドを管理できるようになります。
「CSS ファイルのミニファイ」オプションの横にあるトグルをオンにする必要があります。
次に、JavaScriptタブに切り替えて、「JavaScriptファイルを圧縮する」オプションの横にあるトグルをオンにする必要があります。
これで完了です！WordPressキャッシュをクリアしてウェブサイトにアクセスすると、圧縮されたバージョンのCSSおよびJSファイルが読み込まれます。
方法3. Autoptimize を使用して CSS/JavaScript を圧縮する
この方法は、SiteGround を利用しておらず、WP Rocket を使用していないユーザーにおすすめです。
まず、Autoptimizeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、プラグインの設定を行うために 設定 » Autoptimize ページにアクセスする必要があります。
ここから、まず「JavaScript オプション」の下にある「JavaScript コードの最適化」オプションをオンにする必要があります。
その後、CSSオプションまでスクロールダウンする必要があります。
そこに着いたら、「CSSコードを最適化する」オプションの横にあるチェックボックスをオンにしてください。
設定を保存するには、「変更を保存」ボタンをクリックすることを忘れないでください。
次に、キャッシュを空にするボタンをクリックして、圧縮されたファイルの使用を開始できます。このプラグインは、WordPressでレンダリングブロックするJavaScriptとCSSを修正するためにも使用できます。
ミニファイに関するよくある質問
WordPress でファイルを圧縮することについて、人々がよく尋ねる質問とその回答を以下に示します。これらは、プロセスとそのサイトへのメリットをよりよく理解するのに役立ちます。
1. ミニファイ（minify）とは具体的に何ですか？
最小化とは、コードの動作を変えずに不要な文字をすべて削除することで、ウェブサイトのコードファイルを小さくするプロセスです。これには、HTML、CSS、JavaScriptファイルから空白、コメント、改行を削除することが含まれます。結果として得られるファイルはより小さくコンパクトになるため、訪問者のブラウザがダウンロードして処理する速度が速くなり、ウェブサイト全体の速度を向上させるのに役立ちます。
2. CSS および JavaScript ファイルを圧縮するとウェブサイトが壊れますか？
最新のプラグインでは一般的ではありませんが、ミニフィケーションはサイトに視覚的または機能的な問題を引き起こすことがあります。そのため、パフォーマンスプラグインは、この機能を有効にする前に警告を表示することがよくあります。常にまずバックアップを作成し、ミニフィケーションをオンにした後、シークレットブラウザウィンドウでウェブサイトを注意深くテストすることをお勧めします。問題に気づいた場合は、設定を無効にするか、競合の原因となっている可能性のある特定のファイルを除外するためにプラグインの機能を使用できます。
3. 最小化は本当に大きな違いをもたらしますか？
ミニフィケーションの影響は、サイトによって異なる場合があります。多くのウェブサイトでは、数キロバイトのデータしか削除されず、画像を最適化することでより顕著な速度向上が見られるかもしれません。しかし、Google PageSpeed InsightsやGTMetrixのような速度テストツールで完璧な100/100スコアを達成することが主な目標である場合、CSSおよびJavaScriptファイルをミニファイすることは、スコアを大幅に向上させる重要なステップです。
4. WordPressでファイルを最小化するためにプラグインが必要ですか？
ほとんどのWordPressユーザーにとって、ファイルを圧縮する最も簡単で推奨される方法は、WP RocketやAutoptimizeのようなキャッシュまたはパフォーマンスプラグインを使用することです。これらのツールを使用すると、数回のクリックで圧縮を有効にできます。SiteGroundなどの一部のホスティングプロバイダーは、これらの機能を組み込んだ独自の最適化プラグインも提供しています。ファイルを手動で圧縮することは、初心者には推奨されない複雑でリスクの高いプロセスです。
この記事が WordPress サイトで CSS と JavaScript をミニファイするのに役立ったことを願っています。また、WordPress のコアウェブバイタルを最適化する方法 に関するガイドや、ウェブサイトを高速化するベスト WordPress キャッシュプラグイン の専門家によるおすすめもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Olaf
CSSとJavaScriptのミニファイは、今日ではほとんどのキャッシュプラグインが処理できるものです。しかし、私の意見では、そのような変更の後、ウェブサイトが常に期待通りに機能するとは限らないため、これは非常に難しいことです。コードを削減しても、同じように正しく機能することが保証されるわけではありません。あらゆるコストをかけて最適化しようとしており、キロバイト単位で節約する必要がある場合は、確かに意味がありますが、そのような介入を行う前に必ずバックアップを作成することをお勧めします。その後、多くのウェブサイトがおかしな動作をし始めるのを見てきました。ですから、私にとっては、注意して行うべきです。
Dayo Olobayo
これを共有してくれてありがとう。WP Rocketプラグインを試してみて、ファイル圧縮に役立つかどうか確認します。
Mrteesurez
いただいたコード例に基づくと、両者は同じですが、何をミニファイしているのでしょうか？ただし、スペースが少ないものが1つしか見えません。スペースを削除することがミニファイと呼ばれることですか？
この投稿はサイトの速度に関連しているので役立ちますが、一部のテーマにはミニファイされたコードが付属しています。手動で実行する必要はありますか？ありがとうございます。
WPBeginnerサポート
余分なスペースを削除することは、コードを圧縮することです。サイトのコードがすでに圧縮されている場合は不要です。これは主に、圧縮されていないテーマやその他のツール向けです。
管理者
Ali Asgar Attari
Autoptimizeを使用すると、フォントサイズ、行間、その他のCSSが変更されますか？
WordPressサイトにカスタムCSSコードを追加しました。これには、箇条書きの行間、段落の行間、段落の文字間隔が含まれます。
これらのCSS設定はすべて削除されますか？
WPBeginnerサポート
設定と変更は、ファイルをミニファイしても削除されないはずです。
管理者
サミ・カーン
このプラグインはWordPressプラグインパネルでは利用できなくなりました。また、6年間更新されていません。
WPBeginnerサポート
Thank you for letting us know, we will be sure to look into updating this article
管理者
Adnan
結果に満足できなかった場合、ボタンをクリックするだけで元に戻し、非圧縮状態に戻すことはできますか？
WPBeginnerサポート
プラグインを使用した場合は、ミニファイを停止してサイトのキャッシュをクリアするためにプラグインを削除する必要があります。
管理者
Echo
管理画面も圧縮できるといいですね。誰かやったことありますか？
WPBeginnerサポート
現時点では、そのガイドはありません。
管理者
Justin
このプラグインは、WordPressの最新のメジャーリリース3つでテストされていません。メンテナンスまたはサポートが終了している可能性があり、最近のWordPressバージョンで使用した場合に互換性の問題が発生する可能性があります。
WPBeginnerサポート
お知らせいただきありがとうございます。確認させていただきます。
管理者
Oskar
サイトでそれを見つけようとしましたが、見つかりませんでしたか？
Adri Oosterwijk
優れたミニファイプラグインを探しています。この記事を読んで、Better Wordpress Minifyをインストールしようと思いました。Wordpressリポジトリで、このプラグインが3年間更新されていないことに気づきました。サポートページでもあまり活動がないことに気づきました。
このプラグインをインストールすることに躊躇する気持ちは理解できると思います。
問題は…最新のWordPressとPHPバージョンで安全にインストールできるか、それとも現時点では別のプラグインを推奨するかです。
お役に立てれば幸いです
Adri
フェリペ
ほとんどの私のウェブサイトでAutoptimizeを使用しており、非常に順調です。
HTML、CSS、JSファイルを最小化するオプションがあります。
Dave
このプラグインは、WordPressの最新3つのメジャーリリースでテストされていません！
Shaker
W3 Total Cache プラグインを使用している場合、多くの WordPress ユーザーはこのプラグインを使用して Web ページの速度を向上させています。このプラグインには、CSS、JavaScript、HTML ファイルを圧縮する機能が提供されていることをご存知かもしれません。これは目的を果たし、圧縮のために追加のプラグインを使用する必要がないため、お勧めします。
Sophie
こんにちは、
キャッシュプラグインの1つで最小化オプションをチェックしたのですが、今は名前を覚えていませんが、テーマが壊れてしまいました。したがって、あなたが提案したプラグインも同じことをするのか、またはインストールしたときにテーマを壊さないのか心配していますか？私はthemify ultraテーマを持っています。
ありがとう、
sophie.
Rashmi Korlekar
JEREMYに同意します
Beth
記事をありがとうございます。他に推奨できるプラグインはありますか？ Better Wordpress Minify は2年間更新されていません。ありがとうございます。
santy
有益で役立ちます。ご尽力に感謝します。
Steve Eilertsen
あなたの記事は常に役立ち、感謝されています。どうもありがとうございます。
Jeremy
Hello,
記事は楽しめましたが、提案があります。WP Beginner の記事の多くでプラグインベースのソリューションが紹介されていることに気づきました。それは素晴らしいと思いますが、時には高度なユーザーが舞台裏の情報を知りたい場合もあります。
プラグイン方式と、手動（上級WordPressユーザー向け）方式の両方を示す記事がいくつかあります。それらの記事は、初心者と上級WPユーザーまたは開発者の両方を対象としているため、気に入っています。
時間が許せば、上級ユーザー/開発者向けのミニファイ方法を紹介するように記事を更新することを検討していただけますか？
ありがとうございます！
Hamza Bhatti
あなたの意見に同意します、JERMY。しかし、ウェブサイト名であるwpbeginner.comから、ここではBeginnerという単語が使われており、それはプロではないことを意味します。
ブランデン
笑、あなたがアクセスしているウェブサイトのドメインを読んでください。ここは WP Beginner であり、WP Advanced ではありません。