ページを選択

ストブロ

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マイクラサーバー一時入場制限中。

モディファイワールド等のプラグインによるプレーヤー毎の権限管理が上手く行っていないようなので、 現在INSTのマイクラサーバーでは、一時的にメンバー以外の入場をお断りしております。 確認が出来次第再度オープンにしますので、しばらくお待ち下さい(^^ゞ...

マインクラフト設置マニュアル第5回

さくらのVPS、マインクラフト設置マニュアル第5回 今回は WinSCPが苦手な「大量のファイルやディレクトリ」のコピーや削除について コマンドラインからの操作で簡単に終了させる方法をご説明しています。...

Adobe Premiere Pro と 謎のフリーズ

おはようございますの。 ハリーポッターの副題のようですが、なんて事はない週末振り回されたお話です。 アドビの販売している動画編集ソフト「Premiere Pro」 それを自宅のパソコンにインストールした所から長い2日間は始まりました。...

マインクラフト設置マニュアル第4回

さくらのVPS、マインクラフト設置マニュアル第4回 今回は 「Java、Screenの導入」、「管理用スクリプトの導入」、「動作確認」、 「サーバープロパティの確認」等についてのご説明となります。...

ブロックリストの怪

会社で利用しているメールサーバーで突如「ある特定のメールアドレスにのみ」「メールが送れない」という事象が現れました。 メールが送れないと一言に言っても様々な状況があると思います。 今回の場合はNDR(Non Delivery Receipt または Non...

マインクラフト設置マニュアル第3回

さくらのVPS、マインクラフト設置マニュアル第3回 今回は 「VPSの初期設定」について、 「SUDOの設定」「ポート番号、文字コードの変更」「iptablesの設定」「メールの転送」等についての ご説明となります。...

返品、返品!!

激怒りますのコヒ蔵です。 実は、私Podcast番組なるものを収録・編集・配信しておりまして。 編集中はずーっと右手人差し指を酷使するのです。 もう、人差し指取れるんじゃないか?って位痛くなるのですw...

マニュアルDVD

ご機嫌如何ですか?コヒ蔵です。 サッカー日本代表、ワールドカップ出場を決めてくれましたね! 残念ながら勝っての出場決定ではありませんでしたが、また楽しみが増えます。...

あなたからの反響、確かに届いて居ます!

おはようございますの。 コヒ蔵です。 電器屋Walker第60回「デジタルオーディオプレーヤー」をご視聴頂きまして誠に有り難うございます。 今回はツイッターのDMやメンション、メール等での反響を結構頂いておりまして、とても嬉しいです(^^ゞ...

名刺作成

おはようございますの。 コヒ蔵です(σ・`ω・)σ 週末は個人用(私人用?)名刺のデザインなどをしておりました。 ベースはタイジ君にデザインを作ってもらったものだけど、 それを全部自分なりに調整して再構築。 無事に発注をかけましたのです。...

ヘッドホンアンプ HUD-mx2

ヘッドホンアンプなるものを購入してみました。 Audinstというメーカーの DAC付USBヘッドホンアンプ HUD-mx2 パソコンで音楽管理する様になり久しいですが、おかげでオーディオやコンポという所からは距離があいてしまった昨今。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト