ストブロ

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

Webalizerを再集計する

音声データを配信しているVPSのサーバーをやむなくSSL化した。すると、そこからWebalaizer(アクスセス解析機能)に正しくログが取れていない状態だった。気がついたのは約2ヶ月後(笑)普段あまり見ていないので。...

さくらのVPSのSSL証明を自動更新

さくらのVPSでポッドキャストの配信を行っているが、これまではSSLを取得せずに放置してきた。そしたらGoogle先生が怒って、ウェブ上での再生が出来なくなりました(笑)と言うことでLet's Encyptを使用してSSL証明を取得しまし。...

「返信先」を指定していない場合の挙動

さくらのレンタルサーバーのメーリングリストでの挙動の問題と解決策です。前回に引き続きメーリングリストのシステム「fml」絡みの記事になります。...

さくらのMLで送信元への配信をスキップ

さくらのレンタルサーバーを利用してグループ内にメールを配信する「メーリングリスト」を使用している場合、一つ困ることがあります。...

IPv6環境での外部アクセス方法 その2

「IPv6 (IPoE MAP-E)環境でNASに外部接続出来る様にする環境設定」 前回に引き続きIPv6環境にてSynologyのNAS(今回はDS218J)にアクセスする手順を確認していきます。 1)DS218Jを家庭内LAN環境に接続する。...

IPv6環境での外部アクセス方法 その1 Synology DS218J

電器屋Walker Synology部略してSyno部(シノブ)です。 現在2ベイモデルのNAS DS218Jを使用していますが、半年ほど実用して色々分かってきたことを備忘録としてまとめていきます。 みなさんのNASライフのお役に立てれば幸いです。...

Synology部 略してSyno部 始めます!

電器屋Walkerのコーヒーは外部ストレージそSynologyのDS218Jに頼っています。 ここ数ヶ月実用してきて色々と分かってきたこと、興味が深まったこと、これから学びたいことが出てきました。...

Windows10とBSoDとexfat

突如Windows10でBSoDが表示された。SDカードを挿入したタイミング。 SDカードはOM-D E-M1 MarkⅡで直前までテスト撮影等をしていたもの。OM-D E-M1 MarkⅡではきちんと認識されている。...

0コメント


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