ページを選択

ストブロ

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

MagEZ Slider +Power Dongle MagSafe

iPhone14に機種変をしていよいよMagSafe環境が充実してきましたが、次に気になるのは充電環境。そこでケースや車載ホルダと同様にPitakaのエコシステムの中で充電環境も整えてみました。 MagEZ Slider...

アプリへのアクセスを解析して利用状況を把握したい!

アプリを作ったけど、「果たして本当に使ってもらっているの?」という不安がつきまとう(笑) 逆に言えばアクセスが少ないアプリは、何か改善が必要なのかも…そのアプリの利用状況をログとして保存し、アクセス解析に使用したい!と思いました。そしたら、全然そういうのはない...

本当にあったデータ削除の話

 本当にあったデータ削除の話。一体なんの事なのか? 最初にデカデカと貼った画像、これはWordpressのプラグインでBroken Link...

Mackie Stealth Bar レビュー

 またしてもMackieさんのご厚意で「国内最速レビュー」の機会をいただきました。 今回は日本のユーザーで初めて!という事ではないと思いますが、露出するのは国内最速かも知れない。 今回、使って見ることが出来たのはMackieが初めて投入してきた「サウンドバー」...

ボイチャでマルチトラック収録する構成

ひまちゃんにZOOM H6を貸し出してますが、「ボイチャでゲストとお話しをしてマルチトラックで収録したい」というご相談。ミキサーがあればなんてこと無いのですが、レコーダー単体だと意外に難しい。 現在のひまちゃんの構成...

VPSを移転してん

ポッドキャスト番組電器屋Walkerの配信は2つのサーバーで構成されています。 まずウェブページ、つまりこのINST-webのブログや記事を使ってもらうために「さくらのレンタルサーバー」を契約しています。...

やまごや by ひまちゃん

小屋番のひまちゃんが登山のこと、アウトドアのこと、道具のことについて語るPodcast番組が!はじまりました! その名も「やまごや」 ひまちゃんの行動力♪...

OBSとDiscordを使ったライブ配信構成

YAMAHAのAG03はオーディオインターフェースとして使えるミキサーで、Youtube Liveを初め配信界隈では相当の普及をして居るデバイスです。...

AG03とOBSを使った実用的な1人配信構成

YAMAHAのAG03はオーディオインターフェースとして使えるミキサーで、Youtube Liveを初め配信界隈では相当の普及をして居るデバイスです。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト