ページを選択

ストブロ

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

デザインの崩れが発生した場合。

ご機嫌いかがですか?コーヒーです。 現在制作進行中のINSTウェブですが、 「デザインの崩れ」が発生する場合があります。 現象: 1)左側、メニューのバナーが枠からはみ出す。 2)右側「ポッドフィード」が横並びに表示されない。 などです。...

シン、コメントテストありがとー(^o^)丿

このwordpress、結構優秀です! コメントを書いた場合、始めの一回目はからなず運営者(この場合コーヒー)の承認が必要になります。 でも、一回承認すると、次回からは承認をスルーします。 なので、変な書き込みをかなり抑制できるって仕組み。...

テストで記入!上手くいくかな??

INST・インストのCoffeeです。 インストウェブにこの度wordpressを導入してみてみました! どうでしょう、ちゃんと動いているでしょうか? ちゃーんと、ひとつひとつ言われた事を守って作業をすれば、苦もなく導入する事ができました!...

Twitterはじめてました

PodcastとTwitterで情報発信にチャレンジしています Twitterアカウントは http://twitter.com/_Taiji_ へどうぞー!!...

買っちゃいました!PS3!

はい、今日がなんの日か知っている人? はーい、PS3の発売日ですw ってことですね(^^ゞ なんか、売り切れ続出みたいで「へ~、やっぱい注目度高いんだ!」と なんとなく、ウェブをみていましたが・・・ 「じゃあ、見に行ってみるか」ってな具合で...

Snow Leopardを手に入れた!

今日は携帯電話から更新 渋谷に居たのでAppleStoreに寄って 今日発売のMac OS X 10.6 Snow Leopardを 買ってきました 新OSが3300円って本当に安いですね 渋谷店にはSnow Leopard目当てのお客さんでいっぱいで...

お楽しみ頂いてますか?

みなさんこんにちは! パーソナリティーのコーヒーです♪ ポッドキャストの「値切り」の回はお楽しみ頂けましたか? 皆さんがお持ちの「値切りテクニック」等あれば教えてください!! ポッドキャストの中でご紹介させて頂きます(^o^)丿...

WD 外付けHDD(1TB)を購入

Xactiで動画データを扱う事も出てきて それを全部MacBookProの内蔵HDDに溜め込むのは 結構キツいって事で 外付けHDDを買いに秋葉原へ MyBook Essential Edition 1TBを購入してきました...

SANYO Xacti DMX-CA9を手に入れた!

SANYOのXacti(防水HDビデオカメラ)をひょんな事から手に入れました ザクティの赤いヤツを鹵獲! というのも、大学の友達と久しぶりに遊んだ時に 友人「こないだ、くじ引いたら当たったけど、Taijiこういうの好きだろ?...

評価を頂きました。

ご機嫌いかがですか? 「ごきげんいかがですか」があまり上手く言えない カミカミのコーヒーです(笑) 電器屋ウォーカーは「iTunes」にも公開しています。 そこで評価を頂きましたのでご紹介します。 「音のチェックをして下さい。」...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト