パフォーマンス

WordPressサイトのための35件のパフォーマンス最適化

Canvas で作られたページは、表示されるブロックのCSSとJavaScriptだけを読み込みます。それに加えて、35件の最適化機能があり、それぞれ自分で切り替えられるスイッチとして、控えめな初期設定と、その機能の平易な説明が付いています。

更新日:

常に有効

ブロックごとのアセット読み込み

ほとんどのテーマは巨大なスタイルシートと巨大なスクリプトを1つずつ読み込むため、ページはテーマのすべての機能のコストを毎回負担することになります。Canvasは、314個のブロックそれぞれに必要なCSSとJavaScriptを対応付け、そのページで実際に描画された内容に必要なものの和集合だけを読み込みます。

  • 料金ページでは、スライダーのスクリプトを読み込みません。
  • フォームのないページでは、フォーム処理のスクリプトを読み込みません
  • エディターも同じ方法でブロックスタイルを読み込みます
  • 設定は不要で、誤って無効にしてしまうこともありません

ブロックライブラリを見る

推測ではなく、明示的に指定

各ブロックは独自のアセットを宣言します。アセットの対応表はブロック内にあるため、更新を忘れてしまうような中央リストはありません。

コアブロックに対応

コアブロックとサードパーティ製ブロックは、独自の読み込み動作を維持します。Canvasがそれらのアセットを引き継いだり、WordPressとアセットを奪い合ったりすることはありません。

テンプレートも対象に含まれます

ヘッダー、フッター、ページタイトル、スライダーもブロックなので、シンプルなヘッダーを使うページではメガメニューのコードが読み込まれません。

追加購入は不要

条件付き読み込みはプレミアム機能でもアドオンでもありません。すべてのプランと期限切れのライセンスの状態でも、ライブラリはこの仕組みで動作します。

切り替え設定

対象ごとに分類した35件の最適化

ここにある仕組みに魔法はなく、隠されたものもありません。それぞれが、WordPress が送信するページに対して、具体的で確認可能な処理を一つずつ行います。

読み込み7

CSSとJavaScriptが最初の描画をブロックしないようにし、次のページの読み込みを早めに始めます。

  • 非クリティカルなスタイルシートを非同期で読み込む
  • 重要度の低いJavaScriptを遅延読み込み
  • 最初の操作まで JavaScriptの読み込みを遅らせる
  • ファーストビューで最も大きい画像をプリロード
  • ページで使用するオリジンへのプリコネクト
  • サードパーティホストのDNSプリフェッチ
  • 次のページを、クリックされる前に先読みして読み込みます

フォント 3

Webフォントの読み込み中もテキストは読みやすいままで、Googleフォントを外部サーバーへのリクエストにする必要もありません。

  • Add font-display swap to your web fonts
  • 最初の画面に必要なフォントを先読みする
  • Googleフォントを自社のサーバーから配信

メディア 6

画像はほとんどのページで最も容量の大きい要素ですが、最も設定を誤りやすい要素でもあります。

  • ファーストビューより下の画像を遅延読み込み
  • iframeと埋め込みを遅延読み込みする
  • WordPressが生成するJPEGの品質を設定
  • アップロードした画像の最大幅を制限する
  • WordPressが出力するレスポンシブ画像セットを制御
  • 生成される画像サイズ自体を制御

クリーンアップ8

WordPressには、すべてのサイトに負荷をかけるのに、ほとんどのサイトでは使われない機能が含まれています。

  • 静的リソースのクエリ文字列を削除
  • 絵文字用のスクリプトとスタイルを無効化
  • oEmbedの検出と埋め込みスクリプトを無効にする
  • フロントエンドでDashiconsを無効にする
  • XML-RPCを無効化
  • RSSフィードを無効化
  • Remove jQuery Migrate
  • セルフピンバックを無効にする

データベース 5

遅いサイトの管理画面側の負荷:リビジョン、自動保存、そして止まることのないHeartbeat。

  • 投稿が保持するリビジョンの数を制限する
  • 自動保存の間隔を設定
  • 管理画面のハートビートを制限または無効化
  • データベースから、リビジョン、トランジェント、スパムを削除します。
  • REST APIへのアクセスをログイン済みユーザーのみに制限

WooCommerce 5

ストアは、何も販売していないページを含め、サイトのすべてのページでスクリプトを読み込みます。

  • ストアの出力がないページではWooCommerceのJavaScriptを削除
  • 注文のアトリビューション追跡をオフにする
  • すべてのページでカートフラグメントのスクリプトによるポーリングを停止する
  • アカウントページ以外では、パスワード強度ライブラリを読み込まないようにする
  • チェックアウト以外のページでは、同梱の Select2 ライブラリを読み込まない

コンテンツデリバリーネットワーク(CDN)の書き換え 1

ページの表示時にアドレスを書き換えることで、すでに契約している配信ネットワークに、スタイルシート、スクリプト、画像、フォントを向けることができます。Canvasは配信ネットワークを提供しておらず、お客様のトラフィックを当社のサーバーを経由させることもありません。

合計で35個のスイッチがあり、WooCommerceの5個は、WooCommerceが有効な場合にのみ表示されます。ストア連携の詳細。

テーマオプションでの設定

そのすべてが切り替え設定であり、初期値は控えめに設定されています

Canvasは、どのサイトにも安全な機能を有効にし、それ以外の設定はお客様に任せます。各コントロールの横には、その理由を記載しています。通常は避けるべき設定が1つあり、その設定については、判断する際に操作しているパネル内で明記しています。

高速サイトを支えるもう一つの要素

SEOとアクセシビリティの基盤

すばやく読み込まれても、読めない、クロールできない、キーボードで操作できないページは完成とはいえません。これらはすべてテーマ自体に含まれており、どのプランでも利用でき、上位プランへのアップグレードで制限されるものはありません。

コンテンツのメタデータ

タイトル、説明文、ソーシャルカード、正規URL、robotsルール、サイトマップを、ページの表示内容からすべて自動生成します。最新の状態に保つ必要がある、コンテンツの二重管理は不要です。

16種類のスキーマタイプ

Organization、WebSite、WebPage、Person、パンくず、Product、Brand、Offer、レビューと評価、住所、地理座標、営業時間、サイト内検索は、該当する箇所に出力されます。

セマンティックランドマーク

ヘッダー、ナビゲーション、メイン、フッターのランドマーク、コンテンツへのスキップリンク、階層順に並んだ見出し、操作できるすべての要素に表示されるフォーカス。

キーボード操作に対応したメニュー

メニュー、メガメニュー、サイドパネル、モーダルは、キーボードで開く、移動する、閉じる操作ができます。また、アニメーションは訪問者のモーション低減設定を尊重します。

アクセシビリティ、セキュリティ、データエクスポートが、プレミアム機能になることはありません。これらは失効したライセンスでも利用できます。ウェブサイトが使えなくなることはサポート上の問題であり、ライセンスによる判断であってはならないからです。

方法

検証方法

速度とアクセシビリティについての主張は、誰でも簡単にできますし、簡単に確かめることもできます。当社は自社の主張を検証しており、その方法をご説明します。

ページを実際のブラウザーでデザインと比較します

すべてのデモページはブラウザでレンダリングされ、元のデザインと照合して測定されます。測定項目は、ドキュメントの高さ、セクションの幅、算出された余白、そしてJavaScriptで動的に変わる要素です。JavaScriptの要素は実行後に測定され、初回描画時には測定されません。

このサイトは3種類の画面幅で検査されています

このサイトのすべてのページは、axe-coreでWCAG 2.1のAおよびAA基準を、1440、1024、390ピクセル幅で検査しています。加えて、axeでは行わない次の検査も実施しています:h1は1つだけであること、見出しレベルを飛ばさないこと、4つのランドマークがあること、動作するスキップリンクがあること、横方向のはみ出しがないこと、12ピクセル未満の文字がないこと、テキストとして読めるリンクであること、タップターゲットが24ピクセル以上あること。

必要環境

Canvasの動作要件

7.1+

WordPress

Canvasはブロックエディターの上に構築されているため、サイトエディターを備えたWordPressが必要です。バージョン7.1以降。

7.4+

PHP

PHP 7.4以降。最新のPHPリリースへの更新は、多くのサイトにとって最も手軽な高速化の手段です。

7.1

動作確認済みバージョン

CanvasはWordPress 7.1でテスト済みで、WordPressの各リリースに合わせてアップデートを提供します。

よくある質問

パフォーマンスについて

よくいただくご質問への回答も含めてお伝えします。そのため、このページにはスコアを載せていません。

それでもキャッシュプラグインは必要ですか?

おそらく効果があります。これが率直な答えです。Canvasが制御するのは、テーマとWordPressが担う部分です。具体的には、ページが読み込むアセット、フォントと画像の動作、データベースの処理量です。ページキャッシュ、オブジェクトキャッシュ、エッジ配信はホスティング会社またはキャッシュプラグインの役割です。役割が異なるため、両方を併用するのが一般的な構成です。

これらを有効にすると、サイトが壊れてしまいますか?

どのスイッチも元に戻せます。他のプラグインと競合しやすいものは、初期状態でオフになっています。各スイッチには、その機能と、変更せずそのままにしておくべき場合が書かれています。本当にリスクの高い設定は、パネル内でその旨が明記されています。一度に1つずつオンにし、そのたびにフロントエンドを再読み込みしてください。

ブロックごとのアセット読み込みを設定する必要がありますか?

いいえ、見つけて有効にする設定はありません。これはブロックライブラリの仕組みです。各ブロックは必要なCSSとJavaScriptを宣言し、ページは実際に描画されたブロックの分をまとめて読み込みます。

デモは最適化された状態で届きますか?

サイト全体のデモインポートでは、デモのテーマオプションが適用されます。パフォーマンス関連の設定もその一部なので、デモは構築時に確認された設定から開始されます。後から変更することもできます。

このページで速度スコアを公開しないのはなぜですか?

当社のハードウェアでの合成テストのスコアは、お使いのホスティング、プラグイン、画像、訪問者について何も教えてくれません。当社が公開しているのは、各最適化機能が正確に何をするかです。そのため、機能をオンにして、お客様自身のインフラ上で、お客様自身のサイトを計測してください。

編集もできる、高速なウェブサイト

すべてのプランに同じブロックライブラリ、同じ35件の最適化、同じ条件付きアセット読み込みが含まれます。パフォーマンス面での差別化はありません。