ページを選択

ストブロ

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

使えば使うほどH4n Pro

ここ数年電器屋Walkerの収録はZOOMのR24にお世話になってきました。 でもこれからはH4n Proになりそうです。 テストすればするほど「あれ? 好きかも!?」と思うことがいっぱい! これって恋?違います、用途の違いなんです!...

RSS feedが上手く表示されなかった理由

先日の投稿で「index.htmlをindex.phpに変更して各ワードプレスのポスト一覧を取得して表示できるようにした」 と書きましたが、そももそどうしてそんなことをしなければならなかったか。...

第16回「maildrop、mailfilterによるメール振り分け 完成版」

これまでも「レンサバ迷惑メール対策」 や 「迷惑メール対策 後編」 等でさくらインターネットを初め多くのレンタルサーバーのメールシステムで採用されているであろう「maildrop、mailfilter」によるメール振り分けについてご紹介してきましたが、今回はそ...

未知との遭遇

新しい物に対して「これはないわー」とか「もう○○ブランドは堕ちたな」と物知り顔で言う時がある。 私も含めて。 でも、使ってもいない物に対してどうしてこんな風に言えるのだろう? と最近思います。 「自分が必要としない物=駄目なプロダクト」ではないでしょ?...

第3回「無線LANルーターの調整」

第2回までで、以下の2点がクリア出来ました。   1)RT-S300SE ブリッジ化成功(ひかり電話端末として動作) 2)無線LANルーター PPPoEでの接続成功、ルーター機能も有効  ...

第2回「無線LANルーターをルーターとして使う」

第2回「無線LANルーターをルーターとして使う」   続いて行きましょう。 1)無線LANルーターをRT-S300SEのLANポートに接続する。 この時点でまだパソコンを接続しないで下さいね。電源は入れてもOKです。...

第1回「RT-S300SEをブリッジ化するには」

以前からフレッツ光ネクスト(Bフレッツから自動移行)で使用しています。 今回無線LANルーターをバッファローのWRZ-1750DHP2に買換えましたが、その際に宅内のLAN環境を見直そうと思いました。  ...

第14回「Craftbukkit 1.7.9、UUID、Twitch配信」

レンタルサーバーforビギナーズ 第14回 「Craftbukkit 1.7.9、UUID、Twitch配信」 久しぶりにクラフトブキットのお話。難航している1.7系等 久しぶりのCraftbukkitのお話。...

第13回「OGP設定、最近のサポセン」

レンタルサーバーforビギナーズ 第13回配信です。 前半は最近のサポートセンター利用体験談。 テキストチャットでのサポート対応が増えてきた昨今、とても便利だなぁというお話です。 後半は今回の本題。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト