ページを選択

ストブロ

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

イーモバイルは乙なもの?

ご機嫌いかがですか? 現在2月2日12時43分。 私は上野駅にあるスタバで昼休みながらカフェラテを楽しんでいます。 ツイッターでお騒がせし、多くの方にリツイート等の支援を頂きました、 モバイルルーター「PHS300」の里親探しですが、...

争点は犯人の責任能力

こんばんは 22時13分になりました。 ニュースをお伝えします。 2月1日(月) ○○県在住のコーヒー容疑者(仮名・32歳)が インターネットの利用したオンラインショッピングを利用して ノートパソコンなどの携帯電子機器を無線でインターネットなどに...

モバイルPCのケース自作(終)

さぁ! 完成しました!! 今回は早かった♪ まぁ、作っていたものが「ただのケース=保護用袋」ですからねw 外袋の「角」を処理中。 こうなります。 これは側面の補強中。 内袋と外袋のあわせを確認中。 一気に縫い合わせて完成! 完成写真↓...

モバイルPCのケース自作(3)

だんだん形が見えてきましたよ~(^o^)丿 形や縫い方を確認する為に、マチ針を打ったり しつけをしたり、折り曲げたり・・・ いろいろしながら次のステップを検討します。 まるでフランケンシュタインか何か!?w この手間を惜しむと失敗したりするので...

[ ストブロ ] も見てね(^^ゞ

ご機嫌いかがですか? ようやく喉の調子に回復の兆しが見えてきたコーヒーです! ちなみに、「お年玉付き年賀はがき」は全敗でした orz さて、このところINSTのどうでもいいブログ [ ストブロ ] にて...

モバイルPCのケース自作(2)

さて、試作第一号を経て・・・・ 現在本製作をスタートしております! 毎日コツコツと、作業してますよ♪ 縫い方の考え方を変えて、まずは寸法あわせから。 出し入れの問題もなさそうです。 でも、縫ってみないと・・・分からないんだなw...

モバイルPCのケース自作(1)

今後「電器屋Walker」で配信予定の「モバイルPCの選び方」。 それに先んじて、現在コーヒーはモバイルPC用のケース自作を行っていますw。 試作を行った様子をご覧下さい。 外側はいつもの帆布を使い、内側には 別の素材を使用。...

最終兵器登場

依然として喉の調子が悪いコーヒーです。 今日はこれまでよりも悪い感じ・・・ 好転反応だと信じたいです さて、いい加減治したい訳です。 そこで西洋医学と東洋医学の夢のコラボレーションが実現しました。 西洋医学代表として「ベンザブロック 咳止め錠」...

あけましておめでとうございます。

みなさんご機嫌いかがですか? 私は体調不良のコーヒーです orz 今日、明日が仕事初めという方が多いのではないでしょうか? 今年もINST一同がんばって行きます! っていうか、まずは体調なんとかしなきゃ・・・...

2009年も一年、ありがとうございました。

大晦日ですね。 ご機嫌いかがですか? コーヒーです。 今年は「電器屋Walker」「インスト教官ラジオ」を ご愛顧頂きまして誠に有り難うございました。 そして、新しくスタートしました「INST-web」を ご覧頂きまして大変嬉しく思います。...

本日仕事納めです。

2010年到来まで、カウントダウンですね! 世間さまは帰省ラッシュとか入村ラッシュとか いろいろなラッシュが展開されているようですが・・・ わたくしコーヒーは本日が仕事納め。 一体何をしろとw のんびり大掃除の予定です。 INSTには仕事納めがありません。...

もう、いくつ寝ると?

ご機嫌いかがですか? 年末年始もコーヒーですw 先日いつも行くコーヒー豆屋さんで、ちょっと高め(100gで450円位ですけど)を買いました。 焙煎したてだって事だったので、数日放置して、昨日から飲み始めました♪ 年末年始はこのコーヒーで過ごします(^-^)...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト