ページを選択

ストブロ

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

電器屋Walker10周年記念グッズ

2009年の配信スタート以来、電器屋Walkerは10周年を迎えました。長きにわたるご愛顧とご支援誠にありがとうございます。電器屋Walkerでは10周年記念バッジ&ステッカーを作成しました。こちらはCAMPFIREのパトロンさん限定セット「電器屋Walker...

Velopでネットワークカメラ等の2.4Ghz接続機器を接続する方法

Velopは2.4Ghz及び5Ghzを電波強度などを自立的に判断しながら切り替えて使える非常に便利なWi-Fiルーターです。特に「メッシュWi-Fi」と呼ばれ、同じSSIDを複数の無線アクセスポイントが共用し、複数の無線アクセスポイント(ノード)が一つの編み目...

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Ⅱではきちんと認識されている。...

F1-LP、F1-SPキャリングケースDIY

OM-D E-M1 MarkⅡでの動画撮影の際にZOOMのF1シリーズがかなり良い感じだという事はYoutubeでもレビューしたとおりです。 マイクカプセルとか色々あるので、キャリングケースを自作しました。 使用したのは「メイホウ」の「アタッシェ B5」...

さくらのレンサバをLet’s Encryptでhttps対応 その6

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その6 リダイレクト(正規化)の設定。」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

さくらのレンサバをLet’s Encryptでhttps対応 その5

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その5 SSL証明書をwwwありとwwwなしに設定する。」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト