ページを選択

ストブロ

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

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というものが使用されています。 今回は「メールを送ってくれたら、送信者に受付番号を自動応答したい」という希望で色々調べたり、教えて貰ったりしました。...

Webalizerを再集計する

音声データを配信しているVPSのサーバーをやむなくSSL化した。すると、そこからWebalaizer(アクスセス解析機能)に正しくログが取れていない状態だった。気がついたのは約2ヶ月後(笑)普段あまり見ていないので。...

さくらのVPSのSSL証明を自動更新

さくらのVPSでポッドキャストの配信を行っているが、これまではSSLを取得せずに放置してきた。そしたらGoogle先生が怒って、ウェブ上での再生が出来なくなりました(笑)と言うことでLet's Encyptを使用してSSL証明を取得しまし。...

「返信先」を指定していない場合の挙動

さくらのレンタルサーバーのメーリングリストでの挙動の問題と解決策です。前回に引き続きメーリングリストのシステム「fml」絡みの記事になります。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト