ページを選択

ストブロ

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に対応します。

僕とiPhone4と左側と

みなさん、左側の調子は如何ですか? 桂 コヒ蔵です(^o^)丿~♪ 私の左側は最悪です。 ここ数日、何かが浮遊しているらしく、私の鼻炎が過剰反応中 orz しかも左の鼻と左の目だけがグズグズしますw なぜ、左側? なぜ、左だけ?...

帰りましたの。

みなさん、ご機嫌如何ですか? ここんとこご無沙汰、桂 コヒ蔵です(^o^)丿~♪ 先週一週間は東京出張&iPadウィークでまったく書き込み、ツイッター等が手に付かない状況でしたw...

インスト戦隊 メンドクサインジャー!

デーデレッデー デデン! 洗濯物は干しっぱなし、っていうか裏返しでもいいや。 メンドクレッド! 食事は基本スプーンで、オートミール上等。 メンドクブルー! 新聞も宗教も全部受け付けます、断るのがウザイ。 メンドクビリジアン!...

人類の進化

ご機嫌如何ですか? 桂 コヒ蔵です(^o^)丿~♪ 本日出勤中にとても凄いものを見ました。見たんです。 鮮やかなブルーの軽自動車を駆り、私の前方を走る女性が・・・ アイメイクって言うんですか? アイシャドウとかアイラインとか、お化粧をしてるんです。...

Buenos días

まがった~事が だいきらい~♪ かーつらー コヒ蔵です(^o^)丿~♪ 一発目からパクリ!?Σ(゚д゚;) はい、そういう人生ですw ハーフメキシカンの子がスペイン語を教えてくれたので早速使ってみる。 Buenos días! ブエノス・ディアス!...

小さいという進化、大きいという進化

今日会社の人が、「お? iPadの小さくなった奴持ってるね!」と。 そう、私のiPod Touchですよ、それはw でも、これで気がついた事があったのでなんとなくまとめてみます。 これまで、技術の進化=小型化と言っても過言ではない程に...

今朝は・・・

タケチヨさんのUST見てますw iPad発売当日の映像ね

緊張の発売日前夜、いっぽうその頃

おはようございます(^o^)丿 月・火・水と一生懸命編集しました! 合計5時間程度、まだまだ編集作業の効率があがりません(=_=) ちなみに、収録した長さは大体80分、これを60分に。 20分を削るのに4時間程度掛かるという事ですねww プロは凄い。実感。...

シュン・ミン、アカツキを憶えず。

コヒ蔵「暁」 シュン・ミン「アカツチ」 コヒ蔵「・・・」 シュン・ミン「・・・」 コヒ蔵「暁」 シュン・ミン「アカツチ」 コヒ蔵「あ」 シュン・ミン「ア」 コヒ蔵「か」 シュン・ミン「カ」 コヒ蔵「つ」 シュン・ミン「ツ」 コヒ蔵「き」 シュン・ミン「キ」...

AirMacと63桁と私

おはようございます! 「メガネかえよう」と思ってメガネを換え忘れ、 「鼻炎の薬飲もう」と思って鼻炎の薬を飲み忘れ、 車に乗って「・・・あ」と。 4コマ漫画の様な毎日でお馴染み、桂 コヒ蔵です(^o^)丿~♪...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト