ページを選択

ストブロ

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

RSSの表示のご注意

今日は昨日うまく行かなかったRSSの表示方法を切り替えました。 そこで、ご注意ですが・・・ 現在「電器屋ウォーカー」と「インスト教官ブログ」の項目に表示中のRSSは 実はテストブログのものです。...

Taijiとデザイン打ち合わせ

今日またTaiji君とデザインについての打ち合わせが出来ました。 これまではバナーとか部品単位の提供をしてもらってましたが、ようやくデザイン面についても打ち合わせるチャンスが持ててほっと一安心・・・ と、思っていたら。 かなり大幅な修正が入りましたww...

今日は全体のデザインを、そして

今日は全体的なデザインを修正しました。 ヘッダーバナー フッター直前とフッターの切り離し(フッターとのバランスは未調整w) ぺーじの両サイドと下辺に影処理 それから、Google Analyticsを導入しました。 まだページが少ないので導入も楽チンw...

推奨で大事なのはスタイルw

今日の編集報告 今日は「INST-webについて」を大幅に編集しました。 推奨環境も記載したのでご覧下さい! あとは、あちこち細かい修正でした。...

今日の更新、アバター祭り

今日はウェブを編集しないようにとおもっていましたが・・・・ しちゃいましたw 今日はメニューにアバターを追加して、名前の配置などを修正しました! どうでしょうか?...

今日の更新

本日もいくつか編集をすすめました。 1)活動の歴史 カンマが表示の不具合を招いていたので「、」に置き換えました。 2)INST-webについて 内容を入力しました。現状では完成版。 3)メニュー メールアイコンを付加。...

アクセスカウンタ実装

トップの左下にアクセスカウンタを新設しました。 1日何百回見てもカウントは1回です。(チッ) まぁ、そういう風に設定したんですがw あと、付属のページの編集も開始ししました!...

後でシンのアドレス教えてw

このwordpressは「投稿者」や「編集者」といった権限をユーザーに割り振る事ができます。 例えば、INSTメンバーを全員「寄稿者」にしてしまえば、全員が自由に記事を投稿する事ができます。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト