自分のフォントを即座にあなたの柵のアプリケーションをスピードアップ

フォントは、あなたのデザインを作るか、壊すことができます、そして、結果として、我々の多くは多分デフォルトシステムフォントを使用していないでしょう.Google Fonts 完璧なフォントを見つけるのは本当に簡単になりますが、それはパフォーマンスコストが付属することができます.あなたがGoogleから直接フォントをロードしているならば、以下のチュートリアルはあなたのRailsアプリケーションをスピードアップすることを保証されます.
Railsアプリケーションを実行します

(どうしようか?)
デモするには、クイックデモアプリを構築しましょう.
これはチュートリアルですが、Ruby on Railsの基本的な理解を持っていると仮定します.そうでないならば、あなたは私に何かについて詳しく述べる必要があります.

新しいRailsプロジェクトを作成する

rails new self_hosted_webfonts_demo --skip-sprockets --skip-spring
cd self_hosted_webfonts_demo

私は柵6.0.2.2を使用しています.そして、それはWebPacker 4.2.2でデフォルトになります、しかし、私はV 5で特徴を利用したいです、それで、私はV 5に宝石とノードパッケージを更新するつもりです.1.1 .お使いのアプリケーションでこれを行う必要はありませんが、このチュートリアルと一緒に従っている場合は必要ありません.確認して実行するbundle install && yarn install .
WebPackerをアップグレードしたら、基本的なウェルカムコントローラを作成し、config/routes.rb :

bin/rails generate controller welcome index

# config/routes.rb

Rails.application.routes.draw do
  get "welcome/index"
  root "welcome#index"
end

フォントの選択

我々は着陸ページを持っているので、我々は素晴らしいフォントで少しそれをナビゲートする必要があります.あなたが私のようであるならば、これは通常あなたが100を越えるときですGoogle Fonts . それを簡単に保つために、私は使用するつもりですLato . 私はあまりにも私は今必要なすべてのスタイルと重みを確信していないので、私は先に行くとすべての利用可能なスタイルを選択します(よく知られている?)そして、Googleが提供するリンクをコピーしてください.

我々はフォントを持っている今、我々のアプリケーションの頭にリンクを追加しましょうapp/views/layouts/application.html.erb あなたの上のラインでstylesheet_link_tag (新しいRailsアプリケーションの場合は7行です.

<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

ここにいる間、変えましょうstylesheet_link_tag to stylesheet_pack_tag アプリケーションのスタイルファイルを作成します.

- <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track": "reload" %>
+ <%= stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload" %>

touch `app/javascript/packs/application.scss`

インサイドapplication.scss , フォントファミリーを指定するには、次のCSS規則を追加します.

// app/javascript/packs/application.scss

html {
  font-family: 'Lato', sans-serif;
}

Railsサーバを起動したらbin/rails s ), に移動し、localhost:3000 , 私たちは私たちの素敵な、新しいフォントでレンダリングされている私たちの簡単な着陸ページを見る必要があります.

問題

私たちのビューは、新しいフォントではるかによく見えるにもかかわらず、私たちはちょうど我々のアプリケーションのパフォーマンスを低下させており、レンダリングブロックリソースを導入しました.LATOを読み込むとき、実際にスタイルシートをロードしており、ブラウザがGoogleのサーバーからファイルを取得するまでページをレンダリングしません.
レンダリングブロックのリソースを導入することは素晴らしいことではありません.しかし、さらに悪いことは、Googleに私たちのページをレンダリングするためにそのファイルを送信するためにGoogleに頼っていることです.ユーザーは現在、長い間、ページがロードされるのを待っています、そして、その時間はGoogleのサーバーがどれくらいのトラフィックを扱っているかによって変動します.

大きくない.灯台も幸せではない.
しかし、この問題の解決策があります.私はあなたに私が信じている方法を示すつもりです、そして、理解するのが最も簡単です、しかし、あなたが彼ら自身の長所と短所でその代わりに使うことができたいくつかの他の修正があります.

解決策

エンターtypefaces ギャツビー創設者からのプロジェクト.私は非常にプロジェクトの背後に彼の動機について読むことをお勧めしますが、TL;WebPackerを使用して、サーバーにフォントをインストールすることができます.そして、Googleに頼るのではなく、自分自身をホストします.
私はすでに私のサーバー上の他のすべてをホストしているので、このアプローチを取るために柵の環境で完璧な意味になります-そして、それはこのソリューションのためのGoogleのフォントを交換する超迅速です.
NPMのクイック検索typeface lato 私たちが探しているパッケージを明らかにします.

yarn add typeface-lato

では、フォントを手に入れた古い方法を削除しましょう.

- <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

そして最後のステップは我々のパッケージを必要としているapplication.js パック

// app/javascript/packs/application.js
require("typeface-lato")

Railsサーバをバックアップしてチェックアウトするならlocalhost:3000 , フォントはまだLATOであるべきです!クイックルックwebpacker-dev-server ログは、我々は現在、私たちが前にいた同じフォントのスタイルと重みを自己ホスティングしていることを明らかにする

灯台を介して性能回帰を修正したかどうか見てみましょう.

灯台はもはやレンダリングブロッキング資源を報告していません、我々は我々のパフォーマンスを押し上げました!

概要

我々は行くには良いはずです!これは、最初の有意義な塗料、および全体的なパフォーマンスにあなたの時間を短縮する簡単な、迅速な移行です.また、簡単に見落とされる(個人的な経験から話す).
これらの灯台監査がRails開発サーバーに対して実行されて、生産で彼らを走らせるための本当の代用でないという点に注意する価値があります、しかし、我々がどこにいるかについて、我々に十分な考えを与えなければなりません.より正確な結果を得るには、これらの監査を実行時に実行したり、生産モードでアプリケーションをローカルに起動する必要があります.
この変更はまた、別のJavaScriptパックでは、フォントを必要とするように、さらに強化を行うに位置し、あなたはjavascript_packs_with_chunks_tag . このチュートリアルでは、このチュートリアルを参照してください.here .
うまくいけば、これは役に立ちました!あなたがもう一つのアプローチをしたならば、私はコメントでそれについて聞いて興味があります.
ハッピーコーディング!