ページを選択

ストブロ

Coffee's Blog.

DIVI Builder で PageSpeed Insights を改善する

執筆者 | 2020年04月09日 | さくらのレンタルサーバー, ストブロ

Googleの「PageSpeed Insights」はウェブサイトの表示速度を評価して、改善する為の検査ツールですが、評価内容が多岐にわたり中々スコアが上げられない感じになります。
色々取り組みしているのを備忘録的に。

今回は@font-familyにfont-display:swap;が設定されていない場合に評価が低下する問題をDIVI Builderで対応する場合の「荒技」です(笑)

1.Wordpressのテーマエディター(cssやphpを直接編集出来る禁断の機能)でdivi テーマを表示。
2.style.cssを選択。
3.検索機能で「font-family」を探す。

@font-face{font-family:ETmodules;src:url(core/admin/fonts/modules.eot);src:url(core/admin/fonts/modules.eot?#iefix) format("embedded-opentype"),url(core/admin/fonts/modules.ttf) format("truetype"),url(core/admin/fonts/modules.woff) format("woff"),url(core/admin/fonts/modules.svg#ETmodules) format("svg");font-weight:400;font-style:normal}

上記の様な記載があるはずです。
このETmodulesが管理画面などで使用される?ものです。それにたった一文追加します。

@font-face{font-family:ETmodules;font-display: swap;src:url(core/admin/fonts/modules.eot);src:url(core/admin/fonts/modules.eot?#iefix) format("embedded-opentype"),url(core/admin/fonts/modules.ttf) format("truetype"),url(core/admin/fonts/modules.woff) format("woff"),url(core/admin/fonts/modules.svg#ETmodules) format("svg");font-weight:400;font-style:normal}

font-display:swap;を加えるだけです。
加え終わったら保存して下さい。
終了です。※くれぐれも自己責任で行ってください。

アップデートのタイミングでstyle.cssが上書きされたら、上記の対策もむこうになります。

googleフォント(noto sans jp)も、なんか、こう…改善させる。

DIVIビルダーの「統合」タグで「head」に追記する項目があります。
そこに以下の一文を追加。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

カスタムCSSの記入欄に以下を追加

body,h1,h2,h3,h4,h5,h6,input,textarea,select{
	font-family: 'Noto Sans JP', sans-serif;
}

これでGoogleフォント(今回はnoto sans jp)もswapに対応します。

第11回「SSDへの換装」

レンタルサーバーforビギナーズ 第11回「SSDへの換装」 HDDからSSDへシステムドライブを移設したお話を。 レンタルサーバーやVPSサービスの話から少し離れ、 今回はパソコンのお話。...

SSDへの換装の感想

これまでHDD1台を2つのパーテーションに分けて使っていました。 500GBのハードディスクの内200GBをCドライブ(システム)300GBをDドライブ(データ用)に。...

第10回「レンサバ、迷惑メール対策」

※第16回「maildrop、mailfilterによるメール振り分け 完成版」で、もう一度詳しく説明しています。そちらもご覧下さい。 レンタルサーバーforビギナーズ 第10回「レンサバ、迷惑メール対策」 MailDropを利用した迷惑メール対策について...

Gメールご利用の皆様へ

Gメールご利用の皆様へ 現在当アドレス(~@inst-web.com)から送信したメールが Gメールにて『迷惑メール』に判定され、 迷惑メールフォルダーへ入れられてしまう不具合が発生しています。 お問い合わせフォームをご利用頂いたりした際に、...

電器屋Walkerにアクセス時のエラーについて

平素より弊局INST-webをご愛顧頂きまして誠に有り難うございます。 ここ2ヶ月程、電器屋Walkerの配信時に予期せぬ不具合が発生しておりましたので ご報告申し上げます。 ※この問題は既に解決済みです。 不具合内容:...

マインクラフト設置マニュアル第6回

さくらのVPS、マインクラフト設置マニュアル第6回 レンタルサーバーforビギナーズ 第06回「CraftBukkit導入・PermissionsEX」 今回は ・CraftBukkit導入 ・必須(おすすめ)プラグイン  「PermissionsEX」...

INSTマイクラサーバー ひっそり再オープン

何が良かったのが、何が悪かったのか。 何がいけなかったのかよく分からないけど、 とにかくモディファイワールドが上手く動いている様なのでINSTマイクラサーバーの ホワイトリスト制限を解除しています。...

0コメント


電器屋Walkerの過去配信のBGMで利用させて頂いております。

ポッドキャスト品質向上、整音テクニック 解説Live

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

ツキイチ - 隣のポッドキャスト

まとめファンサイト