ページを選択

ストブロ

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

さくらのレンサバをLet’s Encryptでhttps対応 その3

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その3 混在コンテンツの解消」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

さくらのレンサバをLet’s Encryptでhttps対応 その1

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その1 SSL証明書の申し込み」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

https化の実践

私用しているサーバーのhttps対応を先行させるべきか、社用で使用しているサーバーのhttps対応を先行させるべきか。 非常に悩みましたが、社用の方は構成がすっきりしているのでそちらの対応を先行させる事にしました。...

迷惑メールとの攻防

中々収録できないなぁ。 社内でも迷惑メールの研究を(勝手に)担当しているし、 迷惑メールの手口などには十分注意する様に心ぐうzがけているにも関わらず、先日地雷を踏んでしましました。...

https化への準備

今日から出張です。 自宅にいないので逆に出張先でできる作業は何かと考えました。 そこで、計画していたhttps化への準備を始めることに。 今日は手始めに同一サーバー内で動かしている2つのWordpressの整理。...

メルカリ、カウルを活用する。

backspacefmでメルカリの中澤さんという方がゲスト出演されていました。 ずいぶん昔の話です。 単純に中澤さんの印象が良かったので「じゃあ、メルカリ使ってみようかな」と思い立ち 大変不純なままにメルカリを使い始めました(笑)...

久し振りに更新が出来ている。

「忙しかったから」という訳でもないし「忙しくなくなったから」という訳でもないんだけど 久し振りにブログの更新が出来ています(笑) いま、https対応の為の準備をしています。 これまでWordpress管理画面は個別に共有SSL対応していましたが、...

光配線とPR-500MIとV6オプションと

おはようございます。 集合住宅に住んでいるのですが、これまで各戸へのネットワーク配線はVDSL方式でした。 これではフレッツ光契約でも100Mまでしか出せないんです。 そこで少しでも回線速度を稼ごうと申し込んだ「V6オプション」...

静的ページに外部のWordPressから記事を読み込む方法 解説

php7.1に対応し、mysqli(手続き型)の記述スタイルで 複数のWordpressから記事一覧を取得する為のphpです。 早速部分毎に解説していきます。 1)データベースへの接続 まずPHPの中でデータベースに接続する方法ですが、以下の部分です。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト