プラグインAutoptimize
の使用方法
サイトの速度は常に管理者の最も重要なトピックであるため、私はWordPressの高速化に非常に興味があります。
今日は、最高の無料アクセラレータの1つである自動刺激プラグインについて説明します。
Mục lục
プラグインはどのように私をスピードアップしますか？
自動刺激は、次の3つの重要な要素によってページの読み込み時間を改善します。
- CSSファイルを圧縮、マージ、および最適化する
- JavaScriptファイルを圧縮、マージ、および最適化する
- HTML圧縮
圧縮によりファイルサイズが減少し、プールによりサーバーへの要求数が減少します。これらの要因は両方とも、サイトの速度を上げるのに役立ちます。 「最適な」操作は、主に表示をブロックするCSSとレンダリングをブロックするJSを削除して、折り畳み上のコンテンツを優先することです。
プラグインをインストールしてアクティブ化した後、その設定に移動します。
基本設定
そのカスタムインターフェイスは次のとおりです。3つの最適なオプションすべてにチェックマークを付けます。
次に、一番下までスクロールして、[変更を保存]/[変更を保存]をクリックします。
CDNサービス（MaxCDN、KeyCDN、CDNSunなど）を使用する場合は、CDNオプションにCDNルートURLを入力します。それ以外の場合は、空白のままにします（私は個人的に使用しないため、この部分では何も入力されません）：
高度なカスタマイズ
基本的なオプションでは、すでにWebサイトを高速化する必要があります。より詳細な最適化が必要な場合は、高度なカスタマイズを行ってください。
高度なカスタマイズセクションに入るには、以下に示すようにボタンをクリックします。
その高度なインターフェイスは次のとおりです。
各オプションについて詳しく説明します。
- HTMLコメントを保持しますか？これは、HTMLコメントをページに保持することです。 HTMLコメントを保持する場合は、チェックマークを付けます。
- <head>でJavaScriptを強制しますか？：つまり、JSをにプッシュします。これをチェックすると、JS関連のバグが修正される可能性がありますが、レンダリングのブロックの問題が発生する可能性があります。私の個人的な選択：カチカチ音をたてないでください。
- インラインJSも集約しますか？：インラインJSも含まれます。このチェックは、インラインJSの抽出と集約に役立ち、パフォーマンスの向上に役立ちますが、キャッシュサイズをすばやく増やすことができます。個人的な選択：サイトに応じて「はい」または「いいえ」ですが、通常は選択されません。
- Autoptimizeからスクリプトを除外する：つまり、特定のJSファイルを最適化しないでください（パッケージ化と圧縮は行いません）。デフォルトでは、AutoptimizeはjQueryファイルを最適化しません。その理由は、多くのプラグインとテーマがjQueryを使用し、Autoptimizeが最適化を行うと、それらのプラグインとテーマの機能が損なわれるためです（そしてWebページに影響します）。最適化されていないファイルを追加するには、対応する領域にその名前を入力し、コンマで区切ります（例：any.js、another.js）。
- トライキャッチラッピングを追加しますか？ ：JSでエラーが発生した場合は、これにチェックマークを付ける必要があります。
- データの生成：画像のURI？これにより、小さな背景画像をCSSファイルに含めて、追加の画像ダウンロード要件を回避できます。あなたはカチカチ音をたてる必要があります。 （画像base64エンコーディングを使用して、コードをCSSに直接インライン化できます）
- インラインCSSも集約しますか？これにより、インラインCSSマージがインラインJSマージと同様になり、ページに応じてチェックできるかどうかを確認できますが、通常はチェックしません。なぜですか。プレステージテーマでは、インラインCSSは主にブロックを回避するために使用されるため、何も含める必要はありません。
- CSSをインライン化して延期しますか？つまり、CSSのロードをインライン化および延期します。通常、AutoptimzeはCSSを最適化し、headタグの上部に配置しますが、ページのレンダリング（GoogleのPageSpeed Insightメッセージに通常表示されるメッセージ）をブロックします。このオプションをオンにすると、CSSファイルが延期されます（最初にロードするのはHTMLとインラインCSSを優先します）。また、ページレイアウトがあまり影響を受けないように、ここでCSSをCSSの先頭に貼り付けに追加できます。これらは、折り畳み上コンテンツのページレイアウトに関連する重要なCSSです。このCSSを取得するには、https：//www.sitelocity.com/critical-path-css-generatorにアクセスし、投稿のURLを貼り付けると、必要なCSSが抽出されます。個人的な選択：状況によって異なりますが、問題のないサイトもあれば、問題のないサイトもありますが、全体的には問題ありません。
- すべてのCSSをインライン化しますか？すべてのCSSをインライン化します。これには、CSSをオフラインにする場合に比べてリクエストを減らす効果があります。ただし、CSSファイルが大きくなく、ユーザーあたりのページビュー数が少ない場合にのみ有効です。すべてのCSSをインライン化すると、ブラウザのキャッシュが完全に防止されます。個人的な選択：ほとんどの場合、チェックしないでください。
- CSSをAutoptimizeから除外する：JSを除外するのと同じ意味です。ただし、ここではCSSファイルを除外しています。 Autoptimizeで最適化するとサイトの機能やレイアウトが破壊されるCSSファイルがありますが、ここで除外する必要があります。デフォルトでは、wp-content / cache /、wp-content / uploads /、admin-bar.min.css、dashicons.min.cssなどの一部のCSSファイルが除外されます。
- キャッシュ情報：このセクションには、ディレクトリ、上書きステータスの自動最適化、使用可能なキャッシュファイルサイズなどのキャッシュ関連情報が表示されます。
- その他のオプション：これらは追加の詳細オプションです。複合スクリプト/cssを静的ファイルとして保存しますか？ JSおよびCSSファイルの静的キャッシュに関連します。ログインしたユーザー向けにも最適化しますか？自動最適化に関連するものは、ログインしている両方のユーザーに対して有効になります。個人的な選択：チェックされています。
カスタムエクストラ/インクリメンタル最適化
これらのオプションは、Webサイトの速度をさらに向上させるのに引き続き役立ちます。
- 絵文字の削除：インラインCSSおよびインラインJS絵文字の削除が含まれます（最適化されていないJSファイルを除く）。個人的な選択：チェックされています。
- 静的リソースからのクエリ文字列の削除：クエリ文字列（またはバージョン/バージョン固有のパラメーター）の削除が含まれます。サイトの速度は向上しませんが、パフォーマンススコアの向上に役立ちます。個人的な選択：ダニなし。
- Google Fonts ：テーマでGoogle Fontsを使用している場合、このオプションはGoogle Fontsを削除する（Google Fontsを削除する）のに役立ちます。頭の中で結合してリンクします。これは、Google Fontsがマージされてから、頭のタグを付けることを強制されることを意味します。フォントをwebfont.jsと非同期で組み合わせてロードするということは、ファイルをマージしてwebfont.jsと非同期でロードすることを意味します。そのままにしておきます。つまり、サイトにGoogle Fontsがある場合は、ダウンロードされます。個人的な選択：チェックされています。
- サードパーティドメイン（上級ユーザー）への事前接続：このオプションには、サードパーティドメインへの事前接続が含まれます。多くのサードパーティリソース間でDNSルックアップと安全な接続を並行して実行するため、待ち時間が短縮されます。プリフェッチやプリロードなど、より類似したメカニズムを学ぶことができます。
- 非同期Javascriptファイル（上級ユーザー） ：このオプションは、JSファイルの読み込みを非同期的に処理します。非同期でダウンロードする必要のあるファイルがある場合は、ローカルおよびサードパーティを含め、ここに含めてください。
- YouTubeビデオの最適化：これには、追加のプラグインをインストールする必要があります。 YouTube動画の読み込みを遅らせ、ページの読み込み速度を上げるのに役立ちます。ただし、ビデオがページの上部にない場合にのみ適しています（ページの中央または下部にある場合にのみ推奨されます）。ビデオのダウンロードを遅らせる別の方法について詳しくは、こちらをご覧ください。 WPYouTubeLyteプラグインの使用方法についてはこちらをご覧ください。
さらなる最適化/最終的な制限なし
これは、Autoptimizeの作者がサイトをさらに最適化する「アフィリエイト」製品を提供することによって「お金を稼ぐ」場所です。これらには次のものが含まれます。
- Autoptimize Proサポート：Webサイトを高速化するためのAutoptimizeのプレミアムサポートパッケージ。価格は99ユーロから。
- WP Rocketこれは、ウェブサイトのスピードアップに役立つキャッシュを作成するための有料プラグインであり、多くの人々に高く評価されています。個人のブログでは高額になる可能性があります。お金を節約したい場合は、WPスーパーキャッシュプラグインまたはキャッシュイネーブラーに置き換えることをお勧めします。 Autoptimizeと組み合わせると問題なく動作します。
- ShortPixelは、画像の圧縮に役立つプラグインです。
- Criticalcss.comは、フォールドを超えるCSS（別名Critical CSS –レンダリングブロックCSSを回避するため）のプレミアムソリューションです。
- Sitegroundは、WordPress用に最適化されたホスティングソリューションです。 Closte、Linode、UpCloud、DigitalOcean、Vultr、KnownHostを追加することをお勧めします。
- Astraは、パフォーマンスが最適化されたテーマソリューションです。私はこのアクセラレータテーマが本当に好きです、その無料バージョンにも多くのユーザーがいます。ただし、一般的に、GeneratePressはAstraよりも優位に立っています。
- 最終的にKeyCDNは、CDNを使用して、グローバルに分散されたサーバーを介したページの読み込み速度を向上させるソリューションです。ただし、現在KeyCDN（2020）はベトナムにサーバーがないため、CDNSunに置き換えることができ、価格は同じで、ハノイとサイゴンに2つのPoPがあります（このCDNSunマニュアルを参照）。さらに、ベトナム国外にあるホストでWebを高速化したい場合は、Cloudflareを使用できます。これは手頃なソリューションであり、高品質であり、特にセットアップは他のWebサイトや他のサービスよりもはるかに簡単です。従来のCDNサービス。実際、私はCloudFlare有料版（20USD /月プラン）を使用しており、非常に満足しています（Cloudflareユーザーガイドはこちらをご覧ください）が、従来のスタイルに従ってCDNを最適化するのに十分なスキルがある場合は言うまでもありません。 PS：CloudflareはベトナムにPoPを持っていますが、実際にはユーザーはまだここからリソースをダウンロードできません。詳細については、この記事を参照してください。
結論
Autoptimzeは、ページの読み込み速度を向上させるのに役立つ非常に優れたツールです。そのオプションは非常に詳細です。そして、あなたがカスタマイズに熟練しているなら、結果は印象的です。
Autoptimizeは、CacheEnablerなどの無料のキャッシュプラグイン用の優れたkBloodプラグインでもあります。有料の静的ページビルダープラグインを使用するために余分なお金を費やす必要はありません。
さて、最終テストです。自動トリガーにより、ページの読み込み速度が向上します。 A / Bテストを使用します。一方は、Autoptimizeを使用せず、もう一方は、同等の条件（同じサーバー、同じインターフェイス、同じコンテンツなど、同じ環境、つまり同じ条件、環境）で使用します。
GTmetrixツールを使用してWebサイトの速度をテストします。以下のビデオでは、左側のペインはAutoptimizeがインストールされていないWebです。右側のペインにはAutoptimizeがインストールされています。速度テストを5回続けて実行した結果、すべての場合で、AutoptimizeがインストールされているWebサイトが、ページの読み込み速度、ページサイズ、接続数の3つの要素すべてを獲得したことがわかりました。これらの統計が低いほど、優れています
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
