Breeze v1.2のリリース：このメジャーアップデートがもたらす新機能の概要
公開: 2021-05-11
Cloudwaysは、Core Web Vitalsの互換性を改善し、最終的にWebサイトのPageSpeedInsightsスコアを向上させることに重点を置いたBreezev1.2をリリースしました。
まだ聞いていない場合は、Googleが今月新しいページエクスペリエンスの更新を公開します。 最近、無料のGoogleページエクスペリエンスチェッカーをリリースしました。これは、更新に対するサイトのパフォーマンスやその他のページエクスペリエンスの要因を測定するのに役立ちます。 実際、2021年の開始以来、Googleは製品の改善と、Googleページで最高のエクスペリエンスを提供するアップデートの展開に重点的に取り組んできました。
ただし、Breezeを最新バージョンに更新する前に、WordPressサイト全体をバックアップするか、ステージング環境で新しいリリースをテストすることを強くお勧めします。 新しいリリースと他のプラグインとの非互換性により、問題やランダムエラーが発生する場合があるため、バックアップの準備ができている場合は、WordPressサイトをすばやく復元できます。
Breeze v1.2の新機能
それでは、Breezeがバージョン1.2でもたらすエキサイティングな新機能について簡単に見てみましょう。
クロスオリジンセーフリンク
SEOの実践に精通している場合は、「noopenernoreferrer」属性の重要性を理解できます。 今回、Breezeには、「_ blank」ターゲット値を持つリンクに「noopenernoreferrer」属性を自動的に追加する新機能が付属しています。
注：エディターはnoopener noreferrerを自動的に追加するため、WordPressエディターに追加しないでください。 テーマファイルにリンクを追加します。 リンクを追加したら、wp-adminに戻ってBreeze設定を保存するか、キャッシュを削除します。
–Breezeのクロスオリジンセーフリンク
いくつかのユースケース
- _blankターゲット値で、 rel属性がない場合、この機能はrel =“ noopener noreferrer ”を直接追加します。
- _blankですが、 rel属性にnoopener値のみが含まれている場合、 noreferrerが追加されます。 たとえば、リンクにはnoopener属性のみが含まれます： noreferrer この機能は、noreferrer属性も追加します： <a href =”https://example.com” target =” _ blank” noopener noreferrer”>_blankですが、 relにnoreferrer値が含まれている場合、 noopenerも追加されます。
- _blankターゲット値とrelには両方のnoopenernoreferrerが含まれているため、変更はありません。
- hrefに＃リンク（ID）が含まれている場合、無視されます。つまり、変更はありません。
入力コード：
–テーマエディタにコードを入力する
コードの出力：
–コードの出力
ロード中もフォントは表示されたまま
サイトにアクセスするとフォントが読み込まれ、読み込み中はテキストが表示されません。 ユーザーエクスペリエンスを向上させるには、フォントのダウンロード中（フォントの読み込み時間）にテキストコンテンツ（フォールバックフォント）を表示する手法を使用する必要があります。 Breezeには、そのための新しい機能が追加されました。
この機能は、CSSミニファイをチェックすると表示され、CSSミニファイとCSSグループオプションでのみ機能します。 font-display：swap属性をCSSクラスに追加するには、コンテンツを変更する必要があります。
–Breezeでの縮小
この機能をテストするには、ビューページのソースで.cssファイルを確認し、 @ font-faceを検索します。 属性font-displayが追加されます。 そのfont-face定義にすでに属性font-displayがある場合、何も変更されません。
–CSSでのフォント表示
遅延読み込み画像
遅延読み込みは、ページ全体の画像を一度に読み込むのではなく、画面に表示されている画像のみを読み込む速度最適化手法です。 これにより、読み込み時間とユーザーエクスペリエンスを大幅に向上させることができます。
Breezeの新しいリリースでは、詳細オプションで画像の遅延読み込み機能が提供されています。 このオプションを有効にすると、画像はプレースホルダーとしてダミーの透明な画像に置き換えられ、表示するときに元の画像が読み込まれます。
–Breezeでの遅延読み込み画像
このコードは、解像度に基づいて正しい画像サイズを表示するために使用されるデータサイズとdata-srcset属性を認識します。 次の属性は、元の属性を置き換えます。
data-breeze = src
data-brsrcset = data-srcset
data-brsizes = data- size
遅延読み込み画像が機能しているかどうかを確認するには、 「CTRL + Shift + I」 →ネットワーク→ imgを選択→ページ全体を下にスクロールします。
–ブラウザでの遅延読み込みを確認します
リンクのプリロード
プリロードリンクは、サイトのパフォーマンスを高速化し、ページ速度の結果を改善するために[詳細オプション]メニューに追加したもう1つの新機能です。 リンクにマウスを合わせると、この機能によってキャッシュが作成され、そのリンクを開いたり、再度アクセスしたりすると、ページの読み込みが速くなります。
このオプションがバックエンドで有効になっている場合、JavaScriptファイルがフロントエンドに読み込まれます。これは他のライブラリに依存しません。
ユーザーがリンクに150ミリ秒以上ホバーすると、そのリンクのプリフェッチが有効になり、ページキャッシュが作成されます。 したがって、ユーザーがリンクをクリックすると、ページはコンテンツを即座に表示する準備が整います。
–Breezeでリンクをプリロードする
この機能は、ホバー時に次のページ全体をキャッシュしません。 代わりに、サイトの速度を少し上げるためにリクエストをキャッシュします。
注：デフォルトでは、リンクホバー遅延時間は150ミリ秒に設定されています。 Never CacheこれらのURLに含まれるURLは、プリロードのロードから除外されます。
Webフォントをプリロードします
[ Webフォントのプリロード]機能は[詳細オプション]で利用でき、簡単に使用できます。 あなたがする必要があるのは、フォントのみをロードするローカルフォントURLまたはCSSファイル（URL）を提供することです。 多くの場合、WebフォントはWebサイトの速度を低下させ、遅延を引き起こすため、この問題に取り組むのに役立つより良いソリューションを選択することをお勧めします。
このアップデートでは、サイトのパフォーマンスを向上させ、キーリクエストのプリロードの問題を取り除くのに役立つWebフォントのプリロード機能を提供します。
–BreezeでWebフォントをプリロードします
この機能は、特定のフォント（フィールドに追加）を最後にロードするのではなく、早期にロードするため、サイトのパフォーマンスとWebVitalスコアが向上します。
JSインラインスクリプトを遅らせる
Delay JS Inline Scriptsは、詳細オプションで利用できる新機能です。 これは、最終的にインラインJSをロードするように設計されているため、ユーザーとサイトの速度テスターにはロード時間が表示されません。
この背後にある概念は遅延読み込みです。この場合、Webサイトを操作（下にスクロール、カーソルを移動するなど）すると、インラインjsスクリプトが表示されます。 これは、サイトのパフォーマンスとWebVitalスコアを向上させるための優れた手法です。
–BreezeでJSインラインスクリプトを遅らせる
ここでは、Google広告などのインラインjsスクリプトにkeyキーワードを指定する必要があります。これにより、最後に特定のスクリプトが自動的に読み込まれます。
概要！
Cloudwaysチームは、Breezeを頼りになるキャッシュプラグインにするために24時間体制で取り組んでいます。 これは、ページ速度のエクスペリエンスとWebVitalスコアの向上に役立つ6つの新しいエキサイティングな機能を提供する最初のメジャーリリースです。
グーグルが今月そのページエクスペリエンスアップデートを公開するとき、うまくいけば、あなたのウェブサイトは新しいアップデートを利用する準備ができているでしょう。
Breeze v1.2について質問やフィードバックがある場合は、コメントセクションでお知らせください。