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 は完璧に動作するでしょう。問題が起きた場合の設定方法の情報に関しては、以下の「トラブルシューティング」を参照してください。

Why is jquery.min.js not optimized

Starting from AO 2.1 WordPress core’s jquery.min.js is not optimized for the simple reason a lot of popular plugins inject inline JS that is not aggregated either (due to possible cache size issues with unique code in inline JS) which relies on jquery being available, so excluding jquery.min.js ensures that most sites will work out of the box. If you want optimize jquery as well, you can remove it from the JS optimization exclusion-list (you might have to enable “also aggregate inline JS” as well or switch to “force JS in head”).

自動最適化された 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 を強制的に連結しないようにできます。
  • In case some functionality on your site stops working (a carroussel, a menu, the search input, …) you’re likely hitting JavaScript optimization trouble. Change the “Aggregate inline JS” and/ or “Force JavaScript in head?” settings and try again. Excluding ‘js/jquery/jquery.min.js’ from optimization (see below) and optionally activating “Add try/catch wrapping“) can also help. Alternatively -for the technically savvy- you can exclude specific scripts from being treated (moved and/ or aggregated) by Autoptimize by adding a string that will match the offending Javascript or excluding it from within your template files or widgets by wrapping the code between noptimize-tags. Identifying the offending JavaScript and choosing the correct exclusion-string can be trial and error, but in the majority of cases JavaScript optimization issues can be solved this way. When debugging JavaScript issues, your browsers error console is the most important tool to help you understand what is going on.
  • If your theme or plugin require jQuery, you can try either forcing all in head and/ or excluding jquery.min.js (and jQuery-plugins if needed).
  • 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 が動きません。

Make sure js/jquery/jquery.min.js is in the comma-separated list of JS optimization exclusions (this is excluded in the default configuration).

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

In that case you have un-aggregated JavaScript that requires jQuery to be loaded, so you’ll have to add js/jquery/jquery.min.js to the comma-separated list of JS optimization exclusions.

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 files that are not autoptimized (because they were excluded or because they are hosted elsewhere) are typically render-blocking. By adding them in the comma-separated “async JS” field, Autoptimize will add the async flag causing the browser to load those files asynchronously (i.e. non-render blocking). This can however break your site (page), e.g. if you async “js/jquery/jquery.min.js” you will very likely get “jQuery is not defined”-errors. Use with care.

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

画像の最適化を有効にすると、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 をフォークして コードを提供するだけです !

評価

2021年3月4日
Core Web Vitals: I got 99. I don't even have to say how good the plugin is ...;)
2021年3月2日
The plugin has really improved the performance of my site. It took a little tinkering about with to get the results I was looking for but I was blown away by how quick the response was when I had configuration questions. Fantastic service.
2021年3月2日
Tested a lot of caching plugins over the last years and can say this is the one for me 🙂 In combination with "Async JavaScript" from the same developers a great solution. One suggestion: I need still to keep "W3 Total Cache" plugin active for one single task: they do the browser caching restrictions trough the HTACCESS very well. Sure I am a lazy PHP developer and can to this by my self but my customers must can do the same. So when browser caching could be implemented too, then this plugin is 10 stars in value.
2021年2月27日
I am getting an annoying message that won't go away: "Did you know Autoptimize includes on-the-fly image optimization (with support for WebP) and CDN via ShortPixel? Check out the Autoptimize Image settings to activate this option." You mention in the forums that we should add the code snippet below to make it go away. Where do we need to add that code snipped. In header.php? Somewhere else. Thanks, Marko add_filter('autoptimize_filter_main_imgopt_plug_notice','no_aosp_notice'); function no_aosp_notice() { return ''; }
2021年2月26日
why the hell didnt i review this earlier??? i would have sworn i did. to be honest: this whole optimization thing for wp in general is not the easiest one. but this one does it very well, even from scratch with no additional settings. if youre aware what you are doing this one is a breeze. and it is even sleek, unbloated and has very good support response. great piece of work. please keep it up.
1,217件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

2.8.1

  • Images: new option not to lazyload first X images
  • fix for “array to string” conversion errors in image optimization logic of .ico files
  • switch jQuery shorthand .click (in toolbar JS & PaND dismiss notice JS) to please jQuery Migrate helper (and because it’s better that way)

2.8.0

  • JavaScript: new option “defer but don’t aggregate”
  • JavaScript: ensure Autoptimize also acts on jQuery in WordPress 5.6 which is renamed to jquery.min.js from jquery.js before.
  • Images: add field to exclude images from being optimized.
  • Images: new filter (autoptimize_filter_imgopt_lazyload_from_nth) to tell AO not to lazyload the first X images (to improve LCP/ CLS).
  • Critical CSS: major improvements of the job processing mechanism, reducing time spent from up to 1 minute to just a couple of seconds.
  • Critical CSS: under “advanced options” replace “request limit” with “queue processing time limit” (default 30s).
  • Extra | Google Fonts: better parsing of version 2 Google Font URL’s (/css2/).
  • Misc. other minor fixes, see the GitHub commit log.

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 のコミットの記録を参照。

older