TECMAH BLOG V2
はじめに
blogに記事を書いていて、blogをもっと快適に使いたいなという欲が出てきました。
PageSpeed Insightsで測ってみたら
なんとパフォーマンスがオレンジや赤ばかりになっています。
すっごい気持ち悪い
これを一つづつ改善していこうと思います。
画像をwebpに変換する
今まで画像をblogにあげてきましたが、高速化された最適な形式を考えてはいませんでした。 せいぜいが画像をURLで挿入することを考える程度です。
webpへの変換は以下のサイトを使います
スクリーンショットを自動で変換して自動でCDNにアップロードして管理できればいいな という構想はありますが、それをやると時間がかかってしまうので別のタイミングで行おうと思います。
変換をかける画像は以下のような画像です。
bannerやfaviconをpngで表示されているので修正します。
webpに変換した結果
Webpに変換した結果パフォーマンスの値が1改善しました。 わぁ・・・・たった1かぁ
というかCDNで表示している画像がレンダリング遅いっておこられてますね。 リポジトリ内であまり画像は管理したくなかったですが faviconとbannerはwebpに変換して例外にします。
全部CDN経由で画像管理しようと思ってたけどそんなに遅いのか。
よく扱う画像のCDN経由をやめた結果
かなり改善されました。 次はどう100に近づけるかというところですが、今回はここまでにしておきます。
おまけ