エンド ユーザーは、より優れたサーバー パフォーマンスと速度を期待しています。そのため、適切な Web サーバーの最適化に重点を置く必要があります。これは、Web サーバーのパフォーマンスに大きな影響を与えます。このドキュメントでは、ShopEngine を使用してサーバーの全体的な速度を向上させるさまざまな方法について説明しました。

ShopEngine によるサーバー パフォーマンスの向上方法 #

がある 2つの道 サーバーのパフォーマンスを向上させるために、以下の詳細をご覧ください。

方法 1 アセット キャッシュ ポリシー #

あなたはできる 効率的なキャッシュポリシーで静的アセットを提供する 以下のように 手動プロセスとプラグインの使用.

手動プロセス #

がある ふたつのやり方 アセット キャッシュ ポリシーを手動で実行するには、次の手順に従ってください。

Apache サーバー #

これは簡単なプロセスです。 以下のコードをコピーして .htaccess ファイルに貼り付けます。

AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000ファイルETag MTime サイズヘッダー設定 Pragma "public" ヘッダー追加 Cache-Control "public" ヘッダー設定解除 Set-Cookie ファイルETag MTime サイズヘッダーにプラグマ「public」を設定 ヘッダーにキャッシュコントロール「max-age=3600, public」を設定ファイルETag MTime サイズヘッダー設定 Pragma "public" ヘッダー設定 Cache-Control "max-age=31536000, public" ヘッダー設定解除 Set-Cookieヘッダー設定 Referrer-Policy "no-referrer-when-downgrade"

Nginx サーバー #

通常 /etc/nginx/site-enabled/default にあるサーバー ブロック内に次のスニペットを追加します。これは、既存のロケーション ブロックに継承されるグローバル expires ディレクティブです。

有効期限付きキャッシュ制御ヘッダー:

map $request_uri $expires { デフォルトはオフ; ~*\.(jpg|jpeg|png|gif|ico|css|js|pdf|woff|woff2|doc|docx)(\?|$) 365d; } server { … 有効期限 $expires; ... 場所 ... { ... } ... }

WordPress プラグイン #

技術的な知識が全くない場合は、適切なプラグインを使用してアセットキャッシュポリシーを適用することをお勧めします。例: W3 Total Cache と WP Rocket プラグイン.

W3 トータルキャッシュ #

プラグインをインストールして ダッシュボードから -> 1. パフォーマンスに移動 -> 2. ブラウザキャッシュを選択 -> 3. CSSとJSを検索 -> 4. Expiresヘッダーを設定 -> 5. Expiresヘッダーの有効期間 -> 6. キャッシュ制御ヘッダーを設定 -> 7. キャッシュ制御ポリシー

WPロケット #

WP Rocket プラグインも W3 Total Cache プラグインのように動作します。このプラグインは、ブラウザ キャッシュ機能 (Cache TTL) を有効にするために必要なすべての情報で .htaccess ファイルを更新します。

方法2 フォント管理 #

これは、サーバーの速度を向上させるために適用できる 2 番目の効果的な方法です。ここでは、Web フォントの読み込み中にテキストが表示され続けるようにする必要があります。

手動プロセス #

手動のプロセスに従うことも、プラグインを使用することもできます。

インラインフォント読み込み #

このシステムにより、ブラウザは外部スタイルシートのダウンロードを待つ必要がないため、フォント宣言をより早く検出できるようになります。 

サードパーティフォントの読み込み #

サイトでサードパーティのサイトからフォントを読み込む場合は、 事前接続 サードパーティのオリジンとの早期接続を確立するためのリソースヒント

フォント プロバイダーは、スタイルシートとフォントを別のオリジンから提供する場合があることに注意してください。たとえば、これは、Google Fonts で preconnect リソース ヒントが使用される方法です。

フォント配信 #

使用が推奨される自己ホストフォント コンテンツ配信ネットワーク(CDN)とHTTP/2これらの技術を使わないと、セルフホストフォントがより良いパフォーマンスを発揮する可能性は低くなります。セルフホストでは、次のような他の重要な点にも注目する必要があります。 サブセット化とWOFF2圧縮.

• Unicode範囲: これは、 サブセット.

• ウォフ2: 最高の圧縮を提供します。

ウェブフォントを減らす #

システムフォントと可変フォント サイト上で使用される Web フォントの数を減らす可能性のある 2 つの方法があります。

• システムフォント: システム フォントは、ユーザーのデバイスのユーザー インターフェイスで使用される既定のフォントです。

• 可変フォント: 背景にあるアイデアは、1つの可変フォントを複数のフォントファイルの代わりとして使用できるというものです。たとえば、 重さ 軸を使用することで、これまでは別々のフォントが必要だった文字を実装することができる。 ライト、レギュラー、ボールド、 そして 極太.

#

フォントレンダリング #

ブラウザによってこのシナリオの処理方法は異なります。デフォルトでは、Chromium ベースのブラウザと Firefox ブラウザは、関連付けられた Web フォントが読み込まれていない場合、最大 3 秒間テキストのレンダリングをブロックします。Safari はテキストのレンダリングを無期限にブロックします。 フォント表示 関連付けられている Web フォントが読み込まれていない場合に、テキストのレンダリングをどのように進めるかをブラウザに通知します。

• パフォーマンスが最優先事項である場合: font-display: オプションを使用することができます

テキストのレンダリングは 100 ミリ秒以上遅延されず、フォントスワップに関連したレイアウトのシフトが発生しないことが保証されます。

• テキストを Web フォントで表示することが最優先事項である場合: font-display: swap を使用する

WordPress プラグイン #

フォント管理システムを適用するためのプラグインはいくつかあります。以下に3つの例を示します。

資産のクリーンアップ #

削減する ページの肥大化 このプラグインは、読み込まれる不要なアセットをスキャンします。これにより、役に立たない CSS/JS をアンロードできます。どのキャッシュ プラグインでも最高のパフォーマンスを発揮します。

アクセス ダッシュボード -> 1. プラグインに移動 -> 2. Asset CleanUpを見つける -> 3. 設定をクリック -> 4. Google Fontsを見つける -> 5. これで、 レンダリングをブロックするために複数のリクエストを結合して少数のリクエストにまとめるをオンにします（デフォルト）

Wpロケット #

WP Rocket は、目に見えないテキストのフラッシュを修正し、Web フォントの読み込み中にテキストが表示され続けるようにするのに役立ちます。これは、font-display: swap 属性を適用して Google フォントを最適化する、WordPress 用の最高のキャッシュ プラグインの 1 つです。WP Rocket はインストール時に Google フォントを自動的に最適化し、そのようなフォントに関連する Page Speed Insights の警告に即座に対処します。

サイトグラウンドオプティマイザー #

あなたの ダッシュボード -> 1. プラグインに移動 -> 2. SGオプティマイザーをクリック -> 3. フロントエンドをクリック -> 4. ウェブフォントの最適化を見つける -> 5. オプションを有効または無効にする

以上が、ShopEngine でサーバー速度を高速化するための便利なテクニックです。ガイドラインに従って適用してください。また、特定の問題については、ShopEngine サポート チームにお問い合わせください。