フォント読み込み戦略：フォントの手法は高速で、UXには影響しません。

美しいウェブサイト...しかし、なぜ手紙がゆっくりと上がっているのですか？顧客がすぐに「プレス」する原因となる問題

あなたは今までに行ったことがありますか？美しく設計されたウェブサイトに入ります。しかし、代わりに、メッセージになるはずの空きスペースを座ってじっと見つめたり、奇妙な顔（基本システムフォントのように）を最初に見せたり、もう1秒で見せたりする必要がありました。 「ウェブサイトはとても遅いです。」 「見て、プロではない」この問題は小さな問題ではありません。多くの人が見落とすかもしれないのは、ユーザーエクスペリエンス（ユーザーエクスペリエンス）と変換率の「本当の殺人者」です。知らないうちに最初の3秒から顧客を失う可能性があります。 「フォント」ストーリーのためだけです

イラストのプロンプト：比較画像Webサイト画面の前には、FOITアイコンが付いた空のスペースが表示され、反対側には、デザイン（FOUT）と一致しない基本的なフォントがユーザーを苛立たせる顔と表示されます。

舞台裏：なぜフォントが私たちのウェブサイトを「つまずく」ようにするのですか？

この問題の中心は、ユーザーがウェブサイトを開いたときにブラウザメソッドによって引き起こされます。ブラウザはHTMLコードの読み取りを開始してWebページを作成します。 「Webフォント」（すべてのユーザーのデバイスにインストールされていない特別なフォント）を使用する必要があるというコマンドを見つけたとき、「最初に停止してください！サーバーからフォントファイルを最初にダウンロードする必要があります。ここにメッセージを表示する必要があります！」

「ダウンロードする停止」のプロセスこれは、Web開発者がよく知っている2つの古典的な問題です。

• foit（Invisible Textのフラッシュ）：または「文字が消える」は、ブラウザが最初にすべてのテキストを「非表示」することを選択する症状です。正しいフォントファイルをダウンロードするまで待ちます。そして、結果を表示して、ユーザーがしばらくの間空のスペースと見なされます
• Fout（Unstyled TextのFlash）：または「Strange Faces」は、ブラウザが以前にシステム内にあったフォントフォントを使用してテキストを表示することを選択する症状です。ユーザーがコンテンツをすぐに読み取り、正しいWebフォントスイッチをダウンロードすると、代わりにそのフォントを使用します。これにより、「瞬き」または迷惑なレイアウトシフトが発生します

これらの症状は両方とも、あなたのウェブサイトがレンダリングブロッキングリソースに問題を抱えていることを警告します。これは解決しなければならないものです。レンダリングブロッキングリソースを解決する方法を理解することは、 Web速度を向上させるために重要な最初のステップです。

イラストのプロンプト：シンプルなインフォグラフィックは、ブラウザの作業プロセスを表示します。1。html-> 2を読む。コマンドを参照してください。 Web Font-> 3を使用します。レンダリングを停止し、サーバーにリクエストを送信 - > 4。ダウンロードファイル - > 5を待機します。

残してください...あなたが思っているよりも損傷します！ビジネスに対する「スローダウンロードフォント」の効果

遅いダウンロードの問題は、単なる美しさではありません。しかし、それはあなたのビジネス目標に直接影響します：

• ユーザーエクスペリエンスを破る（悪いUX）：誰も待つのが好きではありません。 「遅延」または「けいれん」の感覚により、ウェブサイトは信頼できなく見えます。そして、ユーザーに一目ぼれを引き起こします
• Core Web VitalsはAbyssを指します： 、累積レイアウトシフト（CLS）に直接影響する深刻なレイアウトの動きを引き起こします。 FOITの問題は、メインメッセージが画面上で最大である場合、最大のコンテンツペイント（LCP）これはすべて、GoogleがSEOランキングを使用する重要な要素です。
• Bookceレートは上昇しています：ユーザーがWebサイトが遅く、友好的でないと感じたとき。彼らが競技者に押し付けて逃げる機会はすぐに上昇します。
• 変換率は低下しました：顧客が「有料」ボタンを押しようとしていると想像してください。しかし、メッセージとボタンは、ためらうことと不安定性を押したり前後に押したりしてすぐに発生しました。そして、それは販売の損失を意味するかもしれません

最終的に、「フォント」と呼ばれる小さな問題により、Googleのランキング、顧客の信頼、収入の両方を失う可能性があります。この改善は価値のある投資です。デザインUX/UIに注意を払っています良い心は、これらの問題を防ぐための鍵です。

イラストのプロンプト：影響を示す3つのグラフ画像：最初の「バウンスレート」が指摘され、2番目のロッド「コアWebバイタルスコア」が下に、3番目の「変換率」がリストされています。

ゲームを開いてゲームを修正してください！フォントをすばやくダウンロードし、ロケットを取り付けて、UXにフレンドリーします。

良いニュースは、この問題に効率的に対処する方法があるということです。そして、それらのほとんどは、あなたがここから始めようとすると思うほど複雑ではありません：

• 最も簡単な究極のセット：使用される `` font-display：swap`
  これは、最も簡単で最も効果的な方法です。コードを追加するだけです。 display = swap` Googleフォントからフォントを呼び出すとき、またはプロパティを追加するとき、 `font-display：swap;`独自のコードで。 「最初に基本的なフォントを表示します。待たないでください。実際のフォントが完了した場合は、この方法に切り替えて、FOITの問題をすぐに取り除き、ユーザーがコンテンツをより速く読み取ることができます。
• 
  Googleフォントのような外部サーバーからフォントを呼び出す代わりに、セルフホストWebフォントフォントファイルをダウンロードできます。 （Fort。Woff2は最小サイズであることを提案します）独自のサーバーに保持します。これにより、外部ドメイン（DNSルックアップ）への接続を削減するのに役立ち、ブラウザがより速く動作できるようになります。そして、キャッシュを完全に制御できます
• キューテクニック：
  Webの上部にあるメイントピック（H1）のフォント（折り目の上）など、非常に重要なフォントの重要なフォントをプリロードします。 「急いでこのフォントをダウンロードして準備してください。緊急に使用する必要があるため！」この方法により、フォントが最も重要に使用できるようになります。
• 必要なみを選択してください：サブセットフォント
  フォントファイル世界中のすべての言語の文字がある場合があります。ファイルが不必要に大きくなります。 「サブセット」は、私たちが本当に使用しなければならないキャラクター（英語やタイなど）を小さい新しいファイルにカットする手法です。 LOADをより速くします。GoogleFontsのツールは、言語を選択するときに基本を自動的にサブセットする傾向があります。

これらのテクニックを選択すると、ウェブサイトがより速くダウンロードするのに役立ちます。これは、コアWebバイタルに直接良い影響を与えます。特にINPとベストプラクティスの全体的なユーザーは、 Web.devのフォントロードベストプラクティス。

イラストのプロンプト：美しいインフォグラフィックは、アイコン付きの4つの主要な手法を示しています。

本物の例：eコマースのウェブサイトがフォントを調整して売り上げを変えるとき。

オンラインコーヒー豆を販売する「アロマビーンズ」は、ブランディングを作成するためにビンテージフォントを使用した美しいウェブサイトがあります。しかし、彼らは「支払いページからの出発率は異常です」という大きな問題に遭遇しました。チームは、チェックアウトページでは多くのWebフォントが使用されているため、FOITが「確認ボタンを確認する」とし、財務金額の概要が一瞬消えてしまうことを発見しました。混乱を引き起こし、顧客に自信を持っていません。

次のミッション：開発チームは、3つの主要な手法を使用して解決されました。

1. すべてのフォントを変更して「＆display = swap」を持つようにします
2. 自己ホスト。製品の価格と支払いボタンで使用されるメインフォント。
3. ボタンのフォントにコマンドを追加します。特に「注文の確認」

有形の結果：改善の1週間後には、CLSスコアが70％よりも優れていることがわかりました。これは、レンダリングブロッキングの問題です。これは以前にPagesSpeed Insightsで警告されており、最も重要なことには「チェックアウトページのカートの放棄は25％減少した」ため、全体的な販売が大幅に発生しました。これは、フォントのような小さなものを改善することで、本当にビジネスに大きな影響を与える可能性があるという証拠です。

イラストのプロンプト：左の携帯電話の前後のチェックアウトページには、価格と欠落ボタンが表示されます。ロードアイコンは、完全なWebページを表示する右側（後）で回転しています。上昇する販売グラフを備えたテキストとボタンをクリアします

それはあなたの目です！チェックリスト4ステップWebをアップグレードして、フォントをより速くダウンロードします。

あなたのウェブサイトをより速くする準備はできていますか？待つ必要はありません！この簡単なチェックリストに従ってみてください。

1. 現在のステータスを確認します。GooglePagesSpeedInsightsにアクセスして、Webサイトを表示します。あなたが正しいことがわかった場合、「WebFontロード中にテキストが表示されたままであることを確認する」という提案を探してください！
2. display = swap`（クイックウィン）： Googleフォントを使用する場合は、フォントを呼び出してURLで終了する「＆display = swap」を追加するために使用されます。これは最も簡単で最速の編集です。
3. （高度な場合）自己ホスロード：
   • フォントファイルをダウンロードします。著作権のあるソースから必要な.woff2 surname。
   • フォントファイルをホストにアップロードします。
   • cssファイルのコード '@font-face`を使用して、font-display：swap; ``
   • 最も重要なフォントのために「 `` `` `` `` `` `` `` `` `` `` `` `` `` `を追加
4. 測定と感謝： PagesSpeed Insightsに再び戻って、テストを実行します。アドバイスがなくなっていることがわかります。そして、全体的なスコアの方が良いです！

効率の改善は、フォントだけではありません。また、新しいフォーマット写真持続可能なWebデザインの一部である持続可能なWebサイトを作成したりすることも含まれます。

イラストのプロンプト：各アイテムにアイコンを備えた4つのアイテム（拡大メガネ、コード、ロケット、グラフ）を備えたチェックリスト画像と、安価なティックグリーンマークがあります。

人々が疑問に思う傾向がある質問（FAQ）は、フォントの読み込みに関するすべての問題をクリアします。

Q1： `` font-display：swap`と `` optional`を使用する必要がありますか？
A：ほとんどのWebサイトでは、「スワップ」が最良のオプションです。ユーザーが基本的なフォントですぐにコンテンツを表示し、「オプション」を持つ「オプション」が強い場合、フォントが短時間（約100ms）にロードされない場合（約100ms）、他の何かよりも重要な速度の場合に適しているデザインと一致しない基本的なフォントを使用することを意味するため、美しいフォントとして切り替えることが保証されます。

Q2：GoogleフォントCDNを使用するよりも速く自己ホストフォント？
A：常にではありませんが、より良い「コントロール」。 Googleフォントには強力なCDNがあり、世界中に広がっています。負荷を非常に高速にしますが、Webサイトからの呼び出しは、GoogleサーバーのDNSルックアップを実行する必要があります。自己ホストはこのステップアウトを削減します。しかし、あなた自身のサーバーが高速で、十分なキャッシュがあることを確認する必要があります。

Q3：1つのWebサイトには、いくつかのウェイト以下のWebフォントが必要ですか？
A：それほど良くない！原則によれば、1-2のフォントファミリのみを制限しようとします（トピックの場合は1、コンテンツは1など）、通常（400）、太字（700）などの必要な重みのみを選択します。 1つのページで5〜6個のフォントを使用すると、膨大なダウンロードが作成されます。

Q4：Web上のすべてのフォントをプリロードする必要がありますか？
A：必要ではなく、やるべきではありません！プリロードは、通常、メインの見出しのフォントまたは画面の上半分に表示されるメニュー（折りの上）に「重要であり、すぐに使用する必要がある」フォントに適しています。プリロード。すべてがブラウザの動作が一生懸命働きすぎて、マイナスの効果がある可能性があります。

イラストのプロンプト：清潔で理解しやすいように見える質問のアイコンアンスワール。

概要：「フォント」をウェブサイトの障害とさせないでください。

ストーリーは、「フォントロード」がユーザーエクスペリエンス、コアWebバイタル、SEOランキングに直接影響を与えるように見えるように見えることがわかりました。最も重要なことは、ビジネスの「収入」であり、ユーザーが欠落または点滅の問題に遭遇することができることです。

しかし、良いニュースは、この問題を解決することはそれほど難しくないことです。 「font-display：swap`を使用するなどの簡単なテクニックから始めて、多くの違いが生じる可能性があります。そして、最大の効率が必要な場合は、自己ホストとプリロードを行います。重要なフォントは、競合他社よりも際立っているウェブサイトをアップグレードするのに役立ちます。

それをする時が来ました！フォントのためにあなたの美しいウェブサイトが壊れるのを待たないでください。 10分かかるようにしてください。 PageSpeed Insightsを使用してWebサイトを確認し、今すぐ編集を開始してください。今日の投資は、将来の成長のための安定した基盤を構築することです！

技術とユーザーの両方のエクスペリエンスデザイン（UX/UI）を、あらゆるディメンションでウェブサイトの効率を向上させるのに役立つ専門家が必要な場合。今すぐVision X Brainチームに相談してください！私たちはあなたのウェブサイトを迅速に支援し、驚くべきビジネス結果を作成する準備ができています。

イラストのプロンプト：フォントアイコンを表示するグラフィックスは、「あなたのウェブサイトの可能性のロックを解除してください！」というメッセージで空に向かっているロケットに入れられています。

‍