ストブロ

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

VPSを移転してん

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

やまごや by ひまちゃん

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

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

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

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

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

Youtube LiveをPodcastに再配信する

これまただうさん向けの内容です。一定の需要があると思うので記事化しました。是非参考にしてみてください。 https://youtu.be/GcgdUdE0ewo Youtube Liveで「COHIRAJI」というラジオ配信をしています。...

COHIRAJIのOBS設定のご紹介

基本的にはだうさん個人にお知らせする為だけに記事を書いてます(笑)もったいないので同じような事をしたいと思っている方のお役に立てればと思って記事にする事にしました。 ここで紹介するのはOBSの設定です。...

fmlで自動応答を実現する その2

前回までは「Recieved」という固定したファイルの中身で自動応答する事が出来ました。文中に件名にも付与した「受付番号」を挿入したい…という事でまたしてもヤンマさんにヒントを貰いながら、トライ&エラー 無事に完成しました!...

fmlで自動応答を実現する

さくらのレンタルサーバーでメーリングリストを使用していますが、fmlというものが使用されています。 今回は「メールを送ってくれたら、送信者に受付番号を自動応答したい」という希望で色々調べたり、教えて貰ったりしました。...

0コメント


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