.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabCocoonテーマ同梱のWebフォントを先読みさせて表示を高速化させる方法Cocoon2019.10.27当ブログでも使っている無料WordPressテーマCocoonでは、一部Webフォントを同梱しています。各種デザインやアイコン表示に必要なのですが、フォントを都度ダウンロードさせることとなるため、表示速度に影響を与えていました。具体的には、わりとファイルサイズが大きなWebフォントをあとの方でロードさせてしまうがゆえ、ページの描画完了が遅くなっていたのです。Insightsのスコアと体感速度、両方が大幅に改善したので、やり方を紹介します。難しいことはなく、コピペでできるので、ぜひ参考にしてください。Insightsのスコア変化(スマホスコア)BeforeAfter10ポイントの改善です。手持ちのスマホ(iPhone、Android)でアクセスしてみると体感速度が2倍くらいになりました。Insightsのスコアには反映されないそうですが、ロードに時間がかかるとユーザの離脱率がガバッと上がることを考えると、改善して悪いことではないと思います。重たいWebフォントを、あとのほうじゃなくてページにアクセスした瞬間から読み込みはじめておきなさいよ、という旨の指示をブラウザに与えるコードを追加します。crossorigin>(自分のブログのアドレス)は適宜読み替えてください。(このブログの場合はbloglab.naenote.netになります)貼る場所Cocoon設定>アクセス解析・認証>ヘッド用コード(※ヘッダではないので注意)preloadタグは、headタグの中に貼るためのタグなのでヘッド用コードに貼る必要があります。headタグ内ならどこでもいいと思うんですが、なるべく先頭に持ってくると効果が高いと思います。キャッシュブラグインを使っている場合、貼ったあとにキャッシュクリアを忘れないようにしてください。貼り付けたら完了です。Insightsの「改善できる項目」にヒント、というかこうしろレベルの指示が出ていました。短縮できる時間(推定)が7.41秒というのもすごいですね。親テーマの中身Cocoon設定の内容の影響を受けます。親テーマ側で、異なるバージョンのFontAwesomeを読み込むようになったCocoon設定で、読み込ませるFontAwesomeのバージョンを変えたなどの変更があった場合、preloadタグの中身のURIを変える必要があります。具体的には、下記コードの「?v=4.7.0」や「?36esek」などのクエリ部分、もしくはURIのディレクトリ部分がごっそり変わる可能性があります。Insightsの「キーリクエストのPreload」を見ればわかります。CacheなどのプラグインCloudflareなどのCDN.htaccessなどブラウザキャッシュサーバの高速化を行うPHPをバージョンアップするハイスペックなサーバに乗り換えるなどが定番です。ブログ記事で紹介されている高速化の施策でブラウザの描画の仕組み、特に描画順にまで踏み込んだものはなかなか見かけません。InsightsやGTMetrix、Chromeブラウザのデバッグコンソールなどをよくよく見てみると、結構いろんなヒントが散らばっています。いったあたりに踏み込んでいくのがこの実験室の存在意義でもあるので、今後この実験室やTwitterアカウントでも、いろいろ見つけ次第紹介していきたいと思います。フォローくださいませ。(ニッコリ)以上「Cocoonテーマ同梱のWebフォントを先読みさせて表示を高速化させる方法」でした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。