Autoptimize

説明

Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images (with support for WebP and AVIF formats), optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.
If you consider performance important, you really should use one of the many caching plugins to do page caching. Some good candidates to complement Autoptimize that way are e.g. Speed Booster pack, KeyCDN’s Cache Enabler, WP Super Cache or if you use Cloudflare WP Cloudflare Super Page Cache.

プレミアムサポート
私たちは素晴らしい Autoptimize Pro版サポート・ウェブパフォーマンス最適化サービスを提供しています。サイトで私たちのサービスをご覧ください。https://autoptimize.com/

(LL Twistiti によるウィンドサーフィンの画像は creative commons ライセンスで表示)

インストール

お使いの WordPress 「プラグイン > 新規追加 」から単にインストールするだけです。それで反応は改善されます。手動でのインストールも簡単です。

  1. ZIP ファイルをアップロードし、/wp-content/plugins/ ディレクトリで解凍
  2. WordPress の「プラグイン」メニューからプラグインを有効化
  3. 設定 > Autoptimizeへ移動し、ご希望のオプションを有効化します。一般的に、これは「HTML / CSS / JavaScript の最適化」を意味します。

FAQ

Do you offer or recommend a course on how to speed up WordPress/ use Autoptimize?

There are many great resources online, both free and premium, but the “Autoptimize Masterclass” by Load Labz stands out for the systematic and detailed approach in the video-based course. Have a look at the free sample class(es) and when interested make sure to use the EarlyBird coupon to get a discount!

プラグインは、サイトを高速化するために何をしてくれますか。

すべてのスクリプトやスタイルを結合し、最小化して圧縮し、期限切れのヘッダーを付与し、キャッシュし、スタイルをページの先頭に、(オプションで) スクリプトをページの後方へ移動します。また HTML コード自体を最小化し、サイトのページを実際にも軽量化します。

HTTP/2 で稼働させているので Autoptimize は不要ですか ?

HTTP/2 は確かに大きな前進で、複数の並列のリクエストを実行するために、同じ接続を利用することで、同じサーバーからの複数のリクエストの影響を大きく減少させます。しかし、この css-tricks.com の記事やこのある Ebay エンジニアによるブログ記事で説明されているように、CSS/ JS の連結にはまだ多くの意義があります。結論としては、設定、テスト、再設定、再テストを経て調整し、あなたの環境で何が一番よく稼働するか確かめることです。HTTP/2 のみ、または HTTP/2 + 連結と最小化、HTTP/2 + 最小化 (AO も同様に可能で、「JS ファイルの連結」 や「CSS ファイルの連結」オプションのチェックを単に外すだけ)。そしてもちろん Autoptimize は単に JS と CSS を最適化する以上のことができます。

私のブログでも動きますか ?

なんの保証もできないとはいえ、あなたが正しく設定すれば Autoptimize は完璧に動作するでしょう。問題が起きた場合の設定方法の情報に関しては、以下の「トラブルシューティング」を参照してください。

jquery.js が最適化されていないのはなぜ

AO 2.1 以降、WordPress コアの jquery.js を最適化しないのには単純な理由があります。人気がある多くのプラグインでは、jQuery が利用できる状態で未連結のインラインで JS を挿入しているため (インライン JS 内の独自コードにはキャッシュサイズの問題が発生する可能性がある)、jquery.js の除外により大半のサイトがうまく稼働することを確かにします。jQuery も最適化したいのであれば、JS 最適化の除外リストから削除します(「インラインの JS も連結」や「head 内へ JavaScript を強制」を有効化する必要があるかもしれません)。

自動最適化された JS がレンダーブロックされます

「head 内へ強制」が無効であれば、defer 属性が追加されるため、自動最適化された JS はレンダーブロックされません。しかし別のプラグインがこの defer 属性を除去する可能性があります。Speed Booster Pack ではこの可能性の報告がありますが、そのような動作はまだ実際には確認されていません

自動最適化された CSS がまだレンダーブロックされていると言われます

標準の Autoptimize の設定では、CSS は head 内でリンクされるため安全な初期設定ですが、Google PageSpeed Insights はこのことをよく言っていません。この FAQ では以下も説明されています。「すべての CSS のインライン化 (簡単)」や「CSS のインライン化と遅延 (より良い)」。

「CSS のインライン化と遅延」の使用とは何 ?

一般に CSS は文書の head 内に配置すべきです。最近、Google は必須ではない CSS の遅延化や、ページのファーストビュー (Above the fold) の表示に必要なスタイルのインライン化を促しています。このことは、モバイル端末でページをできるだけ早く描画するのに特に重要です。Autoptimize 1.9.0 以降は簡単にこれが行えます。「CSS のインライン化と遅延」を選択し、入力欄 (テキストエリア) にファーストビュー (Above the fold) のブロックを貼り付けます。

ファーストビューの見つけ方は?

ファーストビュー (Above the fold) の境界は、モニターのサイズに依存するので、簡単な解決策はありません。ファーストビューの特定を試みるいくつかのツールはあります。以下のツールは良い出発点です。Sitelocity critical CSS generatorJonas Ohlsson による criticalpathcssgenerator はいい感じの基本的な解決策で、同じく Jonas Ohlsson による http://criticalcss.com/ はプレミアムな解決策です。あるいは、このブックマークレット (Chrome のみ) も役に立つでしょう。

すべての CSS をインラインにすべき ?

簡単に答えると、おそらく「いいえ」でしょう。すべての CSS をインラインで記述すれば CSS がレンダリングブロックされないとはいえ、ベースの HTML ページがかなり肥大化するため、さらなる解析時間が必要になります。サイトの閲覧中には複数のページが閲覧されるので、インラインの CSS はページごとに送信されますが、インラインでない CSS ではキャッシュが使えます。また インラインの CSS は、Facebook や Whatsapp が探索しない位置まで HTML 内のメタタグの位置を下げてしまい、これらのプラットフォームでシェアされる画像などを壊す可能性があります。

キャッシュが肥大化しています。Autoptimize はキャッシュを消去しないのですか

Autoptimize には、適切なキャッシュ消去の仕組みはありません。これは、まだほかのキャッシュから参照されている最適化された CSS/JS を削除する可能性があり、そうなればサイトの表示が壊れるためです。また、急速に肥大化するキャッシュは、避けるべき別の問題の存在の兆候となります。

次のどちらかの方法で、許容できる水準でキャッシュのサイズを維持できます:

  • 「インラインの JS も連結」や「インラインの CSS も連結」の無効化
  • ページごとに (あるいはページの読み込みごとに) 変わる JS の変数 (また時に CSS のセレクタ) を除外。その方法は、このブログ記事を参照してください。

上記の意見と反対に、AO のキャッシュを自動的に消去する第三者製の解決策があります。たとえば、このコードの使用このプラグインです。しかし上記の理由通り、何を行うのか理解している場合に使用してください。

「キャッシュを削除」がうまくっていないようだ

管理バーの Autoptimize のドロップダウンのメニューから「キャッシュを削除」のリンクをクリックすると、「キャッシュが正常に消去されていない可能性があります」と表示されることがあります。この場合、Autoptimize 設定の「変更の保存とキャッシュの削除」ボタンをクリックしてください。

またキャッシュが 0ファイル / 0KB に下がってなくても心配する必要はありません。Autoptimize (バージョン 2.2 以降) では、消去後ただちに自動的にキャッシュを事前読み込みし速度を向上させます。

Autoptimize のキャッシュを消去するとサイトが壊れるようです !

「AO のキャッシュ」を消去した際、削除された最適化済みの CSS/JS を参照しているページ (HTML) が、「ページのキャッシュ」に存在してはいけません。この理由から Autoptimize と一部のページキャッシュは統合されていますが、この統合は 100% の対応ではないので、手動でページのキャッシュを消去する必要があることもあるでしょう。

Cloudflare の Rocket Loader は同時に使えますか ?

Cloudflare がまだベータ版だと考えている Cloudflare Rocket Loader は、JavaScript のレンダリングブロックをなくすために、高機能な一方で侵略性のある方法です。Autoptimize と Rocket Loader は同時に動作しますが、時に動作しないこともあります。最も良い方法は Rocket Loader を無効にし、Autoptimize を設定し、再び Rocket Loader を有効にしてから (有益だと考えるなら)、すべてが動作するかテストしてください。

2017年6月時点で、RocketLoader は、Filamentgroup の loadCSS を元にした AO の「CSS のインライン化と遅延」を壊すようで、遅延させた CSS は読み込まれませんでした。

Autoptimize を試したが Google Pagespeed のスコアはわずかな改善でした

Autoptimize は簡単な「私のページスピードの問題修正」用のプラグインではありません。このプラグインは、基本的には JS と CSS と画像を連結および最小化する「だけ」で、Google フォントを削除したり、CSS の読み込みを遅延させる、いくつか追加の機能があります。このようにしてサイトのパフォーマンスを改善し、また一部の特定のページスピードの警告に取り組むのに有用でしょう。もっと改善したければページのキャッシュや、ウェブサーバーの設定も調べる必要があるり、これらは実際のパフォーマンスとページスピードの評価を改善します (改善されたかは https://webpagetest.org などで読み込み時間を秒単位で計測します)。

API で何ができますか ?

多くのことです。リクエストごとの自動最適化を条件付きで無効化するフィルタ。CSS と JS の除外を変更。CSS による背景画像を CSS 内にインライン化する制限の変更。連結されたファイルの後ろに移動する JS ファイルを定義。連結された JS スクリプトのタグの defer 属性を変更。autoptimize_helper.php_example やこの FAQ にフィルタの例があります。

CDN はどう動作しますか ?

バージョン 1.7.0 以降、ブログのルートディレクトリに CDN が入っていると有効化します (例 http://cdn.example.net/wordpress/)。この URL が存在すれば、その URL は、CSS 内の背景画像 (data-uri を使用しないもの) を含む、すべての Autoptimize による生成ファイル (連結された CSS と JS) に使用されます。

アップロードした画像を CDN にもアップロードしたければ、 お使いの WordPress の構成設定内 (/wp-admin/options.php) の upload_url_path を、対象の CDN のアップロードパスに変更できます (例 http://cdn.example.net/wordpress/wp-content/uploads/)。既存の画像ではなく、設定変更以降にアップロードされた画像に適用されることを考慮してください。ヒントをくれた BeautyPirate に感謝 !

フォントも CDN に配置したい

Autoptimize はこれに対応していますが、ローカルに保存していないフォントは、追加の設定が必要な場合があるので、標準では有効化されていません。しかし、cross-origin request policy が正しければ、autoptimize_filter_css_fonts_cdntrue に設定し、その API をフックすることで、Autoptimize に対し、フォントを CDN に配置するよう指示できます。

add_filter('autoptimize_filter_css_fonts_cdn',__return_true);

CloudFlare を使っていますが、CDN のルートディレクトリには何を入力すれば良いですか。

なにもしなくていいです。Cloudflare では、自動最適化された CSS/ JS は、自動でCloudflare の CDN に配置されます。

PHP の代わりに、強制的に連結済みファイルを固定的な CSS や JS にするには ?

お使いの ウェブサーバーで、圧縮 (GZIP など) とキャッシュ期限 (キャッシュ性を十分に考慮したキャッシュ管理) の扱いが適切に設定されていれば、Autoptimize を使って処理する必要はありません。この場合、「連結されたスクリプト / CSS を静的ファイルとして保存」の設定を有効化すると .css と .js ファイルとして連結されたファイルを、Autoptimize が強制的に保存します (このファイルを保存するための PHP は不要です)。これは Autoptimize 1.8 では標準設定です。

「最適化から除外」するには ?

CSS と JS の両方の最適化において、カンマ区切りの除外リストに「識別子」を追加することで、コードの連結と最小化を行わないようにできます。使用する正確な識別子の文字列は以下のように決定できます。

  • 特定のファイル (例 wp-content/plugins/funkyplugin/css/style.css) を除外したければ、単に funkyplugin/css/style.css を除外します。
  • 特定のプラグインのすべてのファイル (例 wp-content/plugins/funkyplugin/js/*) を除外するには、funkyplugin/js/ や plugins/funkyplugin を除外します。
  • インライン内のコードを除外するには、そのコードの塊中から特有の文字列を探し、除外リストに追加します。たとえば、<script>funky_data='Won\'t you take me to, Funky Town'</script> の除外には 、識別子は funky_data とします。

Autoptimize 設定とトラブルシューティング

本プラグインのインストールと有効化を行った後、管理ページにアクセスし、HTML、CSS と Javascript の最適化の設定を有効化する必要があります。すべて有効化して開始もできますし、慎重に行うならひとつずつ、あなたのお好みに応じて。

Autoptimize を有効化した後に、ブログが正常に機能しないのであれば、以下は、「詳細設定」を使ってそのような問題を特定・解決するためのいくつかの要点となります。

  • すべて動作しているけどブログの応答が遅いのであれば、ページキャッシュプラグイン (WP Super など) をインストールし、この FAQ にも説明のあるキャッシュサイズの情報 (問題の解決法もまたキャッシュされていないページのパフォーマンスに影響を与えます) を確認します。
  • レイアウトが台無しになっているなど、表示が変な場合、CSS の最適化に問題があります。1つ以上の CSS ファイルを最適化から除外してみてください。また、お使いのテーマやウィジット中に noptimize タグで囲むか、除外リストにファイル名 (外部ファイル用) や文字列 (インラインの style 用) を追加することで、CSS を強制的に連結しないようにできます。
  • サイトの一部の機能 (スライド画像、メニュー、検索入力など) が動作しなければ、Javascript の最適化に問題がありそうです。「インラインの JS も連結」 「head 内へ JavaScript を強制」の設定を変更してみてください。「js/jquery/jquery.js」を最適化から除外し (下記を参照)、設定から「try-catch で囲む」を有効化することもできます。技術的に精通していれば、問題のある JavaScript に合致する文字列を追加することで、特定のスクリプトを Autoptimize の処理 (移動や連結) から除外したり、コードを noptimize タグで囲むことでテンプレートファイルやウィジェット内のコードを除外することができます。問題のある JavaScript を特定し、除外用の文字列を適切に選ぶには試行錯誤が必要ですが、大半はこの方法で JavaScript の最適化の問題は解決できます。Javascript をデバッグする際、ブラウザーのエラーコンソールは手掛かりを探るための重要なツールとなります。
  • jQuery を必要とするテーマやプラグインでは、「head 内へ JavaScript を強制」や jquery.js (や関連プラグイン) の除外をお試しください。
  • CSS や JS の最適化がうまくいかなくても、もちろん残りの他の最適化技術は使うことができます。
  • 上記のトラブルシューティングを試しても、CSS と JS が完全に動作しなければ、WordPress の Autoptimize サポート掲示板でサポートを求めることができます。「トラブルチケット」で報告すべき情報については、以下を参照してください。

ファイルを除外したけどまだ最適化されている

AO は、まだ最小化されていないことを示すファイル名であれば、除外された JS/CSS でも最小化します。AO 2.5 以降、設定の「JS、CSS & HTML」タブの「その他オプション」内の「除外された CSS ファイルと JS ファイルを最小化する」のチェックを外すことで、この機能を無効にできます。

助けてください。Autoptimize の有効化後、空白のページまたは内部サーバーエラーが発生しました。

ほかの HTML、CSS や JS の最小化プラグイン(BWP minify, WP minify など)を Autoptimize と同時に実行していないか、あるいはページキャッシュ用プラグイン (W3 Total Cache, WP Fastest Cache など) を無効化して確認してください。またはその機能を無効にしているページキャッシングプラグイン(W3 Total Cache, WP Fastest Cache, …)。CSS のみ、または JS のみの最適化を有効に、どちらがサーバーエラーの原因なのか確認し、一般的なトラブルシューティングの手順に従ってください。

しかしまだ自動最適化された CSS や JS ファイルが白紙です !

Apache 上で稼働しているなら、一部の環境では、Autoptimize が書いた .htaccess と、Apache 構成設定の AllowOverrides の設定 (一部の Ubuntu インストールでは標準設定) が競合していることがあります。自動最適化された CSS や JS ファイルには「内部サーバーエラー」が発生していることになります。解決するには、AllowOverrides を All に設定します。

ドメインマップを用いたマルチサイトにログインできない

ドメインマップを用いたマルチサイトでは、異なる WordPress のアクションとして、Autoptimize を初期化する必要があります。たとえば、以下の行を wp-config.php に追加すれば、setup_theme にフックされます:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

エラーはありませんが、ページが最適化されていません。

Autoptimize は実際の最適化前にいくらか検査を行います。以下に当てはまる場合、そのページは最適化されません。

  • カスタマイザー内にいる場合
  • <html の開始タグがない
  • レスポンスに <xsl:stylesheet がある (出力は HTML ではなく XML であることを示している)
  • レスポンス内に <html amp がある (AMP のページは既に最適化されたものです)
  • 出力が RSS フィード (is_feed() 関数)
  • 出力が WordPress 管理ページ (is_admin() 関数)
  • ?ao_noptimize=1 を URL の末尾に追加したページが要求された場合
  • 最適化を無効にするために Autoptimize にコードがフックする場合 (Visual Composer
    のトピックを参照)
  • 別のプラグインが、互換性のないやり方で出力バッファーを使用している (順番に別のプラグインを無効化してみて原因を特定する)

Visual Composer や Beaver Builder などページビルダー系のプラグインが壊れます !!

ログインユーザーでも最適化するというオプションを無効化してください。

チェックアウト/支払いが動作しません !!

カート/チェックアウトのページの最適化を無効化します (WooCommerce, Easy Digital Downloads, WP eCommerce で動きます)

Revolution Slider が動きません。

JS 最適化を除外するカンマ区切りの一覧に js/jquery/jquery.js が指定されているか確認してください (標準設定で除外されています)。

「jQuery が定義されていません」というエラーが表示されます

この場合、jQuery の読み込みを必要とする、連結されていない JavaScript が存在します。カンマ区切りの JS 最適化の除外リストに js/jquery/jquery.js を追加する必要があります。

NextGen Galleries を使っていますが、多くの JS ファイルが連結・最小化されていない

NextGen Galleries は巧みに JavaScript を追加用しています。Autoptimize による連結を可能にするには、このコードスニペット add_filter( 'run_ngg_resource_manager', '__return_false' ); でNextgen Gallery のリソース管理を無効化するか、あるいは、wp-config.php に以下を記述することで初期化の時期を早めます:define("AUTOPTIMIZE_INIT_EARLIER","true");

noptimize って ?

Autoptimize バージョン 1.6.6 以降、noptimize タグ内のすべてを除外します。例: <!--noptimize--><script>alert(‘これは最適化されません’);</script><!--/noptimize-->

投稿やページ、ウィジット、テーマファイル内にこれを記述できます (テーマの更新による上書を避けるには、child theme の作成を考慮します)。

キャッシュされる最適化ファイルのフォルダやファイル名を変更するには ?

標準の /wp-content/cache/autoptimize/autoptimize_12345.css の代わりに、たとえば /wp-content/resources/aggregated_12345.css にするには、wp-config.php に以下を追加します:

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

Does this work with non-default WP_CONTENT_URL ?

No, Autoptimize does not support a non-default WP_CONTENT_URL out-of-the-box, but this can be accomplished with a couple of lines of code hooking into Autoptimize’s API.

生成された JS/CSS を事前にgzip 圧縮できますか ?

はい。しかし、標準では無効化されています。有効化するには、autoptimize_filter_cache_create_static_gzip を true にします。オンザフライの圧縮によるオーバーヘッドを避けるために、ウェブサーバが非圧縮ファイルの代わりにこれらのファイルを使用するように設定する必要があります。

「絵文字の削除」は何をしますか ?

これは、Autoptimize バージョン 2.3 以降の新しいオプションで、WordPress コアによって追加されたインライン CSS、インライン JS、リンク型の JS ファイルを除去します。サイトのパフォーマンスを少し改善するでしょう。

「クエリー文字列を削除」は役立ちますか ?

一部のオンラインのパフォーマンス評価ツールは、パフォーマンスの問題として「静的ファイルのクエリー文字列」を指摘しますが、一般にこの影響はほとんどありません。Autoptimize バージョン 2.3 以降、クエリ文字列 (具体的には ver 変数) を削除できます。しかし「静的リソースからクエリー文字列を削除」を有効にし削除しても、サイトのパフォーマンス (ミリ秒単位) にはほとんど影響がありません。

Google フォントをどのように最適化したらいい ?

Google フォントは「レンダーブロック」されるリンク型の CSS ファイルによって、通常は読み込まれます。Google フォントを使用したテーマやプラグインをお使いであれば、そのような CSS ファイルが複数あるかもしれません。Autoptimize (バージョン2.3以降) では、Google フォントをすべて削除するか、読み込み方法を最適化することで、Google フォントの影響を減らするができるようになりました。2つの最適化方法があります。1つ目の「結合してリンク」では、Google フォントのすべてのリクエストを、1つのリクエストに置き換え、これはまだレンダリングブロックが発生しますが、フォントがすぐに読み込まれるようになります (つまり、ページ読み込み中にはフォントの変更が表示されません)。2つ目は「結合と非同期読み込み」で、JavaScript を使ってレンダーブロックのない方法でフォントを読み込みしますが、「スタイル化されていないテキストの点滅」が起こることがあります。

事前接続はどう使いますか ?

事前接続 (Preconnect) は、ただちに接続しない場合でも特定のドメインに接続するようブラウザ(対応表)に指示するという少し高度な機能です。たとえば、第三者のリソースが HTTPS に与える影響を軽減するために使用できます (DNS リクエスト、TCP 接続、SSL/TLS ネゴシエーションが事前に実行される)。非常に多くのドメインに事前接続すると逆効果となるので、注意して使用します。

JS を非同期にする注意点

自動最適化されていない JavaScript ファイル (除外や提供サイトが異なるなどの理由で) は、通常はレンダリングブロックされます。「非同期 JavaScript」欄にカンマ区切りでこれらの JS ファイルを追加すると、Autoptimize は 非同期 (async) 属性を追加し、ブラウザに非同期で読み込ませます (レンダリングブロックなし)。たとえば、js/jquery/jquery.js を非同期にしてしまうと、「jQuery は未定義です (jQuery is not defined)」というエラーが発生しやすくなるため、注意して用いてください。

画像最適化はどう動作しますか ?

画像の最適化を有効にすると、Autoptimize は、image タグと CSS ファイルから、お使いのドメインから読み込んだ png, gif, jpeg (.jpg) ファイルを探し、それらのファイルの src (参照先) を ShortPixel CDN に変更します。重要: これは公開されている画像に対してのみ機能します。公開されていなければ、画像最適化用のプロキシは画像を取得できません。なので、ファイアウォールやプロキシ、パスワード保護、あるいは直リンク防止も画像最適化が行えない原因となることがあります。

社内ネットワークや保護されたサイトで画像最適化はできますか ?

いいえ。画像最適化は、サービスがあなたのサイトから元の画像を取得し、最適化して CDN に保存するという、外部の画像最適化サービスの能力に依存します。あなたが、匿名の訪問者として画像ダウンロードすることができない場合 (原因としてファイアウォール/プロキシ/パスワード保護/直リンク保護)、画像最適化は動作しません。

画像最適化についてもっと情報を得るには ?

Shortpixel の FAQ をご覧ください。

AO がページキャッシュの消去をリッスンするのを無効化できますか ?

AO 2.4 以降、AO は、自身のキャッシュを消去するために、ページキャッシュの消去を待ち受け(リッスン)しています。あなたは以下のフィルターでこの動作を無効化できます:

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

一部の非 ASCII 文字が最適化の後になくなります

標準では AO はマルチバイトに対応のない文字列処理を用いますが、お使いの環境の PHP に mbstring 拡張モジュールがあれば、このフィルタでマルチバイトに対応する関数を有効化できます:

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

クリティカル CSS が動作しません

こちらの「パワーアップ」の FAQ をご覧ください。後にこの FAQ へと統合する予定です。

Autoptimize バージョン 2.7 にも クリティカル CSS パワーアップは必要ですか ?

Autoptimize 2.7 と分離されているクリティカル CSS パワーアップの両方をインストールし有効化すれば、クリティカル CSS の部分はパワーアップで処理します。パワーアップを無効化すると、Autoptimize 2.7 に統合されたクリティカル CSS で引き継ぎます。

「404 フォールバックの使用」は何を行いますか ? 必要でしょうか ?

Autoptimize は、連結および最適化された CSS/JS をキャッシュし、それらキャッシュされたファイルへのリンクを HTML に挿入し、これがページキャッシュとして保存されます (プラグイン、ホスト単位で、また第三者により、Google キャッシュ、あるいはブラウザ内に)。ページキャッシュの HTML 内から、自動最適化された CSS/JS へのリンクがあり、この HTML が削除された場合 (キャッシュが消去された場合)、存在するだろうとみなした CSS や JS を見つけられないため、そのキャッシュのページは期待通りには表示・動作しません (404 エラーの発生)。

この設定の目的は、「フォールバック」(予備) の CSS や JS を提供してそれらが壊れることを防ぐことです。このフォールバックのファイルは、キャッシュが空になった直後に作成された自動最適化された CSS と JS ファイルのコピーで、そのホームページが原型となっています。別のページでは、100% 完全な CSS/JS が適用されない可能性がありますが、少なくとも CSS/JS がまったくないという影響は軽減されます (たいてい大幅に軽減されます)。

このオプションを有効化すると、Autoptimize は、.htaccess (Apache 用のファイル) に ErrorDocument 404 を追加し、また WordPress コアのtemplate_redirect にもフックして WordPress によって処理された 404 エラーを捕捉します。NGINX を利用していれば以下のようなコードが動作するでしょう (NGINX に詳しくありませんが私の環境で動作させています)。

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

Autoptimize で使われるオープンソースソフトウェアは ?

以下の素晴らしいオープンソース・プロジェクトが、何らかの形で Autoptimize に使われています:

サポートを得たい

wordpress.org のサポート用掲示板でサポートを得ることができます。もし、Autoptimize の設定では解決せず、コード内にバグを発見したと100%確信するなら、GitHub 上で 「問題 (issue)」を作成できます。プレミアムサポートをご希望であれば、Autoptimize Pro サポート・ウェブ最適化サービス をご覧ください。

もうやめたいです。Autoptimize をどうやって削除できますか ?

  • プラグインを無効化 (これによりオプションとキャッシュが削除されます)
  • プラグインを削除
  • Autoptimize で生成された CSS/JS を参照している可能性のあるキャッシュを消去 (WP Super Cache などページキャッシュ用プラグイン)

貢献するには

Github 上の Autoptimize をフォークして コードを提供するだけです !

評価

2020年11月23日
I didn't realise I hadn't reviewed this yet! Autoptimize is a lifesaver when it comes to page speed. A number of caching plugins do something similar, but none of them quite match up to the particular combination of functions and options you'll get here. I consider it a must-have on every site I build, and if you care at all about speed or technical SEO, you probably should too. Also, developer support is just superb. I've seen paid plugins with lower standards. Seeing how the dev cares about maintaining this plugin gives me great confidence in continuing to use and recommend it for every site, bar none.
2020年11月19日
The plugin was really helpful in speeding up my website, and their support was great! I was having trouble with a landing page not being formatted when using autoptimize. Their support team was able to help me use their plugin and my landing page. Thanks again!
2020年11月15日
This plugin is like magic! I cannot thank the plugin author enough! It is absolutely amazing how much it's helped me speed up my site. My site's speed scores go up 20 points with Autoptimize! Which is SF to me! This makes all the difference in the world! I highly recommend it! A word of advice for site owners: Don't hope for miracles if you're using a page builder that's bloating up your code. No amount of optimization is going to help much. I was first building my site with Elementor and, when I installed Autoptimize, it did help, but very little. I then switched to using solely GeneratePress (no Page builder) and my speed skyrocketed. Unfortunately, a lot of page builders don't have very clean code and they bloat sites, so it's very hard to optimize that. I want to thank the Autoptimize plugin author from the bottom of mu heart. Your work means the world to me! Also, the support is so great and fast! Thank you so much for all the help!
1,165件のレビューをすべて表示

貢献者と開発者

Autoptimize はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Autoptimize” は28ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Autoptimize” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

2.7.8

  • Image optimization: add support for AVIF image format for browsers that support it (enabled with the existing WebP-option, also requires lazy-load to be active)
  • Critical CSS: further security improvements of critical CSS import settings upload, based on the input of Marcin Weglowski of afine.com
  • Misc. other minor fixes, see the GitHub commit log.

2.7.7

  • critical CSS: make sure pages get a path-based rule even if a CPT or template matches (when “path based rules for pages” option is on)
  • critical CSS: make sure the “unload CCSS javascript” is only added once
  • settings screens: switch jQuery .attr() to .prop() as suggested by jQuery Migrate to prepare for the great oncoming big jQuery updates
  • HTML minify: reverse placeholder array to make sure last replaced placeholder is changed back first to fix rare issues
  • security fix: kudos to Erin Germ for finding & reporting an authenticated XSS vulnerability
  • security fix: props to an anonymous pentester for finding & reporting an authenticated malicous file upload vulnerability

2.7.6

  • 修正: 「インラインと遅延」が有効の場合にいた上部のフロントエンドの管理バーが表示されていなかった
  • 修正:「インラインと遅延」が有効の場合に第三者製のCSSファイルが遅延していた
  • 追加の設定画面でのコピーの小さな変更

2.7.5

  • urgent fix for Google Fonts aggregate & preload that broke badly in 2.7.4.

2.7.4

  • 画像最適化: アイコンリンクも最適化
  • 画像最適化: Safari における WebP の検出を修正 (@pinkasey の貢献)
  • 画像遅延読み込み: remove CSS that hides the placeholder image/ sets transistion between placeholder and final image
  • クリティカル CSS: 読み込み時に CCSS を読み込み解除する新規の拡張オプション
  • Critical CSS improvement: cache templates in a transient to avoid overhead of having to search filesystem time and time again (contributed by @pratham2003)
  • クリティカル CSS の改善: よりよくしたが、まだ試験的な jQuery の遅延ロジック
  • Critical CSS fix: prevent MANUAL template-based rules being overwritten
  • CSS Inline & defer: move away from old loadCSS-based approach to Filamentgroup’s new, simpler method
  • 新規インストールでは、標準で 404 フォールバックを有効化
  • changed all occurences of blacklist/ whitelist to blocklist/ allowlist. The filters autoptimize_filter_js_whitelist and autoptimize_filter_css_whitelist still work in 2.7.4 but usage is deprecated and should be replaced with autoptimize_filter_js_allowlist and autoptimize_filter_css_allowlist.
  • GPL であることを明示的するために readme を更新 + Autoptimize で使用されている以前からのオープンソースプロジェクトを賞賛 !
  • WordPress 5.5 ベータ 2 で動作確認

2.7.3

  • クリティカル CSS: 再取得の代わりに PHP プロセスのキャッシュの設定
  • クリティカル CSS: criticalcss.com を呼び出す間隔の短縮 (非同期のジョブ待ち処理時間の短縮)
  • インラインと遅延 CSS: 事前読み込みされていない除外ファイルを修正
  • 404 フォールバック: (背景)画像ではなく、CSS/JS 用のフォールバックファイルのみを作成
  • Cyrille (@css31) の提案によるコピー変更。感謝 !
  • 色々。ほかの小さな修正。GitHub のコミットの記録を参照。

2.7.2

  • CSS: 特定の翻訳文字列による設定ページの問題を修正
  • クリティカル CSS: マルチサイトネットワークの設定で “inline & defer” not being “seen” を修正
  • クリティカル CSS: パス基準のルールにリンクを追加
  • クリティカル CSS: 非 ASCII の URL がルールに一致しないのを修正
  • 改善: 色々な自動最適化の自動無効化。ページビルダーの URL
  • 改善: 既に onload 属性があれば、未結合の CSS を変更しない。
  • 画像遅延読み込みの改善: 背景画像関連の &quot; を除去

2.7.1

2.7.0

  • クリティカル CSS パワーアップの統合。
  • 見つからない自動最適化ファイルをフォールバック JS/CSS により供給する新規オプションの追加。
  • 様々なバッチ処理。ちょっとした改良と修正。詳細は GitHub のコミットの記録を参照。

2.6.2

  • 画像に loading="eager" 属性があれば、自動で遅延読み込みから除外する。
  • bugfix: don’t take querystring into account when deciding as-value for preloaded resources.
  • バグ修正: ShortPixel への送信前に URL を正規化することで、LQIP 画像をが常にはたらくように (画像最適化と遅延読み込みの両方が有効な場合に使用)。
  • 必要な WordPress バージョンの下限を 4.4 に引き上げ。

2.6.1

  • バグ修正: 画像が読み込めない、または正しく読み込まれないという、遅延読み込みの複数のバグ
  • バグ修正: 設定画面が利用できなくなる、マルチサイトの複数のバグ
  • バグ修正: 再度、3つ目の引数を autoptimize_filter_js_minify_excluded-フィルターに追加して下位互換性を確保し、これにより3つ目の引数を想定していた Smart Cookie Kit の破損を避けるようにした。

2.6.0

  • 新規: マルチサイトにおいて、ネットワーク単位、または個々のサイト単位で設定可能に。
  • 追加タブ: 事前読み込みする必要があるリソースを指定する新規オプション。
  • 追加タブ: 自動最適化された (CSS ベースの) Google フォントに、display=swap を追加。
  • 画像: div のインラインの style 属性に設定されている背景画像の遅延読み込みに対応。
  • 画像: LazySizes 5.2 へ更新。
  • CSS/ JS: 自動最適化されたリソースに type 属性を追加しない
  • 改善:キャッシュの消去も Kinsta, WP-Optimize, Nginx helper とでも統合されます。
  • Autoptimize 2.7 で完成した criticalcss.com の統合を強調するよう「クリティカル CSS」タブを追加。
  • 様々なバッチ処理。ちょっとした改良と修正。詳細は GitHub のコミットの記録を参照。

2.5.1

  • 画像: <picture><source> も最適化と遅延読み込み
  • 画像: 色々。遅延読み込みの改善
  • 画像: LazySizes 5.0.0 へ更新。
  • CSS: 未結合の CSS リソースの遅延ロジックを改善。
  • 設定ページ: JS, CSS HTML 拡張オプションを標準で表示 (多くの人がボタンを見つけていなかった)

2.5.0

  • 画像最適化を別のタブに移動し、すべてのコードをファイルに分割。
  • 遅延読み込みを追加 (LazySizes を利用)
  • WebP 対応を追加 (画像最適化と遅延読み込みの有効化が必要です)
  • 除外した JS/CSS ファイルの最小化を有効化/無効化するオプションの追加 (標準では有効)
  • 色々。バグ修正と小さな改善

older