サイトアップデートしました Part2
一ヶ月前のアップデートでは、サイトジェネレーターのバージョンアップ、カテゴリーの新設など、サイトのシステムを中心に改善を施しました。
サイトのCommit履歴見れば一応振り返りは出来ますが、とりあえず見やすい形で置いとこうということで書いてます。
今回は、
・Aboutページを修正、追記
・使用画像を修正、圧縮
・サイトの一部最適化
・Googleアナリティクス導入
・OGPを改善
が表面的な変更で、それらに加えて
・ホスティングサービスを移行
・ドメイン移管
・Hexoテーマの管理見直し
を行いました。
サイトパフォーマンス改善への道
サイトの収益化を目標に色々と準備をしていたのですが、Webサイトのパフォーマンスを測るPageSpeed Insightsを使ったところ凄まじい赤点を叩き出したので、若干の軽量化を施しました。(最終的にDesktop 66→93)
サイトに使用している画像は、保存が簡単なのもあって結構pngで置いてたんですよね。一枚の容量は大した事ないんですけど、流石に情報が増えるに連れてチリツモで爆発しちゃってました。
それで今回は全てのpngを圧縮した上でjpgに変換したり、画像の遅延読み込みを加えました。
ローカルの作業以外にも、Cloudflare Fontsというサービスを利用して外部とのデータのやり取りを削減したりして、なんとか90点を超えられました。
自分が点数を上げるためにやったことは
・使用している画像をAdcanded Batch Image Converter(外部リンク)にぶち込んで一括jpg変換(品質は80%)
・Hexoのconfigにlazyload: trueを追加して画像の遅延読み込みを有効化
・Cloudflare Fontsを利用
・CDNのTTLを少し伸ばす
です。もう少しできそうなのでPluginとか色々漁ってみますが、とりあえず一区切りつきました。
記事ごとのOGPを実装
そして、今回は長い間課題だったOGP(Open Graph Protocol)問題も解決しました。
X(Twitter)の動作がいまいちぱっとしないのですが、とりあえず記事ごとにOGP画像が設定できるようになりました。
自分はもともとプログラミングやIT分野を通ってきたわけではなかったので、Hexoの内部まで弄り始めるとかなり難航しました。
かつて、エンジニアの友人が触っていた対話型生成AIのClaudeが結構優秀そうだったので、色々相談しながらトライアンドエラーを繰り返していました。
これがHexoテーマの管理を見直した話につながるのですが、それはまた今後。
最後に
段々サイトが様になってきて満足です。
閲覧頂きありがとうございました。
Other Articles
